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

package/dist/index.js

@@ -24774,7 +24774,28 @@ const useLegendState = ({
     legend: { customLegend }
   } = options;
   const { legendEnabled } = state;
-  const [hiddenStates, setHiddenStates] = useState({});
+  const [hiddenStates, setHiddenStates] = useState([]);
+  const upsertHiddenState = ({ label, datasetIndex, hidden }) => {
+    setHiddenStates((prevStates) => {
+      const existingIndex = prevStates.findIndex(
+        (state2) => state2.label === label
+      );
+      const newStates = [...prevStates];
+      const newState = { label, datasetIndex, hidden };
+      if (existingIndex !== -1) {
+        newStates[existingIndex] = newState;
+      } else {
+        newStates.push(newState);
+      }
+      return newStates;
+    });
+  };
+  const clearNonExistentDatasets = (datasets) => {
+    const existingLabels = datasets.map((ds) => ds.label);
+    setHiddenStates(
+      (prevStates) => prevStates.filter((state2) => existingLabels.includes(state2.label))
+    );
+  };
   const legendClick = useCallback(
     (_e2, legendItem2) => {
       const { datasetIndex } = legendItem2;
@@ -24782,21 +24803,16 @@ const useLegendState = ({
       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;
-        }
-      }
+      const isDatasetVisible = (chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex)) ?? true;
+      upsertHiddenState({
+        label: dataset.label,
+        datasetIndex,
+        hidden: isDatasetVisible
+      });
+      chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(datasetIndex, !isDatasetVisible);
       if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
         const { annotationIndex } = dataset;
-        dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
+        dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
       }
       if (dataset.displayGroup) {
         datasets == null ? void 0 : datasets.forEach((ds, ix) => {
@@ -24830,7 +24846,9 @@ const useLegendState = ({
     legendClick,
     hiddenStates,
     legend: legend2,
-    customLegendPlugin
+    customLegendPlugin,
+    upsertHiddenState,
+    clearNonExistentDatasets
   };
 };
 const LEGEND_MARGIN = 4;
@@ -24851,6 +24869,35 @@ 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 useGeneratedLabels = (chartRef, generatedDatasets) => {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    const chart2 = chartRef.current;
+    if (!chart2)
+      return;
+    const newItems = getGeneratedLabels(chart2);
+    setItems(newItems);
+  }, [generatedDatasets, chartRef]);
+  return items;
+};
+const LegendItems = ({
+  items,
+  hiddenStates,
+  datasets,
+  legendClick
+}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
+  var _a2;
+  const hiddenState = ((_a2 = hiddenStates.find((state) => state.label === item.text)) == null ? void 0 : _a2.hidden) ?? false;
+  return /* @__PURE__ */ jsx(
+    LegendItem,
+    {
+      hidden: hiddenState,
+      dataset: datasets[item.datasetIndex],
+      handleClick: (event) => legendClick(event, item)
+    },
+    `${item.datasetIndex}-hidden-${item.hidden}`
+  );
+}) });
 const LegendPanel = forwardRef((props, ref) => {
   const {
     legendPosition,
@@ -24862,27 +24909,24 @@ const LegendPanel = forwardRef((props, ref) => {
     isDragging: isDragging2
   } = props;
   const { legendEnabled } = state;
-  const chart2 = chartRef.current;
+  const chart2 = chartRef == null ? void 0 : chartRef.current;
   if (!chart2)
     return null;
   const {
     data: { datasets }
   } = chart2;
-  const { legendClick, hiddenStates } = useLegendState({
+  const { legendClick, hiddenStates, clearNonExistentDatasets } = useLegendState({
     chartRef,
     options,
     state,
     dispatch
   });
   const { onToggleLegend } = useToggleHandlers(dispatch);
-  const [items, setItems] = useState([]);
-  useEffect(() => {
-    if (!chart2)
-      return;
-    const newItems = getGeneratedLabels(chart2);
-    setItems(newItems);
-  }, [generatedDatasets, chart2]);
+  const items = useGeneratedLabels(chartRef, generatedDatasets);
   const style = createLegendStyle(legendPosition, chart2);
+  useEffect(() => {
+    clearNonExistentDatasets(generatedDatasets);
+  }, [generatedDatasets]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -24903,15 +24947,15 @@ const LegendPanel = forwardRef((props, ref) => {
             icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item, idx) => /* @__PURE__ */ jsx(
-          LegendItem,
+        /* @__PURE__ */ jsx(
+          LegendItems,
           {
-            hidden: hiddenStates[idx],
-            dataset: datasets[item.datasetIndex],
-            handleClick: (event) => legendClick(event, item)
-          },
-          `${item.datasetIndex}-hidden-${item.hidden}`
-        )) })
+            items,
+            hiddenStates,
+            datasets,
+            legendClick
+          }
+        )
       ]
     }
   );