@neo4j-ndl/react-charts 1.1.20 → 1.1.22

package/lib/cjs/charts/ChartRender.js

@@ -29,13 +29,9 @@ const use_chart_option_1 = require("./hooks/use-chart-option");
 const use_chart_refs_1 = require("./hooks/use-chart-refs");
 const use_chart_zoom_1 = require("./hooks/use-chart-zoom");
 const build_chart_option_1 = require("./utils/build-chart-option");
+const defaults_1 = require("./utils/defaults");
 const threshold_1 = require("./utils/threshold");
 const user_option_utils_1 = require("./utils/user-option-utils");
-const DEFAULT_CHART_SETTINGS = {
-    lazyUpdate: false,
-    notMerge: true,
-    silent: false,
-};
 /**
  * Owns the ECharts instance element and coordinates chart-specific hooks.
  *
@@ -43,7 +39,7 @@ const DEFAULT_CHART_SETTINGS = {
  * initializes/resizes the chart instance, applies loading and zoom behavior, and
  * reports derived chart state back to `Chart` for legend rendering.
  */
-const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = DEFAULT_CHART_SETTINGS, xAxis: propXAxis, yAxis: propYAxis, }) => {
+const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = defaults_1.defaultChartSettings, xAxis: propXAxis, yAxis: propYAxis, }) => {
     const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
     const dataZoomOptions = userOption === null || userOption === void 0 ? void 0 : userOption.dataZoom;
     const toolboxOptions = userOption === null || userOption === void 0 ? void 0 : userOption.toolbox;

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

@@ -1 +1 @@
-{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.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 { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n  useChartLifecycle,\n  useChartLoading,\n  useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n  hasCategoryXAxis as getHasCategoryXAxis,\n  hasMarkAreaInSeries,\n  hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n  mergeDataZoom,\n  mergeSeries,\n  mergeXAxis,\n  mergeYAxis,\n} from './utils/user-option-utils';\n\nconst DEFAULT_CHART_SETTINGS: NonNullable<ChartProps['settings']> = {\n  lazyUpdate: false,\n  notMerge: true,\n  silent: false,\n};\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n  onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n  onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n  callbacks,\n  dataset,\n  isChartZoomDisabled = false,\n  isLoading,\n  onChartOptionChange,\n  onFirstResizeChange,\n  option: userOption,\n  palette,\n  series: propsSeries,\n  settings = DEFAULT_CHART_SETTINGS,\n  xAxis: propXAxis,\n  yAxis: propYAxis,\n}: ChartRenderProps) => {\n  const { chartEchartRef } = useChartRefsContext();\n  const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n  const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n  const { theme } = useNeedleTheme();\n\n  const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n  const thresholdLines = useMemo(\n    () => normalizeThresholdLines(propsSeries),\n    [propsSeries],\n  );\n  const dataZoom = useMemo(\n    () => mergeDataZoom(dataZoomOptions),\n    [dataZoomOptions],\n  );\n  const series = useMemo(\n    () => mergeSeries(propsSeries, theme, userOption, palette),\n    [palette, propsSeries, theme, userOption],\n  );\n  const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n  const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n  const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n  const hasMarkArea = hasMarkAreaInSeries(series);\n\n  /**\n   * Hook responsibilities:\n   * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n   * - `useChartResize` keeps the canvas sized to its container before first render.\n   * - `useChartOption` builds and applies the merged ECharts option.\n   * - `useChartZoom` attaches consumer zoom callbacks.\n   * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n   */\n  useChartLifecycle({ palette, theme });\n  const { isWaitingForFirstResize } = useChartResize();\n  const chartOption = useChartOption({\n    dataZoom,\n    dataset,\n    hasCategoryXAxis,\n    hasMarkArea,\n    hasSliderZoom,\n    propsSeries,\n    series,\n    settings,\n    thresholdLines,\n    toolboxOptions,\n    userOption,\n    xAxis,\n    yAxis,\n  });\n  useChartZoom({ callbacks, isChartZoomDisabled });\n  useChartLoading({\n    isLoading,\n    isWaitingForFirstResize,\n    theme,\n  });\n\n  useEffect(() => {\n    onFirstResizeChange(isWaitingForFirstResize);\n  }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n  useEffect(() => {\n    onChartOptionChange(chartOption);\n  }, [chartOption, onChartOptionChange]);\n\n  return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}
+{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.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 { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n  useChartLifecycle,\n  useChartLoading,\n  useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n  hasCategoryXAxis as getHasCategoryXAxis,\n  hasMarkAreaInSeries,\n  hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { defaultChartSettings } from './utils/defaults';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n  mergeDataZoom,\n  mergeSeries,\n  mergeXAxis,\n  mergeYAxis,\n} from './utils/user-option-utils';\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n  onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n  onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n  callbacks,\n  dataset,\n  isChartZoomDisabled = false,\n  isLoading,\n  onChartOptionChange,\n  onFirstResizeChange,\n  option: userOption,\n  palette,\n  series: propsSeries,\n  settings = defaultChartSettings,\n  xAxis: propXAxis,\n  yAxis: propYAxis,\n}: ChartRenderProps) => {\n  const { chartEchartRef } = useChartRefsContext();\n  const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n  const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n  const { theme } = useNeedleTheme();\n\n  const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n  const thresholdLines = useMemo(\n    () => normalizeThresholdLines(propsSeries),\n    [propsSeries],\n  );\n  const dataZoom = useMemo(\n    () => mergeDataZoom(dataZoomOptions),\n    [dataZoomOptions],\n  );\n  const series = useMemo(\n    () => mergeSeries(propsSeries, theme, userOption, palette),\n    [palette, propsSeries, theme, userOption],\n  );\n  const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n  const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n  const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n  const hasMarkArea = hasMarkAreaInSeries(series);\n\n  /**\n   * Hook responsibilities:\n   * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n   * - `useChartResize` keeps the canvas sized to its container before first render.\n   * - `useChartOption` builds and applies the merged ECharts option.\n   * - `useChartZoom` attaches consumer zoom callbacks.\n   * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n   */\n  useChartLifecycle({ palette, theme });\n  const { isWaitingForFirstResize } = useChartResize();\n  const chartOption = useChartOption({\n    dataZoom,\n    dataset,\n    hasCategoryXAxis,\n    hasMarkArea,\n    hasSliderZoom,\n    propsSeries,\n    series,\n    settings,\n    thresholdLines,\n    toolboxOptions,\n    userOption,\n    xAxis,\n    yAxis,\n  });\n  useChartZoom({ callbacks, isChartZoomDisabled });\n  useChartLoading({\n    isLoading,\n    isWaitingForFirstResize,\n    theme,\n  });\n\n  useEffect(() => {\n    onFirstResizeChange(isWaitingForFirstResize);\n  }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n  useEffect(() => {\n    onChartOptionChange(chartOption);\n  }, [chartOption, onChartOptionChange]);\n\n  return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}

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

@@ -31,6 +31,10 @@ const use_chart_refs_1 = require("./use-chart-refs");
  * ECharts' global cursor API, resets zoom on double click, and clears ECharts'
  * SVG cursor override after mouse movement so Needle's default cursor styling is
  * preserved.
+ *
+ * The effect re-runs on every render, so each listener has to be detached again
+ * on cleanup. Otherwise they pile up and consumers get one `onZoom` call per
+ * render that has happened so far.
  */
 function useChartZoom({ callbacks, isChartZoomDisabled, }) {
     const { chartEchartRef } = (0, use_chart_refs_1.useChartRefsContext)();
@@ -39,26 +43,27 @@ function useChartZoom({ callbacks, isChartZoomDisabled, }) {
         const chart = chartEchartRef.current === null
             ? undefined
             : (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+        const handleDataZoom = () => {
+            var _a;
+            if (chartEchartRef.current === null) {
+                return;
+            }
+            const currentChart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
+            if (!currentChart) {
+                return;
+            }
+            const option = currentChart.getOption();
+            if (!option || !option.dataZoom) {
+                return;
+            }
+            const dataZoom = Array.isArray(option.dataZoom)
+                ? option.dataZoom[0]
+                : option.dataZoom;
+            const { startValue, endValue } = dataZoom;
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue, startValue });
+        };
         if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) {
-            chart === null || chart === void 0 ? void 0 : chart.on('datazoom', () => {
-                var _a;
-                if (chartEchartRef.current === null) {
-                    return;
-                }
-                const currentChart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
-                if (!currentChart) {
-                    return;
-                }
-                const option = currentChart.getOption();
-                if (!option || !option.dataZoom) {
-                    return;
-                }
-                const dataZoom = Array.isArray(option.dataZoom)
-                    ? option.dataZoom[0]
-                    : option.dataZoom;
-                const { startValue, endValue } = dataZoom;
-                (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue, startValue });
-            });
+            chart === null || chart === void 0 ? void 0 : chart.on('datazoom', handleDataZoom);
         }
         const handleMouseMove = () => {
             // ECharts updates SVG cursor styles on mouse move, so Needle has to
@@ -97,6 +102,7 @@ function useChartZoom({ callbacks, isChartZoomDisabled, }) {
             element === null || element === void 0 ? void 0 : element.removeEventListener('mousemove', handleMouseMove);
             if (chartRefCurrentElement) {
                 const chart = (0, echarts_1.getInstanceByDom)(chartRefCurrentElement);
+                chart === null || chart === void 0 ? void 0 : chart.off('datazoom', handleDataZoom);
                 chart === null || chart === void 0 ? void 0 : chart.getZr().off('mousedown', handleMouseDown);
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"use-chart-zoom.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.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 { getInstanceByDom } from 'echarts';\nimport { useEffect } from 'react';\n\nimport type { ChartProps } from '../utils/chart-types';\nimport { useChartRefsContext } from './use-chart-refs';\n\ntype UseChartZoomParams = {\n  callbacks: ChartProps['callbacks'];\n  isChartZoomDisabled: boolean;\n};\n\n/**\n * Owns ECharts zoom interactions and forwards zoom changes to consumers.\n *\n * The hook subscribes to ECharts `datazoom` events, enables drag-to-zoom through\n * ECharts' global cursor API, resets zoom on double click, and clears ECharts'\n * SVG cursor override after mouse movement so Needle's default cursor styling is\n * preserved.\n */\nexport function useChartZoom({\n  callbacks,\n  isChartZoomDisabled,\n}: UseChartZoomParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    const chart =\n      chartEchartRef.current === null\n        ? undefined\n        : getInstanceByDom(chartEchartRef.current);\n\n    if (callbacks?.onZoom) {\n      chart?.on('datazoom', () => {\n        if (chartEchartRef.current === null) {\n          return;\n        }\n\n        const currentChart = getInstanceByDom(chartEchartRef.current);\n        if (!currentChart) {\n          return;\n        }\n\n        const option = currentChart.getOption();\n        if (!option || !option.dataZoom) {\n          return;\n        }\n\n        const dataZoom = Array.isArray(option.dataZoom)\n          ? option.dataZoom[0]\n          : option.dataZoom;\n        const { startValue, endValue } = dataZoom as {\n          startValue: number;\n          endValue: number;\n        };\n\n        callbacks?.onZoom?.({ endValue, startValue });\n      });\n    }\n\n    const handleMouseMove = () => {\n      // ECharts updates SVG cursor styles on mouse move, so Needle has to\n      // reset it after ECharts' internal handler runs.\n      chart?.getZr().setCursorStyle('default');\n    };\n    const chartChild = chartEchartRef.current?.children[0] as\n      | HTMLElement\n      | undefined;\n    if (!isChartZoomDisabled) {\n      chartChild?.addEventListener('mousemove', handleMouseMove);\n    }\n\n    const handleMouseDown = (params: { event: MouseEvent }) => {\n      const event = params.event;\n      const amountOfMouseClicks = event.detail;\n      const isDoubleClick = amountOfMouseClicks === 2;\n      if (isDoubleClick) {\n        if (chart === undefined) {\n          return;\n        }\n        chart?.dispatchAction({\n          end: 100,\n          start: 0,\n          type: 'dataZoom',\n        });\n        if (callbacks?.onZoom) {\n          callbacks?.onZoom?.({ endValue: 100, startValue: 0 });\n        }\n      }\n    };\n    if (!isChartZoomDisabled) {\n      chart?.getZr().on('mousedown', handleMouseDown);\n    }\n\n    const chartRefCurrentElement = chartEchartRef.current;\n    const element = chartRefCurrentElement?.children[0];\n    return () => {\n      element?.removeEventListener('mousemove', handleMouseMove);\n\n      if (chartRefCurrentElement) {\n        const chart = getInstanceByDom(chartRefCurrentElement);\n        chart?.getZr().off('mousedown', handleMouseDown);\n      }\n    };\n  });\n\n  if (chartEchartRef.current !== null && !isChartZoomDisabled) {\n    const chart = getInstanceByDom(chartEchartRef.current);\n    if (chart) {\n      // Needs to be re-set on every re-render. Sets the selectable zoom area\n      // over the chart body, not the slider.\n      chart.dispatchAction({\n        dataZoomSelectActive: true,\n        key: 'dataZoomSelect',\n        type: 'takeGlobalCursor',\n      });\n    }\n  }\n}\n"]}
+{"version":3,"file":"use-chart-zoom.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.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 { getInstanceByDom } from 'echarts';\nimport { useEffect } from 'react';\n\nimport type { ChartProps } from '../utils/chart-types';\nimport { useChartRefsContext } from './use-chart-refs';\n\ntype UseChartZoomParams = {\n  callbacks: ChartProps['callbacks'];\n  isChartZoomDisabled: boolean;\n};\n\n/**\n * Owns ECharts zoom interactions and forwards zoom changes to consumers.\n *\n * The hook subscribes to ECharts `datazoom` events, enables drag-to-zoom through\n * ECharts' global cursor API, resets zoom on double click, and clears ECharts'\n * SVG cursor override after mouse movement so Needle's default cursor styling is\n * preserved.\n *\n * The effect re-runs on every render, so each listener has to be detached again\n * on cleanup. Otherwise they pile up and consumers get one `onZoom` call per\n * render that has happened so far.\n */\nexport function useChartZoom({\n  callbacks,\n  isChartZoomDisabled,\n}: UseChartZoomParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    const chart =\n      chartEchartRef.current === null\n        ? undefined\n        : getInstanceByDom(chartEchartRef.current);\n\n    const handleDataZoom = () => {\n      if (chartEchartRef.current === null) {\n        return;\n      }\n\n      const currentChart = getInstanceByDom(chartEchartRef.current);\n      if (!currentChart) {\n        return;\n      }\n\n      const option = currentChart.getOption();\n      if (!option || !option.dataZoom) {\n        return;\n      }\n\n      const dataZoom = Array.isArray(option.dataZoom)\n        ? option.dataZoom[0]\n        : option.dataZoom;\n      const { startValue, endValue } = dataZoom as {\n        startValue: number;\n        endValue: number;\n      };\n\n      callbacks?.onZoom?.({ endValue, startValue });\n    };\n\n    if (callbacks?.onZoom) {\n      chart?.on('datazoom', handleDataZoom);\n    }\n\n    const handleMouseMove = () => {\n      // ECharts updates SVG cursor styles on mouse move, so Needle has to\n      // reset it after ECharts' internal handler runs.\n      chart?.getZr().setCursorStyle('default');\n    };\n    const chartChild = chartEchartRef.current?.children[0] as\n      | HTMLElement\n      | undefined;\n    if (!isChartZoomDisabled) {\n      chartChild?.addEventListener('mousemove', handleMouseMove);\n    }\n\n    const handleMouseDown = (params: { event: MouseEvent }) => {\n      const event = params.event;\n      const amountOfMouseClicks = event.detail;\n      const isDoubleClick = amountOfMouseClicks === 2;\n      if (isDoubleClick) {\n        if (chart === undefined) {\n          return;\n        }\n        chart?.dispatchAction({\n          end: 100,\n          start: 0,\n          type: 'dataZoom',\n        });\n        if (callbacks?.onZoom) {\n          callbacks?.onZoom?.({ endValue: 100, startValue: 0 });\n        }\n      }\n    };\n    if (!isChartZoomDisabled) {\n      chart?.getZr().on('mousedown', handleMouseDown);\n    }\n\n    const chartRefCurrentElement = chartEchartRef.current;\n    const element = chartRefCurrentElement?.children[0];\n    return () => {\n      element?.removeEventListener('mousemove', handleMouseMove);\n\n      if (chartRefCurrentElement) {\n        const chart = getInstanceByDom(chartRefCurrentElement);\n        chart?.off('datazoom', handleDataZoom);\n        chart?.getZr().off('mousedown', handleMouseDown);\n      }\n    };\n  });\n\n  if (chartEchartRef.current !== null && !isChartZoomDisabled) {\n    const chart = getInstanceByDom(chartEchartRef.current);\n    if (chart) {\n      // Needs to be re-set on every re-render. Sets the selectable zoom area\n      // over the chart body, not the slider.\n      chart.dispatchAction({\n        dataZoomSelectActive: true,\n        key: 'dataZoomSelect',\n        type: 'takeGlobalCursor',\n      });\n    }\n  }\n}\n"]}

