@cloudscape-design/chart-components 1.0.0

package/core/components/core-tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ChartAPI } from "../chart-api";
+import { BaseI18nStrings, CoreChartProps } from "../interfaces";
+export declare function ChartTooltip({ placement, size, getTooltipContent: getTooltipContentOverrides, api, i18nStrings, }: CoreChartProps.TooltipOptions & {
+    i18nStrings?: BaseI18nStrings;
+    getTooltipContent?: CoreChartProps.GetTooltipContent;
+    api: ChartAPI;
+}): import("react/jsx-runtime").JSX.Element | null;

package/core/components/core-tooltip.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { warnOnce } from "@cloudscape-design/component-toolkit/internal";
+import Box from "@cloudscape-design/components/box";
+import { InternalChartTooltip } from "@cloudscape-design/components/internal/do-not-use/chart-tooltip";
+import LiveRegion from "@cloudscape-design/components/live-region";
+import ChartSeriesDetails from "../../internal/components/series-details";
+import { useSelector } from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
+import { getFormatter } from "../formatters";
+import { getPointColor, getSeriesColor, getSeriesId, getSeriesMarkerType, isXThreshold } from "../utils";
+import styles from "../styles.css.js";
+const MIN_VISIBLE_BLOCK_SIZE = 200;
+export function ChartTooltip({ placement = "target", size, getTooltipContent: getTooltipContentOverrides, api, i18nStrings, }) {
+    var _a;
+    const [expandedSeries, setExpandedSeries] = useState({});
+    const tooltip = useSelector(api.tooltipStore, (s) => s);
+    if (!tooltip.visible || tooltip.group.length === 0) {
+        return null;
+    }
+    const chart = (_a = tooltip.group[0]) === null || _a === void 0 ? void 0 : _a.series.chart;
+    const renderers = getTooltipContentOverrides === null || getTooltipContentOverrides === void 0 ? void 0 : getTooltipContentOverrides({ point: tooltip.point, group: tooltip.group });
+    const getTrack = placement === "target" ? api.getTargetTrack : api.getGroupTrack;
+    const position = (() => {
+        if (placement === "target" || placement === "middle") {
+            return !chart.inverted ? "right" : "bottom";
+        }
+        else {
+            return !chart.inverted ? "bottom" : "right";
+        }
+    })();
+    const content = getTooltipContent(api, {
+        renderers,
+        point: tooltip.point,
+        group: tooltip.group,
+        expandedSeries,
+        setExpandedSeries,
+    });
+    if (!content) {
+        return null;
+    }
+    return (_jsx(InternalChartTooltip, { getTrack: getTrack, trackKey: getTrackKey(tooltip.point, tooltip.group), container: null, dismissButton: tooltip.pinned, dismissAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.detailPopoverDismissAriaLabel, onDismiss: api.onDismissTooltip, onMouseEnter: api.onMouseEnterTooltip, onMouseLeave: api.onMouseLeaveTooltip, title: content.header, footer: content.footer ? (_jsxs(_Fragment, { children: [_jsx("hr", { "aria-hidden": true }), content.footer] })) : null, size: size, position: position, minVisibleBlockSize: MIN_VISIBLE_BLOCK_SIZE, children: _jsx(LiveRegion, { children: content.body }) }));
+}
+function getTrackKey(point, group) {
+    const pointId = point && (point.options.id || point.options.name);
+    if (point && pointId) {
+        return `p-${pointId}-${point.x}-${point.y}`;
+    }
+    if (point) {
+        return `p-${point.x}-${point.y}`;
+    }
+    return `g_${group.length}_${group[0].x}`;
+}
+function getTooltipContent(api, props) {
+    if (props.point && props.point.series.type === "pie") {
+        return getTooltipContentPie(api, { ...props, point: props.point });
+    }
+    else if (props.group.length > 0 && props.group[0].series.type !== "pie") {
+        return getTooltipContentCartesian(api, props);
+    }
+    else {
+        return null;
+    }
+}
+function getTooltipContentCartesian(api, { point, group, expandedSeries, renderers = {}, setExpandedSeries, }) {
+    var _a, _b, _c, _d, _e;
+    // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group.
+    // By design, every point of the group has the same x value.
+    const x = group[0].x;
+    const chart = group[0].series.chart;
+    const getSeriesMarker = (series) => api.renderMarker(getSeriesMarkerType(series), getSeriesColor(series), true);
+    const matchedItems = findTooltipSeriesItems(getChartSeries(chart.series), group);
+    const detailItems = matchedItems.map((item) => {
+        var _a, _b, _c;
+        const valueFormatter = getFormatter(item.point.series.yAxis);
+        const itemY = isXThreshold(item.point.series) ? null : ((_a = item.point.y) !== null && _a !== void 0 ? _a : null);
+        const customContent = renderers.point ? renderers.point({ item }) : undefined;
+        return {
+            key: (_b = customContent === null || customContent === void 0 ? void 0 : customContent.key) !== null && _b !== void 0 ? _b : item.point.series.name,
+            value: (_c = customContent === null || customContent === void 0 ? void 0 : customContent.value) !== null && _c !== void 0 ? _c : valueFormatter(itemY),
+            marker: getSeriesMarker(item.point.series),
+            subItems: customContent === null || customContent === void 0 ? void 0 : customContent.subItems,
+            expandableId: (customContent === null || customContent === void 0 ? void 0 : customContent.expandable) ? item.point.series.name : undefined,
+            highlighted: item.point.x === (point === null || point === void 0 ? void 0 : point.x) && item.point.y === (point === null || point === void 0 ? void 0 : point.y),
+            description: (customContent === null || customContent === void 0 ? void 0 : customContent.description) === undefined && item.errorRanges.length ? (_jsx(_Fragment, { children: item.errorRanges.map((errorBarPoint, index) => {
+                    var _a, _b;
+                    return (_jsxs("div", { className: styles["error-range"], children: [_jsx("span", { children: errorBarPoint.series.userOptions.name ? errorBarPoint.series.userOptions.name : "" }), _jsxs("span", { children: [valueFormatter((_a = errorBarPoint.options.low) !== null && _a !== void 0 ? _a : 0), " - ", valueFormatter((_b = errorBarPoint.options.high) !== null && _b !== void 0 ? _b : 0)] })] }, index));
+                }) })) : (customContent === null || customContent === void 0 ? void 0 : customContent.description),
+        };
+    });
+    // We only support cartesian charts with a single x axis.
+    const titleFormatter = getFormatter(chart.xAxis[0]);
+    const slotRenderProps = { x, items: matchedItems };
+    return {
+        header: (_b = (_a = renderers.header) === null || _a === void 0 ? void 0 : _a.call(renderers, slotRenderProps)) !== null && _b !== void 0 ? _b : titleFormatter(x),
+        body: (_d = (_c = renderers.body) === null || _c === void 0 ? void 0 : _c.call(renderers, slotRenderProps)) !== null && _d !== void 0 ? _d : (_jsx(ChartSeriesDetails, { details: detailItems, expandedSeries: expandedSeries[x], setExpandedState: (id, isExpanded) => {
+                setExpandedSeries((oldState) => {
+                    const expandedSeriesInCurrentCoordinate = new Set(oldState[x]);
+                    if (isExpanded) {
+                        expandedSeriesInCurrentCoordinate.add(id);
+                    }
+                    else {
+                        expandedSeriesInCurrentCoordinate.delete(id);
+                    }
+                    return { ...oldState, [x]: expandedSeriesInCurrentCoordinate };
+                });
+            } })),
+        footer: (_e = renderers.footer) === null || _e === void 0 ? void 0 : _e.call(renderers, slotRenderProps),
+    };
+}
+function getTooltipContentPie(api, { point, renderers = {} }) {
+    var _a, _b, _c, _d, _e, _f;
+    const tooltipDetails = { x: point.x, items: [{ point, errorRanges: [] }] };
+    return {
+        header: (_b = (_a = renderers.header) === null || _a === void 0 ? void 0 : _a.call(renderers, tooltipDetails)) !== null && _b !== void 0 ? _b : (_jsxs("div", { className: styles["tooltip-default-header"], children: [api.renderMarker(getSeriesMarkerType(point.series), getPointColor(point)), _jsx(Box, { variant: "span", fontWeight: "bold", children: point.name })] })),
+        body: (_d = (_c = renderers.body) === null || _c === void 0 ? void 0 : _c.call(renderers, tooltipDetails)) !== null && _d !== void 0 ? _d : (renderers.details ? (_jsx(ChartSeriesDetails, { details: renderers.details({ point }), compactList: true })) : (
+        // We expect all pie chart segments to have defined y values. We use y=0 as fallback
+        // because the property is optional in Highcharts types.
+        _jsx(ChartSeriesDetails, { details: [{ key: point.series.name, value: (_e = point.y) !== null && _e !== void 0 ? _e : 0 }] }))),
+        footer: (_f = renderers.footer) === null || _f === void 0 ? void 0 : _f.call(renderers, tooltipDetails),
+    };
+}
+function findTooltipSeriesItems(series, group) {
+    const seriesOrder = series.reduce((d, s, i) => d.set(s, i), new Map());
+    const getSeriesIndex = (s) => { var _a; return (_a = seriesOrder.get(s)) !== null && _a !== void 0 ? _a : -1; };
+    const seriesErrors = new Map();
+    const matchedSeries = new Set();
+    const matchedItems = [];
+    for (const point of group) {
+        // We only support errorbar series that are linked to other series. In tooltip content we add
+        // linked error bars to series detail slot.
+        if (point.series.type === "errorbar") {
+            if (point.series.linkedParent) {
+                addError(getSeriesId(point.series.linkedParent), point);
+            }
+            else {
+                warnOnce("chart-components", 'The `linkedTo` property of "errorbar" series is missing, or points to a series that does not exist.');
+            }
+        }
+        else {
+            addMatchedPoints(point);
+        }
+    }
+    function addError(seriesId, errorPoint) {
+        var _a;
+        if (errorPoint.options.low !== undefined && errorPoint.options.high !== undefined) {
+            const errorRanges = (_a = seriesErrors.get(seriesId)) !== null && _a !== void 0 ? _a : [];
+            errorRanges.push(errorPoint);
+            seriesErrors.set(seriesId, errorRanges);
+        }
+    }
+    function addMatchedPoints(point) {
+        if (!matchedSeries.has(point.series)) {
+            matchedSeries.add(point.series);
+            if (isXThreshold(point.series)) {
+                matchedItems.push({ point, errorRanges: [] });
+            }
+            else {
+                point.series.data
+                    .filter((d) => d.x === point.x)
+                    .sort((a, b) => { var _a, _b; return ((_a = a.y) !== null && _a !== void 0 ? _a : 0) - ((_b = b.y) !== null && _b !== void 0 ? _b : 0); })
+                    .forEach((point) => matchedItems.push({ point, errorRanges: [] }));
+            }
+        }
+    }
+    return (matchedItems
+        // We sort matched items by series order. If there are multiple items that belong to the same series, we sort them by value.
+        .sort((i1, i2) => {
+        var _a, _b;
+        const s1 = getSeriesIndex(i1.point.series) - getSeriesIndex(i2.point.series);
+        return s1 || ((_a = i1.point.y) !== null && _a !== void 0 ? _a : 0) - ((_b = i2.point.y) !== null && _b !== void 0 ? _b : 0);
+    })
+        // For each series item we add linked error ranges, sorted by their respective series indices.
+        .map((item) => {
+        var _a;
+        const errorRanges = (_a = seriesErrors.get(getSeriesId(item.point.series))) !== null && _a !== void 0 ? _a : [];
+        const sortedErrorRanges = errorRanges.sort((i1, i2) => getSeriesIndex(i1.series) - getSeriesIndex(i2.series));
+        return { ...item, errorRanges: sortedErrorRanges };
+    }));
+}
+//# sourceMappingURL=core-tooltip.js.map

