@cloudscape-design/chart-components 1.0.0

package/core/chart-api/chart-extra-pointer.d.ts

@@ -0,0 +1,33 @@
+import type Highcharts from "highcharts";
+import { ChartExtraContext } from "./chart-extra-context";
+export interface ChartExtraPointerHandlers {
+    onPointHover(point: Highcharts.Point): void;
+    onGroupHover(group: Highcharts.Point[]): void;
+    onHoverLost(): void;
+    onPointClick(point: Highcharts.Point): void;
+    onGroupClick(group: Highcharts.Point[]): void;
+}
+export declare class ChartExtraPointer {
+    private context;
+    private handlers;
+    private hoveredPoint;
+    private hoveredGroup;
+    private tooltipHovered;
+    private hoverLostCall;
+    constructor(context: ChartExtraContext, handlers: ChartExtraPointerHandlers);
+    onChartLoad: (chart: Highcharts.Chart) => void;
+    onChartDestroy: () => void;
+    onSeriesPointMouseOver: (point: Highcharts.Point) => void;
+    onSeriesPointMouseOut: () => void;
+    onMouseEnterTooltip: () => void;
+    onMouseLeaveTooltip: () => void;
+    private onChartMousemove;
+    private onChartMouseout;
+    onChartClick: (point: null | Highcharts.Point) => void;
+    onSeriesPointClick: (point: Highcharts.Point) => void;
+    private onClick;
+    private setHoveredPoint;
+    private setHoveredGroup;
+    private clearHover;
+    private applyCursorStyle;
+}

package/core/chart-api/chart-extra-pointer.js

@@ -0,0 +1,173 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getChartSeries } from "../../internal/utils/chart-series";
+import { DebouncedCall } from "../../internal/utils/utils";
+import { isPointVisible } from "../utils";
+const HOVER_LOST_DELAY = 25;
+// Chart helper that implements pointer events (click and hover).
+export class ChartExtraPointer {
+    constructor(context, handlers) {
+        this.hoveredPoint = null;
+        this.hoveredGroup = null;
+        this.tooltipHovered = false;
+        this.hoverLostCall = new DebouncedCall();
+        this.onChartLoad = (chart) => {
+            chart.container.addEventListener("mousemove", this.onChartMousemove);
+            chart.container.addEventListener("mouseout", this.onChartMouseout);
+        };
+        this.onChartDestroy = () => {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.context.chartOrNull) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.removeEventListener("mousemove", this.onChartMousemove);
+            (_d = (_c = this.context.chartOrNull) === null || _c === void 0 ? void 0 : _c.container) === null || _d === void 0 ? void 0 : _d.removeEventListener("mouseout", this.onChartMouseout);
+        };
+        // This event is triggered by Highcharts when the cursor is over a Highcharts point. We leave this to
+        // Highcharts because it includes computation of complex shape intersections, such as pie chart segments.
+        // When triggered, we set the given point as hovered, and it takes precedence over hovered groups.
+        this.onSeriesPointMouseOver = (point) => {
+            this.setHoveredPoint(point);
+        };
+        // When the pointer leaves a point, it does not necessarily mean the hover state needs to be cleared, as another
+        // point or group can be hovered next. If it does not happen, the on-hover-lost handler is called after a short delay.
+        this.onSeriesPointMouseOut = () => {
+            this.hoveredPoint = null;
+            this.clearHover();
+        };
+        // We clear hover state when the pointer is moved outside the chart, unless it is moved inside the tooltip.
+        // Wo do, hover, clear the point and group hover state so that if the pointer leaves chart from the tooltip,
+        // the on-hover-lost handler is still called.
+        this.onMouseEnterTooltip = () => {
+            this.tooltipHovered = true;
+            this.hoveredPoint = null;
+            this.hoveredGroup = null;
+        };
+        // When the pointer leaves the tooltip it can hover another point or group. If that does not happen,
+        // the on-hover-lost handler is called after a short delay.
+        this.onMouseLeaveTooltip = () => {
+            this.tooltipHovered = false;
+            this.clearHover();
+        };
+        // The mouse-move handler takes all move events inside the chart, and its purpose is to capture hover for groups
+        // of points (those having matching X value in cartesian charts), as this is not directly supported by Highcharts.
+        // Points hovering takes precedence over groups hovering.
+        this.onChartMousemove = (event) => {
+            const chart = this.context.chart();
+            // In pie charts there is no support for groups - only a single point can be hovered at a time.
+            if (getChartSeries(chart.series).some((s) => s.type === "pie")) {
+                return;
+            }
+            // The plotX and plotY are pointer coordinates, normalized against the chart plot.
+            const normalized = chart.pointer.normalize(event);
+            const plotX = normalized.chartX;
+            const plotY = normalized.chartY;
+            const { plotLeft, plotTop, plotWidth, plotHeight } = chart;
+            // We only check for matched groups if the plotX, plotY are within the plot area, where series are rendered.
+            if (plotX >= plotLeft && plotX <= plotLeft + plotWidth && plotY >= plotTop && plotY <= plotTop + plotHeight) {
+                // We match groups by comparing the plotX, plotY against each group rect. If the pointer is within one of
+                // the rects - the group is considered matched. Otherwise, we take the group which is closest to the pointer.
+                // This is done to avoid gaps, when the hover state switches between on and off in a sparsely populated chart,
+                // causing the tooltip to show and hide as the pointer moves.
+                let matchedGroup = [];
+                let minDistance = Number.POSITIVE_INFINITY;
+                for (const { group, rect } of this.context.derived.groupRects) {
+                    const [target, start, end] = chart.inverted
+                        ? [plotY, rect.y, rect.y + rect.height]
+                        : [plotX, rect.x, rect.x + rect.width];
+                    const minTargetDistance = Math.min(Math.abs(start - target), Math.abs(end - target));
+                    if (start <= target && target < end) {
+                        matchedGroup = group;
+                        break;
+                    }
+                    else if (minTargetDistance < minDistance) {
+                        minDistance = minTargetDistance;
+                        matchedGroup = group;
+                    }
+                }
+                this.setHoveredGroup(matchedGroup);
+            }
+            // If the plotX, plotY are outside of the series area (e.g. if the pointer is above axis titles or ticks),
+            // we clear the group hover state and trigger the on-hover-lost after a short delay.
+            else {
+                this.hoveredGroup = null;
+                this.clearHover();
+            }
+        };
+        // This event is triggered when the pointer leaves the chart area. Here, it is technically not necessary to add
+        // a delay before calling the on-hover-lost handler, but it is done for consistency in the UX.
+        this.onChartMouseout = () => {
+            this.hoveredGroup = null;
+            this.clearHover();
+        };
+        // This event is triggered by Highcharts when there is a click inside the chart plot. It might or might not include
+        // the point, hovered immediately before the click.
+        this.onChartClick = (point) => {
+            this.onClick(point);
+        };
+        // This event is triggered by Highcharts when a series point is clicked, it always has a point target.
+        this.onSeriesPointClick = (point) => {
+            this.onClick(point);
+        };
+        // We treat the chart and point clicks the same, but call different handlers depending on the target (null or point).
+        // When the point is not present, we assume the click was done on a group, so we take the group that was hovered before
+        // the click event triggered.
+        // Before calling the on-point-click or on-group-click handlers, we verify if the target point or group are still valid
+        // (visible, and not destroyed by Highcharts).
+        this.onClick = (point) => {
+            var _a, _b;
+            const targetPoint = point !== null && point !== void 0 ? point : (this.hoveredPoint && isPointVisible(this.hoveredPoint) ? this.hoveredPoint : null);
+            if (targetPoint) {
+                this.handlers.onPointClick(targetPoint);
+                return;
+            }
+            const targetGroup = (_b = (_a = this.hoveredGroup) === null || _a === void 0 ? void 0 : _a.filter(isPointVisible)) !== null && _b !== void 0 ? _b : null;
+            if (targetGroup && targetGroup.length > 0) {
+                this.handlers.onGroupClick(targetGroup);
+                return;
+            }
+        };
+        this.setHoveredPoint = (point) => {
+            if (isPointVisible(point)) {
+                this.hoveredPoint = point;
+                this.hoveredGroup = null;
+                this.handlers.onPointHover(point);
+                this.applyCursorStyle();
+            }
+        };
+        this.setHoveredGroup = (group) => {
+            if (!this.hoveredPoint || !isPointVisible(this.hoveredPoint)) {
+                const availablePoints = group.filter(isPointVisible);
+                this.hoveredPoint = null;
+                this.hoveredGroup = availablePoints;
+                this.handlers.onGroupHover(availablePoints);
+                this.applyCursorStyle();
+            }
+        };
+        // The function calls the on-hover-lost handler in a short delay to give time for the hover to
+        // transition from one target to another. Before calling the handler we check if no target
+        // (point, group, or tooltip) is hovered.
+        this.clearHover = () => {
+            this.hoverLostCall.call(() => {
+                if (!this.hoveredPoint && !this.hoveredGroup && !this.tooltipHovered) {
+                    this.handlers.onHoverLost();
+                    this.applyCursorStyle();
+                }
+            }, HOVER_LOST_DELAY);
+        };
+        this.applyCursorStyle = () => {
+            const container = this.context.chart().container;
+            const setCursor = (value) => {
+                if (container && container.style.cursor !== value) {
+                    container.style.cursor = value;
+                }
+            };
+            if (this.hoveredPoint || this.hoveredGroup) {
+                setCursor("pointer");
+            }
+            else {
+                setCursor("default");
+            }
+        };
+        this.context = context;
+        this.handlers = handlers;
+    }
+}
+//# sourceMappingURL=chart-extra-pointer.js.map