package/lib/cjs/charts/tests/ChartZoomHarness.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartZoomHarness = 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_charts_1 = require("@neo4j-ndl/react-charts");
+const echarts_1 = require("echarts");
+const react_1 = require("react");
+const POINT_COUNT = 180;
+const zoomHarnessDataset = [
+    ['time', 'value'],
+    ...Array.from({ length: POINT_COUNT }, (_, index) => [
+        index,
+        Number((40 + Math.sin(index / 6) * 12).toFixed(2)),
+    ]),
+];
+/**
+ * Reproduces the consumer setup from the metrics UI: a chart with toolbox
+ * brush-zoom whose parent re-renders while the chart stays mounted, passing a
+ * freshly built `option` object on every render.
+ */
+const ChartZoomHarness = ({ settings, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const zoomCallsRef = (0, react_1.useRef)([]);
+    const [, setRerenderCount] = (0, react_1.useState)(0);
+    const handleZoom = (0, react_1.useCallback)((zoom) => {
+        zoomCallsRef.current = [...zoomCallsRef.current, zoom];
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const getChart = () => {
+            var _a;
+            const echartElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ndl-chart-echart');
+            return echartElement instanceof HTMLElement
+                ? (0, echarts_1.getInstanceByDom)(echartElement)
+                : undefined;
+        };
+        window.chartZoomHarness = {
+            getAppliedZoomWindows: () => {
+                var _a, _b;
+                const dataZoom = (_b = (_a = getChart()) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.dataZoom;
+                return (dataZoom !== null && dataZoom !== void 0 ? dataZoom : [])
+                    .filter((item) => item.startValue !== undefined && item.endValue !== undefined)
+                    .map((item) => ({
+                    endValue: item.endValue,
+                    startValue: item.startValue,
+                }));
+            },
+            getZoomCalls: () => zoomCallsRef.current,
+            pixelToValue: (pixelX) => { var _a; return (_a = getChart()) === null || _a === void 0 ? void 0 : _a.convertFromPixel({ xAxisIndex: 0 }, pixelX); },
+            resetZoomCalls: () => {
+                zoomCallsRef.current = [];
+            },
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: { height: '420px', width: '900px' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-testid": "force-rerender", onClick: () => setRerenderCount((count) => count + 1), children: "Re-render" }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-chart", style: { height: '380px', width: '100%' }, children: (0, jsx_runtime_1.jsx)(react_charts_1.Chart, { callbacks: { onZoom: handleZoom }, dataset: [{ source: zoomHarnessDataset }], series: [
+                        {
+                            encode: { x: 'time', y: 'value' },
+                            name: 'Value',
+                            type: 'line',
+                        },
+                    ], settings: settings, xAxis: { type: 'value' }, yAxis: { type: 'value' }, option: {
+                        dataZoom: [
+                            {
+                                filterMode: 'none',
+                                type: 'inside',
+                                zoomOnMouseWheel: false,
+                            },
+                        ],
+                        toolbox: {
+                            feature: {
+                                dataZoom: {
+                                    yAxisIndex: false,
+                                },
+                            },
+                        },
+                    } }) })] }));
+};
+exports.ChartZoomHarness = ChartZoomHarness;
+//# sourceMappingURL=ChartZoomHarness.js.map

