@neo4j-ndl/react-charts 1.1.0 → 1.1.2

package/lib/cjs/charts/LegendLayout.js

@@ -0,0 +1,363 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LegendLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = require("@neo4j-ndl/react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = __importStar(require("react"));
+const legend_layout_1 = require("./utils/legend-layout");
+const getLegendElementsContentHeight = (legendContent, elements) => {
+    const legendContentStyle = getComputedStyle(legendContent);
+    const paddingBottom = parseFloat(legendContentStyle.paddingBottom) || 0;
+    const elementsBottom = Math.max(...elements.map((element) => element.offsetTop + element.offsetHeight));
+    return elementsBottom + paddingBottom;
+};
+const getCollapsedLegendContentHeight = ({ availableRowWidth, elements, legendContent, }) => {
+    const legendContentStyle = getComputedStyle(legendContent);
+    const paddingTop = parseFloat(legendContentStyle.paddingTop) || 0;
+    const paddingBottom = parseFloat(legendContentStyle.paddingBottom) || 0;
+    const rowGap = parseFloat(legendContentStyle.rowGap) || 0;
+    let currentRowHeight = 0;
+    let currentRowWidth = 0;
+    const rowHeights = [];
+    elements.forEach((element) => {
+        const elementWidth = (0, legend_layout_1.getComputedElementWidth)(element);
+        const elementHeight = element.getBoundingClientRect().height;
+        const shouldWrap = currentRowWidth > 0 && currentRowWidth + elementWidth > availableRowWidth;
+        if (shouldWrap) {
+            rowHeights.push(currentRowHeight);
+            currentRowHeight = 0;
+            currentRowWidth = 0;
+        }
+        currentRowWidth += elementWidth;
+        currentRowHeight = Math.max(currentRowHeight, elementHeight);
+    });
+    if (currentRowHeight > 0) {
+        rowHeights.push(currentRowHeight);
+    }
+    const rowsHeight = rowHeights.reduce((height, rowHeight) => {
+        return height + rowHeight;
+    }, 0);
+    return (paddingTop +
+        rowsHeight +
+        rowGap * Math.max(rowHeights.length - 1, 0) +
+        paddingBottom);
+};
+/**
+ * Tracks legend container width for responsive collapsed-layout recalculation.
+ *
+ * The width is kept in state so `useCollapsibleLegendLayout` can re-measure item
+ * wrapping whenever the available legend width changes.
+ */
+const useLegendContainerWidth = (legendContainerRef) => {
+    const [legendWidth, setLegendWidth] = (0, react_2.useState)(Infinity);
+    const updateLegendWidth = (0, react_2.useCallback)(() => {
+        var _a;
+        const nextWidth = (_a = legendContainerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (nextWidth === undefined) {
+            return;
+        }
+        setLegendWidth(nextWidth);
+    }, [legendContainerRef]);
+    (0, react_2.useEffect)(() => {
+        updateLegendWidth();
+        const legendContainer = legendContainerRef.current;
+        if (!legendContainer) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(updateLegendWidth);
+        resizeObserver.observe(legendContainer);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [legendContainerRef, updateLegendWidth]);
+    return legendWidth;
+};
+/**
+ * Owns the collapsed, measuring, and expanded layout state for wrapping legends.
+ *
+ * Collapsed legends only render the visible subset of items. When the item count
+ * or container width changes, the hook temporarily renders every item in an
+ * invisible measuring pass so it can calculate wrapping, overflow, and the next
+ * visible item count. The last collapsed height is preserved during that pass so
+ * the chart area does not shrink while the hidden full legend is being measured.
+ */
+const useCollapsibleLegendLayout = ({ itemCount, legendContainerRef, legendContentRef, legendMeasurementRef, viewMoreButtonMeasurementRef, }) => {
+    const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
+    const [isMeasuring, setIsMeasuring] = (0, react_2.useState)(false);
+    const [layoutSnapshot, setLayoutSnapshot] = (0, react_2.useState)({
+        contentHeight: 0,
+        hasOverflow: false,
+        visibleItemCount: itemCount,
+    });
+    const skipNextCollapseMeasurementRef = (0, react_2.useRef)(false);
+    const legendWidth = useLegendContainerWidth(legendContainerRef);
+    const updateVisibleItems = (0, react_2.useCallback)(() => {
+        var _a;
+        const legendContent = legendMeasurementRef.current;
+        const viewMoreButton = viewMoreButtonMeasurementRef.current;
+        if (!legendContent || !viewMoreButton) {
+            setIsMeasuring(false);
+            return;
+        }
+        const legendItems = Array.from(legendContent.querySelectorAll('.ndl-chart-legend-item')).filter((element) => element.offsetParent !== null);
+        if (legendItems.length === 0) {
+            setLayoutSnapshot((snapshot) => (Object.assign(Object.assign({}, snapshot), { contentHeight: 0, hasOverflow: false, visibleItemCount: itemCount })));
+            setIsMeasuring(false);
+            return;
+        }
+        const rowTops = Array.from(new Set(legendItems.map((element) => element.offsetTop))).sort((a, b) => a - b);
+        const nextLegendContentHeight = legendContent.scrollHeight;
+        const nextLegendItemsContentHeight = getLegendElementsContentHeight(legendContent, legendItems);
+        if (rowTops.length <= legend_layout_1.COLLAPSED_LEGEND_ROWS) {
+            setLayoutSnapshot((snapshot) => (Object.assign(Object.assign({}, snapshot), { contentHeight: nextLegendItemsContentHeight, hasOverflow: false, visibleItemCount: itemCount })));
+            setIsMeasuring(false);
+            return;
+        }
+        const legendContainer = legendContainerRef.current;
+        const legendContentStyle = getComputedStyle(legendContent);
+        const availableRowWidth = ((_a = legendContainer === null || legendContainer === void 0 ? void 0 : legendContainer.clientWidth) !== null && _a !== void 0 ? _a : legendContent.clientWidth) -
+            (parseFloat(legendContentStyle.paddingLeft) || 0) -
+            (parseFloat(legendContentStyle.paddingRight) || 0);
+        const viewMoreButtonWidth = (0, legend_layout_1.getComputedElementWidth)(viewMoreButton);
+        const legendItemWidths = legendItems.map(legend_layout_1.getComputedElementWidth);
+        const nextVisibleItemCount = (0, legend_layout_1.getCollapsedVisibleItemCount)(legendItemWidths, availableRowWidth, viewMoreButtonWidth);
+        const nextCollapsedContentHeight = getCollapsedLegendContentHeight({
+            availableRowWidth,
+            elements: [...legendItems.slice(0, nextVisibleItemCount), viewMoreButton],
+            legendContent,
+        });
+        setLayoutSnapshot((snapshot) => (Object.assign(Object.assign({}, snapshot), { collapsedHeight: Math.min(nextCollapsedContentHeight, legend_layout_1.COLLAPSED_LEGEND_MAX_HEIGHT), contentHeight: nextLegendContentHeight, hasOverflow: nextVisibleItemCount < itemCount, visibleItemCount: nextVisibleItemCount })));
+        setIsMeasuring(false);
+    }, [
+        itemCount,
+        legendContainerRef,
+        legendMeasurementRef,
+        viewMoreButtonMeasurementRef,
+    ]);
+    (0, react_2.useEffect)(() => {
+        setIsExpanded(false);
+    }, [itemCount]);
+    (0, react_2.useEffect)(() => {
+        if (isExpanded) {
+            setIsMeasuring(false);
+            return;
+        }
+        if (skipNextCollapseMeasurementRef.current) {
+            skipNextCollapseMeasurementRef.current = false;
+            setIsMeasuring(false);
+            return;
+        }
+        setIsMeasuring(true);
+    }, [isExpanded, itemCount, legendWidth]);
+    (0, react_2.useEffect)(() => {
+        const isMeasuringCollapsed = !isExpanded && isMeasuring;
+        const animationFrame = requestAnimationFrame(() => {
+            if (isMeasuringCollapsed) {
+                updateVisibleItems();
+            }
+            else {
+                setLayoutSnapshot((snapshot) => {
+                    var _a, _b;
+                    return (Object.assign(Object.assign({}, snapshot), { contentHeight: (_b = (_a = legendContentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0 }));
+                });
+                if (!isMeasuring && !isExpanded && layoutSnapshot.hasOverflow) {
+                    setLayoutSnapshot((snapshot) => {
+                        var _a;
+                        return (Object.assign(Object.assign({}, snapshot), { collapsedHeight: (_a = legendContentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height }));
+                    });
+                }
+            }
+        });
+        return () => {
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [
+        isExpanded,
+        isMeasuring,
+        legendContentRef,
+        layoutSnapshot.hasOverflow,
+        updateVisibleItems,
+    ]);
+    const expandLegend = (0, react_2.useCallback)(() => {
+        setIsMeasuring(false);
+        setIsExpanded(true);
+    }, []);
+    const collapseLegend = (0, react_2.useCallback)(() => {
+        skipNextCollapseMeasurementRef.current = true;
+        setIsExpanded(false);
+    }, []);
+    return {
+        collapseLegend,
+        expandLegend,
+        isExpanded,
+        isMeasuring,
+        layoutSnapshot,
+    };
+};
+/**
+ * Renders the responsive legend layout shell.
+ *
+ * The component switches between a two-row collapsed view, an invisible
+ * measurement view, and an expanded scrollable view while keeping the
+ * "View more"/"View less" action wired to the measured overflow state.
+ */
+const LegendLayout = (_a) => {
+    var { children, className, isLayoutReady = true, itemCount, onLayoutReady, htmlAttributes } = _a, restProps = __rest(_a, ["children", "className", "isLayoutReady", "itemCount", "onLayoutReady", "htmlAttributes"]);
+    const legendContainerRef = (0, react_2.useRef)(null);
+    const legendContentRef = (0, react_2.useRef)(null);
+    const legendMeasurementRef = (0, react_2.useRef)(null);
+    const pendingFocusLegendItemIndexRef = (0, react_2.useRef)(null);
+    const viewMoreButtonMeasurementRef = (0, react_2.useRef)(null);
+    const { collapseLegend, expandLegend, isExpanded, isMeasuring, layoutSnapshot, } = useCollapsibleLegendLayout({
+        itemCount,
+        legendContainerRef,
+        legendContentRef,
+        legendMeasurementRef,
+        viewMoreButtonMeasurementRef,
+    });
+    const childList = react_2.default.Children.toArray(children);
+    const childrenToRender = !isExpanded
+        ? childList.slice(0, layoutSnapshot.visibleItemCount)
+        : childList;
+    const legendHeight = !isMeasuring && !isExpanded && layoutSnapshot.hasOverflow
+        ? layoutSnapshot.collapsedHeight
+        : !isMeasuring &&
+            !layoutSnapshot.hasOverflow &&
+            layoutSnapshot.contentHeight
+            ? layoutSnapshot.contentHeight
+            : undefined;
+    (0, react_2.useEffect)(() => {
+        if (!isMeasuring && layoutSnapshot.contentHeight > 0) {
+            let secondFrame;
+            const firstFrame = requestAnimationFrame(() => {
+                secondFrame = requestAnimationFrame(() => {
+                    onLayoutReady === null || onLayoutReady === void 0 ? void 0 : onLayoutReady();
+                });
+            });
+            return () => {
+                cancelAnimationFrame(firstFrame);
+                if (secondFrame !== undefined) {
+                    cancelAnimationFrame(secondFrame);
+                }
+            };
+        }
+    }, [isMeasuring, layoutSnapshot.contentHeight, onLayoutReady]);
+    (0, react_2.useEffect)(() => {
+        var _a, _b;
+        const pendingFocusLegendItemIndex = pendingFocusLegendItemIndexRef.current;
+        if (!isExpanded || pendingFocusLegendItemIndex === null) {
+            return;
+        }
+        const legendItems = (_a = legendContentRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.ndl-chart-legend-item');
+        (_b = legendItems === null || legendItems === void 0 ? void 0 : legendItems[pendingFocusLegendItemIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        pendingFocusLegendItemIndexRef.current = null;
+    }, [isExpanded]);
+    const handleLegendActionClick = (0, react_2.useCallback)(() => {
+        if (isExpanded) {
+            collapseLegend();
+            return;
+        }
+        pendingFocusLegendItemIndexRef.current = layoutSnapshot.visibleItemCount;
+        expandLegend();
+    }, [
+        collapseLegend,
+        expandLegend,
+        isExpanded,
+        layoutSnapshot.visibleItemCount,
+    ]);
+    const classes = (0, classnames_1.default)('ndl-chart-legend', {
+        'ndl-chart-legend-calculating': !isExpanded && isMeasuring,
+        'ndl-chart-legend-collapsed': layoutSnapshot.hasOverflow && !isExpanded,
+        'ndl-chart-legend-expanded': layoutSnapshot.hasOverflow && isExpanded,
+        'ndl-chart-legend-hidden': !isLayoutReady,
+        'ndl-chart-legend-scrollable': layoutSnapshot.hasOverflow &&
+            isExpanded &&
+            layoutSnapshot.contentHeight > legend_layout_1.COLLAPSED_LEGEND_MAX_HEIGHT,
+        'ndl-chart-legend-wrapping': true,
+    }, className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: legendContainerRef, className: "ndl-chart-legend-container" }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes, ref: legendContentRef, style: {
+                height: legendHeight,
+                maxHeight: layoutSnapshot.hasOverflow && isExpanded
+                    ? 'var(--ndl-chart-legend-expanded-max-height)'
+                    : layoutSnapshot.hasOverflow
+                        ? legend_layout_1.COLLAPSED_LEGEND_MAX_HEIGHT
+                        : undefined,
+            }, children: [childrenToRender, layoutSnapshot.hasOverflow && ((0, jsx_runtime_1.jsx)(react_1.TextLink, { as: "button", className: "ndl-chart-legend-action", htmlAttributes: {
+                        'aria-expanded': isExpanded,
+                        onClick: handleLegendActionClick,
+                        type: 'button',
+                    }, children: isExpanded ? 'View less' : 'View more' })), isMeasuring && ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": "true", className: "ndl-chart-legend-measurement", ref: legendMeasurementRef, children: [childList, (0, jsx_runtime_1.jsx)(react_1.TextLink, { as: "button", ref: viewMoreButtonMeasurementRef, className: "ndl-chart-legend-action", htmlAttributes: {
+                                tabIndex: -1,
+                                type: 'button',
+                            }, children: "View more" })] }))] }) })));
+};
+exports.LegendLayout = LegendLayout;
+//# sourceMappingURL=LegendLayout.js.map