package/core/components/core-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-tooltip.js","sourceRoot":"","sources":["../../../../src/core/components/core-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useState } from \"react\";\n\nimport { warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Box from \"@cloudscape-design/components/box\";\nimport { InternalChartTooltip } from \"@cloudscape-design/components/internal/do-not-use/chart-tooltip\";\nimport LiveRegion from \"@cloudscape-design/components/live-region\";\n\nimport ChartSeriesDetails, { ChartSeriesDetailItem } from \"../../internal/components/series-details\";\nimport { useSelector } from \"../../internal/utils/async-store\";\nimport { getChartSeries } from \"../../internal/utils/chart-series\";\nimport { ChartAPI } from \"../chart-api\";\nimport { getFormatter } from \"../formatters\";\nimport { BaseI18nStrings, CoreChartProps } from \"../interfaces\";\nimport { getPointColor, getSeriesColor, getSeriesId, getSeriesMarkerType, isXThreshold } from \"../utils\";\n\nimport styles from \"../styles.css.js\";\n\nconst MIN_VISIBLE_BLOCK_SIZE = 200;\n\ntype ExpandedSeriesState = Record<string, Set<string>>;\n\ninterface ExpandedSeriesStateProps {\n  expandedSeries: ExpandedSeriesState;\n  setExpandedSeries: (cb: (state: ExpandedSeriesState) => ExpandedSeriesState) => void;\n}\n\ninterface RenderedTooltipContent {\n  header: React.ReactNode;\n  body: React.ReactNode;\n  footer: React.ReactNode;\n}\n\ninterface MatchedItem {\n  point: Highcharts.Point;\n  errorRanges: Highcharts.Point[];\n}\n\nexport function ChartTooltip({\n  placement = \"target\",\n  size,\n  getTooltipContent: getTooltipContentOverrides,\n  api,\n  i18nStrings,\n}: CoreChartProps.TooltipOptions & {\n  i18nStrings?: BaseI18nStrings;\n  getTooltipContent?: CoreChartProps.GetTooltipContent;\n  api: ChartAPI;\n}) {\n  const [expandedSeries, setExpandedSeries] = useState<ExpandedSeriesState>({});\n  const tooltip = useSelector(api.tooltipStore, (s) => s);\n  if (!tooltip.visible || tooltip.group.length === 0) {\n    return null;\n  }\n  const chart = tooltip.group[0]?.series.chart;\n  const renderers = getTooltipContentOverrides?.({ point: tooltip.point, group: tooltip.group });\n  const getTrack = placement === \"target\" ? api.getTargetTrack : api.getGroupTrack;\n  const position = (() => {\n    if (placement === \"target\" || placement === \"middle\") {\n      return !chart.inverted ? \"right\" : \"bottom\";\n    } else {\n      return !chart.inverted ? \"bottom\" : \"right\";\n    }\n  })();\n  const content = getTooltipContent(api, {\n    renderers,\n    point: tooltip.point,\n    group: tooltip.group,\n    expandedSeries,\n    setExpandedSeries,\n  });\n  if (!content) {\n    return null;\n  }\n  return (\n    <InternalChartTooltip\n      getTrack={getTrack}\n      trackKey={getTrackKey(tooltip.point, tooltip.group)}\n      container={null}\n      dismissButton={tooltip.pinned}\n      dismissAriaLabel={i18nStrings?.detailPopoverDismissAriaLabel}\n      onDismiss={api.onDismissTooltip}\n      onMouseEnter={api.onMouseEnterTooltip}\n      onMouseLeave={api.onMouseLeaveTooltip}\n      title={content.header}\n      footer={\n        content.footer ? (\n          <>\n            <hr aria-hidden={true} />\n            {content.footer}\n          </>\n        ) : null\n      }\n      size={size}\n      position={position}\n      minVisibleBlockSize={MIN_VISIBLE_BLOCK_SIZE}\n    >\n      <LiveRegion>{content.body}</LiveRegion>\n    </InternalChartTooltip>\n  );\n}\n\nfunction getTrackKey(point: null | Highcharts.Point, group: readonly Highcharts.Point[]) {\n  const pointId = point && (point.options.id || point.options.name);\n  if (point && pointId) {\n    return `p-${pointId}-${point.x}-${point.y}`;\n  }\n  if (point) {\n    return `p-${point.x}-${point.y}`;\n  }\n  return `g_${group.length}_${group[0].x}`;\n}\n\nfunction getTooltipContent(\n  api: ChartAPI,\n  props: CoreChartProps.GetTooltipContentProps & {\n    renderers?: CoreChartProps.TooltipContentRenderer;\n  } & ExpandedSeriesStateProps,\n): null | RenderedTooltipContent {\n  if (props.point && props.point.series.type === \"pie\") {\n    return getTooltipContentPie(api, { ...props, point: props.point });\n  } else if (props.group.length > 0 && props.group[0].series.type !== \"pie\") {\n    return getTooltipContentCartesian(api, props);\n  } else {\n    return null;\n  }\n}\n\nfunction getTooltipContentCartesian(\n  api: ChartAPI,\n  {\n    point,\n    group,\n    expandedSeries,\n    renderers = {},\n    setExpandedSeries,\n  }: CoreChartProps.GetTooltipContentProps & {\n    renderers?: CoreChartProps.TooltipContentRenderer;\n  } & ExpandedSeriesStateProps,\n): RenderedTooltipContent {\n  // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group.\n  // By design, every point of the group has the same x value.\n  const x = group[0].x;\n  const chart = group[0].series.chart;\n  const getSeriesMarker = (series: Highcharts.Series) =>\n    api.renderMarker(getSeriesMarkerType(series), getSeriesColor(series), true);\n  const matchedItems = findTooltipSeriesItems(getChartSeries(chart.series), group);\n  const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {\n    const valueFormatter = getFormatter(item.point.series.yAxis);\n    const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);\n    const customContent = renderers.point ? renderers.point({ item }) : undefined;\n    return {\n      key: customContent?.key ?? item.point.series.name,\n      value: customContent?.value ?? valueFormatter(itemY),\n      marker: getSeriesMarker(item.point.series),\n      subItems: customContent?.subItems,\n      expandableId: customContent?.expandable ? item.point.series.name : undefined,\n      highlighted: item.point.x === point?.x && item.point.y === point?.y,\n      description:\n        customContent?.description === undefined && item.errorRanges.length ? (\n          <>\n            {item.errorRanges.map((errorBarPoint, index) => (\n              <div key={index} className={styles[\"error-range\"]}>\n                <span>{errorBarPoint.series.userOptions.name ? errorBarPoint.series.userOptions.name : \"\"}</span>\n                <span>\n                  {valueFormatter(errorBarPoint.options.low ?? 0)} - {valueFormatter(errorBarPoint.options.high ?? 0)}\n                </span>\n              </div>\n            ))}\n          </>\n        ) : (\n          customContent?.description\n        ),\n    };\n  });\n  // We only support cartesian charts with a single x axis.\n  const titleFormatter = getFormatter(chart.xAxis[0]);\n  const slotRenderProps: CoreChartProps.TooltipSlotProps = { x, items: matchedItems };\n  return {\n    header: renderers.header?.(slotRenderProps) ?? titleFormatter(x),\n    body: renderers.body?.(slotRenderProps) ?? (\n      <ChartSeriesDetails\n        details={detailItems}\n        expandedSeries={expandedSeries[x]}\n        setExpandedState={(id, isExpanded) => {\n          setExpandedSeries((oldState) => {\n            const expandedSeriesInCurrentCoordinate = new Set(oldState[x]);\n            if (isExpanded) {\n              expandedSeriesInCurrentCoordinate.add(id);\n            } else {\n              expandedSeriesInCurrentCoordinate.delete(id);\n            }\n            return { ...oldState, [x]: expandedSeriesInCurrentCoordinate };\n          });\n        }}\n      />\n    ),\n    footer: renderers.footer?.(slotRenderProps),\n  };\n}\n\nfunction getTooltipContentPie(\n  api: ChartAPI,\n  { point, renderers = {} }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer },\n): RenderedTooltipContent {\n  const tooltipDetails: CoreChartProps.TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }] };\n  return {\n    header: renderers.header?.(tooltipDetails) ?? (\n      <div className={styles[\"tooltip-default-header\"]}>\n        {api.renderMarker(getSeriesMarkerType(point.series), getPointColor(point))}\n        <Box variant=\"span\" fontWeight=\"bold\">\n          {point.name}\n        </Box>\n      </div>\n    ),\n    body:\n      renderers.body?.(tooltipDetails) ??\n      (renderers.details ? (\n        <ChartSeriesDetails details={renderers.details({ point })} compactList={true} />\n      ) : (\n        // We expect all pie chart segments to have defined y values. We use y=0 as fallback\n        // because the property is optional in Highcharts types.\n        <ChartSeriesDetails details={[{ key: point.series.name, value: point.y ?? 0 }]} />\n      )),\n    footer: renderers.footer?.(tooltipDetails),\n  };\n}\n\nfunction findTooltipSeriesItems(\n  series: readonly Highcharts.Series[],\n  group: readonly Highcharts.Point[],\n): MatchedItem[] {\n  const seriesOrder = series.reduce((d, s, i) => d.set(s, i), new Map<Highcharts.Series, number>());\n  const getSeriesIndex = (s: Highcharts.Series) => seriesOrder.get(s) ?? -1;\n  const seriesErrors = new Map<string, Highcharts.Point[]>();\n  const matchedSeries = new Set<Highcharts.Series>();\n  const matchedItems: MatchedItem[] = [];\n  for (const point of group) {\n    // We only support errorbar series that are linked to other series. In tooltip content we add\n    // linked error bars to series detail slot.\n    if (point.series.type === \"errorbar\") {\n      if (point.series.linkedParent) {\n        addError(getSeriesId(point.series.linkedParent), point);\n      } else {\n        warnOnce(\n          \"chart-components\",\n          'The `linkedTo` property of \"errorbar\" series is missing, or points to a series that does not exist.',\n        );\n      }\n    } else {\n      addMatchedPoints(point);\n    }\n  }\n  function addError(seriesId: string, errorPoint: Highcharts.Point) {\n    if (errorPoint.options.low !== undefined && errorPoint.options.high !== undefined) {\n      const errorRanges = seriesErrors.get(seriesId) ?? [];\n      errorRanges.push(errorPoint);\n      seriesErrors.set(seriesId, errorRanges);\n    }\n  }\n  function addMatchedPoints(point: Highcharts.Point) {\n    if (!matchedSeries.has(point.series)) {\n      matchedSeries.add(point.series);\n      if (isXThreshold(point.series)) {\n        matchedItems.push({ point, errorRanges: [] });\n      } else {\n        point.series.data\n          .filter((d) => d.x === point.x)\n          .sort((a, b) => (a.y ?? 0) - (b.y ?? 0))\n          .forEach((point) => matchedItems.push({ point, errorRanges: [] }));\n      }\n    }\n  }\n  return (\n    matchedItems\n      // We sort matched items by series order. If there are multiple items that belong to the same series, we sort them by value.\n      .sort((i1, i2) => {\n        const s1 = getSeriesIndex(i1.point.series) - getSeriesIndex(i2.point.series);\n        return s1 || (i1.point.y ?? 0) - (i2.point.y ?? 0);\n      })\n      // For each series item we add linked error ranges, sorted by their respective series indices.\n      .map((item) => {\n        const errorRanges = seriesErrors.get(getSeriesId(item.point.series)) ?? [];\n        const sortedErrorRanges = errorRanges.sort((i1, i2) => getSeriesIndex(i1.series) - getSeriesIndex(i2.series));\n        return { ...item, errorRanges: sortedErrorRanges };\n      })\n  );\n}\n"]}