package/core/chart-api/chart-extra-pointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-extra-pointer.js","sourceRoot":"","sources":["../../../../src/core/chart-api/chart-extra-pointer.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 { getChartSeries } from \"../../internal/utils/chart-series\";\nimport { DebouncedCall } from \"../../internal/utils/utils\";\nimport { isPointVisible } from \"../utils\";\nimport { ChartExtraContext } from \"./chart-extra-context\";\n\nconst HOVER_LOST_DELAY = 25;\n\nexport interface ChartExtraPointerHandlers {\n  onPointHover(point: Highcharts.Point): void;\n  onGroupHover(group: Highcharts.Point[]): void;\n  onHoverLost(): void;\n  onPointClick(point: Highcharts.Point): void;\n  onGroupClick(group: Highcharts.Point[]): void;\n}\n\n// Chart helper that implements pointer events (click and hover).\nexport class ChartExtraPointer {\n  private context: ChartExtraContext;\n  private handlers: ChartExtraPointerHandlers;\n  private hoveredPoint: null | Highcharts.Point = null;\n  private hoveredGroup: null | Highcharts.Point[] = null;\n  private tooltipHovered = false;\n  private hoverLostCall = new DebouncedCall();\n\n  constructor(context: ChartExtraContext, handlers: ChartExtraPointerHandlers) {\n    this.context = context;\n    this.handlers = handlers;\n  }\n\n  public onChartLoad = (chart: Highcharts.Chart) => {\n    chart.container.addEventListener(\"mousemove\", this.onChartMousemove);\n    chart.container.addEventListener(\"mouseout\", this.onChartMouseout);\n  };\n\n  public onChartDestroy = () => {\n    this.context.chartOrNull?.container?.removeEventListener(\"mousemove\", this.onChartMousemove);\n    this.context.chartOrNull?.container?.removeEventListener(\"mouseout\", this.onChartMouseout);\n  };\n\n  // This event is triggered by Highcharts when the cursor is over a Highcharts point. We leave this to\n  // Highcharts because it includes computation of complex shape intersections, such as pie chart segments.\n  // When triggered, we set the given point as hovered, and it takes precedence over hovered groups.\n  public onSeriesPointMouseOver = (point: Highcharts.Point) => {\n    this.setHoveredPoint(point);\n  };\n\n  // When the pointer leaves a point, it does not necessarily mean the hover state needs to be cleared, as another\n  // point or group can be hovered next. If it does not happen, the on-hover-lost handler is called after a short delay.\n  public onSeriesPointMouseOut = () => {\n    this.hoveredPoint = null;\n    this.clearHover();\n  };\n\n  // We clear hover state when the pointer is moved outside the chart, unless it is moved inside the tooltip.\n  // Wo do, hover, clear the point and group hover state so that if the pointer leaves chart from the tooltip,\n  // the on-hover-lost handler is still called.\n  public onMouseEnterTooltip = () => {\n    this.tooltipHovered = true;\n    this.hoveredPoint = null;\n    this.hoveredGroup = null;\n  };\n\n  // When the pointer leaves the tooltip it can hover another point or group. If that does not happen,\n  // the on-hover-lost handler is called after a short delay.\n  public onMouseLeaveTooltip = () => {\n    this.tooltipHovered = false;\n    this.clearHover();\n  };\n\n  // The mouse-move handler takes all move events inside the chart, and its purpose is to capture hover for groups\n  // of points (those having matching X value in cartesian charts), as this is not directly supported by Highcharts.\n  // Points hovering takes precedence over groups hovering.\n  private onChartMousemove = (event: MouseEvent) => {\n    const chart = this.context.chart();\n    // In pie charts there is no support for groups - only a single point can be hovered at a time.\n    if (getChartSeries(chart.series).some((s) => s.type === \"pie\")) {\n      return;\n    }\n    // The plotX and plotY are pointer coordinates, normalized against the chart plot.\n    const normalized = chart.pointer.normalize(event);\n    const plotX = normalized.chartX;\n    const plotY = normalized.chartY;\n    const { plotLeft, plotTop, plotWidth, plotHeight } = chart;\n    // We only check for matched groups if the plotX, plotY are within the plot area, where series are rendered.\n    if (plotX >= plotLeft && plotX <= plotLeft + plotWidth && plotY >= plotTop && plotY <= plotTop + plotHeight) {\n      // We match groups by comparing the plotX, plotY against each group rect. If the pointer is within one of\n      // the rects - the group is considered matched. Otherwise, we take the group which is closest to the pointer.\n      // This is done to avoid gaps, when the hover state switches between on and off in a sparsely populated chart,\n      // causing the tooltip to show and hide as the pointer moves.\n      let matchedGroup: Highcharts.Point[] = [];\n      let minDistance = Number.POSITIVE_INFINITY;\n      for (const { group, rect } of this.context.derived.groupRects) {\n        const [target, start, end] = chart.inverted\n          ? [plotY, rect.y, rect.y + rect.height]\n          : [plotX, rect.x, rect.x + rect.width];\n        const minTargetDistance = Math.min(Math.abs(start - target), Math.abs(end - target));\n        if (start <= target && target < end) {\n          matchedGroup = group;\n          break;\n        } else if (minTargetDistance < minDistance) {\n          minDistance = minTargetDistance;\n          matchedGroup = group;\n        }\n      }\n      this.setHoveredGroup(matchedGroup);\n    }\n    // If the plotX, plotY are outside of the series area (e.g. if the pointer is above axis titles or ticks),\n    // we clear the group hover state and trigger the on-hover-lost after a short delay.\n    else {\n      this.hoveredGroup = null;\n      this.clearHover();\n    }\n  };\n\n  // This event is triggered when the pointer leaves the chart area. Here, it is technically not necessary to add\n  // a delay before calling the on-hover-lost handler, but it is done for consistency in the UX.\n  private onChartMouseout = () => {\n    this.hoveredGroup = null;\n    this.clearHover();\n  };\n\n  // This event is triggered by Highcharts when there is a click inside the chart plot. It might or might not include\n  // the point, hovered immediately before the click.\n  public onChartClick = (point: null | Highcharts.Point) => {\n    this.onClick(point);\n  };\n\n  // This event is triggered by Highcharts when a series point is clicked, it always has a point target.\n  public onSeriesPointClick = (point: Highcharts.Point) => {\n    this.onClick(point);\n  };\n\n  // We treat the chart and point clicks the same, but call different handlers depending on the target (null or point).\n  // When the point is not present, we assume the click was done on a group, so we take the group that was hovered before\n  // the click event triggered.\n  // Before calling the on-point-click or on-group-click handlers, we verify if the target point or group are still valid\n  // (visible, and not destroyed by Highcharts).\n  private onClick = (point: null | Highcharts.Point) => {\n    const targetPoint = point ?? (this.hoveredPoint && isPointVisible(this.hoveredPoint) ? this.hoveredPoint : null);\n    if (targetPoint) {\n      this.handlers.onPointClick(targetPoint);\n      return;\n    }\n    const targetGroup = this.hoveredGroup?.filter(isPointVisible) ?? null;\n    if (targetGroup && targetGroup.length > 0) {\n      this.handlers.onGroupClick(targetGroup);\n      return;\n    }\n  };\n\n  private setHoveredPoint = (point: Highcharts.Point) => {\n    if (isPointVisible(point)) {\n      this.hoveredPoint = point;\n      this.hoveredGroup = null;\n      this.handlers.onPointHover(point);\n      this.applyCursorStyle();\n    }\n  };\n\n  private setHoveredGroup = (group: Highcharts.Point[]) => {\n    if (!this.hoveredPoint || !isPointVisible(this.hoveredPoint)) {\n      const availablePoints = group.filter(isPointVisible);\n      this.hoveredPoint = null;\n      this.hoveredGroup = availablePoints;\n      this.handlers.onGroupHover(availablePoints);\n      this.applyCursorStyle();\n    }\n  };\n\n  // The function calls the on-hover-lost handler in a short delay to give time for the hover to\n  // transition from one target to another. Before calling the handler we check if no target\n  // (point, group, or tooltip) is hovered.\n  private clearHover = () => {\n    this.hoverLostCall.call(() => {\n      if (!this.hoveredPoint && !this.hoveredGroup && !this.tooltipHovered) {\n        this.handlers.onHoverLost();\n        this.applyCursorStyle();\n      }\n    }, HOVER_LOST_DELAY);\n  };\n\n  private applyCursorStyle = () => {\n    const container = this.context.chart().container;\n    const setCursor = (value: \"pointer\" | \"default\") => {\n      if (container && container.style.cursor !== value) {\n        container.style.cursor = value;\n      }\n    };\n    if (this.hoveredPoint || this.hoveredGroup) {\n      setCursor(\"pointer\");\n    } else {\n      setCursor(\"default\");\n    }\n  };\n}\n"]}

