Custom chart line colors (#40)

* Fix stuck panel options

When you had a panel still open and wanted to view a different
the panel would receive focus but the panel options it would receive
would still be the original options.

* Use vscode chart/theme colors

* Update fiberplane-charts dependency

* Improve SingleChart styling

And refactor syntax highlighting component out from FunctionChart

* Fix additional colors

* Move colors to chart/utils

* Tweak title

* Add called by queries

* Improve indenting slightly

* Use main branch for fiberplane-charts

* Update changelog

* Prepare for release 0.3.0

Author: flenter

CHANGELOG.md

@@ -2,8 +2,11 @@
 
 ## [Unreleased]
 
+# 0.3.0
 - [chore] Upgrade several dependencies
 - Update panel to support showing multiple graphs
+- Update styling for single graph charts
+- Use more of the vscode theme colors for graphs
 - [chore] We now use Yarn again instead of NPM. This is necessary to pull in
   `fiberplane-charts` directly from a workspace repository. The problem with
   packaging has been solved with a Yarn plugin.

package.json

@@ -6,7 +6,7 @@
   "displayName": "Autometrics",
   "license": "MIT",
   "description": "Show enhanced autometrics information from your code",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/autometrics-dev/vscode-autometrics"

src/chartPanel.ts

@@ -4,7 +4,7 @@ import { formatProviderError } from "./providerRuntime/errors";
 import type { MessageFromWebview, MessageToWebview } from "./charts";
 import { OPEN_PANEL_COMMAND } from "./constants";
 import type { Prometheus } from "./prometheus";
-import { getNonce } from "./utils";
+import { getNonce, getTitle } from "./utils";
 
 /**
  * Options for the kind of chart to display.
@@ -157,16 +157,3 @@ function getHtmlForWebview(
     </body>
     </html>`;
 }
-
-export function getTitle(options: PanelOptions) {
-  switch (options.type) {
-    case "called_by":
-      return `Called by ${options.functionName}`;
-    case "function":
-      return options.functionName;
-    case "metric":
-      return options.metricName;
-    case "function_graphs":
-      return options.functionName;
-  }
-}

src/charts/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,10 @@
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { styles } from "./prismStyles";
+
+export function CodeBlock({ query }: { query: string }) {
+  return (
+    <SyntaxHighlighter language="promql" style={styles}>
+      {query}
+    </SyntaxHighlighter>
+  );
+}

src/charts/components/CodeBlock/index.ts

@@ -0,0 +1 @@
+export * from "./CodeBlock";

src/charts/components/FunctionCharts/prismStyles.ts renamed to src/charts/components/CodeBlock/prismStyles.ts

@@ -8,8 +8,8 @@ import {
   Timeseries,
 } from "fiberplane-charts";
 import styled from "styled-components";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { styles } from "./prismStyles";
+import { CodeBlock } from "../CodeBlock";
+import { colors } from "../../utils";
 
 type Props = {
   query: string;
@@ -51,11 +51,10 @@ export function FunctionChart(props: Props) {
           footerShown={false}
           gridBordersShown={false}
           gridDashArray="2"
+          colors={colors}
         />
       </div>
-      <SyntaxHighlighter language="promql" style={styles}>
-        {query}
-      </SyntaxHighlighter>
+      <CodeBlock query={query} />
     </>
   );
 }

src/charts/components/FunctionCharts/FunctionChart.tsx

@@ -5,6 +5,8 @@ import {
   generateErrorRatioQuery,
   generateLatencyQuery,
   generateRequestRateQuery,
+  getCalledByErrorRatio,
+  getCalledByRequestRate,
 } from "../../../queries";
 
 type Props = TimeRangeProps & {
@@ -19,6 +21,9 @@ export function FunctionCharts(props: Props) {
   const errorRatioQuery = generateErrorRatioQuery(functionName, moduleName);
   const latencyQuery = generateLatencyQuery(functionName, moduleName);
 
+  const calledByRequestQuery = getCalledByRequestRate(functionName);
+  const calledByErrorRatioQuery = getCalledByErrorRatio(functionName);
+
   return (
     <div>
       <Title>
@@ -54,6 +59,29 @@ export function FunctionCharts(props: Props) {
           />
         </ChartContainer>
       </Container>
+      <hr />
+      <h5>"Called by" metrics</h5>
+      <hr />
+      <Container>
+        <ChartContainer>
+          <FunctionChart
+            title="Request Rate"
+            query={calledByRequestQuery}
+            timeRange={timeRange}
+            setTimeRange={setTimeRange}
+            key="request_rate"
+          />
+        </ChartContainer>
+        <ChartContainer>
+          <FunctionChart
+            title="Error Ratio"
+            query={calledByErrorRatioQuery}
+            timeRange={timeRange}
+            setTimeRange={setTimeRange}
+            key="error_ratio"
+          />
+        </ChartContainer>
+      </Container>
     </div>
   );
 }

src/charts/components/FunctionCharts/FunctionCharts.tsx

@@ -14,6 +14,9 @@ import {
 } from "../../../queries";
 import { useRequestData } from "../../hooks/useRequestData";
 import { TimeRangeProps } from "../types";
+import { getTitle } from "../../../utils";
+import { CodeBlock } from "../CodeBlock";
+import { colors } from "../../utils";
 
 type Props = {
   options: SingleChartOptions;
@@ -41,9 +44,11 @@ export function SingleChart(props: Props) {
     });
   }, [options, timeRange]);
 
+  const title = `${options.type} chart for ${getTitle(options)}`;
+
   return (
     <>
-      <h1>{query}</h1>
+      <h1>{title}</h1>
       <MetricsChart
         graphType={graphType}
         stackingType={stackingType}
@@ -52,7 +57,14 @@ export function SingleChart(props: Props) {
         onChangeGraphType={setGraphType}
         onChangeStackingType={setStackingType}
         onChangeTimeRange={setTimeRange}
+        chartControlsShown={false}
+        gridColumnsShown={false}
+        footerShown={false}
+        gridBordersShown={false}
+        gridDashArray="2"
+        colors={colors}
       />
+      <CodeBlock query={query || ""} />
     </>
   );
 }

src/charts/components/SingleChart/SingleChart.tsx

@@ -6,3 +6,12 @@ export function getCurrentTimeRange(): TimeRange {
   oneHourAgo.setHours(oneHourAgo.getHours() - 1);
   return { from: oneHourAgo.toISOString(), to: now.toISOString() };
 }
+
+export const colors = [
+  "var(--vscode-charts-red)",
+  "var(--vscode-charts-blue)",
+  "var(--vscode-charts-yellow)",
+  "var(--vscode-charts-orange)",
+  "var(--vscode-charts-green)",
+  "var(--vscode-charts-purple)",
+];

src/charts/utils.ts

@@ -43,9 +43,16 @@ export function getSumQuery(
   metricName: string,
   labels: Record<string, string> = {},
 ) {
-  return `sum by (function, module) (rate(${metricName}{${Object.entries(labels)
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(",")}}[5m]))`;
+  return `sum by (function, module) (
+    rate(
+      ${metricName}{${Object.entries(labels)
+    .map(
+      ([key, value]) => `        ${key}="${value}"
+`,
+    )
+    .join(",")}
+  }[5m])
+)`;
 }
 
 export function generateRequestRateQuery(

src/queries.ts

@@ -0,0 +1,14 @@
+import type { PanelOptions } from "../chartPanel";
+
+export function getTitle(options: PanelOptions) {
+  switch (options.type) {
+    case "called_by":
+      return `Called by ${options.functionName}`;
+    case "function":
+      return options.functionName;
+    case "metric":
+      return options.metricName;
+    case "function_graphs":
+      return options.functionName;
+  }
+}

src/utils/getTitle.ts

@@ -2,3 +2,4 @@ export * from "./timeRanges";
 export * from "./uniq";
 export * from "./uniqBy";
 export * from "./getNonce";
+export * from "./getTitle";

src/utils/index.ts

@@ -1931,7 +1931,7 @@ __metadata:
 
 "fiberplane-charts@git+https://[email protected]/fiberplane/fiberplane.git#workspace=fiberplane-charts":
   version: 0.1.0
-  resolution: "fiberplane-charts@https://[email protected]/fiberplane/fiberplane.git#workspace=fiberplane-charts&commit=06b1031f60c9067ef76c3f0be44bfdbc027b847d"
+  resolution: "fiberplane-charts@https://[email protected]/fiberplane/fiberplane.git#workspace=fiberplane-charts&commit=c84d3ac1fa6509bc8451f0681504fc0b4929f927"
   dependencies:
     "@types/d3-scale": ^4.0.3
     "@visx/axis": ^3.1.0
@@ -1950,7 +1950,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     styled-components: ^5.3.0
-  checksum: 1fa7d4042ef374ab939b0a4ae7862dc0fe2c7b8f27014f0fc9efc20588ce65ec5c02fbc4afd74a6b298176e04348495d5448d34a57788c6762a076c4440d295b
+  checksum: 50b9bcf488a67b1b9b9125a4c1a17b7a2e68ab414e2d84e7cf13be2cf6c0d1fefebf7c2484ee069b3c996df5cd415d56adcedab241ab7be648176dd4e37aae6f
   languageName: node
   linkType: hard
 
@@ -2001,8 +2001,8 @@ __metadata:
   linkType: hard
 
 "framer-motion@npm:^10.12.4":
-  version: 10.12.10
-  resolution: "framer-motion@npm:10.12.10"
+  version: 10.12.12
+  resolution: "framer-motion@npm:10.12.12"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
     tslib: ^2.4.0
@@ -2017,7 +2017,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: d4bdca5bc891534d6e4852a5725d1d0e8c29270a79927b50d8136d71e3d3affdca66dcb3a74e8c252fb4508292c4901cce20d93c3a35a4acdfa9a3f6ad9b57bb
+  checksum: 28ff7202b79833c0aa2fc412e64055b34f6405dc5b025eceb6fa737725f4005a2b29bec31011dd5c1c4cd44af2430b3d622e4a77a11a032e7b08e1e108456430
   languageName: node
   linkType: hard
 
@@ -3884,13 +3884,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.1.0":
   version: 2.5.0
   resolution: "tslib@npm:2.5.0"
   checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.4.0":
+  version: 2.5.2
+  resolution: "tslib@npm:2.5.2"
+  checksum: 4d3c1e238b94127ed0e88aa0380db3c2ddae581dc0f4bae5a982345e9f50ee5eda90835b8bfba99b02df10a5734470be197158c36f9129ac49fdc14a6a9da222
+  languageName: node
+  linkType: hard
+
 "tunnel-agent@npm:^0.6.0":
   version: 0.6.0
   resolution: "tunnel-agent@npm:0.6.0"