@oliasoft-open-source/charts-library 3.6.5 → 3.6.6-beta-1

package/dist/index.js

@@ -23998,48 +23998,9 @@ const useChartFunctions = ({
   generatedDatasets
 }) => {
   const {
-    annotations,
-    interactions: {
-      onLegendClick,
-      onHover: onPointHover,
-      onUnhover: onPointUnhover
-    },
+    interactions: { onHover: onPointHover, onUnhover: onPointUnhover },
     axes
   } = options;
-  const legendClick = useCallback(
-    (_e2, legendItem2) => {
-      const { datasetIndex } = legendItem2;
-      const chartInstance = chartRef == null ? void 0 : chartRef.current;
-      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
-      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
-      const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
-      if (meta) {
-        if (meta.hidden === null) {
-          meta.hidden = !dataset.hidden;
-        } else {
-          meta.hidden = null;
-        }
-      }
-      if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
-        const { annotationIndex } = dataset;
-        dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
-      }
-      if (dataset.displayGroup) {
-        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
-          if (ds.displayGroup !== dataset.displayGroup)
-            return;
-          if (chartInstance && meta) {
-            chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
-          }
-        });
-      }
-      if (onLegendClick) {
-        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
-      }
-      chartInstance == null ? void 0 : chartInstance.update();
-    },
-    [onLegendClick, annotations]
-  );
   const resetZoom2 = useCallback(() => {
     const chartInstance = chartRef == null ? void 0 : chartRef.current;
     chartInstance == null ? void 0 : chartInstance.resetZoom();
@@ -24161,7 +24122,6 @@ const useChartFunctions = ({
     dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
   }, []);
   return {
-    legendClick,
     resetZoom: resetZoom2,
     onHover,
     handleDownload,
@@ -24669,10 +24629,6 @@ function useMeasure() {
 const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
   return [noop, defaultState];
 };
-const getGeneratedLabels = (chart2) => {
-  var _a2, _b2, _c2, _d2, _e2;
-  return ((_e2 = (_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels) == null ? void 0 : _e2.call(_d2, chart2)) ?? [];
-};
 const legend = "_legend_wpro0_1";
 const isDragging = "_isDragging_wpro0_8";
 const legendItems = "_legendItems_wpro0_11";
@@ -24806,7 +24762,95 @@ const LegendItem = ({ hidden, dataset, handleClick }) => {
     }
   );
 };
+const useLegendState = ({
+  chartRef,
+  options,
+  state,
+  dispatch
+}) => {
+  const {
+    annotations,
+    interactions: { onLegendClick },
+    legend: { customLegend }
+  } = options;
+  const { legendEnabled } = state;
+  const [hiddenStates, setHiddenStates] = useState({});
+  const legendClick = useCallback(
+    (_e2, legendItem2) => {
+      const { datasetIndex } = legendItem2;
+      const chartInstance = chartRef == null ? void 0 : chartRef.current;
+      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
+      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
+      const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
+      const newHiddenState = !hiddenStates[datasetIndex];
+      setHiddenStates((prevHiddenStates) => ({
+        ...prevHiddenStates,
+        [datasetIndex]: newHiddenState
+      }));
+      if (meta) {
+        if (meta.hidden === null) {
+          meta.hidden = !(dataset == null ? void 0 : dataset.hidden);
+        } else {
+          meta.hidden = null;
+        }
+      }
+      if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
+        const { annotationIndex } = dataset;
+        dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
+      }
+      if (dataset.displayGroup) {
+        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
+          if (ds.displayGroup !== dataset.displayGroup)
+            return;
+          if (chartInstance && meta) {
+            chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+          }
+        });
+      }
+      if (onLegendClick) {
+        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+      }
+      chartInstance == null ? void 0 : chartInstance.update();
+    },
+    [chartRef, annotations, onLegendClick, hiddenStates]
+  );
+  const legend2 = useMemo(
+    () => getLegend(options, legendClick),
+    [legendEnabled]
+  );
+  const customLegendPlugin = useMemo(
+    () => ({
+      [CUSTOM_LEGEND_PLUGIN_NAME]: (customLegend == null ? void 0 : customLegend.customLegendPlugin) && {
+        containerID: customLegend == null ? void 0 : customLegend.customLegendContainerID
+      }
+    }),
+    [customLegend]
+  );
+  return {
+    legendClick,
+    hiddenStates,
+    legend: legend2,
+    customLegendPlugin
+  };
+};
 const LEGEND_MARGIN = 4;
