feat: Zoned series in cartesian chart

pages/01-cartesian-chart/linked-series.page.tsx

@@ -1,129 +1,63 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { colorChartsPaletteCategorical5 } from "@cloudscape-design/design-tokens";
-
 import { CartesianChart } from "../../lib/components";
 import { useChartSettings } from "../common/page-settings";
 import { Page } from "../common/templates";
+import pseudoRandom from "../utils/pseudo-random";
+
+const data = [
+  { x: 1600984800000, y: 58020 },
+  { x: 1600985700000, y: 102402 },
+  { x: 1600986600000, y: 104920 },
+  { x: 1600987500000, y: 94031 },
+  { x: 1600988400000, y: 125021 },
+  { x: 1600989300000, y: 159219 },
+  { x: 1600990200000, y: 193082 },
+  { x: 1600991100000, y: 162592 },
+  { x: 1600992000000, y: 274021 },
+  { x: 1600992900000, y: 264286 },
+  { x: 1600993800000, y: 289210 },
+  { x: 1600994700000, y: 256362 },
+  { x: 1600995600000, y: 257306 },
+  { x: 1600996500000, y: 186776 },
+  { x: 1600997400000, y: 294020 },
+  { x: 1600998300000, y: 385975 },
+  { x: 1600999200000, y: 486039 },
+  { x: 1601000100000, y: 490447 },
+  { x: 1601001000000, y: 361845 },
+  { x: 1601001900000, y: 339058 },
+  { x: 1601002800000, y: 298028 },
+  { x: 1601003700000, y: 231902 },
+  { x: 1601004600000, y: 224558 },
+];
+
+const dataProjected = data.map(({ x, y }) => ({ x, y: y + pseudoRandom() * 50000 }));
 
 export default function () {
   const { chartProps } = useChartSettings();
   return (
     <Page
       title="Linked series demo"
-      subtitle="This page demonstrates linked series. The linked series are not represented in the legend."
+      subtitle="Linked series are not represented in the filter or legend, but visible in the tooltip."
     >
       <CartesianChart
         {...chartProps.cartesian}
         ariaLabel="Line chart with linked series"
         series={[
-          {
-            type: "y-threshold",
-            name: "Performance goal",
-            value: 250000,
-          },
-          {
-            name: "Site 1",
-            type: "line",
-            color: colorChartsPaletteCategorical5,
-            data: [
-              { x: 1600984800000, y: 58020 },
-              { x: 1600985700000, y: 102402 },
-              { x: 1600986600000, y: 104920 },
-              { x: 1600987500000, y: 94031 },
-              { x: 1600988400000, y: 125021 },
-              { x: 1600989300000, y: 159219 },
-              { x: 1600990200000, y: 193082 },
-              { x: 1600991100000, y: 162592 },
-              { x: 1600992000000, y: 274021 },
-              { x: 1600992900000, y: 264286 },
-              { x: 1600993800000, y: 289210 },
-              { x: 1600994700000, y: 256362 },
-              { x: 1600995600000, y: 257306 },
-              { x: 1600996500000, y: 186776 },
-              { x: 1600997400000, y: 294020 },
-              { x: 1600998300000, y: 385975 },
-              { x: 1600999200000, y: 486039 },
-              { x: 1601000100000, y: 490447 },
-              { x: 1601001000000, y: 361845 },
-              { x: 1601001900000, y: 339058 },
-              { x: 1601002800000, y: 298028 },
-              { x: 1601003700000, y: 231902 },
-              { x: 1601004600000, y: 224558 },
-            ],
-          },
-          {
-            name: "Site 1 (projected)",
-            linkedTo: ":previous",
-            type: "line",
-            data: [
-              { x: 1601004600000, y: 224558 },
-              { x: 1601005500000, y: 253901 },
-              { x: 1601006400000, y: 102839 },
-              { x: 1601007300000, y: 234943 },
-              { x: 1601008200000, y: 204405 },
-              { x: 1601009100000, y: 190391 },
-              { x: 1601010000000, y: 183570 },
-              { x: 1601010900000, y: 162592 },
-              { x: 1601011800000, y: 148910 },
-              { x: 1601012700000, y: 229492 },
-              { x: 1601013600000, y: 293910 },
-            ],
-            dashStyle: "ShortDot",
-          },
-          {
-            name: "Site 2",
-            type: "line",
-            data: [
-              { x: 1600984800000, y: 151023 },
-              { x: 1600985700000, y: 169975 },
-              { x: 1600986600000, y: 176980 },
-              { x: 1600987500000, y: 168852 },
-              { x: 1600988400000, y: 149130 },
-              { x: 1600989300000, y: 147299 },
-              { x: 1600990200000, y: 169552 },
-              { x: 1600991100000, y: 163401 },
-              { x: 1600992000000, y: 154091 },
-              { x: 1600992900000, y: 199516 },
-              { x: 1600993800000, y: 195503 },
-              { x: 1600994700000, y: 189953 },
-              { x: 1600995600000, y: 181635 },
-              { x: 1600996500000, y: 192975 },
-              { x: 1600997400000, y: 205951 },
-              { x: 1600998300000, y: 218958 },
-              { x: 1600999200000, y: 220516 },
-              { x: 1601000100000, y: 213557 },
-              { x: 1601001000000, y: 165899 },
-              { x: 1601001900000, y: 173557 },
-              { x: 1601002800000, y: 172331 },
-              { x: 1601003700000, y: 186492 },
-              { x: 1601004600000, y: 131541 },
-              { x: 1601005500000, y: 142262 },
-            ],
-          },
-          {
-            name: "Site 2 (projected)",
-            linkedTo: ":previous",
-            type: "line",
-            dashStyle: "ShortDot",
-            data: [
-              { x: 1601005500000, y: 142262 },
-              { x: 1601006400000, y: 194091 },
-              { x: 1601007300000, y: 185899 },
-              { x: 1601008200000, y: 173401 },
-              { x: 1601009100000, y: 171635 },
-              { x: 1601010000000, y: 179130 },
-              { x: 1601010900000, y: 185951 },
-              { x: 1601011800000, y: 144091 },
-              { x: 1601012700000, y: 152975 },
-              { x: 1601013600000, y: 157299 },
-            ],
-          },
+          { type: "y-threshold", name: "Performance goal", value: 250000 },
+          { name: "Site 1", type: "spline", data: data },
+          { name: "Site 1 peak", linkedTo: ":previous", type: "spline", dashStyle: "Dash", data: dataProjected },
         ]}
-        xAxis={{ type: "datetime", title: "Time (UTC)", min: 1600984800000, max: 1601013600000 }}
-        yAxis={{ title: "Bytes transferred", min: 0, max: 500000 }}
+        xAxis={{ type: "datetime", title: "Time (UTC)", min: 1600984800000, max: 1601004600000 }}
+        yAxis={{ title: "Bytes transferred", min: 0, max: 600000 }}
         filter={{ seriesFilter: true }}
+        tooltip={{
+          point: ({ item }) => {
+            const seriesName = item.series.name;
+            return { key: seriesName === "Site 1" ? "Site 1 avg" : seriesName };
+          },
+        }}
       />
     </Page>
   );

pages/01-cartesian-chart/zoned-series.page.tsx

@@ -0,0 +1,90 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import { colorChartsThresholdNegative, colorChartsThresholdNeutral } from "@cloudscape-design/design-tokens";
+
+import { CartesianChart, CartesianChartProps } from "../../lib/components";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+import pseudoRandom from "../utils/pseudo-random";
+
+const data1 = [
+  { x: 1600984800000, y: 58020 },
+  { x: 1600985700000, y: 102402 },
+  { x: 1600986600000, y: 104920 },
+  { x: 1600987500000, y: 94031 },
+  { x: 1600988400000, y: 125021 },
+  { x: 1600989300000, y: 159219 },
+  { x: 1600990200000, y: 193082 },
+  { x: 1600991100000, y: 162592 },
+  { x: 1600992000000, y: 274021 },
+  { x: 1600992900000, y: 264286 },
+  { x: 1600993800000, y: 289210 },
+  { x: 1600994700000, y: 256362 },
+  { x: 1600995600000, y: 257306 },
+  { x: 1600996500000, y: 186776 },
+  { x: 1600997400000, y: 294020 },
+  { x: 1600998300000, y: 385975 },
+  { x: 1600999200000, y: 486039 },
+  { x: 1601000100000, y: 490447 },
+  { x: 1601001000000, y: 361845 },
+  { x: 1601001900000, y: 339058 },
+  { x: 1601002800000, y: 298028 },
+  { x: 1601003700000, y: 231902 },
+  { x: 1601004600000, y: 364558 },
+  { x: 1601005500000, y: 413901 },
+  { x: 1601006400000, y: 432839 },
+  { x: 1601007300000, y: 464943 },
+  { x: 1601008200000, y: 464405 },
+  { x: 1601009100000, y: 490391 },
+  { x: 1601010000000, y: 513570 },
+  { x: 1601010900000, y: 552592 },
+  { x: 1601011800000, y: 538910 },
+  { x: 1601012700000, y: 599492 },
+  { x: 1601013600000, y: 643910 },
+];
+const data2 = data1.map(({ x, y }) => ({ x, y: y + 10_000 + pseudoRandom() * 100_000 }));
+
+export default function () {
+  const { chartProps } = useChartSettings();
+
+  const xyzZones: CartesianChartProps.SeriesZone[] = [
+    { value: 1601004100000, dashStyle: "Solid" },
+    { value: undefined, dashStyle: "Dash" },
+  ];
+
+  const performanceZones: CartesianChartProps.SeriesZone[] = [
+    { value: 250000, color: colorChartsThresholdNegative, dashStyle: "Dash" },
+    { value: undefined, dashStyle: "Solid" },
+  ];
+
+  return (
+    <Page title="Zoned series demo" subtitle="Zoned series can have different style based on X or Y thresholds.">
+      <SpaceBetween size="m">
+        <CartesianChart
+          {...chartProps.cartesian}
+          ariaLabel="Line chart with x-zoned series"
+          series={[
+            { name: "Site 1", type: "spline", data: data1, zoneAxis: "x", zones: xyzZones },
+            { name: "Site 2", type: "spline", data: data2, zoneAxis: "x", zones: xyzZones },
+            { type: "x-threshold", name: "XYZ deployed", color: colorChartsThresholdNeutral, value: 1601004100000 },
+          ]}
+          xAxis={{ type: "datetime", title: "Time (UTC)", min: 1600984800000, max: 1601013600000 }}
+          yAxis={{ title: "Bytes transferred", min: 0, max: 650000 }}
+        />
+        <CartesianChart
+          {...chartProps.cartesian}
+          ariaLabel="Line chart withy-zoned series"
+          series={[
+            { name: "Site 1", type: "spline", data: data1, zoneAxis: "y", zones: performanceZones },
+            { name: "Site 2", type: "spline", data: data2, zoneAxis: "y", zones: performanceZones },
+            { type: "y-threshold", name: "Performance goal", color: colorChartsThresholdNegative, value: 250000 },
+          ]}
+          xAxis={{ type: "datetime", title: "Time (UTC)", min: 1600984800000, max: 1601013600000 }}
+          yAxis={{ title: "Bytes transferred", min: 0, max: 650000 }}
+        />
+      </SpaceBetween>
+    </Page>
+  );
+}

src/cartesian-chart/chart-series-cartesian.tsx

@@ -5,7 +5,7 @@ import type Highcharts from "highcharts";
 
 import { colorChartsErrorBarMarker } from "@cloudscape-design/design-tokens";
 
-import { PointDataItemType, RangeDataItemOptions } from "../core/interfaces";
+import { RangeDataItemOptions } from "../core/interfaces";
 import { createBubbleMetadata, createThresholdMetadata, getOptionsId } from "../core/utils";
 import * as Styles from "../internal/chart-styles";
 import { Writeable } from "../internal/utils/utils";
@@ -90,7 +90,7 @@ export const transformCartesianSeries = (
       const { custom } = createBubbleMetadata(s);
       return { ...s, data: s.data.map((p) => ({ x: p.x, y: p.y, z: p.size })), ...shared, custom, ...getColorProps(s) };
     }
-    return { ...s, data: s.data as Writeable<PointDataItemType[]>, ...shared, ...getColorProps(s) };
+    return { ...s, data: s.data, ...shared, ...getColorProps(s) } as Highcharts.SeriesOptionsType;
   }
   const series = originalSeries.map(transformSeriesToHighcharts);
   // We inject a fake empty series so that the empty state still shows axes, if defined.

