feat: support tooltip on solidgauge

Author: jsilll

pages/07-solid-gauge-chart/simple.page.tsx

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import Highcharts from "highcharts";
+import { omit } from "lodash";
+
+import "highcharts/highcharts-more";
+import "highcharts/modules/solid-gauge";
+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();
+  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")}
+        highcharts={Highcharts}
+        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>
+  );
+}

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

@@ -98,8 +98,22 @@ 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")) {
+    let hasPieSeries = false;
+    let hasSolidGaugeSeries = false;
+    for (const s of this.context.chart().series) {
+      if (s.type === "pie") {
+        hasPieSeries = true;
+        break;
+      }
+      if (s.type === "solidgauge") {
+        hasSolidGaugeSeries = true;
+        break;
+      }
+    }
+    if (hasPieSeries) {
       return this.onRenderTooltipPie(props.group[0]);
+    } else if (hasSolidGaugeSeries) {
+      return this.onRenderTooltipSolidGauge(props.group[0]);
     } else {
       return this.onRenderTooltipCartesian(props);
     }
@@ -128,6 +142,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 +238,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,
+  };
+}