package/lib/cjs/charts/LegendLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendLayout.js","sourceRoot":"","sources":["../../../src/charts/LegendLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { TextLink } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type CommonProps } from './utils/chart-types';\nimport {\n  COLLAPSED_LEGEND_MAX_HEIGHT,\n  COLLAPSED_LEGEND_ROWS,\n  getCollapsedVisibleItemCount,\n  getComputedElementWidth,\n} from './utils/legend-layout';\n\ntype LegendLayoutProps = {\n  children: React.ReactNode;\n  isLayoutReady?: boolean;\n  itemCount: number;\n  onLayoutReady?: () => void;\n};\n\ntype LegendLayoutSnapshot = {\n  collapsedHeight?: number;\n  contentHeight: number;\n  hasOverflow: boolean;\n  visibleItemCount: number;\n};\n\nconst getLegendElementsContentHeight = (\n  legendContent: HTMLElement,\n  elements: HTMLElement[],\n) => {\n  const legendContentStyle = getComputedStyle(legendContent);\n  const paddingBottom = parseFloat(legendContentStyle.paddingBottom) || 0;\n  const elementsBottom = Math.max(\n    ...elements.map((element) => element.offsetTop + element.offsetHeight),\n  );\n\n  return elementsBottom + paddingBottom;\n};\n\nconst getCollapsedLegendContentHeight = ({\n  availableRowWidth,\n  elements,\n  legendContent,\n}: {\n  availableRowWidth: number;\n  elements: HTMLElement[];\n  legendContent: HTMLElement;\n}) => {\n  const legendContentStyle = getComputedStyle(legendContent);\n  const paddingTop = parseFloat(legendContentStyle.paddingTop) || 0;\n  const paddingBottom = parseFloat(legendContentStyle.paddingBottom) || 0;\n  const rowGap = parseFloat(legendContentStyle.rowGap) || 0;\n  let currentRowHeight = 0;\n  let currentRowWidth = 0;\n  const rowHeights: number[] = [];\n\n  elements.forEach((element) => {\n    const elementWidth = getComputedElementWidth(element);\n    const elementHeight = element.getBoundingClientRect().height;\n    const shouldWrap =\n      currentRowWidth > 0 && currentRowWidth + elementWidth > availableRowWidth;\n\n    if (shouldWrap) {\n      rowHeights.push(currentRowHeight);\n      currentRowHeight = 0;\n      currentRowWidth = 0;\n    }\n\n    currentRowWidth += elementWidth;\n    currentRowHeight = Math.max(currentRowHeight, elementHeight);\n  });\n\n  if (currentRowHeight > 0) {\n    rowHeights.push(currentRowHeight);\n  }\n\n  const rowsHeight = rowHeights.reduce((height, rowHeight) => {\n    return height + rowHeight;\n  }, 0);\n\n  return (\n    paddingTop +\n    rowsHeight +\n    rowGap * Math.max(rowHeights.length - 1, 0) +\n    paddingBottom\n  );\n};\n\n/**\n * Tracks legend container width for responsive collapsed-layout recalculation.\n *\n * The width is kept in state so `useCollapsibleLegendLayout` can re-measure item\n * wrapping whenever the available legend width changes.\n */\nconst useLegendContainerWidth = (\n  legendContainerRef: React.RefObject<HTMLDivElement | null>,\n) => {\n  const [legendWidth, setLegendWidth] = useState(Infinity);\n\n  const updateLegendWidth = useCallback(() => {\n    const nextWidth = legendContainerRef.current?.clientWidth;\n    if (nextWidth === undefined) {\n      return;\n    }\n\n    setLegendWidth(nextWidth);\n  }, [legendContainerRef]);\n\n  useEffect(() => {\n    updateLegendWidth();\n\n    const legendContainer = legendContainerRef.current;\n    if (!legendContainer) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(updateLegendWidth);\n    resizeObserver.observe(legendContainer);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [legendContainerRef, updateLegendWidth]);\n\n  return legendWidth;\n};\n\n/**\n * Owns the collapsed, measuring, and expanded layout state for wrapping legends.\n *\n * Collapsed legends only render the visible subset of items. When the item count\n * or container width changes, the hook temporarily renders every item in an\n * invisible measuring pass so it can calculate wrapping, overflow, and the next\n * visible item count. The last collapsed height is preserved during that pass so\n * the chart area does not shrink while the hidden full legend is being measured.\n */\nconst useCollapsibleLegendLayout = ({\n  itemCount,\n  legendContainerRef,\n  legendContentRef,\n  legendMeasurementRef,\n  viewMoreButtonMeasurementRef,\n}: {\n  itemCount: number;\n  legendContainerRef: React.RefObject<HTMLDivElement | null>;\n  legendContentRef: React.RefObject<HTMLDivElement | null>;\n  legendMeasurementRef: React.RefObject<HTMLDivElement | null>;\n  viewMoreButtonMeasurementRef: React.RefObject<HTMLButtonElement | null>;\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isMeasuring, setIsMeasuring] = useState(false);\n  const [layoutSnapshot, setLayoutSnapshot] = useState<LegendLayoutSnapshot>({\n    contentHeight: 0,\n    hasOverflow: false,\n    visibleItemCount: itemCount,\n  });\n  const skipNextCollapseMeasurementRef = useRef(false);\n  const legendWidth = useLegendContainerWidth(legendContainerRef);\n\n  const updateVisibleItems = useCallback(() => {\n    const legendContent = legendMeasurementRef.current;\n    const viewMoreButton = viewMoreButtonMeasurementRef.current;\n    if (!legendContent || !viewMoreButton) {\n      setIsMeasuring(false);\n      return;\n    }\n\n    const legendItems = Array.from(\n      legendContent.querySelectorAll<HTMLElement>('.ndl-chart-legend-item'),\n    ).filter((element) => element.offsetParent !== null);\n\n    if (legendItems.length === 0) {\n      setLayoutSnapshot((snapshot) => ({\n        ...snapshot,\n        contentHeight: 0,\n        hasOverflow: false,\n        visibleItemCount: itemCount,\n      }));\n      setIsMeasuring(false);\n      return;\n    }\n\n    const rowTops = Array.from(\n      new Set(legendItems.map((element) => element.offsetTop)),\n    ).sort((a, b) => a - b);\n    const nextLegendContentHeight = legendContent.scrollHeight;\n    const nextLegendItemsContentHeight = getLegendElementsContentHeight(\n      legendContent,\n      legendItems,\n    );\n\n    if (rowTops.length <= COLLAPSED_LEGEND_ROWS) {\n      setLayoutSnapshot((snapshot) => ({\n        ...snapshot,\n        contentHeight: nextLegendItemsContentHeight,\n        hasOverflow: false,\n        visibleItemCount: itemCount,\n      }));\n      setIsMeasuring(false);\n      return;\n    }\n\n    const legendContainer = legendContainerRef.current;\n    const legendContentStyle = getComputedStyle(legendContent);\n    const availableRowWidth =\n      (legendContainer?.clientWidth ?? legendContent.clientWidth) -\n      (parseFloat(legendContentStyle.paddingLeft) || 0) -\n      (parseFloat(legendContentStyle.paddingRight) || 0);\n    const viewMoreButtonWidth = getComputedElementWidth(viewMoreButton);\n    const legendItemWidths = legendItems.map(getComputedElementWidth);\n    const nextVisibleItemCount = getCollapsedVisibleItemCount(\n      legendItemWidths,\n      availableRowWidth,\n      viewMoreButtonWidth,\n    );\n    const nextCollapsedContentHeight = getCollapsedLegendContentHeight({\n      availableRowWidth,\n      elements: [...legendItems.slice(0, nextVisibleItemCount), viewMoreButton],\n      legendContent,\n    });\n\n    setLayoutSnapshot((snapshot) => ({\n      ...snapshot,\n      collapsedHeight: Math.min(\n        nextCollapsedContentHeight,\n        COLLAPSED_LEGEND_MAX_HEIGHT,\n      ),\n      contentHeight: nextLegendContentHeight,\n      hasOverflow: nextVisibleItemCount < itemCount,\n      visibleItemCount: nextVisibleItemCount,\n    }));\n    setIsMeasuring(false);\n  }, [\n    itemCount,\n    legendContainerRef,\n    legendMeasurementRef,\n    viewMoreButtonMeasurementRef,\n  ]);\n\n  useEffect(() => {\n    setIsExpanded(false);\n  }, [itemCount]);\n\n  useEffect(() => {\n    if (isExpanded) {\n      setIsMeasuring(false);\n      return;\n    }\n\n    if (skipNextCollapseMeasurementRef.current) {\n      skipNextCollapseMeasurementRef.current = false;\n      setIsMeasuring(false);\n      return;\n    }\n\n    setIsMeasuring(true);\n  }, [isExpanded, itemCount, legendWidth]);\n\n  useEffect(() => {\n    const isMeasuringCollapsed = !isExpanded && isMeasuring;\n\n    const animationFrame = requestAnimationFrame(() => {\n      if (isMeasuringCollapsed) {\n        updateVisibleItems();\n      } else {\n        setLayoutSnapshot((snapshot) => ({\n          ...snapshot,\n          contentHeight: legendContentRef.current?.scrollHeight ?? 0,\n        }));\n\n        if (!isMeasuring && !isExpanded && layoutSnapshot.hasOverflow) {\n          setLayoutSnapshot((snapshot) => ({\n            ...snapshot,\n            collapsedHeight:\n              legendContentRef.current?.getBoundingClientRect().height,\n          }));\n        }\n      }\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrame);\n    };\n  }, [\n    isExpanded,\n    isMeasuring,\n    legendContentRef,\n    layoutSnapshot.hasOverflow,\n    updateVisibleItems,\n  ]);\n\n  const expandLegend = useCallback(() => {\n    setIsMeasuring(false);\n    setIsExpanded(true);\n  }, []);\n\n  const collapseLegend = useCallback(() => {\n    skipNextCollapseMeasurementRef.current = true;\n    setIsExpanded(false);\n  }, []);\n\n  return {\n    collapseLegend,\n    expandLegend,\n    isExpanded,\n    isMeasuring,\n    layoutSnapshot,\n  };\n};\n\n/**\n * Renders the responsive legend layout shell.\n *\n * The component switches between a two-row collapsed view, an invisible\n * measurement view, and an expanded scrollable view while keeping the\n * \"View more\"/\"View less\" action wired to the measured overflow state.\n */\nexport const LegendLayout = ({\n  children,\n  className,\n  isLayoutReady = true,\n  itemCount,\n  onLayoutReady,\n  htmlAttributes,\n  ...restProps\n}: Omit<CommonProps<'div', LegendLayoutProps>, 'ref'>) => {\n  const legendContainerRef = useRef<HTMLDivElement>(null);\n  const legendContentRef = useRef<HTMLDivElement>(null);\n  const legendMeasurementRef = useRef<HTMLDivElement>(null);\n  const pendingFocusLegendItemIndexRef = useRef<number | null>(null);\n  const viewMoreButtonMeasurementRef = useRef<HTMLButtonElement>(null);\n  const {\n    collapseLegend,\n    expandLegend,\n    isExpanded,\n    isMeasuring,\n    layoutSnapshot,\n  } = useCollapsibleLegendLayout({\n    itemCount,\n    legendContainerRef,\n    legendContentRef,\n    legendMeasurementRef,\n    viewMoreButtonMeasurementRef,\n  });\n\n  const childList = React.Children.toArray(children);\n  const childrenToRender = !isExpanded\n    ? childList.slice(0, layoutSnapshot.visibleItemCount)\n    : childList;\n  const legendHeight =\n    !isMeasuring && !isExpanded && layoutSnapshot.hasOverflow\n      ? layoutSnapshot.collapsedHeight\n      : !isMeasuring &&\n          !layoutSnapshot.hasOverflow &&\n          layoutSnapshot.contentHeight\n        ? layoutSnapshot.contentHeight\n        : undefined;\n\n  useEffect(() => {\n    if (!isMeasuring && layoutSnapshot.contentHeight > 0) {\n      let secondFrame: number | undefined;\n      const firstFrame = requestAnimationFrame(() => {\n        secondFrame = requestAnimationFrame(() => {\n          onLayoutReady?.();\n        });\n      });\n\n      return () => {\n        cancelAnimationFrame(firstFrame);\n        if (secondFrame !== undefined) {\n          cancelAnimationFrame(secondFrame);\n        }\n      };\n    }\n  }, [isMeasuring, layoutSnapshot.contentHeight, onLayoutReady]);\n\n  useEffect(() => {\n    const pendingFocusLegendItemIndex = pendingFocusLegendItemIndexRef.current;\n    if (!isExpanded || pendingFocusLegendItemIndex === null) {\n      return;\n    }\n\n    const legendItems = legendContentRef.current?.querySelectorAll<HTMLElement>(\n      '.ndl-chart-legend-item',\n    );\n    legendItems?.[pendingFocusLegendItemIndex]?.focus();\n    pendingFocusLegendItemIndexRef.current = null;\n  }, [isExpanded]);\n\n  const handleLegendActionClick = useCallback(() => {\n    if (isExpanded) {\n      collapseLegend();\n      return;\n    }\n\n    pendingFocusLegendItemIndexRef.current = layoutSnapshot.visibleItemCount;\n    expandLegend();\n  }, [\n    collapseLegend,\n    expandLegend,\n    isExpanded,\n    layoutSnapshot.visibleItemCount,\n  ]);\n\n  const classes = classNames(\n    'ndl-chart-legend',\n    {\n      'ndl-chart-legend-calculating': !isExpanded && isMeasuring,\n      'ndl-chart-legend-collapsed': layoutSnapshot.hasOverflow && !isExpanded,\n      'ndl-chart-legend-expanded': layoutSnapshot.hasOverflow && isExpanded,\n      'ndl-chart-legend-hidden': !isLayoutReady,\n      'ndl-chart-legend-scrollable':\n        layoutSnapshot.hasOverflow &&\n        isExpanded &&\n        layoutSnapshot.contentHeight > COLLAPSED_LEGEND_MAX_HEIGHT,\n      'ndl-chart-legend-wrapping': true,\n    },\n    className,\n  );\n  return (\n    <div\n      ref={legendContainerRef}\n      className=\"ndl-chart-legend-container\"\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div\n        className={classes}\n        ref={legendContentRef}\n        style={{\n          height: legendHeight,\n          maxHeight:\n            layoutSnapshot.hasOverflow && isExpanded\n              ? 'var(--ndl-chart-legend-expanded-max-height)'\n              : layoutSnapshot.hasOverflow\n                ? COLLAPSED_LEGEND_MAX_HEIGHT\n                : undefined,\n        }}\n      >\n        {childrenToRender}\n        {layoutSnapshot.hasOverflow && (\n          <TextLink\n            as=\"button\"\n            className=\"ndl-chart-legend-action\"\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n              onClick: handleLegendActionClick,\n              type: 'button',\n            }}\n          >\n            {isExpanded ? 'View less' : 'View more'}\n          </TextLink>\n        )}\n        {isMeasuring && (\n          <div\n            aria-hidden=\"true\"\n            className=\"ndl-chart-legend-measurement\"\n            ref={legendMeasurementRef}\n          >\n            {childList}\n            <TextLink\n              as=\"button\"\n              ref={viewMoreButtonMeasurementRef}\n              className=\"ndl-chart-legend-action\"\n              htmlAttributes={{\n                tabIndex: -1,\n                type: 'button',\n              }}\n            >\n              View more\n            </TextLink>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/cjs/charts/hooks/use-chart-instance.js

@@ -0,0 +1,133 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartLifecycle = useChartLifecycle;
+exports.useChartLoading = useChartLoading;
+exports.useChartResize = useChartResize;
+const base_1 = require("@neo4j-ndl/base");
+const echarts_1 = require("echarts");
+const react_1 = require("react");
+const ndl_echarts_theme_1 = require("../themes/ndl-echarts-theme");
+const use_chart_refs_1 = require("./use-chart-refs");
+/**
+ * Registers Needle ECharts themes and initializes the chart instance.
+ *
+ * Theme registration runs with the active palette so ECharts can resolve Needle
+ * colors before options are applied. The hook only calls `init` when the DOM
+ * element does not already have an ECharts instance, allowing later renders to
+ * update registered theme data without replacing the existing chart.
+ */
+function useChartLifecycle({ palette, theme }) {
+    const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
+    (0, react_1.useEffect)(() => {
+        if (chartEchartRef.current === null) {
+            return;
+        }
+        (0, echarts_1.registerTheme)('ndl-light', (0, ndl_echarts_theme_1.ndlEchartsTheme)('light', palette));
+        (0, echarts_1.registerTheme)('ndl-dark', (0, ndl_echarts_theme_1.ndlEchartsTheme)('dark', palette));
+        const currentChart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+        if (currentChart) {
+            return;
+        }
+        const echartsTheme = theme === 'light' ? 'ndl-light' : 'ndl-dark';
+        (0, echarts_1.init)(chartEchartRef.current, echartsTheme, {
+            renderer: 'svg',
+        });
+    });
+}
+/**
+ * Mirrors React loading state into ECharts' loading overlay.
+ *
+ * The overlay also stays visible while the chart waits for its first resize,
+ * preventing users from seeing an unmeasured SVG before ECharts has been sized
+ * to its container. Loading colors come from the active Needle theme.
+ */
+function useChartLoading({ isLoading, isWaitingForFirstResize, theme, }) {
+    const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
+    (0, react_1.useEffect)(() => {
+        if (chartEchartRef.current === null) {
+            return;
+        }
+        const chart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+        if (isLoading === true || isWaitingForFirstResize) {
+            chart === null || chart === void 0 ? void 0 : chart.showLoading({
+                color: base_1.tokens.theme[theme].color.primary.bg.status,
+                fontFamily: base_1.tokens.typography['label'].fontFamily,
+                fontSize: base_1.tokens.typography['label'].fontSize,
+                fontWeight: base_1.tokens.typography['label'].fontWeight,
+                maskColor: `rgb( from ${base_1.tokens.theme[theme].color.neutral.text.inverse} r g b / 0.8)`,
+                text: 'Loading',
+                textColor: base_1.tokens.theme[theme].color.neutral.text.default,
+            });
+        }
+        else {
+            chart === null || chart === void 0 ? void 0 : chart.hideLoading();
+        }
+    }, [chartEchartRef, isLoading, isWaitingForFirstResize, theme]);
+}
+/**
+ * Keeps the ECharts canvas sized to the DOM box assigned by the chart layout.
+ *
+ * The hook listens to both window resize events and direct element resize
+ * observations because the chart can change size through parent layout changes
+ * that do not emit a window resize. It exposes `isWaitingForFirstResize` so the
+ * rest of the chart can delay rendering dependent UI until ECharts has been
+ * given its initial dimensions.
+ */
+function useChartResize() {
+    const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
+    const [isWaitingForFirstResize, setIsWaitingForFirstResize] = (0, react_1.useState)(true);
+    const resizeChart = (0, react_1.useCallback)(() => {
+        if (chartEchartRef.current === null) {
+            return;
+        }
+        const chart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+        const { clientHeight: height, clientWidth: width } = chartEchartRef.current;
+        chart === null || chart === void 0 ? void 0 : chart.resize({
+            height,
+            width,
+        });
+    }, [chartEchartRef]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('resize', resizeChart);
+        const resizeObserver = new ResizeObserver(() => {
+            resizeChart();
+        });
+        if (chartEchartRef.current) {
+            resizeObserver.observe(chartEchartRef.current);
+        }
+        const animationFrame = requestAnimationFrame(() => {
+            resizeChart();
+            setIsWaitingForFirstResize(false);
+        });
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            window.removeEventListener('resize', resizeChart);
+            resizeObserver.disconnect();
+        };
+    }, [chartEchartRef, resizeChart]);
+    return {
+        isWaitingForFirstResize,
+        resizeChart,
+    };
+}
+//# sourceMappingURL=use-chart-instance.js.map

package/lib/cjs/charts/hooks/use-chart-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-instance.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-instance.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { getInstanceByDom, init, registerTheme } from 'echarts';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { ndlEchartsTheme } from '../themes/ndl-echarts-theme';\nimport type { HexColor } from '../utils/chart-types';\nimport { useChartRefsContext } from './use-chart-refs';\n\ntype UseChartLifecycleParams = {\n  palette?: HexColor[];\n  theme: 'light' | 'dark';\n};\n\ntype UseChartLoadingParams = {\n  isLoading?: boolean;\n  isWaitingForFirstResize: boolean;\n  theme: 'light' | 'dark';\n};\n\n/**\n * Registers Needle ECharts themes and initializes the chart instance.\n *\n * Theme registration runs with the active palette so ECharts can resolve Needle\n * colors before options are applied. The hook only calls `init` when the DOM\n * element does not already have an ECharts instance, allowing later renders to\n * update registered theme data without replacing the existing chart.\n */\nexport function useChartLifecycle({ palette, theme }: UseChartLifecycleParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    if (chartEchartRef.current === null) {\n      return;\n    }\n\n    registerTheme('ndl-light', ndlEchartsTheme('light', palette));\n    registerTheme('ndl-dark', ndlEchartsTheme('dark', palette));\n\n    const currentChart = getInstanceByDom(chartEchartRef.current);\n    if (currentChart) {\n      return;\n    }\n\n    const echartsTheme = theme === 'light' ? 'ndl-light' : 'ndl-dark';\n    init(chartEchartRef.current, echartsTheme, {\n      renderer: 'svg',\n    });\n  });\n}\n\n/**\n * Mirrors React loading state into ECharts' loading overlay.\n *\n * The overlay also stays visible while the chart waits for its first resize,\n * preventing users from seeing an unmeasured SVG before ECharts has been sized\n * to its container. Loading colors come from the active Needle theme.\n */\nexport function useChartLoading({\n  isLoading,\n  isWaitingForFirstResize,\n  theme,\n}: UseChartLoadingParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    if (chartEchartRef.current === null) {\n      return;\n    }\n\n    const chart = getInstanceByDom(chartEchartRef.current);\n\n    if (isLoading === true || isWaitingForFirstResize) {\n      chart?.showLoading({\n        color: tokens.theme[theme].color.primary.bg.status,\n        fontFamily: tokens.typography['label'].fontFamily,\n        fontSize: tokens.typography['label'].fontSize,\n        fontWeight: tokens.typography['label'].fontWeight,\n        maskColor: `rgb( from ${tokens.theme[theme].color.neutral.text.inverse} r g b / 0.8)`,\n        text: 'Loading',\n        textColor: tokens.theme[theme].color.neutral.text.default,\n      });\n    } else {\n      chart?.hideLoading();\n    }\n  }, [chartEchartRef, isLoading, isWaitingForFirstResize, theme]);\n}\n\n/**\n * Keeps the ECharts canvas sized to the DOM box assigned by the chart layout.\n *\n * The hook listens to both window resize events and direct element resize\n * observations because the chart can change size through parent layout changes\n * that do not emit a window resize. It exposes `isWaitingForFirstResize` so the\n * rest of the chart can delay rendering dependent UI until ECharts has been\n * given its initial dimensions.\n */\nexport function useChartResize() {\n  const { chartEchartRef } = useChartRefsContext();\n  const [isWaitingForFirstResize, setIsWaitingForFirstResize] = useState(true);\n\n  const resizeChart = useCallback(() => {\n    if (chartEchartRef.current === null) {\n      return;\n    }\n\n    const chart = getInstanceByDom(chartEchartRef.current);\n    const { clientHeight: height, clientWidth: width } = chartEchartRef.current;\n\n    chart?.resize({\n      height,\n      width,\n    });\n  }, [chartEchartRef]);\n\n  useEffect(() => {\n    window.addEventListener('resize', resizeChart);\n    const resizeObserver = new ResizeObserver(() => {\n      resizeChart();\n    });\n    if (chartEchartRef.current) {\n      resizeObserver.observe(chartEchartRef.current);\n    }\n    const animationFrame = requestAnimationFrame(() => {\n      resizeChart();\n      setIsWaitingForFirstResize(false);\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrame);\n      window.removeEventListener('resize', resizeChart);\n      resizeObserver.disconnect();\n    };\n  }, [chartEchartRef, resizeChart]);\n\n  return {\n    isWaitingForFirstResize,\n    resizeChart,\n  };\n}\n"]}

