diff --git a/pages/03-core/boost.page.tsx b/pages/03-core/boost.page.tsx new file mode 100644 index 00000000..88ad1821 --- /dev/null +++ b/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(); + return ( + setSettings({ boostEnabled: detail.checked })} + > + Enable boost module + + ), + }, + ]} + /> + } + > + + + ); +} + +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 ( + ({ + 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", + }} + /> + ); +} diff --git a/pages/common/page-settings.tsx b/pages/common/page-settings.tsx index 2004aa22..dafd6e16 100644 --- a/pages/common/page-settings.tsx +++ b/pages/common/page-settings.tsx @@ -74,6 +74,7 @@ export function useChartSettings(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; } diff --git a/src/internal/utils/test-i18n-provider.tsx b/src/internal/utils/test-i18n-provider.tsx index 966d6092..787b0202 100644 --- a/src/internal/utils/test-i18n-provider.tsx +++ b/src/internal/utils/test-i18n-provider.tsx @@ -11,7 +11,7 @@ interface TestI18nProviderProps { export function TestI18nProvider({ messages = {}, locale = "en", children }: TestI18nProviderProps) { return ( - + {children} );