package/core/components/core-vertical-axis-title.d.ts

@@ -0,0 +1,5 @@
+import { ChartAPI } from "../chart-api";
+export declare function VerticalAxisTitle({ api, inverted }: {
+    api: ChartAPI;
+    inverted: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

package/core/components/core-vertical-axis-title.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from "clsx";
+import { useSelector } from "../../internal/utils/async-store";
+import styles from "../styles.css.js";
+import testClasses from "../test-classes/styles.css.js";
+export function VerticalAxisTitle({ api, inverted }) {
+    const titles = useSelector(api.axisTitlesStore, (s) => s.verticalAxesTitles).filter(Boolean);
+    if (titles.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: clsx(testClasses["axis-vertical-title"], inverted ? testClasses["axis-x-title"] : testClasses["axis-y-title"], styles["axis-vertical-title"]), "aria-hidden": true, children: titles.map((text, index) => (_jsx("span", { className: styles["axis-vertical-title-item"], children: text }, index))) }));
+}
+//# sourceMappingURL=core-vertical-axis-title.js.map

package/core/components/core-vertical-axis-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-vertical-axis-title.js","sourceRoot":"","sources":["../../../../src/core/components/core-vertical-axis-title.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAG/D,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,MAAM,UAAU,iBAAiB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAwC;IACvF,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7F,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CACb,WAAW,CAAC,qBAAqB,CAAC,EAClC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,EACpE,MAAM,CAAC,qBAAqB,CAAC,CAC9B,iBAGY,IAAI,YAEhB,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,eAAkB,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,YAC5D,IAAI,IADI,KAAK,CAET,CACR,CAAC,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport clsx from \"clsx\";\n\nimport { useSelector } from \"../../internal/utils/async-store\";\nimport { ChartAPI } from \"../chart-api\";\n\nimport styles from \"../styles.css.js\";\nimport testClasses from \"../test-classes/styles.css.js\";\n\nexport function VerticalAxisTitle({ api, inverted }: { api: ChartAPI; inverted: boolean }) {\n  const titles = useSelector(api.axisTitlesStore, (s) => s.verticalAxesTitles).filter(Boolean);\n  if (titles.length === 0) {\n    return null;\n  }\n  return (\n    <div\n      className={clsx(\n        testClasses[\"axis-vertical-title\"],\n        inverted ? testClasses[\"axis-x-title\"] : testClasses[\"axis-y-title\"],\n        styles[\"axis-vertical-title\"],\n      )}\n      // The vertical axis label is still rendered by Highcharts and accessible by screen-readers, yet\n      // not visible on the screen. We make this one ARIA-hidden to avoid duplication.\n      aria-hidden={true}\n    >\n      {titles.map((text, index) => (\n        <span key={index} className={styles[\"axis-vertical-title-item\"]}>\n          {text}\n        </span>\n      ))}\n    </div>\n  );\n}\n"]}