package/core/chart-api/chart-extra-tooltip.d.ts

@@ -0,0 +1,33 @@
+import type Highcharts from "highcharts";
+import AsyncStore from "../../internal/utils/async-store";
+import { ChartExtraContext } from "./chart-extra-context";
+export interface ReactiveTooltipState {
+    visible: boolean;
+    pinned: boolean;
+    point: null | Highcharts.Point;
+    group: readonly Highcharts.Point[];
+}
+export declare class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {
+    private context;
+    tooltipLock: boolean;
+    private tooltipLockCall;
+    private setTooltipLock;
+    private cursor;
+    private targetTrack;
+    private groupTrack;
+    constructor(context: ChartExtraContext);
+    getTargetTrack: () => SVGElement | null;
+    getGroupTrack: () => SVGElement | null;
+    onChartDestroy(): void;
+    showTooltipOnPoint(point: Highcharts.Point, matchingGroup: readonly Highcharts.Point[], ignoreLock?: boolean): void;
+    showTooltipOnGroup(group: readonly Highcharts.Point[], ignoreLock?: boolean): void;
+    hideTooltip(): void;
+    pinTooltip(): void;
+    private setGroupIfDifferent;
+    private onRenderTooltip;
+    private onRenderTooltipCartesian;
+    private onRenderTooltipPie;
+    private onRenderTooltipSolidGauge;
+    private get commonTrackAttrs();
+    private get direction();
+}