+const createStyleObject = (legendPosition, chart2) => {
+  const { height = 0, width = 0, chartArea } = chart2;
+  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
+  return {
+    left: legendPosition.includes("left") ? left2 : void 0,
+    right: legendPosition.includes("right") ? width - right2 : void 0,
+    top: legendPosition.includes("top") ? top2 : void 0,
+    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
+    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
+    margin: LEGEND_MARGIN
+  };
+};
+const getGeneratedLabels = (chart2) => {
+  var _a2, _b2, _c2, _d2, _e2;
+  return ((_e2 = (_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels) == null ? void 0 : _e2.call(_d2, chart2)) ?? [];
+};
 const LegendPanel = forwardRef((props, ref) => {
   const {
     legendPosition,
@@ -24817,32 +24861,31 @@ const LegendPanel = forwardRef((props, ref) => {
     generatedDatasets,
     isDragging: isDragging2
   } = props;
-  const [refresh, setRefresh] = useState(false);
   const { legendEnabled } = state;
-  const { legendClick } = useChartFunctions({
+  const chart2 = chartRef.current;
+  if (!chart2)
+    return null;
+  const {
+    data: { datasets }
+  } = chart2;
+  const { legendClick, hiddenStates } = useLegendState({
     chartRef,
-    state,
     options,
-    dispatch,
-    generatedDatasets
+    state,
+    dispatch
   });
   const { onToggleLegend } = useToggleHandlers(dispatch);
-  const chart2 = chartRef.current;
-  if (!chart2)
-    return null;
-  const { data, chartArea, height = 0, width = 0 } = chart2;
-  const { datasets } = data;
-  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
-  const items = getGeneratedLabels(chart2);
-  const style = {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
-    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
-    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
-    margin: LEGEND_MARGIN
-  };
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    if (!chart2)
+      return;
+    const newItems = getGeneratedLabels(chart2);
+    setItems(newItems);
+  }, [generatedDatasets, chart2]);
+  const style = useMemo(
+    () => createStyleObject(legendPosition, chart2),
+    [chart2, legendPosition]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -24863,15 +24906,12 @@ const LegendPanel = forwardRef((props, ref) => {
             icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item, idx) => /* @__PURE__ */ jsx(
           LegendItem,
           {
-            hidden: item.hidden,
+            hidden: hiddenStates[idx],
             dataset: datasets[item.datasetIndex],
-            handleClick: (event) => {
-              legendClick(event, item);
-              setRefresh(!refresh);
-            }
+            handleClick: (event) => legendClick(event, item)
           },
           `${item.datasetIndex}-hidden-${item.hidden}`
         )) })
@@ -25712,7 +25752,6 @@ const useChartOptions = ({
   dispatch,
   generatedDatasets
 }) => {
-  var _a2, _b2;
   const {
     interactions: { onAnimationComplete },
     annotations: {
@@ -25734,29 +25773,28 @@ const useChartOptions = ({
     zoomEnabled,
     panEnabled,
     lineEnabled,
-    showAnnotationLineIndex,
-    legendEnabled
+    showAnnotationLineIndex
   } = state;
   const [hoveredPoint, setHoveredPoint] = useState(null);
-  const { legendClick, updateAxesRangesFromChart, onHover } = useChartFunctions(
-    {
-      chartRef,
-      state,
-      options,
-      dispatch,
-      generatedDatasets
-    }
-  );
+  const { updateAxesRangesFromChart, onHover } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets
+  });
+  const { legendClick, legend: legend2, customLegendPlugin } = useLegendState({
+    chartRef,
+    options,
+    state,
+    dispatch
+  });
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
   const annotation2 = useMemo(
     () => getAnnotation(options, state),
     [showAnnotationLineIndex, legendClick]
   );
-  const legend2 = useMemo(
-    () => getLegend(options, legendClick),
-    [legendEnabled]
-  );
   const scales = useMemo(
     () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
@@ -25798,9 +25836,7 @@ const useChartOptions = ({
     tooltip,
     legend: { ...legend2, display: false },
     // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: ((_a2 = options.legend.customLegend) == null ? void 0 : _a2.customLegendPlugin) && {
-      containerID: (_b2 = options.legend.customLegend) == null ? void 0 : _b2.customLegendContainerID
-    },
+    customLegendPlugin,
     chartAreaBorder: {
       borderColor: BORDER_COLOR
     },