package/lib/cjs/charts/tests/ChartZoomHarness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartZoomHarness.js","sourceRoot":"","sources":["../../../../src/charts/tests/ChartZoomHarness.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 { Chart } from '@neo4j-ndl/react-charts';\nimport { getInstanceByDom } from 'echarts';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\ntype ChartSettings = ComponentProps<typeof Chart>['settings'];\n\nexport type ZoomCall = { endValue: number; startValue: number };\n\nexport type ZoomHarnessApi = {\n  /** Applied zoom windows, in data values, as ECharts currently has them. */\n  getAppliedZoomWindows: () => ZoomCall[];\n  /** Every `callbacks.onZoom` invocation the consumer received. */\n  getZoomCalls: () => ZoomCall[];\n  /** Data value at a pixel offset inside the chart element. */\n  pixelToValue: (pixelX: number) => number;\n  resetZoomCalls: () => void;\n};\n\ntype HarnessWindow = Window & { chartZoomHarness?: ZoomHarnessApi };\n\nconst POINT_COUNT = 180;\n\nconst zoomHarnessDataset = [\n  ['time', 'value'],\n  ...Array.from({ length: POINT_COUNT }, (_, index) => [\n    index,\n    Number((40 + Math.sin(index / 6) * 12).toFixed(2)),\n  ]),\n];\n\n/**\n * Reproduces the consumer setup from the metrics UI: a chart with toolbox\n * brush-zoom whose parent re-renders while the chart stays mounted, passing a\n * freshly built `option` object on every render.\n */\nexport const ChartZoomHarness = ({\n  settings,\n}: {\n  settings?: ChartSettings;\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const zoomCallsRef = useRef<ZoomCall[]>([]);\n  const [, setRerenderCount] = useState(0);\n\n  const handleZoom = useCallback((zoom: ZoomCall) => {\n    zoomCallsRef.current = [...zoomCallsRef.current, zoom];\n  }, []);\n\n  useEffect(() => {\n    const getChart = () => {\n      const echartElement =\n        containerRef.current?.querySelector('.ndl-chart-echart');\n      return echartElement instanceof HTMLElement\n        ? getInstanceByDom(echartElement)\n        : undefined;\n    };\n\n    (window as HarnessWindow).chartZoomHarness = {\n      getAppliedZoomWindows: () => {\n        const dataZoom = (\n          getChart()?.getOption() as\n            | { dataZoom?: { endValue?: number; startValue?: number }[] }\n            | undefined\n        )?.dataZoom;\n\n        return (dataZoom ?? [])\n          .filter(\n            (item) =>\n              item.startValue !== undefined && item.endValue !== undefined,\n          )\n          .map((item) => ({\n            endValue: item.endValue as number,\n            startValue: item.startValue as number,\n          }));\n      },\n      getZoomCalls: () => zoomCallsRef.current,\n      pixelToValue: (pixelX: number) =>\n        getChart()?.convertFromPixel({ xAxisIndex: 0 }, pixelX) as number,\n      resetZoomCalls: () => {\n        zoomCallsRef.current = [];\n      },\n    };\n  }, []);\n\n  return (\n    <div ref={containerRef} style={{ height: '420px', width: '900px' }}>\n      <button\n        type=\"button\"\n        data-testid=\"force-rerender\"\n        onClick={() => setRerenderCount((count) => count + 1)}\n      >\n        Re-render\n      </button>\n      <div className=\"ndl-chart\" style={{ height: '380px', width: '100%' }}>\n        <Chart\n          callbacks={{ onZoom: handleZoom }}\n          dataset={[{ source: zoomHarnessDataset }]}\n          series={[\n            {\n              encode: { x: 'time', y: 'value' },\n              name: 'Value',\n              type: 'line',\n            },\n          ]}\n          settings={settings}\n          xAxis={{ type: 'value' }}\n          yAxis={{ type: 'value' }}\n          option={{\n            dataZoom: [\n              {\n                filterMode: 'none',\n                type: 'inside',\n                zoomOnMouseWheel: false,\n              },\n            ],\n            toolbox: {\n              feature: {\n                dataZoom: {\n                  yAxisIndex: false,\n                },\n              },\n            },\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/cjs/charts/utils/chart-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-types.js","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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 {\n  type EChartsOption,\n  type LineSeriesOption,\n  type RegisteredSeriesOption,\n  type SetOptionOpts,\n} from 'echarts';\n\nexport type HexColor = `#${string}`;\n\nexport type Condition =\n  | 'greater'\n  | 'greaterOrEqual'\n  | 'less'\n  | 'lessOrEqual'\n  | 'equal'\n  | 'notEqual';\n\nexport type Values<T> = T[keyof T];\nexport type SeriesOption = Values<RegisteredSeriesOption>;\n\nexport type EchartsSeries = SeriesOption | SeriesOption[];\n\ntype CustomCondition = (\n  lineValue: unknown,\n  thresholdLineValue: unknown,\n) => boolean;\n\nexport interface ThresholdLineSeriesOption<\n  T extends NotificationType,\n> extends Omit<LineSeriesOption, 'type'> {\n  type: 'thresholdLine';\n  yAxis: number;\n  xAxis: [number, number];\n  notificationType: T;\n  color?: string;\n  condition?: Condition;\n  customConditionText?: string;\n  customCondition?: CustomCondition;\n}\n\n// Only one threshold line of each type is allowed.\nexport type NeedleSeries =\n  | [\n      ThresholdLineSeriesOption<'warning'>,\n      ThresholdLineSeriesOption<'danger'>,\n      ...SeriesOption[],\n    ]\n  | [ThresholdLineSeriesOption<'danger'>, ...SeriesOption[]]\n  | [ThresholdLineSeriesOption<'warning'>, ...SeriesOption[]]\n  | SeriesOption[];\n\nexport interface ChartProps {\n  /** The dataset configuration for the chart. Can be a single dataset or an array of datasets. */\n  dataset: EChartsOption['dataset'];\n  /** The series configuration for the chart. Defines what data to display and how to display it. */\n  series: NeedleSeries;\n  /** X-axis configuration for the chart. */\n  xAxis?: EChartsOption['xAxis'];\n  /** Y-axis configuration for the chart. */\n  yAxis?: EChartsOption['yAxis'];\n  /** Legend configuration for the chart. */\n  legend?: {\n    // TODO v5: fix boolean naming convention\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    show?: boolean;\n    // TODO v5: remove this prop\n    /** @deprecated No longer has any effect since wrapping is now automatic, will be removed in v 5 */\n    wrappingType?: 'wrapping' | 'truncation' | 'overflow';\n  };\n  /** Additional ECharts options to merge with the chart configuration. */\n  option?: Omit<\n    EChartsOption,\n    'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'\n  >;\n  /** Custom CSS styles to apply to the chart container. */\n  style?: React.CSSProperties;\n  /** Settings for how ECharts should update the chart. */\n  settings?: SetOptionOpts;\n  /** Whether the chart is in a loading state. */\n  isLoading?: boolean;\n  /** Callback functions for chart interactions. */\n  callbacks?: {\n    onZoom?: (params: { startValue: number; endValue: number }) => void;\n  };\n  /** Data zoom configuration for the chart. */\n  dataZoom?: EChartsOption['dataZoom'];\n  /** Whether the zoom in the chart is disabled */\n  isChartZoomDisabled?: boolean;\n  /** Custom color palette that overrides the default categorical colors. */\n  palette?: HexColor[];\n}\n\nexport interface ChartEmptyProps {\n  /** A text displayed to the user when the chart is empty. */\n  message?: React.ReactNode;\n  /** The type of chart. This is used to render the appropriate icon. */\n  type?: 'line' | 'pie' | 'bar';\n  /** Optional element (preferably a TextButton) that should provide the user with an action. */\n  action?: React.ReactNode;\n}\n\n/**\n * Chart tooltip\n */\n\nexport interface ChartTooltipProps {\n  children: React.ReactNode;\n  className?: string;\n  isOpen?: boolean;\n  style?: React.CSSProperties;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport type NotificationType = 'warning' | 'danger';\n\nexport type Notification = {\n  leadingElement: React.ReactNode;\n  trailingElement: React.ReactNode;\n  notificationType: NotificationType;\n  id: string;\n};\n\nexport type ChartTooltipContentProps = {\n  leadingElement?: React.ReactNode;\n  trailingElement?: React.ReactNode;\n  indentSquareColor?: string;\n  notifications?: Notification[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\n/**\n * Legend\n */\nexport interface LegendItemProps {\n  name: string;\n  children: React.ReactNode;\n  as?: 'button' | 'div';\n  className?: string;\n  color?: string;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  selected?: boolean;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  deSelected?: boolean;\n  onLegendItemClick?: () => void;\n  hasButtons?: boolean;\n  onLegendItemMouseEnter?: () => void;\n  onLegendItemMouseLeave?: () => void;\n  ref?: React.Ref<HTMLButtonElement> & React.Ref<HTMLDivElement>;\n}\n\nexport type LegendProps = {\n  series: {\n    name: string;\n    color: string;\n  }[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\nexport type HtmlAttributes<T extends React.ElementType> =\n  React.ComponentPropsWithoutRef<T> & {\n    [key: `data-${string}`]: string | undefined;\n  };\n\ntype BaseProps<T extends React.ElementType> = {\n  /**\n   * Additional classnames will be applied to the root element.\n   */\n  className?: string;\n  /**\n   * Additional css styling. Will be applied to the root element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Html attributes to apply to the root element. This will override any default html attributes, use with caution.\n   */\n  htmlAttributes?: HtmlAttributes<T>;\n\n  /**\n   * A ref to apply to the root element.\n   */\n  ref?: React.ComponentPropsWithRef<T>['ref'];\n};\n\nexport type CommonProps<T extends React.ElementType, P> = P & BaseProps<T>;\n"]}
+{"version":3,"file":"chart-types.js","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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 {\n  type EChartsOption,\n  type LineSeriesOption,\n  type RegisteredSeriesOption,\n  type SetOptionOpts,\n} from 'echarts';\n\nexport type HexColor = `#${string}`;\n\nexport type Condition =\n  | 'greater'\n  | 'greaterOrEqual'\n  | 'less'\n  | 'lessOrEqual'\n  | 'equal'\n  | 'notEqual';\n\nexport type Values<T> = T[keyof T];\nexport type SeriesOption = Values<RegisteredSeriesOption>;\n\nexport type EchartsSeries = SeriesOption | SeriesOption[];\n\ntype CustomCondition = (\n  lineValue: unknown,\n  thresholdLineValue: unknown,\n) => boolean;\n\nexport interface ThresholdLineSeriesOption<\n  T extends NotificationType,\n> extends Omit<LineSeriesOption, 'type'> {\n  type: 'thresholdLine';\n  yAxis: number;\n  xAxis: [number, number];\n  notificationType: T;\n  color?: string;\n  condition?: Condition;\n  customConditionText?: string;\n  customCondition?: CustomCondition;\n}\n\n// Only one threshold line of each type is allowed.\nexport type NeedleSeries =\n  | [\n      ThresholdLineSeriesOption<'warning'>,\n      ThresholdLineSeriesOption<'danger'>,\n      ...SeriesOption[],\n    ]\n  | [ThresholdLineSeriesOption<'danger'>, ...SeriesOption[]]\n  | [ThresholdLineSeriesOption<'warning'>, ...SeriesOption[]]\n  | SeriesOption[];\n\nexport interface ChartProps {\n  /** The dataset configuration for the chart. Can be a single dataset or an array of datasets. */\n  dataset: EChartsOption['dataset'];\n  /** The series configuration for the chart. Defines what data to display and how to display it. */\n  series: NeedleSeries;\n  /** X-axis configuration for the chart. */\n  xAxis?: EChartsOption['xAxis'];\n  /** Y-axis configuration for the chart. */\n  yAxis?: EChartsOption['yAxis'];\n  /** Legend configuration for the chart. */\n  legend?: {\n    // TODO v5: fix boolean naming convention\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    show?: boolean;\n    // TODO v5: remove this prop\n    /** @deprecated No longer has any effect since wrapping is now automatic, will be removed in v 5 */\n    wrappingType?: 'wrapping' | 'truncation' | 'overflow';\n  };\n  /** Additional ECharts options to merge with the chart configuration. */\n  option?: Omit<\n    EChartsOption,\n    'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'\n  >;\n  /** Custom CSS styles to apply to the chart container. */\n  style?: React.CSSProperties;\n  /**\n   * Settings for how ECharts should update the chart. Defaults to replacing the\n   * components the chart owns (`series`, `dataset`, axes, and similar) while\n   * merging the rest, which drops data that disappeared without discarding the\n   * ECharts components behind zoom interactions. Passing `notMerge: true`\n   * re-creates those components on every update and breaks drag-to-zoom.\n   */\n  settings?: SetOptionOpts;\n  /** Whether the chart is in a loading state. */\n  isLoading?: boolean;\n  /** Callback functions for chart interactions. */\n  callbacks?: {\n    onZoom?: (params: { startValue: number; endValue: number }) => void;\n  };\n  /** Data zoom configuration for the chart. */\n  dataZoom?: EChartsOption['dataZoom'];\n  /** Whether the zoom in the chart is disabled */\n  isChartZoomDisabled?: boolean;\n  /** Custom color palette that overrides the default categorical colors. */\n  palette?: HexColor[];\n}\n\nexport interface ChartEmptyProps {\n  /** A text displayed to the user when the chart is empty. */\n  message?: React.ReactNode;\n  /** The type of chart. This is used to render the appropriate icon. */\n  type?: 'line' | 'pie' | 'bar';\n  /** Optional element (preferably a TextButton) that should provide the user with an action. */\n  action?: React.ReactNode;\n}\n\n/**\n * Chart tooltip\n */\n\nexport interface ChartTooltipProps {\n  children: React.ReactNode;\n  className?: string;\n  isOpen?: boolean;\n  style?: React.CSSProperties;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport type NotificationType = 'warning' | 'danger';\n\nexport type Notification = {\n  leadingElement: React.ReactNode;\n  trailingElement: React.ReactNode;\n  notificationType: NotificationType;\n  id: string;\n};\n\nexport type ChartTooltipContentProps = {\n  leadingElement?: React.ReactNode;\n  trailingElement?: React.ReactNode;\n  indentSquareColor?: string;\n  notifications?: Notification[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\n/**\n * Legend\n */\nexport interface LegendItemProps {\n  name: string;\n  children: React.ReactNode;\n  as?: 'button' | 'div';\n  className?: string;\n  color?: string;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  selected?: boolean;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  deSelected?: boolean;\n  onLegendItemClick?: () => void;\n  hasButtons?: boolean;\n  onLegendItemMouseEnter?: () => void;\n  onLegendItemMouseLeave?: () => void;\n  ref?: React.Ref<HTMLButtonElement> & React.Ref<HTMLDivElement>;\n}\n\nexport type LegendProps = {\n  series: {\n    name: string;\n    color: string;\n  }[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\nexport type HtmlAttributes<T extends React.ElementType> =\n  React.ComponentPropsWithoutRef<T> & {\n    [key: `data-${string}`]: string | undefined;\n  };\n\ntype BaseProps<T extends React.ElementType> = {\n  /**\n   * Additional classnames will be applied to the root element.\n   */\n  className?: string;\n  /**\n   * Additional css styling. Will be applied to the root element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Html attributes to apply to the root element. This will override any default html attributes, use with caution.\n   */\n  htmlAttributes?: HtmlAttributes<T>;\n\n  /**\n   * A ref to apply to the root element.\n   */\n  ref?: React.ComponentPropsWithRef<T>['ref'];\n};\n\nexport type CommonProps<T extends React.ElementType, P> = P & BaseProps<T>;\n"]}