package/core/chart-api/chart-extra-tooltip.js

@@ -0,0 +1,209 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from "clsx";
+import { getIsRtl } from "@cloudscape-design/component-toolkit/internal";
+import * as Styles from "../../internal/chart-styles";
+import { renderMarker } from "../../internal/components/series-marker/render-marker";
+import AsyncStore from "../../internal/utils/async-store";
+import { SVGRendererPool, SVGRendererSingle } from "../../internal/utils/renderer-utils";
+import { DebouncedCall, isEqualArrays } from "../../internal/utils/utils";
+import { getGroupRect, getPointRect, getSeriesId, isXThreshold } from "../utils";
+import testClasses from "../test-classes/styles.css.js";
+const TOOLTIP_LAST_DISMISS_DELAY = 250;
+// Chart helper that implements tooltip placement logic and cursors.
+export class ChartExtraTooltip extends AsyncStore {
+    constructor(context) {
+        super({ visible: false, pinned: false, point: null, group: [] });
+        // The tooltip lock is used to prevent tooltip position changes shortly after it was dismissed, to
+        // deny its immediate re-appearance in the spot under where the dismiss button was.
+        this.tooltipLock = false;
+        this.tooltipLockCall = new DebouncedCall();
+        this.setTooltipLock = () => {
+            if (this.get().pinned) {
+                this.tooltipLock = true;
+                this.tooltipLockCall.call(() => (this.tooltipLock = false), TOOLTIP_LAST_DISMISS_DELAY);
+            }
+        };
+        // The cursor is a vertical or horizontal (in inverted charts) line and hollow or filled markers,
+        // shown in cartesian charts on top of the matched group or point.
+        this.cursor = new HighlightCursorCartesian();
+        // The track elements are invisible rectangles, compted for the given target point or group.
+        // The target track is used for the "target" tooltip placement. The group track is used for
+        // the "middle" and "outside" tooltip placement.
+        this.targetTrack = new SVGRendererSingle();
+        this.groupTrack = new SVGRendererSingle();
+        // The targetElement.element can get invalidated by Highcharts, so we cannot use
+        // trackRef.current = targetElement.element as it might get invalidated unexpectedly.
+        // The getTrack function ensures the latest element reference is given on each request.
+        this.getTargetTrack = () => { var _a, _b; return ((_b = (_a = this.targetTrack.element) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null); };
+        this.getGroupTrack = () => { var _a, _b; return ((_b = (_a = this.groupTrack.element) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null); };
+        this.onRenderTooltip = (props) => {
+            var _a, _b;
+            const chartType = (_b = (_a = this.context.chart().series.find((s) => s.type === "pie" || s.type === "solidgauge")) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "cartesian";
+            if (chartType === "pie") {
+                return this.onRenderTooltipPie(props.group[0]);
+            }
+            else if (chartType === "solidgauge") {
+                return this.onRenderTooltipSolidGauge(props.group[0]);
+            }
+            else {
+                return this.onRenderTooltipCartesian(props);
+            }
+        };
+        this.onRenderTooltipCartesian = ({ point, group, }) => {
+            const pointRect = point ? getPointRect(point) : getGroupRect(group.slice(0, 1));
+            const groupRect = getGroupRect(group);
+            // The cursor is not shown when column series are present (a UX decision).
+            const hasColumnSeries = this.context.chart().series.some((s) => s.type === "column");
+            this.cursor.create(groupRect, point, group, !hasColumnSeries);
+            this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });
+            this.groupTrack.rect(this.context.chart().renderer, { ...groupRect, ...this.commonTrackAttrs });
+        };
+        this.onRenderTooltipPie = (point) => {
+            // We only create target track for pie chart as pie chart does not support groups.
+            // It is also expected that only "target" tooltip position is used for pie charts.
+            const pointRect = getPieChartTargetPlacement(point);
+            this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });
+        };
+        this.onRenderTooltipSolidGauge = (point) => {
+            // Solid gauge charts are similar to pie charts in that they have a circular shape
+            // and don't support grouping. We use a similar approach to pie charts.
+            const pointRect = getSolidGaugeTargetPlacement(point);
+            this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });
+        };
+        this.context = context;
+    }
+    onChartDestroy() {
+        this.cursor.destroy();
+        this.targetTrack.destroy();
+        this.groupTrack.destroy();
+    }
+    showTooltipOnPoint(point, matchingGroup, ignoreLock = false) {
+        if (!this.tooltipLock || ignoreLock) {
+            this.set(() => ({ visible: true, pinned: false, point, group: matchingGroup }));
+            this.onRenderTooltip({ point, group: matchingGroup });
+        }
+    }
+    showTooltipOnGroup(group, ignoreLock = false) {
+        if (!this.tooltipLock || ignoreLock) {
+            this.setGroupIfDifferent(group);
+            this.onRenderTooltip({ point: null, group });
+        }
+    }
+    hideTooltip() {
+        this.cursor.hide();
+        this.targetTrack.hide();
+        this.groupTrack.hide();
+        this.setTooltipLock();
+        this.set((prev) => ({ ...prev, visible: false, pinned: false }));
+    }
+    pinTooltip() {
+        if (this.context.settings.tooltipEnabled) {
+            this.set((prev) => ({ ...prev, visible: true, pinned: true }));
+        }
+    }
+    // Avoid re-rendering the tooltip on every cursor position change when hovering over the graph.
+    // Just re-render when the groups are different.
+    setGroupIfDifferent(group) {
+        function isGroupEqual(a, b) {
+            return (a === null || a === void 0 ? void 0 : a.x) === (b === null || b === void 0 ? void 0 : b.x) && (a === null || a === void 0 ? void 0 : a.y) === (b === null || b === void 0 ? void 0 : b.y) && getSeriesId(a === null || a === void 0 ? void 0 : a.series) === getSeriesId(b === null || b === void 0 ? void 0 : b.series);
+        }
+        this.set((prev) => {
+            return isEqualArrays(prev.group, group, isGroupEqual)
+                ? prev
+                : { visible: true, pinned: false, point: null, group };
+        });
+    }
+    get commonTrackAttrs() {
+        return { fill: "transparent", zIndex: -1, style: "pointer-events:none", direction: this.direction };
+    }
+    // We compute the direction from the chart container and then explicitly set it to the track
+    // elements, as otherwise the direction check done for track elements always results to "ltr".
+    get direction() {
+        const isRtl = getIsRtl(this.context.chart().container.parentElement);
+        return isRtl ? "rtl" : "ltr";
+    }
+}
+// A helper class to draw the cursor elements (include cursor line and matched points markers).
+class HighlightCursorCartesian {
+    constructor() {
+        this.lineElement = new SVGRendererSingle();
+        this.markerElementsPool = new SVGRendererPool();
+        this.isPointEligibleForMarker = (point) => {
+            return !isXThreshold(point.series) && point.series.type !== "column" && point.series.type !== "errorbar";
+        };
+    }
+    create(target, point, group, showLine) {
+        var _a;
+        this.hide();
+        const chart = (_a = group[0]) === null || _a === void 0 ? void 0 : _a.series.chart;
+        if (!chart) {
+            return;
+        }
+        if (showLine) {
+            // The cursor line is rendered orthogonally to the x axis (when the chart is inverted, the line is rendered horizontally).
+            // The line is 1px thick, and is rendered through the center of the target's rect.
+            const lineAttrs = chart.inverted
+                ? {
+                    x: chart.plotLeft,
+                    y: chart.plotTop + target.y - target.height - 1,
+                    width: chart.plotWidth,
+                    height: 1,
+                }
+                : {
+                    x: target.x + target.width / 2,
+                    y: chart.plotTop,
+                    width: 1,
+                    height: chart.plotHeight,
+                };
+            this.lineElement.rect(chart.renderer, { ...Styles.cursorLine, ...lineAttrs });
+        }
+        for (const p of group.filter(this.isPointEligibleForMarker)) {
+            if (p.plotX !== undefined && p.plotY !== undefined) {
+                const selected = p === point;
+                const className = clsx(testClasses["highlight-marker"], selected && testClasses["highlight-marker-selected"]);
+                renderMarker(chart, this.markerElementsPool, p, selected, className);
+            }
+        }
+    }
+    hide() {
+        this.lineElement.hide();
+        this.markerElementsPool.hideAll();
+    }
+    destroy() {
+        this.lineElement.destroy();
+        this.markerElementsPool.destroyAll();
+    }
+}
+function getPieChartTargetPlacement(point) {
+    // The pie series segments do not provide plotX, plotY to compute the tooltip placement.
+    // Instead, there is a `tooltipPos` tuple, which is not covered by TS.
+    // See: https://github.com/highcharts/highcharts/issues/23118.
+    if ("tooltipPos" in point && Array.isArray(point.tooltipPos)) {
+        // We use very small but non-zero track size as otherwise it is placed incorrectly in Firefox.
+        return { x: point.tooltipPos[0], y: point.tooltipPos[1], width: 0.1, height: 0.1 };
+    }
+    // We use the alternative, middle, tooltip placement as a fallback, in case the undocumented "tooltipPos"
+    // is no longer available in the point.
+    return getPieMiddlePlacement(point);
+}
+function getPieMiddlePlacement(point) {
+    const chart = point.series.chart;
+    const [relativeX, relativeY, relativeDiameter] = point.series.center;
+    const plotLeft = chart.plotLeft;
+    const plotTop = chart.plotTop;
+    const centerX = plotLeft + (typeof relativeX === "number" ? relativeX : (relativeX / 100) * chart.plotWidth);
+    const centerY = plotTop + (typeof relativeY === "number" ? relativeY : (relativeY / 100) * chart.plotHeight);
+    const radius = (typeof relativeDiameter === "number" ? relativeDiameter : (relativeDiameter / 100) * chart.plotWidth) / 2;
+    return { x: centerX, y: centerY - radius, width: 1, height: 2 * radius };
+}
+function getSolidGaugeTargetPlacement(point) {
+    const chart = point.series.chart;
+    return {
+        x: chart.plotLeft + chart.plotWidth / 2,
+        y: chart.plotTop + chart.plotHeight / 2,
+        width: 0.1,
+        height: 0.1,
+    };
+}
+//# sourceMappingURL=chart-extra-tooltip.js.map

