chore: Adds boost module demo

pages/03-core/boost.page.tsx

@@ -0,0 +1,99 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import Checkbox from "@cloudscape-design/components/checkbox";
+
+import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
+import { dateFormatter } from "../common/formatters";
+import { PageSettings, PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+import pseudoRandom from "../utils/pseudo-random";
+
+interface ThisPageSettings extends PageSettings {
+  boostEnabled: boolean;
+}
+
+export default function () {
+  const {
+    settings: { boostEnabled = false },
+    setSettings,
+  } = useChartSettings<ThisPageSettings>();
+  return (
+    <Page
+      title="Boost module"
+      subtitle="This demonstrates the use of the boost module"
+      settings={
+        <PageSettingsForm
+          selectedSettings={[
+            {
+              content: (
+                <Checkbox
+                  checked={boostEnabled}
+                  onChange={({ detail }) => setSettings({ boostEnabled: detail.checked })}
+                >
+                  Enable boost module
+                </Checkbox>
+              ),
+            },
+          ]}
+        />
+      }
+    >
+      <Component boostEnabled={boostEnabled} />
+    </Page>
+  );
+}
+
+const domain: number[] = [];
+for (
+  let time = new Date("2015-01-01").getTime();
+  time < new Date("2025-01-01").getTime();
+  time += 12 * 60 * 60 * 1000
+) {
+  domain.push(time);
+}
+function Component({ boostEnabled }: { boostEnabled: boolean }) {
+  const { chartProps } = useChartSettings({ boost: true });
+  return (
+    <CoreChart
+      {...chartProps.cartesian}
+      chartHeight={500}
+      options={{
+        boost: { enabled: boostEnabled },
+        plotOptions: { series: { boostThreshold: 1 } },
+        series: [
+          {
+            name: "Site 1",
+            type: "spline",
+            data: domain.map((x, index) => ({
+              x,
+              y: Math.round(1000 + pseudoRandom() * 10 * index),
+            })),
+          },
+          {
+            name: "Site 2",
+            type: "spline",
+            data: domain.map((x, index) => ({
+              x,
+              y: Math.round(99_000 - pseudoRandom() * 10 * index),
+            })),
+          },
+        ],
+        xAxis: [
+          {
+            type: "linear",
+            title: { text: "Time (UTC)" },
+            min: domain[0],
+            max: domain[domain.length - 1],
+            valueFormatter: dateFormatter,
+          },
+        ],
+        yAxis: [{ title: { text: "Bytes transferred" }, min: 0, max: 100_000 }],
+      }}
+      ariaLabel="Large chart"
+      tooltip={{
+        placement: "outside",
+      }}
+    />
+  );
+}

pages/common/page-settings.tsx

@@ -74,6 +74,7 @@
     more?: boolean;
     xrange?: boolean;
     solidgauge?: boolean;
+    boost?: boolean;
   } = {},
 ): {
   settings: SettingsType;
@@ -106,7 +107,7 @@
     useFallback: parseBoolean(defaultSettings.useFallback, urlParams.useFallback),
   } as PageSettings as SettingsType;
   const setSettings = (partial: Partial<SettingsType>) => {
     setUrlParams(partial as any);
   };
 
   const cartesianChartRef = useRef<CartesianChartProps.Ref>(null);

pages/common/use-highcharts.ts

@@ -10,7 +10,8 @@ export function useHighcharts({
   more = false,
   xrange = false,
   solidgauge = false,
-}: { more?: boolean; xrange?: boolean; solidgauge?: boolean } = {}) {
+  boost = false,
+}: { more?: boolean; xrange?: boolean; solidgauge?: boolean; boost?: boolean } = {}) {
   const [highcharts, setHighcharts] = useState<null | typeof Highcharts>(null);
 
   useEffect(() => {
@@ -29,6 +30,9 @@ export function useHighcharts({
       if (solidgauge) {
         await import("highcharts/modules/solid-gauge");
       }
+      if (boost) {
+        await import("highcharts/modules/boost");
+      }
 
       if (isDevelopment) {
         await import("highcharts/modules/debugger");
@@ -38,7 +42,7 @@ export function useHighcharts({
     };
 
     load();
-  }, [more, xrange, solidgauge]);
+  }, [more, xrange, solidgauge, boost]);
 
   return highcharts;
 }

src/internal/utils/test-i18n-provider.tsx

@@ -11,7 +11,7 @@ interface TestI18nProviderProps {
 
 export function TestI18nProvider({ messages = {}, locale = "en", children }: TestI18nProviderProps) {
   return (
-    <I18nProvider locale={locale} messages={[{ "@cloudscape-design/components": { [locale]: messages } }]}>
+    <I18nProvider locale={locale} messages={[{ "cloudscape-design-components": { [locale]: messages } }]}>
       {children}
     </I18nProvider>
   );