feat: support tooltip on solidgauge (#74)

* feat: support tooltip on solidgauge

* fix: improve chart type logic

* fix: add solidgauge in page settings

---------

Co-authored-by: Andrei Zhaleznichenka <[email protected]>

Author: jsilll

pages/03-core/solidgauge.page.tsx

@@ -0,0 +1,61 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { omit } from "lodash";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+import pseudoRandom from "../utils/pseudo-random";
+
+function randomInt(min: number, max: number) {
+  return min + Math.floor(pseudoRandom() * (max - min));
+}
+
+const series: Highcharts.SeriesOptionsType[] = [
+  {
+    name: "CPU Usage",
+    type: "solidgauge",
+    data: [randomInt(60, 90)],
+  },
+];
+
+export default function () {
+  const { chartProps } = useChartSettings({ solidgauge: true });
+  return (
+    <Page
+      title="Solid Gauge Chart Demo"
+      subtitle="This page demonstrates the use of solid gauge charts for displaying single-value metrics."
+      settings={
+        <PageSettingsForm
+          selectedSettings={["showLegend", "legendPosition", "showLegendTitle", "showLegendActions", "useFallback"]}
+        />
+      }
+    >
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        options={{
+          series,
+          chart: {
+            type: "solidgauge",
+          },
+          title: {
+            text: "Resource Usage",
+          },
+          yAxis: {
+            min: 0,
+            max: 100,
+            title: {
+              text: "Usage",
+            },
+            stops: [
+              [0.1, "#55BF3B"],
+              [0.5, "#DDDF0D"],
+              [0.8, "#DF5353"],
+            ],
+          },
+        }}
+      />
+    </Page>
+  );
+}

pages/common/page-settings.tsx

@@ -73,6 +73,7 @@ export function useChartSettings<SettingsType extends PageSettings = PageSetting
   options: {
     more?: boolean;
     xrange?: boolean;
+    solidgauge?: boolean;
   } = {},
 ): {
   settings: SettingsType;

pages/common/use-highcharts.ts

@@ -6,7 +6,11 @@ import type Highcharts from "highcharts";
 
 import { isDevelopment } from "@cloudscape-design/component-toolkit/internal";
 
-export function useHighcharts({ more = false, xrange = false }: { more?: boolean; xrange?: boolean } = {}) {
+export function useHighcharts({
+  more = false,
+  xrange = false,
+  solidgauge = false,
+}: { more?: boolean; xrange?: boolean; solidgauge?: boolean } = {}) {
   const [highcharts, setHighcharts] = useState<null | typeof Highcharts>(null);
 
   useEffect(() => {
@@ -16,12 +20,15 @@ export function useHighcharts({ more = false, xrange = false }: { more?: boolean
       await import("highcharts/modules/accessibility");
 
       // Required for arearange, areasplinerange, columnrange, gauge, boxplot, errorbar, waterfall, polygon, bubble
-      if (more) {
+      if (more || solidgauge) {
         await import("highcharts/highcharts-more");
       }
       if (xrange) {
         await import("highcharts/modules/xrange");
       }
+      if (solidgauge) {
+        await import("highcharts/modules/solid-gauge");
+      }
 
       if (isDevelopment) {
         await import("highcharts/modules/debugger");
@@ -31,7 +38,7 @@ export function useHighcharts({ more = false, xrange = false }: { more?: boolean
     };
 
     load();
-  }, [more, xrange]);
+  }, [more, xrange, solidgauge]);
 
   return highcharts;
 }

src/core/chart-api/chart-extra-tooltip.tsx

@@ -98,8 +98,12 @@ export class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
   }
 
   private onRenderTooltip = (props: { point: null | Highcharts.Point; group: readonly Highcharts.Point[] }) => {
-    if (this.context.chart().series.some((s) => s.type === "pie")) {
+    const chartType =
+      this.context.chart().series.find((s) => s.type === "pie" || s.type === "solidgauge")?.type ?? "cartesian";
+    if (chartType === "pie") {
       return this.onRenderTooltipPie(props.group[0]);
+    } else if (chartType === "solidgauge") {
+      return this.onRenderTooltipSolidGauge(props.group[0]);
     } else {
       return this.onRenderTooltipCartesian(props);
     }
@@ -128,6 +132,13 @@ export class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
     this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });
   };
 
+  private onRenderTooltipSolidGauge = (point: Highcharts.Point) => {
+    // Solid gauge charts are similar to pie charts in that they have a circular shape
+    // and don't support grouping. We use a similar approach to pie charts.
+    const pointRect = getSolidGaugeTargetPlacement(point);
+    this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });
+  };
+
   private get commonTrackAttrs() {
     return { fill: "transparent", zIndex: -1, style: "pointer-events:none", direction: this.direction };
   }
@@ -217,3 +228,13 @@ function getPieMiddlePlacement(point: Highcharts.Point): Rect {
     (typeof relativeDiameter === "number" ? relativeDiameter : (relativeDiameter / 100) * chart.plotWidth) / 2;
   return { x: centerX, y: centerY - radius, width: 1, height: 2 * radius };
 }
+
+function getSolidGaugeTargetPlacement(point: Highcharts.Point): Rect {
+  const chart = point.series.chart;
+  return {
+    x: chart.plotLeft + chart.plotWidth / 2,
+    y: chart.plotTop + chart.plotHeight / 2,
+    width: 0.1,
+    height: 0.1,
+  };
+}