package/core/chart-api/chart-extra-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-extra-tooltip.js","sourceRoot":"","sources":["../../../../src/core/chart-api/chart-extra-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 clsx from \"clsx\";\nimport type Highcharts from \"highcharts\";\n\nimport { getIsRtl } from \"@cloudscape-design/component-toolkit/internal\";\n\nimport * as Styles from \"../../internal/chart-styles\";\nimport { renderMarker } from \"../../internal/components/series-marker/render-marker\";\nimport AsyncStore from \"../../internal/utils/async-store\";\nimport { SVGRendererPool, SVGRendererSingle } from \"../../internal/utils/renderer-utils\";\nimport { DebouncedCall, isEqualArrays } from \"../../internal/utils/utils\";\nimport { Rect } from \"../interfaces\";\nimport { getGroupRect, getPointRect, getSeriesId, isXThreshold } from \"../utils\";\nimport { ChartExtraContext } from \"./chart-extra-context\";\n\nimport testClasses from \"../test-classes/styles.css.js\";\n\nconst TOOLTIP_LAST_DISMISS_DELAY = 250;\n\n// The reactive state is used to propagate updates to the chart tooltip React component. The tooltip\n// content is to be derived from the target point and group.\nexport interface ReactiveTooltipState {\n  visible: boolean;\n  pinned: boolean;\n  point: null | Highcharts.Point;\n  group: readonly Highcharts.Point[];\n}\n\n// Chart helper that implements tooltip placement logic and cursors.\nexport class ChartExtraTooltip extends AsyncStore<ReactiveTooltipState> {\n  private context: ChartExtraContext;\n\n  // The tooltip lock is used to prevent tooltip position changes shortly after it was dismissed, to\n  // deny its immediate re-appearance in the spot under where the dismiss button was.\n  public tooltipLock = false;\n  private tooltipLockCall = new DebouncedCall();\n  private setTooltipLock = () => {\n    if (this.get().pinned) {\n      this.tooltipLock = true;\n      this.tooltipLockCall.call(() => (this.tooltipLock = false), TOOLTIP_LAST_DISMISS_DELAY);\n    }\n  };\n\n  // The cursor is a vertical or horizontal (in inverted charts) line and hollow or filled markers,\n  // shown in cartesian charts on top of the matched group or point.\n  private cursor = new HighlightCursorCartesian();\n  // The track elements are invisible rectangles, compted for the given target point or group.\n  // The target track is used for the \"target\" tooltip placement. The group track is used for\n  // the \"middle\" and \"outside\" tooltip placement.\n  private targetTrack = new SVGRendererSingle();\n  private groupTrack = new SVGRendererSingle();\n\n  constructor(context: ChartExtraContext) {\n    super({ visible: false, pinned: false, point: null, group: [] });\n    this.context = context;\n  }\n\n  // The targetElement.element can get invalidated by Highcharts, so we cannot use\n  // trackRef.current = targetElement.element as it might get invalidated unexpectedly.\n  // The getTrack function ensures the latest element reference is given on each request.\n  public getTargetTrack = () => (this.targetTrack.element?.element ?? null) as null | SVGElement;\n  public getGroupTrack = () => (this.groupTrack.element?.element ?? null) as null | SVGElement;\n\n  public onChartDestroy() {\n    this.cursor.destroy();\n    this.targetTrack.destroy();\n    this.groupTrack.destroy();\n  }\n\n  public showTooltipOnPoint(point: Highcharts.Point, matchingGroup: readonly Highcharts.Point[], ignoreLock = false) {\n    if (!this.tooltipLock || ignoreLock) {\n      this.set(() => ({ visible: true, pinned: false, point, group: matchingGroup }));\n      this.onRenderTooltip({ point, group: matchingGroup });\n    }\n  }\n\n  public showTooltipOnGroup(group: readonly Highcharts.Point[], ignoreLock = false) {\n    if (!this.tooltipLock || ignoreLock) {\n      this.setGroupIfDifferent(group);\n      this.onRenderTooltip({ point: null, group });\n    }\n  }\n\n  public hideTooltip() {\n    this.cursor.hide();\n    this.targetTrack.hide();\n    this.groupTrack.hide();\n    this.setTooltipLock();\n    this.set((prev) => ({ ...prev, visible: false, pinned: false }));\n  }\n\n  public pinTooltip() {\n    if (this.context.settings.tooltipEnabled) {\n      this.set((prev) => ({ ...prev, visible: true, pinned: true }));\n    }\n  }\n\n  // Avoid re-rendering the tooltip on every cursor position change when hovering over the graph.\n  // Just re-render when the groups are different.\n  private setGroupIfDifferent(group: readonly Highcharts.Point[]) {\n    function isGroupEqual(a: Highcharts.Point, b: Highcharts.Point) {\n      return a?.x === b?.x && a?.y === b?.y && getSeriesId(a?.series) === getSeriesId(b?.series);\n    }\n\n    this.set((prev) => {\n      return isEqualArrays(prev.group, group, isGroupEqual)\n        ? prev\n        : { visible: true, pinned: false, point: null, group };\n    });\n  }\n\n  private onRenderTooltip = (props: { point: null | Highcharts.Point; group: readonly Highcharts.Point[] }) => {\n    const chartType =\n      this.context.chart().series.find((s) => s.type === \"pie\" || s.type === \"solidgauge\")?.type ?? \"cartesian\";\n    if (chartType === \"pie\") {\n      return this.onRenderTooltipPie(props.group[0]);\n    } else if (chartType === \"solidgauge\") {\n      return this.onRenderTooltipSolidGauge(props.group[0]);\n    } else {\n      return this.onRenderTooltipCartesian(props);\n    }\n  };\n\n  private onRenderTooltipCartesian = ({\n    point,\n    group,\n  }: {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n  }) => {\n    const pointRect = point ? getPointRect(point) : getGroupRect(group.slice(0, 1));\n    const groupRect = getGroupRect(group);\n    // The cursor is not shown when column series are present (a UX decision).\n    const hasColumnSeries = this.context.chart().series.some((s) => s.type === \"column\");\n    this.cursor.create(groupRect, point, group, !hasColumnSeries);\n    this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });\n    this.groupTrack.rect(this.context.chart().renderer, { ...groupRect, ...this.commonTrackAttrs });\n  };\n\n  private onRenderTooltipPie = (point: Highcharts.Point) => {\n    // We only create target track for pie chart as pie chart does not support groups.\n    // It is also expected that only \"target\" tooltip position is used for pie charts.\n    const pointRect = getPieChartTargetPlacement(point);\n    this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });\n  };\n\n  private onRenderTooltipSolidGauge = (point: Highcharts.Point) => {\n    // Solid gauge charts are similar to pie charts in that they have a circular shape\n    // and don't support grouping. We use a similar approach to pie charts.\n    const pointRect = getSolidGaugeTargetPlacement(point);\n    this.targetTrack.rect(this.context.chart().renderer, { ...pointRect, ...this.commonTrackAttrs });\n  };\n\n  private get commonTrackAttrs() {\n    return { fill: \"transparent\", zIndex: -1, style: \"pointer-events:none\", direction: this.direction };\n  }\n\n  // We compute the direction from the chart container and then explicitly set it to the track\n  // elements, as otherwise the direction check done for track elements always results to \"ltr\".\n  private get direction() {\n    const isRtl = getIsRtl(this.context.chart().container.parentElement);\n    return isRtl ? \"rtl\" : \"ltr\";\n  }\n}\n\n// A helper class to draw the cursor elements (include cursor line and matched points markers).\nclass HighlightCursorCartesian {\n  private lineElement = new SVGRendererSingle();\n  private markerElementsPool = new SVGRendererPool();\n\n  public create(target: Rect, point: null | Highcharts.Point, group: readonly Highcharts.Point[], showLine: boolean) {\n    this.hide();\n    const chart = group[0]?.series.chart;\n    if (!chart) {\n      return;\n    }\n    if (showLine) {\n      // The cursor line is rendered orthogonally to the x axis (when the chart is inverted, the line is rendered horizontally).\n      // The line is 1px thick, and is rendered through the center of the target's rect.\n      const lineAttrs = chart.inverted\n        ? {\n            x: chart.plotLeft,\n            y: chart.plotTop + target.y - target.height - 1,\n            width: chart.plotWidth,\n            height: 1,\n          }\n        : {\n            x: target.x + target.width / 2,\n            y: chart.plotTop,\n            width: 1,\n            height: chart.plotHeight,\n          };\n      this.lineElement.rect(chart.renderer, { ...Styles.cursorLine, ...lineAttrs });\n    }\n    for (const p of group.filter(this.isPointEligibleForMarker)) {\n      if (p.plotX !== undefined && p.plotY !== undefined) {\n        const selected = p === point;\n        const className = clsx(testClasses[\"highlight-marker\"], selected && testClasses[\"highlight-marker-selected\"]);\n        renderMarker(chart, this.markerElementsPool, p, selected, className);\n      }\n    }\n  }\n\n  public hide() {\n    this.lineElement.hide();\n    this.markerElementsPool.hideAll();\n  }\n\n  public destroy() {\n    this.lineElement.destroy();\n    this.markerElementsPool.destroyAll();\n  }\n\n  private isPointEligibleForMarker = (point: Highcharts.Point) => {\n    return !isXThreshold(point.series) && point.series.type !== \"column\" && point.series.type !== \"errorbar\";\n  };\n}\n\nfunction getPieChartTargetPlacement(point: Highcharts.Point): Rect {\n  // The pie series segments do not provide plotX, plotY to compute the tooltip placement.\n  // Instead, there is a `tooltipPos` tuple, which is not covered by TS.\n  // See: https://github.com/highcharts/highcharts/issues/23118.\n  if (\"tooltipPos\" in point && Array.isArray(point.tooltipPos)) {\n    // We use very small but non-zero track size as otherwise it is placed incorrectly in Firefox.\n    return { x: point.tooltipPos[0], y: point.tooltipPos[1], width: 0.1, height: 0.1 };\n  }\n  // We use the alternative, middle, tooltip placement as a fallback, in case the undocumented \"tooltipPos\"\n  // is no longer available in the point.\n  return getPieMiddlePlacement(point);\n}\n\nfunction getPieMiddlePlacement(point: Highcharts.Point): Rect {\n  const chart = point.series.chart;\n  const [relativeX, relativeY, relativeDiameter] = point.series.center;\n  const plotLeft = chart.plotLeft;\n  const plotTop = chart.plotTop;\n  const centerX = plotLeft + (typeof relativeX === \"number\" ? relativeX : (relativeX / 100) * chart.plotWidth);\n  const centerY = plotTop + (typeof relativeY === \"number\" ? relativeY : (relativeY / 100) * chart.plotHeight);\n  const radius =\n    (typeof relativeDiameter === \"number\" ? relativeDiameter : (relativeDiameter / 100) * chart.plotWidth) / 2;\n  return { x: centerX, y: centerY - radius, width: 1, height: 2 * radius };\n}\n\nfunction getSolidGaugeTargetPlacement(point: Highcharts.Point): Rect {\n  const chart = point.series.chart;\n  return {\n    x: chart.plotLeft + chart.plotWidth / 2,\n    y: chart.plotTop + chart.plotHeight / 2,\n    width: 0.1,\n    height: 0.1,\n  };\n}\n"]}