package/lib/cjs/charts/utils/defaults.js

@@ -20,9 +20,44 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultThresholdLineSeriesOption = void 0;
+exports.needleOwnedComponents = exports.defaultThresholdLineSeriesOption = exports.defaultChartSettings = void 0;
 const defaultThresholdLineSeriesOption = {
     condition: 'greater',
 };
 exports.defaultThresholdLineSeriesOption = defaultThresholdLineSeriesOption;
+/**
+ * ECharts component main types that `buildChartOption` always writes in full,
+ * so replacing them gives the same "drop what disappeared" behavior as
+ * `notMerge`. Every entry has to be a registered component main type, which is
+ * only asserted by ECharts in development builds.
+ *
+ * `toolbox` is deliberately absent: it has to keep its view instance across
+ * updates, see `defaultChartSettings`.
+ */
+const needleOwnedComponents = [
+    'dataZoom',
+    'dataset',
+    'grid',
+    'legend',
+    'series',
+    'tooltip',
+    'xAxis',
+    'yAxis',
+];
+exports.needleOwnedComponents = needleOwnedComponents;
+/**
+ * `notMerge` rebuilds every component view on each `setOption`. That makes
+ * ECharts mount a fresh toolbox brush controller while the previous one stays
+ * attached to the renderer, because `ToolboxView.dispose` iterates its feature
+ * map with `zrUtil.each` and so never disposes anything. Every leftover
+ * controller then re-applies the same drag, each time against an axis the
+ * previous one already zoomed, which shrinks the selected range.
+ */
+const defaultChartSettings = {
+    lazyUpdate: false,
+    notMerge: false,
+    replaceMerge: needleOwnedComponents,
+    silent: false,
+};
+exports.defaultChartSettings = defaultChartSettings;
 //# sourceMappingURL=defaults.js.map

package/lib/cjs/charts/utils/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAIH,MAAM,gCAAgC,GAElC;IACF,SAAS,EAAE,SAAS;CACrB,CAAC;AAEO,4EAAgC","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 type { Condition } from './chart-types';\n\nconst defaultThresholdLineSeriesOption: {\n  condition: Condition;\n} = {\n  condition: 'greater',\n};\n\nexport { defaultThresholdLineSeriesOption };\n"]}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAIH,MAAM,gCAAgC,GAElC;IACF,SAAS,EAAE,SAAS;CACrB,CAAC;AAuCA,4EAAgC;AArClC;;;;;;;;GAQG;AACH,MAAM,qBAAqB,GAAG;IAC5B,UAAU;IACV,SAAS;IACT,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,OAAO;IACP,OAAO;CACR,CAAC;AAoBA,sDAAqB;AAlBvB;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAwC;IAChE,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,qBAAqB;IACnC,MAAM,EAAE,KAAK;CACd,CAAC;AAGA,oDAAoB","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 type { ChartProps, Condition } from './chart-types';\n\nconst defaultThresholdLineSeriesOption: {\n  condition: Condition;\n} = {\n  condition: 'greater',\n};\n\n/**\n * ECharts component main types that `buildChartOption` always writes in full,\n * so replacing them gives the same \"drop what disappeared\" behavior as\n * `notMerge`. Every entry has to be a registered component main type, which is\n * only asserted by ECharts in development builds.\n *\n * `toolbox` is deliberately absent: it has to keep its view instance across\n * updates, see `defaultChartSettings`.\n */\nconst needleOwnedComponents = [\n  'dataZoom',\n  'dataset',\n  'grid',\n  'legend',\n  'series',\n  'tooltip',\n  'xAxis',\n  'yAxis',\n];\n\n/**\n * `notMerge` rebuilds every component view on each `setOption`. That makes\n * ECharts mount a fresh toolbox brush controller while the previous one stays\n * attached to the renderer, because `ToolboxView.dispose` iterates its feature\n * map with `zrUtil.each` and so never disposes anything. Every leftover\n * controller then re-applies the same drag, each time against an axis the\n * previous one already zoomed, which shrinks the selected range.\n */\nconst defaultChartSettings: NonNullable<ChartProps['settings']> = {\n  lazyUpdate: false,\n  notMerge: false,\n  replaceMerge: needleOwnedComponents,\n  silent: false,\n};\n\nexport {\n  defaultChartSettings,\n  defaultThresholdLineSeriesOption,\n  needleOwnedComponents,\n};\n"]}

package/lib/esm/charts/ChartRender.js

@@ -26,13 +26,9 @@ import { useChartOption } from './hooks/use-chart-option';
 import { useChartRefsContext } from './hooks/use-chart-refs';
 import { useChartZoom } from './hooks/use-chart-zoom';
 import { hasCategoryXAxis as getHasCategoryXAxis, hasMarkAreaInSeries, hasSliderDataZoom, } from './utils/build-chart-option';
+import { defaultChartSettings } from './utils/defaults';
 import { normalizeThresholdLines } from './utils/threshold';
 import { mergeDataZoom, mergeSeries, mergeXAxis, mergeYAxis, } from './utils/user-option-utils';
-const DEFAULT_CHART_SETTINGS = {
-    lazyUpdate: false,
-    notMerge: true,
-    silent: false,
-};
 /**
  * Owns the ECharts instance element and coordinates chart-specific hooks.
  *
@@ -40,7 +36,7 @@ const DEFAULT_CHART_SETTINGS = {
  * initializes/resizes the chart instance, applies loading and zoom behavior, and
  * reports derived chart state back to `Chart` for legend rendering.
  */