src/cartesian-chart/index.tsx

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 
 import { warnOnce } from "@cloudscape-design/component-toolkit/internal";
 
-import { PointDataItemType, RangeDataItemOptions, SizePointDataItemOptions } from "../core/interfaces";
+import { PointDataItemType, RangeDataItemOptions, SizePointDataItemOptions, WithZones } from "../core/interfaces";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import useBaseComponent from "../internal/base-component/use-base-component";
 import { applyDisplayName } from "../internal/utils/apply-display-name";
@@ -141,6 +141,7 @@ function transformLineLikeSeries<
     dashStyle: s.dashStyle,
     yAxis: s.yAxis,
     linkedTo: s.linkedTo,
+    ...transformZones(s),
     data,
   } as S;
 }
@@ -153,7 +154,16 @@ function transformColumnSeries<S extends CartesianChartProps.ColumnSeriesOptions
     return null;
   }
   const data = transformPointData(s.data);
-  return { type: s.type, id: s.id, name: s.name, color: s.color, yAxis: s.yAxis, linkedTo: s.linkedTo, data } as S;
+  return {
+    type: s.type,
+    id: s.id,
+    name: s.name,
+    color: s.color,
+    yAxis: s.yAxis,
+    linkedTo: s.linkedTo,
+    ...transformZones(s),
+    data,
+  } as S;
 }
 
 function transformScatterSeries<S extends CartesianChartProps.ScatterSeriesOptions>(
@@ -251,6 +261,12 @@ function transformRangeData(data: readonly RangeDataItemOptions[]): readonly Ran
   return data.map((d) => ({ x: d.x, low: d.low, high: d.high }));
 }
 
+function transformZones(series: WithZones) {
+  const zoneAxis = series.zoneAxis === "x" || series.zoneAxis === "y" ? series.zoneAxis : undefined;
+  const zones = series.zones?.map(({ value, color, dashStyle }) => ({ value, color, dashStyle }));
+  return { zoneAxis, zones };
+}
+
 function transformXAxisOptions(axis?: CartesianChartProps.XAxisOptions): CartesianChartProps.XAxisOptions {
   return transformAxisOptions(axis);
 }

src/cartesian-chart/interfaces.ts

@@ -212,6 +212,8 @@ export namespace CartesianChartProps {
   }
   export type TooltipPointFormatted = CoreTypes.BaseTooltipPointFormatted;
 
+  export type SeriesZone = CoreTypes.SeriesZone;
+
   export type LegendOptions = CoreTypes.BaseLegendOptions;
 
   export type FilterOptions = CoreTypes.BaseFilterOptions;