chore: Alternative column series highlight effect (#43)

* chore: Alternative column series highlight effect

* add vr page

* include single series chart

Author: pan-kot

pages/06-visual-tests/column-hover.page.tsx

@@ -0,0 +1,89 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page, PageSection } from "../common/templates";
+
+const domain = [
+  new Date(1601071200000),
+  new Date(1601078400000),
+  new Date(1601085600000),
+  new Date(1601092800000),
+  new Date(1601100000000),
+];
+
+export default function () {
+  return (
+    <Page title="Column series hover visual regression page">
+      <ColumnLayout columns={3}>
+        <PageSection>
+          <Chart type="stacked" />
+        </PageSection>
+        <PageSection>
+          <Chart type="grouped" />
+        </PageSection>
+        <PageSection>
+          <Chart type="single" />
+        </PageSection>
+      </ColumnLayout>
+    </Page>
+  );
+}
+
+function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
+  const { chartProps } = useChartSettings();
+  return (
+    <CoreChart
+      highcharts={chartProps.cartesian.highcharts}
+      ariaLabel="Bar chart"
+      legend={{ enabled: false }}
+      tooltip={{ placement: "outside" }}
+      options={{
+        plotOptions: { series: { stacking: type === "stacked" ? "normal" : undefined } },
+        series: [
+          {
+            name: "Severe",
+            type: "column" as const,
+            data: [22, 28, 25, 13, 28],
+          },
+          {
+            name: "Moderate",
+            type: "column" as const,
+            data: [18, 21, 22, 0, 1],
+          },
+          {
+            name: "Low",
+            type: "column" as const,
+            data: [17, 19, 18, 17, 15],
+          },
+          {
+            name: "Unclassified",
+            type: "column" as const,
+            data: [24, 18, 16, 14, 16],
+          },
+        ].slice(0, type === "single" ? 1 : 4),
+        xAxis: [
+          {
+            type: "category",
+            title: { text: "Time (UTC)" },
+            categories: domain.map((date) => dateFormatter(date.getTime())),
+          },
+        ],
+        yAxis: [{ title: { text: "Error count" } }],
+      }}
+      callback={(api) => {
+        setTimeout(() => {
+          if (api.chart.series) {
+            const seriesIndex = Math.min(api.chart.series.length - 1, 1);
+            const point = api.chart.series[seriesIndex].data.find((p) => p.x === 2)!;
+            api.highlightChartPoint(point);
+          }
+        }, 0);
+      }}
+    />
+  );
+}

src/core/__tests__/chart-core-highlight.test.tsx

@@ -5,7 +5,7 @@ import { act } from "react";
 import highcharts from "highcharts";
 
 import "highcharts/highcharts-more";
-import { createChartWrapper, renderChart } from "./common";
+import { renderChart } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
 
 const hc = new HighchartsTestHelper(highcharts);
@@ -42,7 +42,6 @@ describe("CoreChart: highlight", () => {
       },
     });
 
-    expect(createChartWrapper().findLegend()).not.toBe(null);
     expect(hc.getChartSeries(0).state).toBe("");
     expect(hc.getChartSeries(1).state).toBe("");
     expect(hc.getChartSeries(2).state).toBe("");
@@ -63,4 +62,42 @@ describe("CoreChart: highlight", () => {
     expect(hc.getChartSeries(2).state).toBe("");
     expect(hc.getChartSeries(3).state).toBe("");
   });
+
+  test.each([{ stacked: false }, { stacked: true }])(
+    "highlights a single group/stack, stacked=$stacked",
+    async ({ stacked }) => {
+      renderChart({
+        highcharts,
+        options: {
+          plotOptions: { series: { stacking: stacked ? "normal" : undefined } },
+          series: [
+            { type: "column", name: "C1", data: [1, 2] },
+            { type: "column", name: "C2", data: [3, 4] },
+          ],
+        },
+      });
+
+      expect(hc.getChartSeries(0).state).toBe("");
+      expect(hc.getChartSeries(1).state).toBe("");
+
+      act(() => hc.highlightChartPoint(1, 0));
+
+      expect(hc.getChartSeries(0).state).toBe("inactive");
+      expect(hc.getChartPoint(0, 0).state).toBe("inactive");
+      expect(hc.getChartPoint(0, 1).state).toBe("inactive");
+      expect(hc.getChartSeries(1).state).toBe("hover");
+      expect(hc.getChartPoint(1, 0).state).toBe("hover");
+      expect(hc.getChartPoint(1, 1).state).toBe("inactive");
+
+      act(() => hc.leaveChartPoint(1, 0));
+      await clearHighlightPause();
+
+      expect(hc.getChartSeries(0).state).toBe("");
+      expect(hc.getChartPoint(0, 0).state).toBe("");
+      expect(hc.getChartPoint(0, 1).state).toBe("");
+      expect(hc.getChartSeries(1).state).toBe("");
+      expect(hc.getChartPoint(1, 0).state).toBe("");
+      expect(hc.getChartPoint(1, 1).state).toBe("");
+    },
+  );
 });

src/core/chart-api/chart-extra-highlight.ts

@@ -62,7 +62,7 @@ export class ChartExtraHighlight {
     });
     for (const s of this.context.chart().series) {
       this.setSeriesState(s, includedSeries.has(s) ? "" : "inactive");
-      // We use special handling for column- series to make stacks or groups of columns that have a shared X highlighted.
+      // For column series we ensure only one group/stack that matches selected X is highlighted.
       // See: https://github.com/highcharts/highcharts/issues/23076.
       if (s.type === "column") {
         for (const d of s.data) {
@@ -86,10 +86,10 @@ export class ChartExtraHighlight {
         }
         this.setPointState(point, "hover");
       }
-      // We override point state that could have been set for columns using this.highlightChartGroup().
+      // For column series we ensure only one group/stack that matches selected X is highlighted.
       else if (s.type === "column") {
         for (const d of s.data) {
-          this.setPointState(d, "");
+          this.setPointState(d, d === point ? "hover" : "inactive");
         }
       }
     }

src/internal/chart-styles.ts

@@ -133,7 +133,7 @@ export const seriesDataLabelsCss: Highcharts.CSSObject = {
   textOutline: "",
 };
 
-export const seriesOpacityInactive = 0.2;
+export const seriesOpacityInactive = 0.3;
 
 export const verticalAxisTitleBlockSize = 24;
 export const verticalAxisTitleMargin = 4;