package/core/formatters.d.ts

@@ -0,0 +1,2 @@
+import type Highcharts from "highcharts";
+export declare function getFormatter(axis?: Highcharts.Axis): (value: unknown) => string;

package/core/formatters.js

@@ -0,0 +1,113 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// Takes value formatter from the axis options (InternalXAxisOptions.valueFormatter or InternalYAxisOptions.valueFormatter),
+// or provides a default formatter for numeric and datetime values.
+export function getFormatter(axis) {
+    return (value) => {
+        var _a, _b;
+        if (typeof value === "string") {
+            return value;
+        }
+        if (typeof value !== "number") {
+            return "";
+        }
+        if (!axis) {
+            return `${value}`;
+        }
+        if (axis.options.type === "category") {
+            return (_b = (_a = axis.categories) === null || _a === void 0 ? void 0 : _a[value]) !== null && _b !== void 0 ? _b : value.toString();
+        }
+        const axisOptions = axis.userOptions;
+        if (axisOptions.valueFormatter) {
+            return axisOptions.valueFormatter(value);
+        }
+        if (axis.options.type === "datetime") {
+            const extremes = axis.getExtremes();
+            const formatter = getDefaultDatetimeFormatter([extremes.dataMin, extremes.dataMax]);
+            return formatter(value);
+        }
+        return numberFormatter(value);
+    };
+}
+function getDefaultDatetimeFormatter(extremes) {
+    const second = 1000;
+    const minute = 60 * second;
+    const hour = 60 * minute;
+    const day = 24 * hour;
+    const month = 30 * day;
+    const year = 365 * day;
+    if (extremes[1] - extremes[0] > 5 * year) {
+        return yearFormatter;
+    }
+    if (extremes[1] - extremes[0] > 2 * month) {
+        return monthFormatter;
+    }
+    if (extremes[1] - extremes[0] > 3 * day) {
+        return dayFormatter;
+    }
+    if (extremes[1] - extremes[0] > 12 * hour) {
+        return hourFormatter;
+    }
+    if (extremes[1] - extremes[0] > 3 * hour) {
+        return minuteFormatter;
+    }
+    return secondFormatter;
+}
+function yearFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        year: "numeric",
+    });
+}
+function monthFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+    });
+}
+function dayFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+    });
+}
+function hourFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+    });
+}
+function minuteFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+    });
+}
+function secondFormatter(value) {
+    return new Date(value).toLocaleDateString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+    });
+}
+function numberFormatter(value) {
+    const format = (num) => parseFloat(num.toFixed(2)).toString(); // trims unnecessary decimals
+    const absValue = Math.abs(value);
+    if (absValue === 0) {
+        return "0";
+    }
+    if (absValue < 0.01) {
+        return value.toExponential(0);
+    }
+    if (absValue >= 1e9) {
+        return format(value / 1e9) + "G";
+    }
+    if (absValue >= 1e6) {
+        return format(value / 1e6) + "M";
+    }
+    if (absValue >= 1e3) {
+        return format(value / 1e3) + "K";
+    }
+    return format(value);
+}
+//# sourceMappingURL=formatters.js.map