package/lib/cjs/charts/hooks/use-chart-option.js

@@ -0,0 +1,79 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChartOption = useChartOption;
+const echarts_1 = require("echarts");
+const react_1 = require("react");
+const build_chart_option_1 = require("../utils/build-chart-option");
+const use_chart_refs_1 = require("./use-chart-refs");
+/**
+ * Builds, applies, and exposes the ECharts option for the current React props.
+ *
+ * `buildChartOption` merges Needle defaults, normalized axes/series, threshold
+ * lines, zoom settings, toolbox options, user overrides, and the current legend
+ * selection. After `setOption`, the hook returns ECharts' normalized option so
+ * downstream code, especially the custom legend, can read the final series and
+ * dataset shape ECharts is actually using.
+ */
+function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }) {
+    const { chartEchartRef, legendSelectedRef } = (0, use_chart_refs_1.useChartRefsContext)();
+    const [chartOption, setChartOption] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (chartEchartRef.current === null) {
+            return;
+        }
+        const chart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+        const option = (0, build_chart_option_1.buildChartOption)({
+            dataZoom,
+            dataset,
+            hasCategoryXAxis,
+            hasSliderZoom,
+            legendSelected: legendSelectedRef.current || {},
+            propsSeries,
+            series,
+            thresholdLines,
+            toolboxOptions,
+            userOption,
+            xAxis,
+            yAxis,
+        });
+        chart === null || chart === void 0 ? void 0 : chart.setOption(option, settings);
+        setChartOption(chart === null || chart === void 0 ? void 0 : chart.getOption());
+    }, [
+        chartEchartRef,
+        dataZoom,
+        dataset,
+        hasCategoryXAxis,
+        hasSliderZoom,
+        legendSelectedRef,
+        propsSeries,
+        series,
+        settings,
+        thresholdLines,
+        toolboxOptions,
+        userOption,
+        xAxis,
+        yAxis,
+    ]);
+    return chartOption;
+}
+//# sourceMappingURL=use-chart-option.js.map