feat: Add bubble series to cartesian chart component

pages/01-cartesian-chart/bubble-chart.page.tsx

@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { CartesianChart, CartesianChartProps } from "../../lib/components";
+import { dateFormatter, moneyFormatter } from "../common/formatters";
+import { useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+// Note: in Highcharts, the scale can be configured explicitly with zMin/zMax on the bubble series, which is not currently exposed in the API.
+const timeScale = 10;
+const costScale = 1000;
+
+const baseline = [
+  { x: 1600984800000, y: 5802, timeToFix: 50 / timeScale, costImpact: 0 },
+  { x: 1600985700000, y: 10240, timeToFix: 234 / timeScale, costImpact: 30_000 / costScale },
+  { x: 1600986600000, y: 10492, timeToFix: 553 / timeScale, costImpact: 50_000 / costScale },
+  { x: 1600987500000, y: 9403, timeToFix: 33 / timeScale, costImpact: 0 },
+  { x: 1600988400000, y: 12502, timeToFix: 44 / timeScale, costImpact: 100_000 / costScale },
+  { x: 1600989300000, y: 15921, timeToFix: 22 / timeScale, costImpact: 10_000 / costScale },
+  { x: 1600990200000, y: 19308, timeToFix: 111 / timeScale, costImpact: 20_000 / costScale },
+  { x: 1600991100000, y: 16259, timeToFix: 343 / timeScale, costImpact: 20_000 / costScale },
+  { x: 1600992000000, y: 27402, timeToFix: 11 / timeScale, costImpact: 0 },
+  { x: 1600992900000, y: 2628, timeToFix: 3 / timeScale, costImpact: 80_000 / costScale },
+];
+
+const series: CartesianChartProps.SeriesOptions[] = [
+  {
+    name: "Time to fix",
+    sizeAxis: "time-axis",
+    type: "bubble",
+    data: baseline.map(({ x, y, timeToFix: size }) => ({ x, y, size })),
+  },
+  {
+    name: "Cost impact",
+    sizeAxis: "cost-axis",
+    type: "bubble",
+    data: baseline.map(({ x, y, costImpact: size }) => ({ x, y, size })),
+  },
+];
+
+export default function () {
+  const { chartProps } = useChartSettings({ more: true });
+  return (
+    <Page title="Bubble chart">
+      <CartesianChart
+        {...chartProps.cartesian}
+        series={series}
+        xAxis={{ title: "Time (UTC)", type: "datetime", valueFormatter: dateFormatter }}
+        yAxis={{ title: "Events" }}
+        sizeAxis={[
+          { id: "time-axis", title: "Time to fix", valueFormatter: (value) => `${value! * timeScale} minutes` },
+          { id: "cost-axis", title: "Cost impact", valueFormatter: (value) => moneyFormatter(value! * costScale) },
+        ]}
+        chartHeight={400}
+      />
+    </Page>
+  );
+}

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -315,6 +315,7 @@ Supported types:
 * [column](https://api.highcharts.com/highcharts/series.column).
 * [errorbar](https://api.highcharts.com/highcharts/series.errorbar) - requires "highcharts/highcharts-more" module.
 * [line](https://api.highcharts.com/highcharts/series.line).
+* [bubble](https://api.highcharts.com/highcharts/series.bubble) - requires "highcharts/highcharts-more" module.
 * [scatter](https://api.highcharts.com/highcharts/series.scatter).
 * [spline](https://api.highcharts.com/highcharts/series.spline).
 * x-threshold - The line-like series to represent x-axis threshold (vertical, when \`inverted=false\`).
@@ -323,6 +324,25 @@ Supported types:
       "optional": false,
       "type": "ReadonlyArray<CartesianChartProps.SeriesOptions>",
     },
+    {
+      "description": "One or multiple axes to provide size details formatting for bubble series.
+
+Supported options:
+* \`id\` (optional, string) - Use it to connect axes with respective series when multiple size axes are present. The axis id must correspond \`sizeAxis\` property of the bubble series.
+* \`title\` (string) - Axis title, shown in the tooltip details for bubble series.
+* \`valueFormatter\` (optional, function) - Value formatter for \`size\` values of the bubble series data.",
+      "inlineType": {
+        "name": "CartesianChartProps.SizeAxisOptions | ReadonlyArray<CartesianChartProps.SizeAxisOptions>",
+        "type": "union",
+        "values": [
+          "CartesianChartProps.SizeAxisOptions",
+          "ReadonlyArray<CartesianChartProps.SizeAxisOptions>",
+        ],
+      },
+      "name": "sizeAxis",
+      "optional": true,
+      "type": "CartesianChartProps.SizeAxisOptions | ReadonlyArray<CartesianChartProps.SizeAxisOptions>",
+    },
     {
       "defaultValue": "undefined",
       "description": "Enables series stacking behavior. Use it for column- or area- series.
@@ -1779,6 +1799,27 @@ not overridden, but merged with Cloudscape event handlers so that both are getti
         "type": "CoreChartProps.ChartOptions",
         "visualRefreshTag": undefined,
       },
+      {
+        "analyticsTag": undefined,
+        "defaultValue": undefined,
+        "deprecatedTag": undefined,
+        "description": undefined,
+        "i18nTag": undefined,
+        "inlineType": {
+          "name": "CoreChartProps.SizeAxisOptions | ReadonlyArray<CoreChartProps.SizeAxisOptions>",
+          "type": "union",
+          "valueDescriptions": undefined,
+          "values": [
+            "CoreChartProps.SizeAxisOptions",
+            "ReadonlyArray<CoreChartProps.SizeAxisOptions>",
+          ],
+        },
+        "name": "sizeAxis",
+        "optional": true,
+        "systemTags": undefined,
+        "type": "CoreChartProps.SizeAxisOptions | ReadonlyArray<CoreChartProps.SizeAxisOptions>",
+        "visualRefreshTag": undefined,
+      },
       {
         "analyticsTag": undefined,
         "defaultValue": undefined,

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

@@ -18,14 +18,15 @@ const allSeries: CartesianChartProps.SeriesOptions[] = [
   { type: "line", name: "Line", data: [{ x: 1, y: 6 }], color: "5" },
   { type: "scatter", name: "Scatter", data: [{ x: 1, y: 7 }], color: "6" },
   { type: "spline", name: "Spline", data: [{ x: 1, y: 8 }], color: "7" },
-  { type: "x-threshold", name: "X threshold", value: 1, color: "8" },
-  { type: "y-threshold", name: "Y threshold", value: 9, color: "9" },
+  { type: "bubble", name: "Bubble", data: [{ x: 1, y: 9, z: 5 }], color: "8" },
+  { type: "x-threshold", name: "X threshold", value: 1, color: "9" },
+  { type: "y-threshold", name: "Y threshold", value: 9, color: "10" },
 ];
 
 describe("CartesianChart: series", () => {
   test("renders all supported series types", () => {
     renderCartesianChart({ highcharts, series: allSeries });
-    expect(getChart().findSeries()).toHaveLength(9);
+    expect(getChart().findSeries()).toHaveLength(10);
   });
 
   test("series color is assigned", () => {