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)",
+];