-export const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = DEFAULT_CHART_SETTINGS, xAxis: propXAxis, yAxis: propYAxis, }) => {
+export const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoading, onChartOptionChange, onFirstResizeChange, option: userOption, palette, series: propsSeries, settings = defaultChartSettings, xAxis: propXAxis, yAxis: propYAxis, }) => {
     const { chartEchartRef } = useChartRefsContext();
     const dataZoomOptions = userOption === null || userOption === void 0 ? void 0 : userOption.dataZoom;
     const toolboxOptions = userOption === null || userOption === void 0 ? void 0 : userOption.toolbox;

package/lib/esm/charts/ChartRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.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 { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n  useChartLifecycle,\n  useChartLoading,\n  useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n  hasCategoryXAxis as getHasCategoryXAxis,\n  hasMarkAreaInSeries,\n  hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n  mergeDataZoom,\n  mergeSeries,\n  mergeXAxis,\n  mergeYAxis,\n} from './utils/user-option-utils';\n\nconst DEFAULT_CHART_SETTINGS: NonNullable<ChartProps['settings']> = {\n  lazyUpdate: false,\n  notMerge: true,\n  silent: false,\n};\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n  onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n  onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n  callbacks,\n  dataset,\n  isChartZoomDisabled = false,\n  isLoading,\n  onChartOptionChange,\n  onFirstResizeChange,\n  option: userOption,\n  palette,\n  series: propsSeries,\n  settings = DEFAULT_CHART_SETTINGS,\n  xAxis: propXAxis,\n  yAxis: propYAxis,\n}: ChartRenderProps) => {\n  const { chartEchartRef } = useChartRefsContext();\n  const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n  const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n  const { theme } = useNeedleTheme();\n\n  const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n  const thresholdLines = useMemo(\n    () => normalizeThresholdLines(propsSeries),\n    [propsSeries],\n  );\n  const dataZoom = useMemo(\n    () => mergeDataZoom(dataZoomOptions),\n    [dataZoomOptions],\n  );\n  const series = useMemo(\n    () => mergeSeries(propsSeries, theme, userOption, palette),\n    [palette, propsSeries, theme, userOption],\n  );\n  const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n  const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n  const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n  const hasMarkArea = hasMarkAreaInSeries(series);\n\n  /**\n   * Hook responsibilities:\n   * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n   * - `useChartResize` keeps the canvas sized to its container before first render.\n   * - `useChartOption` builds and applies the merged ECharts option.\n   * - `useChartZoom` attaches consumer zoom callbacks.\n   * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n   */\n  useChartLifecycle({ palette, theme });\n  const { isWaitingForFirstResize } = useChartResize();\n  const chartOption = useChartOption({\n    dataZoom,\n    dataset,\n    hasCategoryXAxis,\n    hasMarkArea,\n    hasSliderZoom,\n    propsSeries,\n    series,\n    settings,\n    thresholdLines,\n    toolboxOptions,\n    userOption,\n    xAxis,\n    yAxis,\n  });\n  useChartZoom({ callbacks, isChartZoomDisabled });\n  useChartLoading({\n    isLoading,\n    isWaitingForFirstResize,\n    theme,\n  });\n\n  useEffect(() => {\n    onFirstResizeChange(isWaitingForFirstResize);\n  }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n  useEffect(() => {\n    onChartOptionChange(chartOption);\n  }, [chartOption, onChartOptionChange]);\n\n  return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}
+{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.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 { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n  useChartLifecycle,\n  useChartLoading,\n  useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n  hasCategoryXAxis as getHasCategoryXAxis,\n  hasMarkAreaInSeries,\n  hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { defaultChartSettings } from './utils/defaults';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n  mergeDataZoom,\n  mergeSeries,\n  mergeXAxis,\n  mergeYAxis,\n} from './utils/user-option-utils';\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n  onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n  onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n  callbacks,\n  dataset,\n  isChartZoomDisabled = false,\n  isLoading,\n  onChartOptionChange,\n  onFirstResizeChange,\n  option: userOption,\n  palette,\n  series: propsSeries,\n  settings = defaultChartSettings,\n  xAxis: propXAxis,\n  yAxis: propYAxis,\n}: ChartRenderProps) => {\n  const { chartEchartRef } = useChartRefsContext();\n  const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n  const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n  const { theme } = useNeedleTheme();\n\n  const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n  const thresholdLines = useMemo(\n    () => normalizeThresholdLines(propsSeries),\n    [propsSeries],\n  );\n  const dataZoom = useMemo(\n    () => mergeDataZoom(dataZoomOptions),\n    [dataZoomOptions],\n  );\n  const series = useMemo(\n    () => mergeSeries(propsSeries, theme, userOption, palette),\n    [palette, propsSeries, theme, userOption],\n  );\n  const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n  const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n  const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n  const hasMarkArea = hasMarkAreaInSeries(series);\n\n  /**\n   * Hook responsibilities:\n   * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n   * - `useChartResize` keeps the canvas sized to its container before first render.\n   * - `useChartOption` builds and applies the merged ECharts option.\n   * - `useChartZoom` attaches consumer zoom callbacks.\n   * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n   */\n  useChartLifecycle({ palette, theme });\n  const { isWaitingForFirstResize } = useChartResize();\n  const chartOption = useChartOption({\n    dataZoom,\n    dataset,\n    hasCategoryXAxis,\n    hasMarkArea,\n    hasSliderZoom,\n    propsSeries,\n    series,\n    settings,\n    thresholdLines,\n    toolboxOptions,\n    userOption,\n    xAxis,\n    yAxis,\n  });\n  useChartZoom({ callbacks, isChartZoomDisabled });\n  useChartLoading({\n    isLoading,\n    isWaitingForFirstResize,\n    theme,\n  });\n\n  useEffect(() => {\n    onFirstResizeChange(isWaitingForFirstResize);\n  }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n  useEffect(() => {\n    onChartOptionChange(chartOption);\n  }, [chartOption, onChartOptionChange]);\n\n  return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}

package/lib/esm/charts/hooks/use-chart-zoom.js

@@ -28,6 +28,10 @@ import { useChartRefsContext } from './use-chart-refs';
  * ECharts' global cursor API, resets zoom on double click, and clears ECharts'
  * SVG cursor override after mouse movement so Needle's default cursor styling is
  * preserved.
+ *
+ * The effect re-runs on every render, so each listener has to be detached again
+ * on cleanup. Otherwise they pile up and consumers get one `onZoom` call per
+ * render that has happened so far.
  */
 export function useChartZoom({ callbacks, isChartZoomDisabled, }) {
     const { chartEchartRef } = useChartRefsContext();
@@ -36,26 +40,27 @@ export function useChartZoom({ callbacks, isChartZoomDisabled, }) {
         const chart = chartEchartRef.current === null
             ? undefined
             : getInstanceByDom(chartEchartRef.current);
+        const handleDataZoom = () => {
+            var _a;
+            if (chartEchartRef.current === null) {
+                return;
+            }
+            const currentChart = getInstanceByDom(chartEchartRef.current);
+            if (!currentChart) {
+                return;
+            }
+            const option = currentChart.getOption();
+            if (!option || !option.dataZoom) {
+                return;
+            }
+            const dataZoom = Array.isArray(option.dataZoom)
+                ? option.dataZoom[0]
+                : option.dataZoom;
+            const { startValue, endValue } = dataZoom;
+            (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue, startValue });
+        };
         if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) {
-            chart === null || chart === void 0 ? void 0 : chart.on('datazoom', () => {
-                var _a;
-                if (chartEchartRef.current === null) {
-                    return;
-                }
-                const currentChart = getInstanceByDom(chartEchartRef.current);
-                if (!currentChart) {
-                    return;
-                }
-                const option = currentChart.getOption();
-                if (!option || !option.dataZoom) {
-                    return;
-                }
-                const dataZoom = Array.isArray(option.dataZoom)
-                    ? option.dataZoom[0]
-                    : option.dataZoom;
-                const { startValue, endValue } = dataZoom;
-                (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue, startValue });
-            });
+            chart === null || chart === void 0 ? void 0 : chart.on('datazoom', handleDataZoom);
         }
         const handleMouseMove = () => {
             // ECharts updates SVG cursor styles on mouse move, so Needle has to
@@ -94,6 +99,7 @@ export function useChartZoom({ callbacks, isChartZoomDisabled, }) {
             element === null || element === void 0 ? void 0 : element.removeEventListener('mousemove', handleMouseMove);
             if (chartRefCurrentElement) {
                 const chart = getInstanceByDom(chartRefCurrentElement);
+                chart === null || chart === void 0 ? void 0 : chart.off('datazoom', handleDataZoom);
                 chart === null || chart === void 0 ? void 0 : chart.getZr().off('mousedown', handleMouseDown);
             }
         };

package/lib/esm/charts/hooks/use-chart-zoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-zoom.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.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 { getInstanceByDom } from 'echarts';\nimport { useEffect } from 'react';\n\nimport type { ChartProps } from '../utils/chart-types';\nimport { useChartRefsContext } from './use-chart-refs';\n\ntype UseChartZoomParams = {\n  callbacks: ChartProps['callbacks'];\n  isChartZoomDisabled: boolean;\n};\n\n/**\n * Owns ECharts zoom interactions and forwards zoom changes to consumers.\n *\n * The hook subscribes to ECharts `datazoom` events, enables drag-to-zoom through\n * ECharts' global cursor API, resets zoom on double click, and clears ECharts'\n * SVG cursor override after mouse movement so Needle's default cursor styling is\n * preserved.\n */\nexport function useChartZoom({\n  callbacks,\n  isChartZoomDisabled,\n}: UseChartZoomParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    const chart =\n      chartEchartRef.current === null\n        ? undefined\n        : getInstanceByDom(chartEchartRef.current);\n\n    if (callbacks?.onZoom) {\n      chart?.on('datazoom', () => {\n        if (chartEchartRef.current === null) {\n          return;\n        }\n\n        const currentChart = getInstanceByDom(chartEchartRef.current);\n        if (!currentChart) {\n          return;\n        }\n\n        const option = currentChart.getOption();\n        if (!option || !option.dataZoom) {\n          return;\n        }\n\n        const dataZoom = Array.isArray(option.dataZoom)\n          ? option.dataZoom[0]\n          : option.dataZoom;\n        const { startValue, endValue } = dataZoom as {\n          startValue: number;\n          endValue: number;\n        };\n\n        callbacks?.onZoom?.({ endValue, startValue });\n      });\n    }\n\n    const handleMouseMove = () => {\n      // ECharts updates SVG cursor styles on mouse move, so Needle has to\n      // reset it after ECharts' internal handler runs.\n      chart?.getZr().setCursorStyle('default');\n    };\n    const chartChild = chartEchartRef.current?.children[0] as\n      | HTMLElement\n      | undefined;\n    if (!isChartZoomDisabled) {\n      chartChild?.addEventListener('mousemove', handleMouseMove);\n    }\n\n    const handleMouseDown = (params: { event: MouseEvent }) => {\n      const event = params.event;\n      const amountOfMouseClicks = event.detail;\n      const isDoubleClick = amountOfMouseClicks === 2;\n      if (isDoubleClick) {\n        if (chart === undefined) {\n          return;\n        }\n        chart?.dispatchAction({\n          end: 100,\n          start: 0,\n          type: 'dataZoom',\n        });\n        if (callbacks?.onZoom) {\n          callbacks?.onZoom?.({ endValue: 100, startValue: 0 });\n        }\n      }\n    };\n    if (!isChartZoomDisabled) {\n      chart?.getZr().on('mousedown', handleMouseDown);\n    }\n\n    const chartRefCurrentElement = chartEchartRef.current;\n    const element = chartRefCurrentElement?.children[0];\n    return () => {\n      element?.removeEventListener('mousemove', handleMouseMove);\n\n      if (chartRefCurrentElement) {\n        const chart = getInstanceByDom(chartRefCurrentElement);\n        chart?.getZr().off('mousedown', handleMouseDown);\n      }\n    };\n  });\n\n  if (chartEchartRef.current !== null && !isChartZoomDisabled) {\n    const chart = getInstanceByDom(chartEchartRef.current);\n    if (chart) {\n      // Needs to be re-set on every re-render. Sets the selectable zoom area\n      // over the chart body, not the slider.\n      chart.dispatchAction({\n        dataZoomSelectActive: true,\n        key: 'dataZoomSelect',\n        type: 'takeGlobalCursor',\n      });\n    }\n  }\n}\n"]}
+{"version":3,"file":"use-chart-zoom.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.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 { getInstanceByDom } from 'echarts';\nimport { useEffect } from 'react';\n\nimport type { ChartProps } from '../utils/chart-types';\nimport { useChartRefsContext } from './use-chart-refs';\n\ntype UseChartZoomParams = {\n  callbacks: ChartProps['callbacks'];\n  isChartZoomDisabled: boolean;\n};\n\n/**\n * Owns ECharts zoom interactions and forwards zoom changes to consumers.\n *\n * The hook subscribes to ECharts `datazoom` events, enables drag-to-zoom through\n * ECharts' global cursor API, resets zoom on double click, and clears ECharts'\n * SVG cursor override after mouse movement so Needle's default cursor styling is\n * preserved.\n *\n * The effect re-runs on every render, so each listener has to be detached again\n * on cleanup. Otherwise they pile up and consumers get one `onZoom` call per\n * render that has happened so far.\n */\nexport function useChartZoom({\n  callbacks,\n  isChartZoomDisabled,\n}: UseChartZoomParams) {\n  const { chartEchartRef } = useChartRefsContext();\n\n  useEffect(() => {\n    const chart =\n      chartEchartRef.current === null\n        ? undefined\n        : getInstanceByDom(chartEchartRef.current);\n\n    const handleDataZoom = () => {\n      if (chartEchartRef.current === null) {\n        return;\n      }\n\n      const currentChart = getInstanceByDom(chartEchartRef.current);\n      if (!currentChart) {\n        return;\n      }\n\n      const option = currentChart.getOption();\n      if (!option || !option.dataZoom) {\n        return;\n      }\n\n      const dataZoom = Array.isArray(option.dataZoom)\n        ? option.dataZoom[0]\n        : option.dataZoom;\n      const { startValue, endValue } = dataZoom as {\n        startValue: number;\n        endValue: number;\n      };\n\n      callbacks?.onZoom?.({ endValue, startValue });\n    };\n\n    if (callbacks?.onZoom) {\n      chart?.on('datazoom', handleDataZoom);\n    }\n\n    const handleMouseMove = () => {\n      // ECharts updates SVG cursor styles on mouse move, so Needle has to\n      // reset it after ECharts' internal handler runs.\n      chart?.getZr().setCursorStyle('default');\n    };\n    const chartChild = chartEchartRef.current?.children[0] as\n      | HTMLElement\n      | undefined;\n    if (!isChartZoomDisabled) {\n      chartChild?.addEventListener('mousemove', handleMouseMove);\n    }\n\n    const handleMouseDown = (params: { event: MouseEvent }) => {\n      const event = params.event;\n      const amountOfMouseClicks = event.detail;\n      const isDoubleClick = amountOfMouseClicks === 2;\n      if (isDoubleClick) {\n        if (chart === undefined) {\n          return;\n        }\n        chart?.dispatchAction({\n          end: 100,\n          start: 0,\n          type: 'dataZoom',\n        });\n        if (callbacks?.onZoom) {\n          callbacks?.onZoom?.({ endValue: 100, startValue: 0 });\n        }\n      }\n    };\n    if (!isChartZoomDisabled) {\n      chart?.getZr().on('mousedown', handleMouseDown);\n    }\n\n    const chartRefCurrentElement = chartEchartRef.current;\n    const element = chartRefCurrentElement?.children[0];\n    return () => {\n      element?.removeEventListener('mousemove', handleMouseMove);\n\n      if (chartRefCurrentElement) {\n        const chart = getInstanceByDom(chartRefCurrentElement);\n        chart?.off('datazoom', handleDataZoom);\n        chart?.getZr().off('mousedown', handleMouseDown);\n      }\n    };\n  });\n\n  if (chartEchartRef.current !== null && !isChartZoomDisabled) {\n    const chart = getInstanceByDom(chartEchartRef.current);\n    if (chart) {\n      // Needs to be re-set on every re-render. Sets the selectable zoom area\n      // over the chart body, not the slider.\n      chart.dispatchAction({\n        dataZoomSelectActive: true,\n        key: 'dataZoomSelect',\n        type: 'takeGlobalCursor',\n      });\n    }\n  }\n}\n"]}

package/lib/esm/charts/tests/ChartZoomHarness.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "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/>.
+ */
+import { Chart } from '@neo4j-ndl/react-charts';
+import { getInstanceByDom } from 'echarts';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+const POINT_COUNT = 180;
+const zoomHarnessDataset = [
+    ['time', 'value'],
+    ...Array.from({ length: POINT_COUNT }, (_, index) => [
+        index,
+        Number((40 + Math.sin(index / 6) * 12).toFixed(2)),
+    ]),
+];
+/**
+ * Reproduces the consumer setup from the metrics UI: a chart with toolbox
+ * brush-zoom whose parent re-renders while the chart stays mounted, passing a
+ * freshly built `option` object on every render.
+ */
+export const ChartZoomHarness = ({ settings, }) => {
+    const containerRef = useRef(null);
+    const zoomCallsRef = useRef([]);
+    const [, setRerenderCount] = useState(0);
+    const handleZoom = useCallback((zoom) => {
+        zoomCallsRef.current = [...zoomCallsRef.current, zoom];
+    }, []);
+    useEffect(() => {
+        const getChart = () => {
+            var _a;
+            const echartElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ndl-chart-echart');
+            return echartElement instanceof HTMLElement
+                ? getInstanceByDom(echartElement)
+                : undefined;
+        };
+        window.chartZoomHarness = {
+            getAppliedZoomWindows: () => {
+                var _a, _b;
+                const dataZoom = (_b = (_a = getChart()) === null || _a === void 0 ? void 0 : _a.getOption()) === null || _b === void 0 ? void 0 : _b.dataZoom;
+                return (dataZoom !== null && dataZoom !== void 0 ? dataZoom : [])
+                    .filter((item) => item.startValue !== undefined && item.endValue !== undefined)
+                    .map((item) => ({
+                    endValue: item.endValue,
+                    startValue: item.startValue,
+                }));
+            },
+            getZoomCalls: () => zoomCallsRef.current,
+            pixelToValue: (pixelX) => { var _a; return (_a = getChart()) === null || _a === void 0 ? void 0 : _a.convertFromPixel({ xAxisIndex: 0 }, pixelX); },
+            resetZoomCalls: () => {
+                zoomCallsRef.current = [];
+            },
+        };
+    }, []);
+    return (_jsxs("div", { ref: containerRef, style: { height: '420px', width: '900px' }, children: [_jsx("button", { type: "button", "data-testid": "force-rerender", onClick: () => setRerenderCount((count) => count + 1), children: "Re-render" }), _jsx("div", { className: "ndl-chart", style: { height: '380px', width: '100%' }, children: _jsx(Chart, { callbacks: { onZoom: handleZoom }, dataset: [{ source: zoomHarnessDataset }], series: [
+                        {
+                            encode: { x: 'time', y: 'value' },
+                            name: 'Value',
+                            type: 'line',
+                        },
+                    ], settings: settings, xAxis: { type: 'value' }, yAxis: { type: 'value' }, option: {
+                        dataZoom: [
+                            {
+                                filterMode: 'none',
+                                type: 'inside',
+                                zoomOnMouseWheel: false,
+                            },
+                        ],
+                        toolbox: {
+                            feature: {
+                                dataZoom: {
+                                    yAxisIndex: false,
+                                },
+                            },
+                        },
+                    } }) })] }));
+};
+//# sourceMappingURL=ChartZoomHarness.js.map

package/lib/esm/charts/tests/ChartZoomHarness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartZoomHarness.js","sourceRoot":"","sources":["../../../../src/charts/tests/ChartZoomHarness.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 { Chart } from '@neo4j-ndl/react-charts';\nimport { getInstanceByDom } from 'echarts';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\ntype ChartSettings = ComponentProps<typeof Chart>['settings'];\n\nexport type ZoomCall = { endValue: number; startValue: number };\n\nexport type ZoomHarnessApi = {\n  /** Applied zoom windows, in data values, as ECharts currently has them. */\n  getAppliedZoomWindows: () => ZoomCall[];\n  /** Every `callbacks.onZoom` invocation the consumer received. */\n  getZoomCalls: () => ZoomCall[];\n  /** Data value at a pixel offset inside the chart element. */\n  pixelToValue: (pixelX: number) => number;\n  resetZoomCalls: () => void;\n};\n\ntype HarnessWindow = Window & { chartZoomHarness?: ZoomHarnessApi };\n\nconst POINT_COUNT = 180;\n\nconst zoomHarnessDataset = [\n  ['time', 'value'],\n  ...Array.from({ length: POINT_COUNT }, (_, index) => [\n    index,\n    Number((40 + Math.sin(index / 6) * 12).toFixed(2)),\n  ]),\n];\n\n/**\n * Reproduces the consumer setup from the metrics UI: a chart with toolbox\n * brush-zoom whose parent re-renders while the chart stays mounted, passing a\n * freshly built `option` object on every render.\n */\nexport const ChartZoomHarness = ({\n  settings,\n}: {\n  settings?: ChartSettings;\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const zoomCallsRef = useRef<ZoomCall[]>([]);\n  const [, setRerenderCount] = useState(0);\n\n  const handleZoom = useCallback((zoom: ZoomCall) => {\n    zoomCallsRef.current = [...zoomCallsRef.current, zoom];\n  }, []);\n\n  useEffect(() => {\n    const getChart = () => {\n      const echartElement =\n        containerRef.current?.querySelector('.ndl-chart-echart');\n      return echartElement instanceof HTMLElement\n        ? getInstanceByDom(echartElement)\n        : undefined;\n    };\n\n    (window as HarnessWindow).chartZoomHarness = {\n      getAppliedZoomWindows: () => {\n        const dataZoom = (\n          getChart()?.getOption() as\n            | { dataZoom?: { endValue?: number; startValue?: number }[] }\n            | undefined\n        )?.dataZoom;\n\n        return (dataZoom ?? [])\n          .filter(\n            (item) =>\n              item.startValue !== undefined && item.endValue !== undefined,\n          )\n          .map((item) => ({\n            endValue: item.endValue as number,\n            startValue: item.startValue as number,\n          }));\n      },\n      getZoomCalls: () => zoomCallsRef.current,\n      pixelToValue: (pixelX: number) =>\n        getChart()?.convertFromPixel({ xAxisIndex: 0 }, pixelX) as number,\n      resetZoomCalls: () => {\n        zoomCallsRef.current = [];\n      },\n    };\n  }, []);\n\n  return (\n    <div ref={containerRef} style={{ height: '420px', width: '900px' }}>\n      <button\n        type=\"button\"\n        data-testid=\"force-rerender\"\n        onClick={() => setRerenderCount((count) => count + 1)}\n      >\n        Re-render\n      </button>\n      <div className=\"ndl-chart\" style={{ height: '380px', width: '100%' }}>\n        <Chart\n          callbacks={{ onZoom: handleZoom }}\n          dataset={[{ source: zoomHarnessDataset }]}\n          series={[\n            {\n              encode: { x: 'time', y: 'value' },\n              name: 'Value',\n              type: 'line',\n            },\n          ]}\n          settings={settings}\n          xAxis={{ type: 'value' }}\n          yAxis={{ type: 'value' }}\n          option={{\n            dataZoom: [\n              {\n                filterMode: 'none',\n                type: 'inside',\n                zoomOnMouseWheel: false,\n              },\n            ],\n            toolbox: {\n              feature: {\n                dataZoom: {\n                  yAxisIndex: false,\n                },\n              },\n            },\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/esm/charts/utils/chart-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-types.js","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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 {\n  type EChartsOption,\n  type LineSeriesOption,\n  type RegisteredSeriesOption,\n  type SetOptionOpts,\n} from 'echarts';\n\nexport type HexColor = `#${string}`;\n\nexport type Condition =\n  | 'greater'\n  | 'greaterOrEqual'\n  | 'less'\n  | 'lessOrEqual'\n  | 'equal'\n  | 'notEqual';\n\nexport type Values<T> = T[keyof T];\nexport type SeriesOption = Values<RegisteredSeriesOption>;\n\nexport type EchartsSeries = SeriesOption | SeriesOption[];\n\ntype CustomCondition = (\n  lineValue: unknown,\n  thresholdLineValue: unknown,\n) => boolean;\n\nexport interface ThresholdLineSeriesOption<\n  T extends NotificationType,\n> extends Omit<LineSeriesOption, 'type'> {\n  type: 'thresholdLine';\n  yAxis: number;\n  xAxis: [number, number];\n  notificationType: T;\n  color?: string;\n  condition?: Condition;\n  customConditionText?: string;\n  customCondition?: CustomCondition;\n}\n\n// Only one threshold line of each type is allowed.\nexport type NeedleSeries =\n  | [\n      ThresholdLineSeriesOption<'warning'>,\n      ThresholdLineSeriesOption<'danger'>,\n      ...SeriesOption[],\n    ]\n  | [ThresholdLineSeriesOption<'danger'>, ...SeriesOption[]]\n  | [ThresholdLineSeriesOption<'warning'>, ...SeriesOption[]]\n  | SeriesOption[];\n\nexport interface ChartProps {\n  /** The dataset configuration for the chart. Can be a single dataset or an array of datasets. */\n  dataset: EChartsOption['dataset'];\n  /** The series configuration for the chart. Defines what data to display and how to display it. */\n  series: NeedleSeries;\n  /** X-axis configuration for the chart. */\n  xAxis?: EChartsOption['xAxis'];\n  /** Y-axis configuration for the chart. */\n  yAxis?: EChartsOption['yAxis'];\n  /** Legend configuration for the chart. */\n  legend?: {\n    // TODO v5: fix boolean naming convention\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    show?: boolean;\n    // TODO v5: remove this prop\n    /** @deprecated No longer has any effect since wrapping is now automatic, will be removed in v 5 */\n    wrappingType?: 'wrapping' | 'truncation' | 'overflow';\n  };\n  /** Additional ECharts options to merge with the chart configuration. */\n  option?: Omit<\n    EChartsOption,\n    'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'\n  >;\n  /** Custom CSS styles to apply to the chart container. */\n  style?: React.CSSProperties;\n  /** Settings for how ECharts should update the chart. */\n  settings?: SetOptionOpts;\n  /** Whether the chart is in a loading state. */\n  isLoading?: boolean;\n  /** Callback functions for chart interactions. */\n  callbacks?: {\n    onZoom?: (params: { startValue: number; endValue: number }) => void;\n  };\n  /** Data zoom configuration for the chart. */\n  dataZoom?: EChartsOption['dataZoom'];\n  /** Whether the zoom in the chart is disabled */\n  isChartZoomDisabled?: boolean;\n  /** Custom color palette that overrides the default categorical colors. */\n  palette?: HexColor[];\n}\n\nexport interface ChartEmptyProps {\n  /** A text displayed to the user when the chart is empty. */\n  message?: React.ReactNode;\n  /** The type of chart. This is used to render the appropriate icon. */\n  type?: 'line' | 'pie' | 'bar';\n  /** Optional element (preferably a TextButton) that should provide the user with an action. */\n  action?: React.ReactNode;\n}\n\n/**\n * Chart tooltip\n */\n\nexport interface ChartTooltipProps {\n  children: React.ReactNode;\n  className?: string;\n  isOpen?: boolean;\n  style?: React.CSSProperties;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport type NotificationType = 'warning' | 'danger';\n\nexport type Notification = {\n  leadingElement: React.ReactNode;\n  trailingElement: React.ReactNode;\n  notificationType: NotificationType;\n  id: string;\n};\n\nexport type ChartTooltipContentProps = {\n  leadingElement?: React.ReactNode;\n  trailingElement?: React.ReactNode;\n  indentSquareColor?: string;\n  notifications?: Notification[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\n/**\n * Legend\n */\nexport interface LegendItemProps {\n  name: string;\n  children: React.ReactNode;\n  as?: 'button' | 'div';\n  className?: string;\n  color?: string;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  selected?: boolean;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  deSelected?: boolean;\n  onLegendItemClick?: () => void;\n  hasButtons?: boolean;\n  onLegendItemMouseEnter?: () => void;\n  onLegendItemMouseLeave?: () => void;\n  ref?: React.Ref<HTMLButtonElement> & React.Ref<HTMLDivElement>;\n}\n\nexport type LegendProps = {\n  series: {\n    name: string;\n    color: string;\n  }[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\nexport type HtmlAttributes<T extends React.ElementType> =\n  React.ComponentPropsWithoutRef<T> & {\n    [key: `data-${string}`]: string | undefined;\n  };\n\ntype BaseProps<T extends React.ElementType> = {\n  /**\n   * Additional classnames will be applied to the root element.\n   */\n  className?: string;\n  /**\n   * Additional css styling. Will be applied to the root element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Html attributes to apply to the root element. This will override any default html attributes, use with caution.\n   */\n  htmlAttributes?: HtmlAttributes<T>;\n\n  /**\n   * A ref to apply to the root element.\n   */\n  ref?: React.ComponentPropsWithRef<T>['ref'];\n};\n\nexport type CommonProps<T extends React.ElementType, P> = P & BaseProps<T>;\n"]}
+{"version":3,"file":"chart-types.js","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG","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 {\n  type EChartsOption,\n  type LineSeriesOption,\n  type RegisteredSeriesOption,\n  type SetOptionOpts,\n} from 'echarts';\n\nexport type HexColor = `#${string}`;\n\nexport type Condition =\n  | 'greater'\n  | 'greaterOrEqual'\n  | 'less'\n  | 'lessOrEqual'\n  | 'equal'\n  | 'notEqual';\n\nexport type Values<T> = T[keyof T];\nexport type SeriesOption = Values<RegisteredSeriesOption>;\n\nexport type EchartsSeries = SeriesOption | SeriesOption[];\n\ntype CustomCondition = (\n  lineValue: unknown,\n  thresholdLineValue: unknown,\n) => boolean;\n\nexport interface ThresholdLineSeriesOption<\n  T extends NotificationType,\n> extends Omit<LineSeriesOption, 'type'> {\n  type: 'thresholdLine';\n  yAxis: number;\n  xAxis: [number, number];\n  notificationType: T;\n  color?: string;\n  condition?: Condition;\n  customConditionText?: string;\n  customCondition?: CustomCondition;\n}\n\n// Only one threshold line of each type is allowed.\nexport type NeedleSeries =\n  | [\n      ThresholdLineSeriesOption<'warning'>,\n      ThresholdLineSeriesOption<'danger'>,\n      ...SeriesOption[],\n    ]\n  | [ThresholdLineSeriesOption<'danger'>, ...SeriesOption[]]\n  | [ThresholdLineSeriesOption<'warning'>, ...SeriesOption[]]\n  | SeriesOption[];\n\nexport interface ChartProps {\n  /** The dataset configuration for the chart. Can be a single dataset or an array of datasets. */\n  dataset: EChartsOption['dataset'];\n  /** The series configuration for the chart. Defines what data to display and how to display it. */\n  series: NeedleSeries;\n  /** X-axis configuration for the chart. */\n  xAxis?: EChartsOption['xAxis'];\n  /** Y-axis configuration for the chart. */\n  yAxis?: EChartsOption['yAxis'];\n  /** Legend configuration for the chart. */\n  legend?: {\n    // TODO v5: fix boolean naming convention\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    show?: boolean;\n    // TODO v5: remove this prop\n    /** @deprecated No longer has any effect since wrapping is now automatic, will be removed in v 5 */\n    wrappingType?: 'wrapping' | 'truncation' | 'overflow';\n  };\n  /** Additional ECharts options to merge with the chart configuration. */\n  option?: Omit<\n    EChartsOption,\n    'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'\n  >;\n  /** Custom CSS styles to apply to the chart container. */\n  style?: React.CSSProperties;\n  /**\n   * Settings for how ECharts should update the chart. Defaults to replacing the\n   * components the chart owns (`series`, `dataset`, axes, and similar) while\n   * merging the rest, which drops data that disappeared without discarding the\n   * ECharts components behind zoom interactions. Passing `notMerge: true`\n   * re-creates those components on every update and breaks drag-to-zoom.\n   */\n  settings?: SetOptionOpts;\n  /** Whether the chart is in a loading state. */\n  isLoading?: boolean;\n  /** Callback functions for chart interactions. */\n  callbacks?: {\n    onZoom?: (params: { startValue: number; endValue: number }) => void;\n  };\n  /** Data zoom configuration for the chart. */\n  dataZoom?: EChartsOption['dataZoom'];\n  /** Whether the zoom in the chart is disabled */\n  isChartZoomDisabled?: boolean;\n  /** Custom color palette that overrides the default categorical colors. */\n  palette?: HexColor[];\n}\n\nexport interface ChartEmptyProps {\n  /** A text displayed to the user when the chart is empty. */\n  message?: React.ReactNode;\n  /** The type of chart. This is used to render the appropriate icon. */\n  type?: 'line' | 'pie' | 'bar';\n  /** Optional element (preferably a TextButton) that should provide the user with an action. */\n  action?: React.ReactNode;\n}\n\n/**\n * Chart tooltip\n */\n\nexport interface ChartTooltipProps {\n  children: React.ReactNode;\n  className?: string;\n  isOpen?: boolean;\n  style?: React.CSSProperties;\n  anchorPosition?: {\n    x: number;\n    y: number;\n  };\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport type NotificationType = 'warning' | 'danger';\n\nexport type Notification = {\n  leadingElement: React.ReactNode;\n  trailingElement: React.ReactNode;\n  notificationType: NotificationType;\n  id: string;\n};\n\nexport type ChartTooltipContentProps = {\n  leadingElement?: React.ReactNode;\n  trailingElement?: React.ReactNode;\n  indentSquareColor?: string;\n  notifications?: Notification[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\n/**\n * Legend\n */\nexport interface LegendItemProps {\n  name: string;\n  children: React.ReactNode;\n  as?: 'button' | 'div';\n  className?: string;\n  color?: string;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  selected?: boolean;\n  // TODO v5: fix boolean naming convention\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  deSelected?: boolean;\n  onLegendItemClick?: () => void;\n  hasButtons?: boolean;\n  onLegendItemMouseEnter?: () => void;\n  onLegendItemMouseLeave?: () => void;\n  ref?: React.Ref<HTMLButtonElement> & React.Ref<HTMLDivElement>;\n}\n\nexport type LegendProps = {\n  series: {\n    name: string;\n    color: string;\n  }[];\n  ref?: React.Ref<HTMLDivElement>;\n};\n\nexport type HtmlAttributes<T extends React.ElementType> =\n  React.ComponentPropsWithoutRef<T> & {\n    [key: `data-${string}`]: string | undefined;\n  };\n\ntype BaseProps<T extends React.ElementType> = {\n  /**\n   * Additional classnames will be applied to the root element.\n   */\n  className?: string;\n  /**\n   * Additional css styling. Will be applied to the root element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Html attributes to apply to the root element. This will override any default html attributes, use with caution.\n   */\n  htmlAttributes?: HtmlAttributes<T>;\n\n  /**\n   * A ref to apply to the root element.\n   */\n  ref?: React.ComponentPropsWithRef<T>['ref'];\n};\n\nexport type CommonProps<T extends React.ElementType, P> = P & BaseProps<T>;\n"]}

package/lib/esm/charts/utils/defaults.js

@@ -21,5 +21,38 @@
 const defaultThresholdLineSeriesOption = {
     condition: 'greater',
 };
-export { defaultThresholdLineSeriesOption };
+/**
+ * ECharts component main types that `buildChartOption` always writes in full,
+ * so replacing them gives the same "drop what disappeared" behavior as
+ * `notMerge`. Every entry has to be a registered component main type, which is
+ * only asserted by ECharts in development builds.
+ *
+ * `toolbox` is deliberately absent: it has to keep its view instance across
+ * updates, see `defaultChartSettings`.
+ */
+const needleOwnedComponents = [
+    'dataZoom',
+    'dataset',
+    'grid',
+    'legend',
+    'series',
+    'tooltip',
+    'xAxis',
+    'yAxis',
+];
+/**
+ * `notMerge` rebuilds every component view on each `setOption`. That makes
+ * ECharts mount a fresh toolbox brush controller while the previous one stays
+ * attached to the renderer, because `ToolboxView.dispose` iterates its feature
+ * map with `zrUtil.each` and so never disposes anything. Every leftover
+ * controller then re-applies the same drag, each time against an axis the
+ * previous one already zoomed, which shrinks the selected range.
+ */
+const defaultChartSettings = {
+    lazyUpdate: false,
+    notMerge: false,
+    replaceMerge: needleOwnedComponents,
+    silent: false,
+};
+export { defaultChartSettings, defaultThresholdLineSeriesOption, needleOwnedComponents, };
 //# sourceMappingURL=defaults.js.map

package/lib/esm/charts/utils/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,gCAAgC,GAElC;IACF,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,OAAO,EAAE,gCAAgC,EAAE,CAAC","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 type { Condition } from './chart-types';\n\nconst defaultThresholdLineSeriesOption: {\n  condition: Condition;\n} = {\n  condition: 'greater',\n};\n\nexport { defaultThresholdLineSeriesOption };\n"]}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,gCAAgC,GAElC;IACF,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,qBAAqB,GAAG;IAC5B,UAAU;IACV,SAAS;IACT,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,OAAO;IACP,OAAO;CACR,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAwC;IAChE,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,qBAAqB;IACnC,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,OAAO,EACL,oBAAoB,EACpB,gCAAgC,EAChC,qBAAqB,GACtB,CAAC","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 type { ChartProps, Condition } from './chart-types';\n\nconst defaultThresholdLineSeriesOption: {\n  condition: Condition;\n} = {\n  condition: 'greater',\n};\n\n/**\n * ECharts component main types that `buildChartOption` always writes in full,\n * so replacing them gives the same \"drop what disappeared\" behavior as\n * `notMerge`. Every entry has to be a registered component main type, which is\n * only asserted by ECharts in development builds.\n *\n * `toolbox` is deliberately absent: it has to keep its view instance across\n * updates, see `defaultChartSettings`.\n */\nconst needleOwnedComponents = [\n  'dataZoom',\n  'dataset',\n  'grid',\n  'legend',\n  'series',\n  'tooltip',\n  'xAxis',\n  'yAxis',\n];\n\n/**\n * `notMerge` rebuilds every component view on each `setOption`. That makes\n * ECharts mount a fresh toolbox brush controller while the previous one stays\n * attached to the renderer, because `ToolboxView.dispose` iterates its feature\n * map with `zrUtil.each` and so never disposes anything. Every leftover\n * controller then re-applies the same drag, each time against an axis the\n * previous one already zoomed, which shrinks the selected range.\n */\nconst defaultChartSettings: NonNullable<ChartProps['settings']> = {\n  lazyUpdate: false,\n  notMerge: false,\n  replaceMerge: needleOwnedComponents,\n  silent: false,\n};\n\nexport {\n  defaultChartSettings,\n  defaultThresholdLineSeriesOption,\n  needleOwnedComponents,\n};\n"]}