package/core/formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../../src/core/formatters.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport { CoreChartProps } from \"./interfaces\";\n\n// Takes value formatter from the axis options (InternalXAxisOptions.valueFormatter or InternalYAxisOptions.valueFormatter),\n// or provides a default formatter for numeric and datetime values.\nexport function getFormatter(axis?: Highcharts.Axis) {\n  return (value: unknown): string => {\n    if (typeof value === \"string\") {\n      return value;\n    }\n    if (typeof value !== \"number\") {\n      return \"\";\n    }\n    if (!axis) {\n      return `${value}`;\n    }\n    if (axis.options.type === \"category\") {\n      return axis.categories?.[value] ?? value.toString();\n    }\n    const axisOptions = axis.userOptions as CoreChartProps.XAxisOptions | CoreChartProps.YAxisOptions;\n    if (axisOptions.valueFormatter) {\n      return axisOptions.valueFormatter(value);\n    }\n    if (axis.options.type === \"datetime\") {\n      const extremes = axis.getExtremes();\n      const formatter = getDefaultDatetimeFormatter([extremes.dataMin, extremes.dataMax]);\n      return formatter(value);\n    }\n    return numberFormatter(value);\n  };\n}\n\nfunction getDefaultDatetimeFormatter(extremes: [number, number]): (value: number) => string {\n  const second = 1000;\n  const minute = 60 * second;\n  const hour = 60 * minute;\n  const day = 24 * hour;\n  const month = 30 * day;\n  const year = 365 * day;\n  if (extremes[1] - extremes[0] > 5 * year) {\n    return yearFormatter;\n  }\n  if (extremes[1] - extremes[0] > 2 * month) {\n    return monthFormatter;\n  }\n  if (extremes[1] - extremes[0] > 3 * day) {\n    return dayFormatter;\n  }\n  if (extremes[1] - extremes[0] > 12 * hour) {\n    return hourFormatter;\n  }\n  if (extremes[1] - extremes[0] > 3 * hour) {\n    return minuteFormatter;\n  }\n  return secondFormatter;\n}\n\nfunction yearFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    year: \"numeric\",\n  });\n}\n\nfunction monthFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    year: \"numeric\",\n    month: \"short\",\n  });\n}\n\nfunction dayFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n  });\n}\n\nfunction hourFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n  });\n}\n\nfunction minuteFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n}\n\nfunction secondFormatter(value: number) {\n  return new Date(value).toLocaleDateString(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"numeric\",\n    second: \"numeric\",\n  });\n}\n\nfunction numberFormatter(value: number): string {\n  const format = (num: number) => parseFloat(num.toFixed(2)).toString(); // trims unnecessary decimals\n\n  const absValue = Math.abs(value);\n\n  if (absValue === 0) {\n    return \"0\";\n  }\n\n  if (absValue < 0.01) {\n    return value.toExponential(0);\n  }\n\n  if (absValue >= 1e9) {\n    return format(value / 1e9) + \"G\";\n  }\n\n  if (absValue >= 1e6) {\n    return format(value / 1e6) + \"M\";\n  }\n\n  if (absValue >= 1e3) {\n    return format(value / 1e3) + \"K\";\n  }\n\n  return format(value);\n}\n"]}