package/core/chart-api/index.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import type Highcharts from "highcharts";
+import { ReadonlyAsyncStore } from "../../internal/utils/async-store";
+import { ReactiveAxisTitlesState } from "./chart-extra-axis-titles";
+import { ChartExtraContext } from "./chart-extra-context";
+import { ReactiveLegendState } from "./chart-extra-legend";
+import { ReactiveNodataState } from "./chart-extra-nodata";
+import { ReactiveTooltipState } from "./chart-extra-tooltip";
+export declare function useChartAPI(settings: ChartExtraContext.Settings, handlers: ChartExtraContext.Handlers, state: ChartExtraContext.State): ChartAPI;
+export declare class ChartAPI {
+    context: ChartExtraContext;
+    private chartExtraHighlight;
+    private chartExtraTooltip;
+    private chartExtraNavigation;
+    private chartExtraPointer;
+    private chartExtraLegend;
+    private chartExtraNodata;
+    private chartExtraAxisTitles;
+    constructor(settings: ChartExtraContext.Settings, handlers: ChartExtraContext.Handlers, state: ChartExtraContext.State);
+    get ready(): boolean;
+    getOptions(): {
+        onChartLoad: Highcharts.ChartLoadCallbackFunction;
+        onChartRender: Highcharts.ChartRenderCallbackFunction;
+        onChartClick: Highcharts.ChartClickCallbackFunction;
+        onSeriesPointMouseOver: Highcharts.PointMouseOverCallbackFunction;
+        onSeriesPointMouseOut: Highcharts.PointMouseOutCallbackFunction;
+        onSeriesPointClick: Highcharts.PointClickCallbackFunction;
+    };
+    onChartDestroy: () => void;
+    get tooltipStore(): ReadonlyAsyncStore<ReactiveTooltipState>;
+    get legendStore(): ReadonlyAsyncStore<ReactiveLegendState>;
+    get nodataStore(): ReadonlyAsyncStore<ReactiveNodataState>;
+    get axisTitlesStore(): ReadonlyAsyncStore<ReactiveAxisTitlesState>;
+    getTargetTrack: () => SVGElement | null;
+    getGroupTrack: () => SVGElement | null;
+    renderMarker: (type: import("../../internal/components/series-marker").ChartSeriesMarkerType, color: string, visible?: boolean) => import("react").ReactNode;
+    onMouseEnterTooltip: () => void;
+    onMouseLeaveTooltip: () => void;
+    onDismissTooltip: (outsideClick?: boolean) => void;
+    setApplication: (element: HTMLElement | null) => void;
+    updateItemsVisibility: () => void;
+    onItemVisibilityChange: (items: readonly string[]) => void;
+    onHighlightChartItems: (itemIds: readonly string[]) => void;
+    onClearChartItemsHighlight: () => void;
+    highlightChartItems: (itemIds: readonly string[]) => void;
+    setItemsVisible: (visibleItemsIds: readonly string[], { isApiCall }: {
+        isApiCall: boolean;
+    }) => void;
+    highlightChartPoint: (point: Highcharts.Point, { isApiCall }: {
+        isApiCall: boolean;
+    }) => void;
+    highlightChartGroup: (group: readonly Highcharts.Point[], { isApiCall }: {
+        isApiCall: boolean;
+    }) => void;
+    clearChartHighlight: ({ isApiCall }: {
+        isApiCall: boolean;
+    }) => void;
+    get publicApi(): {
+        highlightItems: (itemIds: readonly string[]) => void;
+        setItemsVisible: (visibleItemIds: readonly string[]) => void;
+        highlightChartPoint: (point: Highcharts.Point) => void;
+        highlightChartGroup: (group: readonly Highcharts.Point[]) => void;
+        clearChartHighlight: () => void;
+    };
+    private get navigationHandlers();
+    private get pointerHandlers();
+    private showMarkersForIsolatedPoints;
+    private handleDestroyedPoints;
+    private resetColorCounter;
+    private pinTooltipOnPoint;
+    private pinTooltipOnGroup;
+    private highlightActions;
+    private clearHighlightActions;
+    private get isTooltipPinned();
+}