package/lib/types/charts/ChartRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartRender.d.ts","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgB7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAetD,KAAK,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC7D,mBAAmB,EAAE,CAAC,WAAW,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtE,mBAAmB,EAAE,CAAC,uBAAuB,EAAE,OAAO,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,mMAazB,gBAAgB,4CAiElB,CAAC"}
+{"version":3,"file":"ChartRender.d.ts","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgB7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUtD,KAAK,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC7D,mBAAmB,EAAE,CAAC,WAAW,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtE,mBAAmB,EAAE,CAAC,uBAAuB,EAAE,OAAO,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,mMAazB,gBAAgB,4CAiElB,CAAC"}

package/lib/types/charts/hooks/use-chart-zoom.d.ts

@@ -30,6 +30,10 @@ type UseChartZoomParams = {
  * ECharts' global cursor API, resets zoom on double click, and clears ECharts'
  * SVG cursor override after mouse movement so Needle's default cursor styling is
  * preserved.
+ *
+ * The effect re-runs on every render, so each listener has to be detached again
+ * on cleanup. Otherwise they pile up and consumers get one `onZoom` call per
+ * render that has happened so far.
  */
 export declare function useChartZoom({ callbacks, isChartZoomDisabled, }: UseChartZoomParams): void;
 export {};

package/lib/types/charts/hooks/use-chart-zoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-zoom.d.ts","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,mBAAmB,GACpB,EAAE,kBAAkB,QA+FpB"}
+{"version":3,"file":"use-chart-zoom.d.ts","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-zoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,mBAAmB,GACpB,EAAE,kBAAkB,QAkGpB"}

package/lib/types/charts/tests/ChartZoomHarness.d.ts

@@ -0,0 +1,46 @@
+/**
+ *
+ *  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/>.
+ */
+import { Chart } from '@neo4j-ndl/react-charts';
+import { type ComponentProps } from 'react';
+type ChartSettings = ComponentProps<typeof Chart>['settings'];
+export type ZoomCall = {
+    endValue: number;
+    startValue: number;
+};
+export type ZoomHarnessApi = {
+    /** Applied zoom windows, in data values, as ECharts currently has them. */
+    getAppliedZoomWindows: () => ZoomCall[];
+    /** Every `callbacks.onZoom` invocation the consumer received. */
+    getZoomCalls: () => ZoomCall[];
+    /** Data value at a pixel offset inside the chart element. */
+    pixelToValue: (pixelX: number) => number;
+    resetZoomCalls: () => void;
+};
+/**
+ * Reproduces the consumer setup from the metrics UI: a chart with toolbox
+ * brush-zoom whose parent re-renders while the chart stays mounted, passing a
+ * freshly built `option` object on every render.
+ */
+export declare const ChartZoomHarness: ({ settings, }: {
+    settings?: ChartSettings;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartZoomHarness.d.ts.map

package/lib/types/charts/tests/ChartZoomHarness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartZoomHarness.d.ts","sourceRoot":"","sources":["../../../../src/charts/tests/ChartZoomHarness.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,qBAAqB,EAAE,MAAM,QAAQ,EAAE,CAAC;IACxC,iEAAiE;IACjE,YAAY,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC/B,6DAA6D;IAC7D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAcF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAE9B;IACD,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,4CAwFA,CAAC"}

package/lib/types/charts/utils/chart-types.d.ts

@@ -59,7 +59,13 @@ export interface ChartProps {
     option?: Omit<EChartsOption, 'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'>;
     /** Custom CSS styles to apply to the chart container. */
     style?: React.CSSProperties;
-    /** Settings for how ECharts should update the chart. */
+    /**
+     * Settings for how ECharts should update the chart. Defaults to replacing the
+     * components the chart owns (`series`, `dataset`, axes, and similar) while
+     * merging the rest, which drops data that disappeared without discarding the
+     * ECharts components behind zoom interactions. Passing `notMerge: true`
+     * re-creates those components on every update and breaks drag-to-zoom.
+     */
     settings?: SetOptionOpts;
     /** Whether the chart is in a loading state. */
     isLoading?: boolean;

package/lib/types/charts/utils/chart-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-types.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-types.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/chart-types.ts"],"names":[],"mappings":"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"}

package/lib/types/charts/utils/defaults.d.ts

@@ -18,9 +18,28 @@
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import type { Condition } from './chart-types';
+import type { ChartProps, Condition } from './chart-types';
 declare const defaultThresholdLineSeriesOption: {
     condition: Condition;
 };
-export { defaultThresholdLineSeriesOption };
+/**
+ * ECharts component main types that `buildChartOption` always writes in full,
+ * so replacing them gives the same "drop what disappeared" behavior as
+ * `notMerge`. Every entry has to be a registered component main type, which is
+ * only asserted by ECharts in development builds.
+ *
+ * `toolbox` is deliberately absent: it has to keep its view instance across
+ * updates, see `defaultChartSettings`.
+ */
+declare const needleOwnedComponents: string[];
+/**
+ * `notMerge` rebuilds every component view on each `setOption`. That makes
+ * ECharts mount a fresh toolbox brush controller while the previous one stays
+ * attached to the renderer, because `ToolboxView.dispose` iterates its feature
+ * map with `zrUtil.each` and so never disposes anything. Every leftover
+ * controller then re-applies the same drag, each time against an axis the
+ * previous one already zoomed, which shrinks the selected range.
+ */
+declare const defaultChartSettings: NonNullable<ChartProps['settings']>;
+export { defaultChartSettings, defaultThresholdLineSeriesOption, needleOwnedComponents, };
 //# sourceMappingURL=defaults.d.ts.map

package/lib/types/charts/utils/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,QAAA,MAAM,gCAAgC,EAAE;IACtC,SAAS,EAAE,SAAS,CAAC;CAGtB,CAAC;AAEF,OAAO,EAAE,gCAAgC,EAAE,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/defaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE3D,QAAA,MAAM,gCAAgC,EAAE;IACtC,SAAS,EAAE,SAAS,CAAC;CAGtB,CAAC;AAEF;;;;;;;;GAQG;AACH,QAAA,MAAM,qBAAqB,UAS1B,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,oBAAoB,EAAE,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,CAK7D,CAAC;AAEF,OAAO,EACL,oBAAoB,EACpB,gCAAgC,EAChC,qBAAqB,GACtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react-charts",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "sideEffects": false,
   "description": "React implementation of charts from Neo4j Design System",
   "keywords": [
@@ -56,8 +56,8 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.17.1",
-    "@neo4j-ndl/react": "^4.18.0"
+    "@neo4j-ndl/base": "^4.17.2",
+    "@neo4j-ndl/react": "^4.18.1"
   },
   "dependencies": {
     "classnames": "2.5.1",

package/skills/ndl-react-charts/components/charts.md

@@ -17,7 +17,7 @@ Import: `import { Chart } from '@neo4j-ndl/react-charts'`
 | `option` | `Omit<EChartsOption, "legend" \| "dataset" \| "series" \| "xAxis" \| "yAxis">` |  |  | Additional ECharts options to merge with the chart configuration. |
 | `palette` | `` `#${string}`[] `` |  |  | Custom color palette that overrides the default categorical colors. |
 | `series` | `NeedleSeries` | ✅ |  | The series configuration for the chart. Defines what data to display and how to display it. |
-| `settings` | `SetOptionOpts` |  |  | Settings for how ECharts should update the chart. |
+| `settings` | `SetOptionOpts` |  |  | Settings for how ECharts should update the chart. Defaults to replacing the components the chart owns (`series`, `dataset`, axes, and similar) while merging the rest, which drops data that disappeared without discarding the ECharts components behind zoom interactions. Passing `notMerge: true` re-creates those components on every update and breaks drag-to-zoom. |
 | `xAxis` | `XAXisOption \| XAXisOption[]` |  |  | X-axis configuration for the chart. |
 | `yAxis` | `YAXisOption \| YAXisOption[]` |  |  | Y-axis configuration for the chart. |