package/core/i18n-utils.d.ts

@@ -0,0 +1,21 @@
+import { CoreChartProps } from "./interfaces";
+export interface ChartLabels {
+    chartLabel?: string;
+    chartDescription?: string;
+    chartContainerLabel?: string;
+    chartXAxisLabel?: string;
+    chartYAxisLabel?: string;
+    chartSegmentLabel?: string;
+}
+export declare function useChartI18n({ ariaLabel, ariaDescription, i18nStrings, }: {
+    ariaLabel?: string;
+    ariaDescription?: string;
+    i18nStrings?: CoreChartProps.I18nStrings;
+}): {
+    chartLabel: string | undefined;
+    chartDescription: string | undefined;
+    chartContainerLabel: string | undefined;
+    chartXAxisLabel: string | undefined;
+    chartYAxisLabel: string | undefined;
+    chartSegmentLabel: string | undefined;
+};

package/core/i18n-utils.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
+export function useChartI18n({ ariaLabel, ariaDescription, i18nStrings, }) {
+    const i18n = useInternalI18n("[charts]");
+    const i18nPie = useInternalI18n("pie-chart");
+    return {
+        chartLabel: ariaLabel,
+        chartDescription: ariaDescription,
+        // We reuse existing translations as passing for now, but it is possible to introduce new i18n strings that
+        // are parametrized with axes names, and more.
+        chartContainerLabel: i18n("i18nStrings.chartAriaRoleDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.chartRoleDescription),
+        chartXAxisLabel: i18n("i18nStrings.xAxisAriaRoleDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.xAxisRoleDescription),
+        chartYAxisLabel: i18n("i18nStrings.yAxisAriaRoleDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.yAxisRoleDescription),
+        chartSegmentLabel: i18nPie("i18nStrings.segmentAriaRoleDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.segmentRoleDescription),
+    };
+}
+//# sourceMappingURL=i18n-utils.js.map

package/core/i18n-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-utils.js","sourceRoot":"","sources":["../../../src/core/i18n-utils.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,wDAAwD,CAAC;AAazF,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,eAAe,EACf,WAAW,GAKZ;IACC,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAC7C,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,gBAAgB,EAAE,eAAe;QACjC,2GAA2G;QAC3G,8CAA8C;QAC9C,mBAAmB,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC;QACpG,eAAe,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC;QAChG,eAAe,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC;QAChG,iBAAiB,EAAE,OAAO,CAAC,wCAAwC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sBAAsB,CAAC;KAC1G,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useInternalI18n } from \"@cloudscape-design/components/internal/do-not-use/i18n\";\n\nimport { CoreChartProps } from \"./interfaces\";\n\nexport interface ChartLabels {\n  chartLabel?: string;\n  chartDescription?: string;\n  chartContainerLabel?: string;\n  chartXAxisLabel?: string;\n  chartYAxisLabel?: string;\n  chartSegmentLabel?: string;\n}\n\nexport function useChartI18n({\n  ariaLabel,\n  ariaDescription,\n  i18nStrings,\n}: {\n  ariaLabel?: string;\n  ariaDescription?: string;\n  i18nStrings?: CoreChartProps.I18nStrings;\n}) {\n  const i18n = useInternalI18n(\"[charts]\");\n  const i18nPie = useInternalI18n(\"pie-chart\");\n  return {\n    chartLabel: ariaLabel,\n    chartDescription: ariaDescription,\n    // We reuse existing translations as passing for now, but it is possible to introduce new i18n strings that\n    // are parametrized with axes names, and more.\n    chartContainerLabel: i18n(\"i18nStrings.chartAriaRoleDescription\", i18nStrings?.chartRoleDescription),\n    chartXAxisLabel: i18n(\"i18nStrings.xAxisAriaRoleDescription\", i18nStrings?.xAxisRoleDescription),\n    chartYAxisLabel: i18n(\"i18nStrings.yAxisAriaRoleDescription\", i18nStrings?.yAxisRoleDescription),\n    chartSegmentLabel: i18nPie(\"i18nStrings.segmentAriaRoleDescription\", i18nStrings?.segmentRoleDescription),\n  };\n}\n"]}