@neo4j-ndl/react-charts 1.1.1 → 1.1.3

package/lib/cjs/charts/utils/user-option-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-option-utils.js","sourceRoot":"","sources":["../../../../src/charts/utils/user-option-utils.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 { tokens } from '@neo4j-ndl/base';\nimport { type EChartsOption, type SeriesOption } from 'echarts';\nimport { renderToString } from 'react-dom/server';\n\nimport { ChartTooltip } from '../ChartTooltip';\nimport { getTooltipValueFormatter } from './chart-tooltip-formatter';\nimport {\n  type EchartsSeries,\n  type HexColor,\n  type NeedleSeries,\n  type ThresholdLineSeriesOption,\n} from './chart-types';\nimport { defaultThresholdLineSeriesOption } from './defaults';\nimport { formatNumberEnUS } from './format-utils';\n\nconst defaultColors = Object.values(tokens.categorical);\n\ntype SingleXAxisOption = Exclude<\n  NonNullable<EChartsOption['xAxis']>,\n  unknown[]\n>;\ntype SingleYAxisOption = Exclude<\n  NonNullable<EChartsOption['yAxis']>,\n  unknown[]\n>;\n\nexport const mergeSeries = (\n  series: NeedleSeries,\n  theme: 'light' | 'dark' = 'light',\n  userOption?: Omit<\n    EChartsOption,\n    'series' | 'dataset' | 'legend' | 'xAxis' | 'yAxis'\n  >,\n  palette?: HexColor[],\n): EchartsSeries => {\n  const colors = palette ?? defaultColors;\n\n  return series.map(\n    (\n      option:\n        | SeriesOption\n        | ThresholdLineSeriesOption<'warning'>\n        | ThresholdLineSeriesOption<'danger'>,\n      index: number = 0,\n    ): SeriesOption => {\n      if (option === undefined) {\n        return {};\n      }\n\n      const color = Array.isArray(option.color)\n        ? option.color[index]\n        : (option.color ?? colors[index % colors.length]);\n\n      if (option.type === 'thresholdLine') {\n        const { notificationType } = option;\n        // Needed to differentiate between normal lines and threshold lines\n        // as we are unable to inject custom properties into echarts series lines.\n        const thresholdLineName = `thresholdLine-${notificationType}`;\n        return {\n          symbolSize: 9,\n          symbol: 'none',\n          condition: defaultThresholdLineSeriesOption.condition,\n          ...option,\n          lineStyle: {\n            width: 2,\n            type: 'dashed',\n            ...option.lineStyle,\n          },\n          name: thresholdLineName,\n          type: 'line',\n          data: [\n            [option.xAxis[0], option.yAxis],\n            [option.xAxis[1], option.yAxis],\n          ],\n        };\n      }\n\n      if (option.type === 'line') {\n        const shadow = tokens.theme[theme].boxShadow.raised;\n        const shadowParts = shadow.split(/ (?=\\d+px|rgba?\\()/);\n\n        return {\n          type: 'line',\n          symbolSize: 9,\n          color,\n          symbol: 'none',\n          ...option,\n          lineStyle: {\n            width: 2,\n            type: 'solid' as const,\n            ...option.lineStyle,\n          },\n          emphasis: {\n            disabled: true,\n            focus: 'series',\n            ...option.emphasis,\n            itemStyle: {\n              borderColor: tokens.theme[theme].color.neutral.bg.weak,\n              shadowOffsetX: parseInt(shadowParts[0]),\n              shadowOffsetY: parseInt(shadowParts[1]),\n              shadowBlur: parseInt(shadowParts[2]),\n              shadowColor: shadowParts[4],\n              ...option.emphasis?.itemStyle,\n            },\n            label: { show: false },\n            ...option.emphasis,\n          },\n        };\n      }\n\n      if (option.type === 'pie') {\n        const valueFormatter = getTooltipValueFormatter(userOption);\n\n        return {\n          animationDuration: 600,\n          animationType: 'scale',\n          selectedMode: 'single',\n          ...option,\n          // Blur opacity is set to 1 to prevent other slices from\n          // being opacitated when hovering a slice where the emphasis is enabled (used for scale effect)\n          blur: {\n            itemStyle: {\n              opacity: 1,\n              ...option.blur?.itemStyle,\n            },\n            label: {\n              opacity: 1,\n              ...option.blur?.label,\n            },\n            ...option.blur,\n          },\n          // Emphasis is enabled and used to apply the scale effect when hovering the pie chart slices.\n          emphasis: {\n            disabled: false,\n            focus: 'self',\n            scale: true,\n            scaleSize: 5,\n            ...option.emphasis,\n          },\n          itemStyle: {\n            borderColor: tokens.theme[theme].color.neutral.bg.weak,\n            borderWidth: 1,\n            ...option.itemStyle,\n          },\n          label: {\n            formatter: '{d}%',\n            backgroundColor: 'transparent',\n            color: tokens.theme[theme].color.neutral.text.weak,\n            ...option.label,\n          },\n          labelLine: {\n            length: 5,\n            show: true,\n            ...option.labelLine,\n          },\n          tooltip: {\n            trigger: 'item',\n            confine: true,\n            // Reset the default tooltip css styling\n            padding: 0,\n            borderRadius: 0,\n            borderWidth: 0,\n            extraCssText: 'box-shadow: none; background-color: transparent;',\n            formatter: function (params: unknown) {\n              const paramsArray = Array.isArray(params) ? params : [params];\n              const firstParam = paramsArray[0];\n              return `${renderToString(\n                <span className=\"ndl-charts-chart-tooltip\">\n                  <ChartTooltip.Content\n                    key={firstParam?.value[0] ?? firstParam.seriesName}\n                    leadingElement={\n                      firstParam?.value[0] ?? firstParam.seriesName\n                    }\n                    trailingElement={valueFormatter(\n                      Array.isArray(firstParam.value)\n                        ? firstParam.value[1]\n                        : firstParam.value,\n                    )}\n                    indentSquareColor={firstParam.color}\n                  />\n                </span>,\n              )}`;\n            },\n            ...option.tooltip,\n          },\n        };\n      }\n\n      if (option.type === 'bar') {\n        const valueFormatter = getTooltipValueFormatter(userOption);\n\n        return {\n          barMaxWidth: 16,\n          ...option,\n          blur: {\n            itemStyle: {\n              opacity: 0.3,\n              ...option.blur?.itemStyle,\n            },\n            ...option.blur,\n          },\n          emphasis: {\n            disabled: true,\n            focus: 'series',\n            ...option.emphasis,\n          },\n          itemStyle: {\n            color,\n            borderWidth: 20,\n            ...option.itemStyle,\n          },\n          markLine: {\n            emphasis: {\n              disabled: true,\n              lineStyle: {\n                width: 20,\n                ...option.markLine?.emphasis?.lineStyle,\n              },\n              ...option.markLine?.emphasis,\n            },\n            lineStyle: {\n              width: 20,\n              ...option.markLine?.lineStyle,\n            },\n          },\n          tooltip: {\n            trigger: 'axis',\n            confine: true,\n            // Reset the default tooltip css styling\n            padding: 0,\n            borderRadius: 0,\n            borderWidth: 0,\n            extraCssText: 'box-shadow: none; background-color: transparent;',\n            formatter: function (params: unknown) {\n              const paramsArray = Array.isArray(params) ? params : [params];\n              const firstParam = paramsArray[0];\n              return `${renderToString(\n                <span className=\"ndl-charts-chart-tooltip\">\n                  <ChartTooltip.Title>{firstParam.name}</ChartTooltip.Title>\n                  <ChartTooltip.Content\n                    key={firstParam?.value[0] ?? firstParam.seriesName}\n                    leadingElement={firstParam.seriesName}\n                    trailingElement={valueFormatter(\n                      Array.isArray(firstParam.value)\n                        ? firstParam.value[1]\n                        : firstParam.value,\n                    )}\n                    indentSquareColor={firstParam.color}\n                  />\n                </span>,\n              )}`;\n            },\n            ...option.tooltip,\n          },\n        };\n      }\n\n      return option;\n    },\n  );\n};\n\nexport const mergeXAxis = (\n  xAxis: EChartsOption['xAxis'],\n  theme: 'light' | 'dark' = 'light',\n): EChartsOption['xAxis'] => {\n  if (xAxis === undefined) {\n    return [];\n  }\n\n  if (Array.isArray(xAxis)) {\n    return xAxis.map((x) => mergeXAxis(x, theme)) as EChartsOption['xAxis'];\n  }\n\n  const baseXAxis = {\n    ...xAxis,\n    splitLine: { show: false, ...xAxis?.splitLine },\n    axisLine: {\n      lineStyle: {\n        ...xAxis?.axisLine?.lineStyle,\n      },\n      ...xAxis?.axisLine,\n    },\n    axisTick: {\n      ...xAxis?.axisTick,\n      lineStyle: {\n        ...xAxis?.axisTick?.lineStyle,\n      },\n      show: true,\n      ...xAxis?.axisTick,\n    },\n    axisLabel: {\n      margin: 16,\n      formatter: {\n        day: '{dd} {MMM}',\n        hour: '{HH}:{mm}',\n        millisecond: '{hh}:{mm}:{ss} {SSS}',\n        minute: '{HH}:{mm}',\n        month: '{MMM}',\n        none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}',\n        second: '{HH}:{mm}:{ss}',\n        year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n      },\n      overflow: 'truncate',\n      ...xAxis?.axisLabel,\n    },\n  } as SingleXAxisOption;\n\n  if (xAxis.type === 'time') {\n    const timeXAxis = {\n      ...baseXAxis,\n      axisLabel: {\n        hideOverlap: true,\n        ...baseXAxis.axisLabel,\n      },\n    } as SingleXAxisOption;\n\n    return timeXAxis;\n  }\n\n  if (xAxis.type === 'value' || xAxis.type === 'log') {\n    const xAxisFormatter =\n      xAxis.axisLabel && 'formatter' in xAxis.axisLabel\n        ? xAxis.axisLabel.formatter\n        : undefined;\n    const valueXAxis = {\n      ...baseXAxis,\n      axisLabel: {\n        ...baseXAxis.axisLabel,\n        formatter: xAxisFormatter ?? formatNumberEnUS,\n      },\n    } as SingleXAxisOption;\n\n    return valueXAxis;\n  }\n\n  if (xAxis.type === 'category') {\n    const categoryXAxis = {\n      ...baseXAxis,\n      axisTick: {\n        alignWithLabel: true,\n        ...baseXAxis?.axisTick,\n      },\n      axisLabel: {\n        width: 80,\n        ...baseXAxis?.axisLabel,\n      },\n    } as SingleXAxisOption;\n    return categoryXAxis;\n  }\n\n  return baseXAxis;\n};\n\nexport const mergeYAxis = (\n  yAxis: EChartsOption['yAxis'],\n  theme: 'light' | 'dark' = 'light',\n): EChartsOption['yAxis'] => {\n  if (yAxis === undefined) {\n    return [];\n  }\n\n  if (Array.isArray(yAxis)) {\n    return yAxis.map((y) => mergeYAxis(y, theme)) as EChartsOption['yAxis'];\n  }\n\n  const baseYAxis = {\n    ...yAxis,\n    axisLine: {\n      ...yAxis?.axisLine,\n      lineStyle: {\n        ...yAxis?.axisLine?.lineStyle,\n      },\n      show: true,\n    },\n    axisTick: {\n      show: false,\n      ...yAxis?.axisTick,\n      lineStyle: {\n        width: 1,\n        ...yAxis?.axisTick?.lineStyle,\n      },\n    },\n    axisLabel: {\n      margin: 8,\n      overflow: 'truncate',\n      ...yAxis?.axisLabel,\n    },\n    splitLine: { show: true, ...yAxis?.splitLine },\n  } as SingleYAxisOption;\n\n  if (yAxis.type === 'time') {\n    const timeYAxis = {\n      ...baseYAxis,\n      axisLabel: {\n        hideOverlap: true,\n        ...baseYAxis.axisLabel,\n      },\n      splitLine: { show: false, ...baseYAxis?.splitLine },\n    } as SingleYAxisOption;\n\n    return timeYAxis;\n  }\n\n  if (yAxis.type === 'value' || yAxis.type === 'log') {\n    const yAxisFormatter =\n      yAxis.axisLabel && 'formatter' in yAxis.axisLabel\n        ? yAxis.axisLabel.formatter\n        : undefined;\n    const valueYAxis = {\n      ...baseYAxis,\n      axisLabel: {\n        hideOverlap: true,\n        ...baseYAxis.axisLabel,\n        formatter: yAxisFormatter ?? formatNumberEnUS,\n      },\n      splitLine: { show: false, ...baseYAxis?.splitLine },\n    } as SingleYAxisOption;\n\n    return valueYAxis;\n  }\n\n  if (yAxis.type === 'category') {\n    const categoryYAxis = {\n      ...baseYAxis,\n      axisLabel: {\n        width: 100,\n        ...baseYAxis?.axisLabel,\n      },\n    } as SingleYAxisOption;\n\n    return categoryYAxis;\n  }\n\n  return baseYAxis;\n};\n\nexport const mergeDataZoom = (\n  dataZoom: EChartsOption['dataZoom'],\n): EChartsOption['dataZoom'] => {\n  if (Array.isArray(dataZoom)) {\n    return dataZoom.map((option) =>\n      mergeDataZoom(option),\n    ) as EChartsOption['dataZoom'];\n  }\n\n  const isSlider = dataZoom?.type === 'slider';\n  const isInside = dataZoom?.type === 'inside';\n\n  if (isSlider) {\n    return {\n      bottom: 10,\n      height: 28,\n      left: 50,\n      right: 50,\n      show: true,\n      type: 'slider',\n      ...dataZoom,\n    };\n  } else if (isInside) {\n    return {\n      filterMode: 'none',\n      xAxisIndex: [0],\n      zoomOnMouseWheel: false,\n      ...dataZoom,\n    };\n  }\n\n  return dataZoom;\n};\n\nexport const mergeToolbox = (\n  toolbox: EChartsOption['toolbox'],\n): EChartsOption['toolbox'] => {\n  if (Array.isArray(toolbox)) {\n    return toolbox.map((option) =>\n      mergeToolbox(option),\n    ) as EChartsOption['toolbox'];\n  }\n\n  return {\n    feature: {\n      dataZoom: {\n        yAxisIndex: false,\n        ...toolbox?.feature?.dataZoom,\n        show: true,\n        icon: {\n          // This hack removes the icons.\n          // Due to: https://github.com/apache/echarts/issues/10274\n          back: '-',\n          zoom: '-',\n        },\n      },\n    },\n  };\n};\n"]}

package/lib/esm/charts/Chart.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -19,74 +18,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  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 { tokens } from '@neo4j-ndl/base';
-import { useNeedleTheme } from '@neo4j-ndl/react';
-import { getInstanceByDom, init, registerTheme, } from 'echarts';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { renderToString } from 'react-dom/server';
-import { generateThresholdAriaDescription } from './aria-description';
-import { ChartTooltip } from './ChartTooltip';
-import { defaultThresholdLineSeriesOption } from './defaults';
+
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { ChartContainer } from './ChartContainer';
+import { ChartRender } from './ChartRender';
+import { ChartRefsProvider } from './hooks/use-chart-refs';
+import { useLegendSeries } from './hooks/use-legend-series';
 import { Legend } from './Legend';
-import { ndlEchartsTheme } from './themes/ndl-echarts-theme';
-import { mergeDataZoom, mergeSeries, mergeToolbox, mergeXAxis, mergeYAxis, } from './user-option-utils';
-import { capitalizeFirstLetter, extractValueFromTooltipSeries, formatNumberEnUS, } from './utils';
-// This returns a boolean if the condition is met
-// and also what to display in the tooltip.
-function checkCondition(value, condition, threshold) {
-    switch (condition) {
-        case 'greater':
-            return {
-                conditionText: 'Above',
-                isConditionMet: value > threshold,
-            };
-        case 'greaterOrEqual':
-            return {
-                conditionText: value > threshold
-                    ? 'Above'
-                    : value === threshold
-                        ? 'Equal'
-                        : undefined,
-                isConditionMet: value >= threshold,
-            };
-        case 'less':
-            return {
-                conditionText: 'Below',
-                isConditionMet: value < threshold,
-            };
-        case 'lessOrEqual':
-            return {
-                conditionText: value < threshold
-                    ? 'Below'
-                    : value === threshold
-                        ? 'Equal'
-                        : undefined,
-                isConditionMet: value <= threshold,
-            };
-        case 'equal':
-            return {
-                conditionText: 'Equal',
-                isConditionMet: value === threshold,
-            };
-        case 'notEqual':
-            return {
-                conditionText: 'Not equal',
-                isConditionMet: value !== threshold,
-            };
-        default:
-            return { conditionText: undefined, isConditionMet: false };
+/**
+ * Bridges the rendered ECharts option into the React legend.
+ *
+ * `useLegendSeries` reads the current chart option and ECharts color state to
+ * derive the legend rows. Rendering is deferred until the chart has completed
+ * its first resize so the legend does not measure against an uninitialized
+ * chart instance.
+ */
+const ChartLegend = ({ chartOption, isLayoutReady, isWaitingForFirstResize, onLayoutReady, }) => {
+    const legendSeries = useLegendSeries({
+        chartOption,
+        isWaitingForFirstResize,
+    });
+    if (isWaitingForFirstResize) {
+        return (_jsx("div", { "aria-hidden": "true", className: "ndl-chart-legend-container ndl-chart-legend-container-placeholder" }));
     }
-}
-/*
-Keep this, if we want more than one type of the same threshold line
-this will be useful to use.
-
-export interface NewRegisteredSeriesOption extends RegisteredSeriesOption {
-thresholdLine: ThresholdLineSeriesOption;
-}
-export type SeriesOption = Values<NewRegisteredSeriesOption>;
-export type Series = SeriesOption | SeriesOption[];
-*/
+    return (_jsx(Legend, { series: legendSeries !== null && legendSeries !== void 0 ? legendSeries : [], onLayoutReady: onLayoutReady, isLayoutReady: isLayoutReady }));
+};
 /**
  * A chart component powered by Apache ECharts with Needle's customization and theming.
  *
@@ -101,397 +69,22 @@ export type Series = SeriesOption | SeriesOption[];
  * </div>
  * ```
  */
-export function Chart({ dataset, option: userOption, xAxis: propXAxis, yAxis: propYAxis, series: propsSeries, style, settings = {
-    lazyUpdate: false,
-    notMerge: true,
-    silent: false,
-}, isLoading, isChartZoomDisabled = false, legend, callbacks, palette, }) {
-    const chartRef = useRef(null);
-    const chartEchartRef = useRef(null);
-    const chartLegendRef = useRef(null);
-    const legendSelectedRef = useRef({});
-    const legendColorCacheRef = useRef(new Map());
+export const Chart = (_a) => {
+    var { style, legend } = _a, chartProps = __rest(_a, ["style", "legend"]);
     const [isWaitingForFirstResize, setIsWaitingForFirstResize] = useState(true);
-    const dataZoomOptions = userOption === null || userOption === void 0 ? void 0 : userOption.dataZoom;
-    const toolboxOptions = userOption === null || userOption === void 0 ? void 0 : userOption.toolbox;
-    const hasSliderZoom = Array.isArray(dataZoomOptions)
-        ? dataZoomOptions.some((dataZoomOption) => {
-            return (dataZoomOption === null || dataZoomOption === void 0 ? void 0 : dataZoomOption.type) === 'slider';
-        })
-        : (dataZoomOptions === null || dataZoomOptions === void 0 ? void 0 : dataZoomOptions.type) === 'slider';
-    const { theme } = useNeedleTheme();
-    const thresholdLines = useMemo(() => {
-        const seriesArray = Array.isArray(propsSeries)
-            ? propsSeries
-            : [propsSeries];
-        const thresholdLineSeries = seriesArray.filter((currentSeries) => {
-            return currentSeries.type === 'thresholdLine';
-        });
-        return thresholdLineSeries.map((currentThresholdLineSeriesOption) => {
-            var _a;
-            return Object.assign(Object.assign({}, currentThresholdLineSeriesOption), { condition: (_a = currentThresholdLineSeriesOption.condition) !== null && _a !== void 0 ? _a : defaultThresholdLineSeriesOption.condition, value: currentThresholdLineSeriesOption.yAxis });
-        });
-    }, [propsSeries]);
-    const dataZoom = useMemo(() => {
-        return mergeDataZoom(dataZoomOptions);
-    }, [dataZoomOptions]);
-    const series = mergeSeries(propsSeries, theme, userOption, palette);
-    const xAxis = mergeXAxis(propXAxis, theme);
-    const yAxis = mergeYAxis(propYAxis, theme);
-    const hasCategoryXAxis = Array.isArray(xAxis)
-        ? xAxis.some((x) => x.type === 'category')
-        : (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category';
-    // The initial option used, the charts option is not necessarily
-    // the same as this due to mutation via dispatch and setOption.
-    // use getOption to get the current option of the chart.
-    const initialOption = useMemo(() => {
-        if (chartEchartRef.current === null) {
-            return;
-        }
-        const chart = getInstanceByDom(chartEchartRef.current);
-        const customAriaDescription = generateThresholdAriaDescription(propsSeries, dataset);
-        const option = Object.assign(Object.assign({ dataset,
-            xAxis,
-            yAxis }, userOption), { aria: Object.assign(Object.assign({ decal: {
-                    show: false,
-                }, enabled: true }, (customAriaDescription !== undefined && {
-                label: { description: customAriaDescription },
-            })), userOption === null || userOption === void 0 ? void 0 : userOption.aria), grid: Object.assign({ left: hasCategoryXAxis ? '15px' : '10px', right: hasCategoryXAxis ? '15px' : '10px', top: '10px', bottom: hasSliderZoom ? '60px' : '10px', type: 'solid', containLabel: true }, userOption === null || userOption === void 0 ? void 0 : userOption.grid), legend: {
-                // Removes in-built echarts legend
-                show: false,
-                // Preserve legend filter state across re-renders. legendSelectedRef
-                // is the single source of truth, written by the Legend component.
-                // ECharts mutates the options object, so pass a shallow copy here
-                // to avoid it mutating the React ref object.
-                selected: Object.assign({}, (legendSelectedRef.current || {})),
-            }, series, tooltip: {
-                trigger: 'axis',
-                confine: true,
-                // Reset the default tooltip css styling
-                padding: 0,
-                borderRadius: 0,
-                borderWidth: 0,
-                extraCssText: 'box-shadow: none; background-color: transparent;',
-                formatter: function (params) {
-                    var _a;
-                    const paramsArray = Array.isArray(params) ? params : [params];
-                    const firstParam = paramsArray[0];
-                    let valueFormatter = formatNumberEnUS;
-                    if (typeof (userOption === null || userOption === void 0 ? void 0 : userOption.tooltip) === 'object' &&
-                        userOption.tooltip !== null &&
-                        'valueFormatter' in userOption.tooltip) {
-                        valueFormatter = userOption.tooltip.valueFormatter;
-                    }
-                    return `${renderToString(_jsxs("span", { className: "ndl-charts-chart-tooltip", children: [_jsx(ChartTooltip.Title, { children: (_a = firstParam === null || firstParam === void 0 ? void 0 : firstParam.axisValueLabel) !== null && _a !== void 0 ? _a : '' }), paramsArray.map((series) => {
-                                const value = extractValueFromTooltipSeries(series.value, series.encode, series.axisDim);
-                                const seriesValue = typeof value === 'number' ? value : Number(value);
-                                const isThresholdLine = series.seriesName.startsWith('thresholdLine');
-                                const notifications = thresholdLines
-                                    .filter((threshold) => {
-                                    const { value: thresholdValue, condition, customCondition, } = threshold;
-                                    if (Number.isNaN(seriesValue)) {
-                                        return false;
-                                    }
-                                    const isConditionMet = customCondition
-                                        ? customCondition(seriesValue, thresholdValue)
-                                        : checkCondition(seriesValue, condition, thresholdValue)
-                                            .isConditionMet;
-                                    return !isThresholdLine && isConditionMet;
-                                })
-                                    .map((threshold) => {
-                                    const { notificationType, value: thresholdValue, condition, customConditionText, customCondition, } = threshold;
-                                    return {
-                                        id: `threshold-${notificationType}`,
-                                        leadingElement: customCondition
-                                            ? customConditionText
-                                            : `${checkCondition(seriesValue, condition, thresholdValue).conditionText} threshold`,
-                                        notificationType,
-                                        trailingElement: valueFormatter(thresholdValue),
-                                    };
-                                });
-                                return (_jsx(ChartTooltip.Content, { leadingElement: isThresholdLine
-                                        ? `${capitalizeFirstLetter(series.seriesName.replace('thresholdLine-', ''))} threshold`
-                                        : series.seriesName, trailingElement: valueFormatter(value), indentSquareColor: series.color, notifications: notifications }, series.seriesName));
-                            })] }))}`;
-                },
-            }, dataZoom, toolbox: mergeToolbox(toolboxOptions) });
-        // Update chart with initial option
-        chart === null || chart === void 0 ? void 0 : chart.setOption(option, settings);
-        // Get option returns the current option of the chart.
-        // This is slightly different than the option we gave as an argument.
-        // Because we use useMemo in other areas we want to get this set first,
-        // this is why we are setting then getting then returning. If we did this in
-        // a useEffect it would run after the other useMemos which is not what we want.
-        // This is purely for order of operations.
-        const chartOption = chart === null || chart === void 0 ? void 0 : chart.getOption();
-        return chartOption;
-    }, [
-        thresholdLines,
-        propsSeries,
-        dataset,
-        xAxis,
-        yAxis,
-        userOption,
-        hasCategoryXAxis,
-        hasSliderZoom,
-        series,
-        dataZoom,
-        toolboxOptions,
-        settings,
-    ]);
+    const [chartOption, setChartOption] = useState();
+    const [isLegendLayoutReady, setIsLegendLayoutReady] = useState(!(legend === null || legend === void 0 ? void 0 : legend.show));
+    const handleLegendLayoutReady = useCallback(() => {
+        setIsLegendLayoutReady(true);
+    }, []);
     useEffect(() => {
-        var _a;
-        // Initialize chart
-        let chart;
-        if (chartEchartRef.current !== null) {
-            registerTheme('ndl-light', ndlEchartsTheme('light', palette));
-            registerTheme('ndl-dark', ndlEchartsTheme('dark', palette));
-            const currentChart = getInstanceByDom(chartEchartRef.current);
-            if (currentChart) {
-                chart = currentChart;
-            }
-            else {
-                const echartsTheme = theme === 'light' ? 'ndl-light' : 'ndl-dark';
-                chart = init(chartEchartRef.current, echartsTheme, {
-                    renderer: 'svg',
-                });
-            }
-        }
-        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 });
-            });
-        }
-        // Add chart resize listener
-        // ResizeObserver is leading to a bit janky UX
-        function resizeChart() {
-            // TODO: We need to revisit this. Right now using grid containLabel seems to work.
-            // We still need to visit this for overflowing of the x-axis labels.
-            // const calculateGridLeft = () => {
-            //   const textElements = chartEchartRef.current?.querySelectorAll('text');
-            //   const filteredTextElements = Array.from(textElements || []).filter(
-            //     (element) => element.getAttribute('text-anchor') === 'end',
-            //   );
-            //   let maxWidth = 0;
-            //   filteredTextElements.forEach((element) => {
-            //     const bbox = element.getBBox();
-            //     maxWidth = Math.max(maxWidth, bbox.width);
-            //   });
-            //   const tickLength = 5;
-            //   const tickPadding = 3;
-            //   return maxWidth + tickLength + tickPadding;
-            // };
-            //
-            // // Example of dynamically setting the grid's left
-            // const gridLeft = calculateGridLeft();
-            // chart?.setOption({
-            //   grid: {
-            //     left: gridLeft,
-            //   },
-            // });
-            var _a, _b, _c;
-            // We want to fit the chart to the charts container.
-            const chartContainerHeight = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
-            const chartContainerWidth = (_b = chartRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth;
-            // Need to take legends height into consideration, otherwise it will overflow the parent.
-            const chartLegendHeight = ((_c = chartLegendRef === null || chartLegendRef === void 0 ? void 0 : chartLegendRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
-            const height = chartContainerHeight
-                ? chartContainerHeight - chartLegendHeight
-                : undefined;
-            chart === null || chart === void 0 ? void 0 : chart.resize({
-                height,
-                width: chartContainerWidth,
-            });
+        if (!(legend === null || legend === void 0 ? void 0 : legend.show)) {
+            setIsLegendLayoutReady(true);
         }
-        window.addEventListener('resize', resizeChart);
-        requestAnimationFrame(() => {
-            resizeChart();
-            setIsWaitingForFirstResize(false);
-        });
-        // Add chart zoom listeners
-        const handleMouseMove = () => {
-            // I do not like this at all: https://github.com/apache/echarts/issues/19819
-            // echarts updates the svgs on every mouse movement so we need to do this.
-            chart === null || chart === void 0 ? void 0 : chart.getZr().setCursorStyle('default');
-        };
-        // We cannot use chart.getZr().on('mousemove', handleMouseMove)
-        // This is because it doesn't respect our callbacks. It will
-        // always run echarts code last instead of our callback.
-        const chartChild = (_a = chartEchartRef.current) === null || _a === void 0 ? void 0 : _a.children[0];
-        if (!isChartZoomDisabled) {
-            chartChild.addEventListener('mousemove', handleMouseMove);
-        }
-        const handleMouseDown = (params) => {
-            var _a;
-            const event = params.event;
-            const amountOfMouseClicks = event.detail;
-            const isDoubleClick = amountOfMouseClicks === 2;
-            if (isDoubleClick) {
-                // Reset zooming.
-                if (chart === undefined) {
-                    return;
-                }
-                chart === null || chart === void 0 ? void 0 : chart.dispatchAction({
-                    end: 100,
-                    start: 0,
-                    type: 'dataZoom',
-                });
-                if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) {
-                    (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onZoom) === null || _a === void 0 ? void 0 : _a.call(callbacks, { endValue: 100, startValue: 0 });
-                }
-            }
-        };
-        if (!isChartZoomDisabled) {
-            chart === null || chart === void 0 ? void 0 : chart.getZr().on('mousedown', handleMouseDown);
-        }
-        // Return cleanup function
-        const chartRefCurrentElement = chartEchartRef.current;
-        const element = chartRefCurrentElement === null || chartRefCurrentElement === void 0 ? void 0 : chartRefCurrentElement.children[0];
-        return () => {
-            window.removeEventListener('resize', resizeChart);
-            element === null || element === void 0 ? void 0 : element.removeEventListener('mousemove', handleMouseMove);
-            // Remove chart zoom handlers
-            if (chartRefCurrentElement) {
-                const chart = getInstanceByDom(chartRefCurrentElement);
-                chart === null || chart === void 0 ? void 0 : chart.getZr().off('mousedown', handleMouseDown);
-            }
-        };
-    });
-    useEffect(() => {
-        if (chartEchartRef.current === null) {
-            return;
-        }
-        const chart = getInstanceByDom(chartEchartRef === null || chartEchartRef === void 0 ? void 0 : chartEchartRef.current);
-        if (isLoading === true || isWaitingForFirstResize) {
-            chart === null || chart === void 0 ? void 0 : chart.showLoading({
-                color: tokens.theme[theme].color.primary.bg.status,
-                fontFamily: tokens.typography['label'].fontFamily,
-                fontSize: tokens.typography['label'].fontSize,
-                fontWeight: tokens.typography['label'].fontWeight,
-                maskColor: `rgb( from ${tokens.theme[theme].color.neutral.text.inverse} r g b / 0.8)`,
-                text: 'Loading',
-                textColor: tokens.theme[theme].color.neutral.text.default,
-            });
-        }
-        else {
-            chart === null || chart === void 0 ? void 0 : chart.hideLoading();
-        }
-    }, [isLoading, isWaitingForFirstResize, theme]);
-    const legendSeries = useMemo(() => {
-        var _a;
-        if (chartEchartRef.current === null || isWaitingForFirstResize) {
-            return;
-        }
-        const chart = getInstanceByDom(chartEchartRef === null || chartEchartRef === void 0 ? void 0 : chartEchartRef.current);
-        const optionSeries = (_a = initialOption === null || initialOption === void 0 ? void 0 : initialOption.series) !== null && _a !== void 0 ? _a : [];
-        const optionDataset = initialOption === null || initialOption === void 0 ? void 0 : initialOption.dataset;
-        const legendSeries = [];
-        if (Array.isArray(optionSeries)) {
-            optionSeries.forEach((currentSeries, index) => {
-                var _a, _b, _c, _d;
-                if (currentSeries === null) {
-                    return;
-                }
-                else if (currentSeries.type === 'line' &&
-                    typeof currentSeries.name === 'string' &&
-                    ((_a = currentSeries.name) === null || _a === void 0 ? void 0 : _a.includes('thresholdLine'))) {
-                    return;
-                }
-                else if (currentSeries.type === 'pie') {
-                    const encodedItemName = (_b = currentSeries.encode) === null || _b === void 0 ? void 0 : _b.itemName;
-                    let currentDataset = Array.isArray(optionDataset)
-                        ? optionDataset[0]
-                        : optionDataset;
-                    if (currentSeries.datasetId && Array.isArray(optionDataset)) {
-                        currentDataset = optionDataset.find((ds) => ds.id === currentSeries.datasetId);
-                    }
-                    else if (currentSeries.datasetIndex !== undefined) {
-                        currentDataset = Array.isArray(optionDataset)
-                            ? optionDataset[currentSeries.datasetIndex]
-                            : optionDataset;
-                    }
-                    const firstDatasetRow = Array.isArray(currentDataset === null || currentDataset === void 0 ? void 0 : currentDataset.source)
-                        ? currentDataset === null || currentDataset === void 0 ? void 0 : currentDataset.source[0]
-                        : undefined;
-                    if (!firstDatasetRow) {
-                        return;
-                    }
-                    if (Array.isArray(firstDatasetRow)) {
-                        const firstDatasetRowIndex = firstDatasetRow.findIndex((item) => item === encodedItemName);
-                        if (firstDatasetRowIndex === -1) {
-                            return;
-                        }
-                        const source = currentDataset === null || currentDataset === void 0 ? void 0 : currentDataset.source;
-                        if (!source) {
-                            return;
-                        }
-                        const sourceLength = Array.isArray(source) ? source.length : 0;
-                        const selected = legendSelectedRef.current;
-                        const isAllVisible = Object.values(selected).every((v) => v);
-                        for (let rowIndex = 1; rowIndex < sourceLength; rowIndex++) {
-                            const row = source[rowIndex];
-                            const name = String(row[firstDatasetRowIndex]);
-                            const freshColor = chart === null || chart === void 0 ? void 0 : chart.getVisual({ dataIndexInside: rowIndex - 1, seriesIndex: index }, 'color');
-                            // Only trust getVisual colors when all items are visible.
-                            // When items are deselected, getVisual returns grayed-out
-                            // colors, so we use the cached color from when it was visible.
-                            if (isAllVisible && typeof freshColor === 'string') {
-                                legendColorCacheRef.current.set(name, freshColor);
-                            }
-                            const color = (_c = legendColorCacheRef.current.get(name)) !== null && _c !== void 0 ? _c : (typeof freshColor === 'string' ? freshColor : '#000000');
-                            legendSeries.push({ color, name });
-                        }
-                    }
-                    else {
-                        // TODO: handle dictionary
-                    }
-                    return;
-                }
-                else {
-                    const name = Array.isArray(optionSeries)
-                        ? (_d = optionSeries[index]) === null || _d === void 0 ? void 0 : _d.name
-                        : undefined;
-                    if (name === undefined) {
-                        return null;
-                    }
-                    const color = chart === null || chart === void 0 ? void 0 : chart.getVisual({ seriesIndex: index }, 'color');
-                    legendSeries.push({
-                        color: typeof color === 'string' ? color : '#000000',
-                        name: String(name),
-                    });
-                }
-            });
-        }
-        return legendSeries.filter((currentSeries) => currentSeries !== null);
-    }, [isWaitingForFirstResize, initialOption]);
-    if (chartEchartRef.current !== null && !isChartZoomDisabled) {
-        const chart = getInstanceByDom(chartEchartRef.current);
-        if (chart) {
-            // Needs to be re-set on every re-render.
-            // Sets the selectable zoom area over the chart (not the slider).
-            chart.dispatchAction({
-                dataZoomSelectActive: true,
-                key: 'dataZoomSelect',
-                type: 'takeGlobalCursor',
-            });
-        }
-    }
-    return (_jsxs("div", { ref: chartRef, className: "ndl-chart", style: style, children: [_jsx("div", { ref: chartEchartRef }), (legend === null || legend === void 0 ? void 0 : legend.show) && !isWaitingForFirstResize && (_jsx(Legend, { ref: chartLegendRef, wrappingType: legend.wrappingType, series: legendSeries !== null && legendSeries !== void 0 ? legendSeries : [], chartRef: chartEchartRef, selectedRef: legendSelectedRef }))] }));
-}
+    }, [legend === null || legend === void 0 ? void 0 : legend.show]);
+    const chartLayoutClassName = (legend === null || legend === void 0 ? void 0 : legend.show) && !isLegendLayoutReady
+        ? 'ndl-chart-layout ndl-chart-layout-hidden'
+        : 'ndl-chart-layout';
+    return (_jsx(ChartRefsProvider, { children: _jsxs(ChartContainer, { style: style, children: [_jsx("div", { className: chartLayoutClassName, children: _jsx(ChartRender, Object.assign({}, chartProps, { onChartOptionChange: setChartOption, onFirstResizeChange: setIsWaitingForFirstResize })) }), (legend === null || legend === void 0 ? void 0 : legend.show) && (_jsx(ChartLegend, { chartOption: chartOption, isLayoutReady: isLegendLayoutReady, isWaitingForFirstResize: isWaitingForFirstResize, onLayoutReady: handleLegendLayoutReady }))] }) }));
+};
 //# sourceMappingURL=Chart.js.map