@oliasoft-open-source/charts-library 4.1.5 → 4.1.6

package/dist/index.js

@@ -11,7 +11,7 @@ import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
-import { isEmpty, isArray as isArray$2, some, has, debounce as debounce$3 } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, map as map$3, find, get as get$1, values } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -921,16 +921,16 @@ const _lookupByKey$1 = (table2, key, value, last) => _lookup$1(table2, value, la
   return ti < value || ti === value && table2[index2 + 1][key] === value;
 } : (index2) => table2[index2][key] < value);
 const _rlookupByKey$1 = (table2, key, value) => _lookup$1(table2, value, (index2) => table2[index2][key] >= value);
-function _filterBetween$1(values, min, max) {
+function _filterBetween$1(values2, min, max) {
   let start = 0;
-  let end = values.length;
-  while (start < end && values[start] < min) {
+  let end = values2.length;
+  while (start < end && values2[start] < min) {
     start++;
   }
-  while (end > start && values[end - 1] > max) {
+  while (end > start && values2[end - 1] > max) {
     end--;
   }
-  return start > 0 || end < values.length ? values.slice(start, end) : values;
+  return start > 0 || end < values2.length ? values2.slice(start, end) : values2;
 }
 const arrayEvents$1 = [
   "push",
@@ -1404,9 +1404,9 @@ function getScope$1$1(node, key) {
   }
   return node;
 }
-function set$1(root, scope2, values) {
+function set$1(root, scope2, values2) {
   if (typeof scope2 === "string") {
-    return merge$1(getScope$1$1(root, scope2), values);
+    return merge$1(getScope$1$1(root, scope2), values2);
   }
   return merge$1(getScope$1$1(root, ""), scope2);
 }
@@ -1456,17 +1456,17 @@ let Defaults$1 = class Defaults {
     this.describe(_descriptors2);
     this.apply(_appliers);
   }
-  set(scope2, values) {
-    return set$1(this, scope2, values);
+  set(scope2, values2) {
+    return set$1(this, scope2, values2);
   }
   get(scope2) {
     return getScope$1$1(this, scope2);
   }
-  describe(scope2, values) {
-    return set$1(descriptors$1, scope2, values);
+  describe(scope2, values2) {
+    return set$1(descriptors$1, scope2, values2);
   }
-  override(scope2, values) {
-    return set$1(overrides$1, scope2, values);
+  override(scope2, values2) {
+    return set$1(overrides$1, scope2, values2);
   }
   route(scope2, name, targetScope, targetName) {
     const scopeObject = getScope$1$1(this, scope2);
@@ -3175,8 +3175,8 @@ let Animations$1 = class Animations {
       });
     });
   }
-  _animateOptions(target, values) {
-    const newOptions = values.options;
+  _animateOptions(target, values2) {
+    const newOptions = values2.options;
     const options = resolveTargetOptions$1(target, newOptions);
     if (!options) {
       return [];
@@ -3190,11 +3190,11 @@ let Animations$1 = class Animations {
     }
     return animations;
   }
-  _createAnimations(target, values) {
+  _createAnimations(target, values2) {
     const animatedProps = this._properties;
     const animations = [];
     const running = target.$animations || (target.$animations = {});
-    const props = Object.keys(values);
+    const props = Object.keys(values2);
     const date = Date.now();
     let i2;
     for (i2 = props.length - 1; i2 >= 0; --i2) {
@@ -3203,10 +3203,10 @@ let Animations$1 = class Animations {
         continue;
       }
       if (prop === "options") {
-        animations.push(...this._animateOptions(target, values));
+        animations.push(...this._animateOptions(target, values2));
         continue;
       }
-      const value = values[prop];
+      const value = values2[prop];
       let animation = running[prop];
       const cfg = animatedProps.get(prop);
       if (animation) {
@@ -3226,12 +3226,12 @@ let Animations$1 = class Animations {
     }
     return animations;
   }
-  update(target, values) {
+  update(target, values2) {
     if (this._properties.size === 0) {
-      Object.assign(target, values);
+      Object.assign(target, values2);
       return;
     }
-    const animations = this._createAnimations(target, values);
+    const animations = this._createAnimations(target, values2);
     if (animations.length) {
       animator$1.add(this._chart, animations);
       return true;
@@ -3684,9 +3684,9 @@ let DatasetController$1 = (_a = class {
   updateRangeFromParsed(range, scale, parsed, stack) {
     const parsedValue = parsed[scale.axis];
     let value = parsedValue === null ? NaN : parsedValue;
-    const values = stack && parsed._stacks[scale.axis];
-    if (stack && values) {
-      stack.values = values;
+    const values2 = stack && parsed._stacks[scale.axis];
+    if (stack && values2) {
+      stack.values = values2;
       value = applyStack$1(stack, parsedValue, this._cachedMeta.index);
     }
     range.min = Math.min(range.min, value);
@@ -3732,15 +3732,15 @@ let DatasetController$1 = (_a = class {
   }
   getAllParsedValues(scale) {
     const parsed = this._cachedMeta._parsed;
-    const values = [];
+    const values2 = [];
     let i2, ilen, value;
     for (i2 = 0, ilen = parsed.length; i2 < ilen; ++i2) {
       value = parsed[i2][scale.axis];
       if (isNumberFinite$1(value)) {
-        values.push(value);
+        values2.push(value);
       }
     }
-    return values;
+    return values2;
   }
   getMaxOverflow() {
     return false;
@@ -3842,12 +3842,12 @@ let DatasetController$1 = (_a = class {
     const scopes = config2.getOptionScopes(this.getDataset(), scopeKeys);
     const names2 = Object.keys(defaults$2.elements[elementType]);
     const context = () => this.getContext(index2, active, mode);
-    const values = config2.resolveNamedOptions(scopes, names2, context, prefixes);
-    if (values.$shared) {
-      values.$shared = sharing;
-      cache2[cacheKey] = Object.freeze(cloneIfNotShared$1(values, sharing));
+    const values2 = config2.resolveNamedOptions(scopes, names2, context, prefixes);
+    if (values2.$shared) {
+      values2.$shared = sharing;
+      cache2[cacheKey] = Object.freeze(cloneIfNotShared$1(values2, sharing));
     }
-    return values;
+    return values2;
   }
   _resolveAnimations(index2, transition, active) {
     const chart2 = this.chart;
@@ -4043,17 +4043,17 @@ let DatasetController$1 = (_a = class {
 function getAllScaleValues$1(scale, type) {
   if (!scale._cache.$bar) {
     const visibleMetas = scale.getMatchingVisibleMetas(type);
-    let values = [];
+    let values2 = [];
     for (let i2 = 0, ilen = visibleMetas.length; i2 < ilen; i2++) {
-      values = values.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
+      values2 = values2.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
     }
-    scale._cache.$bar = _arrayUnique$1(values.sort((a2, b2) => a2 - b2));
+    scale._cache.$bar = _arrayUnique$1(values2.sort((a2, b2) => a2 - b2));
   }
   return scale._cache.$bar;
 }
 function computeMinSampleSize$1(meta) {
   const scale = meta.iScale;
-  const values = getAllScaleValues$1(scale, meta.type);
+  const values2 = getAllScaleValues$1(scale, meta.type);
   let min = scale._length;
   let i2, ilen, curr, prev;
   const updateMinAndPrev = () => {
@@ -4065,8 +4065,8 @@ function computeMinSampleSize$1(meta) {
     }
     prev = curr;
   };
-  for (i2 = 0, ilen = values.length; i2 < ilen; ++i2) {
-    curr = scale.getPixelForValue(values[i2]);
+  for (i2 = 0, ilen = values2.length; i2 < ilen; ++i2) {
+    curr = scale.getPixelForValue(values2[i2]);
     updateMinAndPrev();
   }
   prev = void 0;
@@ -12438,13 +12438,13 @@ function setMajorTicks$1(scale, ticks, map2, majorUnit) {
   }
   return ticks;
 }
-function ticksFromTimestamps$1(scale, values, majorUnit) {
+function ticksFromTimestamps$1(scale, values2, majorUnit) {
   const ticks = [];
   const map2 = {};
-  const ilen = values.length;
+  const ilen = values2.length;
   let i2, value;
   for (i2 = 0; i2 < ilen; ++i2) {
-    value = values[i2];
+    value = values2[i2];
     map2[value] = i2;
     ticks.push({
       value,
@@ -12716,8 +12716,8 @@ let TimeScale$1 = (_p = class extends Scale$1 {
     }
     return this._cache.labels = this._normalized ? timestamps : this.normalize(timestamps);
   }
-  normalize(values) {
-    return _arrayUnique$1(values.sort(sorter$1));
+  normalize(values2) {
+    return _arrayUnique$1(values2.sort(sorter$1));
   }
 }, __publicField(_p, "id", "time"), __publicField(_p, "defaults", {
   bounds: "data",
@@ -13116,19 +13116,19 @@ var hammer = { exports: {} };
       }
       return false;
     }
-    function inStr(str, find) {
-      return str.indexOf(find) > -1;
+    function inStr(str, find2) {
+      return str.indexOf(find2) > -1;
     }
     function splitStr(str) {
       return str.trim().split(/\s+/g);
     }
-    function inArray(src, find, findByKey) {
+    function inArray(src, find2, findByKey) {
       if (src.indexOf && !findByKey) {
-        return src.indexOf(find);
+        return src.indexOf(find2);
       } else {
         var i2 = 0;
         while (i2 < src.length) {
-          if (findByKey && src[i2][findByKey] == find || !findByKey && src[i2] === find) {
+          if (findByKey && src[i2][findByKey] == find2 || !findByKey && src[i2] === find2) {
             return i2;
           }
           i2++;
@@ -13141,14 +13141,14 @@ var hammer = { exports: {} };
     }
     function uniqueArray(src, key, sort) {
       var results = [];
-      var values = [];
+      var values2 = [];
       var i2 = 0;
       while (i2 < src.length) {
         var val = key ? src[i2][key] : src[i2];
-        if (inArray(values, val) < 0) {
+        if (inArray(values2, val) < 0) {
           results.push(src[i2]);
         }
-        values[i2] = val;
+        values2[i2] = val;
         i2++;
       }
       if (sort) {
@@ -22075,7 +22075,6 @@ const TOGGLE_PAN = "TOGGLE_PAN";
 const TOGGLE_POINTS = "TOGGLE_POINTS";
 const TOGGLE_LINE = "TOGGLE_LINE";
 const TOGGLE_LEGEND = "TOGGLE_LEGEND";
-const TOGGLE_ANNOTATION = "TOGGLE_ANNOTATION";
 const TOGGLE_TABLE = "TOGGLE_TABLE";
 const SAVE_INITIAL_AXES_RANGES = "SAVE_INITIAL_AXES_RANGES";
 const RESET_AXES_RANGES = "RESET_AXES_RANGES";
@@ -22084,7 +22083,6 @@ const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
 const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
 const reducer$1 = (state, action) => {
   return produce(state, (draft) => {
-    var _a2;
     switch (action.type) {
       case TOGGLE_ZOOM: {
         draft.zoomEnabled = !draft.zoomEnabled;
@@ -22140,16 +22138,6 @@ const reducer$1 = (state, action) => {
         }));
         break;
       }
-      case TOGGLE_ANNOTATION: {
-        const { annotationIndex } = action.payload;
-        const updatedIndexes = ((_a2 = draft == null ? void 0 : draft.showAnnotationLineIndex) == null ? void 0 : _a2.includes(
-          annotationIndex
-        )) ? draft.showAnnotationLineIndex.filter(
-          (v2) => v2 !== annotationIndex
-        ) : [...(draft == null ? void 0 : draft.showAnnotationLineIndex) ?? [], annotationIndex];
-        draft.showAnnotationLineIndex = updatedIndexes;
-        break;
-      }
       case TOGGLE_DRAG_POINTS: {
         draft.enableDragPoints = !draft.enableDragPoints;
         if (draft.panEnabled) {
@@ -22418,9 +22406,6 @@ const generateRandomColor = (colors2) => {
     return colors2;
   }
 };
-const setAnnotations = (annotationsData) => {
-  return (annotationsData == null ? void 0 : annotationsData.length) ? annotationsData.map((_2, i2) => i2) : [];
-};
 const getTitle = (options) => {
   return options.title !== "" ? {
     display: true,
@@ -22523,8 +22508,8 @@ const getAxisTypeFromKey = (string) => {
   var _a2;
   return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
 };
-const generateKey = (values) => {
-  const key = values.join("");
+const generateKey = (values2) => {
+  const key = values2.join("");
   return key;
 };
 const isPrimitiveValue = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
@@ -22579,7 +22564,6 @@ const storeChartStateInStorage = (state, persistenceId) => {
 const initialState = ({ options, persistenceId }) => {
   const {
     additionalAxesOptions: { range: customAxesRange = {} },
-    annotations: { annotationsData = [] },
     axes,
     chartOptions: { enableZoom, enablePan, showPoints, showLine },
     legend: { display },
@@ -22639,7 +22623,6 @@ const initialState = ({ options, persistenceId }) => {
     lineEnabled: lineEnabled ?? showLine,
     legendEnabled: legendEnabled ?? display,
     axes: stateAxes,
-    showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
     initialAxesRanges: []
@@ -24486,6 +24469,9 @@ const defaultGraph$2 = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
 });
+const defaultAnnotationsData$1 = (annotationsData) => {
+  return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
+};
 const defaultAnnotations$1 = (annotations) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
   return {
@@ -24501,7 +24487,7 @@ const defaultAnnotations$1 = (annotations) => {
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
-    annotationsData: (annotations == null ? void 0 : annotations.annotationsData) ?? []
+    annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
   };
 };
 const defaultLegend$2 = (legend2) => ({
@@ -25097,46 +25083,51 @@ const getDraggableData = (options) => {
     }
   } : {};
 };
-const UPSERT_HIDDEN_STATE = "UPSERT_HIDDEN_STATE";
-const TOGGLE_ANNOTATION_VISIBILITY = "TOGGLE_ANNOTATION_VISIBILITY";
+const TOGGLE_DATA_VISIBILITY = "TOGGLE_DATA_VISIBILITY";
 const RESET_STATE = "RESET_STATE";
 const legendInitialState = {
-  hiddenStates: [],
-  annotation: [],
-  visibleAnnotationsIndexes: []
+  annotation: []
 };
 const legendReducer = (state, action) => {
+  var _a2;
   switch (action.type) {
     case RESET_STATE: {
       return action.payload;
     }
-    case UPSERT_HIDDEN_STATE: {
-      const { label, hidden, datasetIndex } = action.payload;
-      const existingIndex = state.hiddenStates.findIndex(
-        (hs) => hs.label === label && hs.datasetIndex === datasetIndex
+    case TOGGLE_DATA_VISIBILITY: {
+      const { chartInstance, dsConfig, annotationConfig } = action.payload;
+      const { datasetIndex, datasets, dataset } = dsConfig;
+      const { annotationIndex } = annotationConfig;
+      const updatedState = cloneDeep(state);
+      const isDatasetVisible = defaultTo(
+        chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex),
+        true
       );
-      const newHiddenStates = [...state.hiddenStates];
-      if (existingIndex !== -1) {
-        newHiddenStates[existingIndex] = { label, hidden, datasetIndex };
-      } else {
-        newHiddenStates.push({ label, hidden, datasetIndex });
+      if (datasetIndex >= 0) {
+        chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(datasetIndex, !isDatasetVisible);
+        if (dataset == null ? void 0 : dataset.displayGroup) {
+          const group = dataset.displayGroup;
+          datasets.forEach((ds, ix) => {
+            if (ds.displayGroup === group) {
+              chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(
+                Number(ix),
+                !isDatasetVisible
+              );
+            }
+          });
+        }
       }
-      return {
-        ...state,
-        hiddenStates: newHiddenStates
-      };
-    }
-    case TOGGLE_ANNOTATION_VISIBILITY: {
-      const index2 = action.payload;
-      const newVisibleIndexes = state.visibleAnnotationsIndexes.includes(index2) ? state.visibleAnnotationsIndexes.filter((i2) => i2 !== index2) : [...state.visibleAnnotationsIndexes, index2];
-      const annotation2 = state.annotation.map(
-        (el) => el.annotationIndex === index2 ? { ...el, display: !el.display } : el
-      );
-      return {
-        ...state,
-        annotation: annotation2,
-        visibleAnnotationsIndexes: newVisibleIndexes
-      };
+      if (annotationIndex >= 0) {
+        const idx = findIndex(updatedState.annotation, { annotationIndex });
+        if (idx >= 0) {
+          const currentDisplay = defaultTo(
+            (_a2 = updatedState.annotation[idx]) == null ? void 0 : _a2.display,
+            false
+          );
+          set$2(updatedState, ["annotation", idx, "display"], !currentDisplay);
+        }
+      }
+      return updatedState;
     }
     default:
       return state;
@@ -25168,70 +25159,67 @@ const annotationLeave = (element, chart2) => {
   chart2.canvas.style.cursor = CursorStyle.Initial;
   return true;
 };
-const generateAnnotations = (annotationsData, visibleAnnotationsIndexes) => {
+const generateAnnotations = (annotationsData) => {
   return annotationsData == null ? void 0 : annotationsData.map((ann, idx) => {
-    if (visibleAnnotationsIndexes == null ? void 0 : visibleAnnotationsIndexes.includes(idx)) {
-      const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
-      const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
-      const type = (ann == null ? void 0 : ann.type) || "line";
-      const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
-      const borderColor = type === "line" ? color2 : "transparent";
-      const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
-      const borderDash = ANNOTATION_DASH;
-      const label = type === "line" ? {
-        backgroundColor: color2,
-        content: ann == null ? void 0 : ann.label,
-        display: false,
-        position: Position.Top
-      } : {
-        content: ann == null ? void 0 : ann.label,
-        display: true,
-        font: { weight: "normal" }
-      };
-      const enter = ({
-        element
-      }, {
-        chart: chart2
-      }) => {
-        if (type !== "line")
-          return;
-        annotationEnter(element, chart2);
-      };
-      const leave = ({
-        element
-      }, {
-        chart: chart2
-      }) => {
-        if (type !== "line")
-          return;
-        annotationLeave(element, chart2);
-      };
-      return {
-        ...ann,
-        display: true,
-        annotationIndex: idx,
-        id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
-        scaleID,
-        label,
-        backgroundColor: color2,
-        borderColor,
-        borderWidth,
-        borderDash,
-        type,
-        adjustScaleRange: adjustScaleRange2,
-        enter,
-        leave
-      };
-    }
+    const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
+    const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
+    const type = (ann == null ? void 0 : ann.type) || "line";
+    const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
+    const borderColor = type === "line" ? color2 : "transparent";
+    const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = ANNOTATION_DASH;
+    const label = type === "line" ? {
+      backgroundColor: color2,
+      content: ann == null ? void 0 : ann.label,
+      display: false,
+      position: Position.Top
+    } : {
+      content: ann == null ? void 0 : ann.label,
+      display: true,
+      font: { weight: "normal" }
+    };
+    const enter = ({
+      element
+    }, {
+      chart: chart2
+    }) => {
+      if (type !== "line")
+        return;
+      annotationEnter(element, chart2);
+    };
+    const leave = ({
+      element
+    }, {
+      chart: chart2
+    }) => {
+      if (type !== "line")
+        return;
+      annotationLeave(element, chart2);
+    };
+    return {
+      ...ann,
+      display: ann == null ? void 0 : ann.display,
+      annotationIndex: idx,
+      id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
+      scaleID,
+      label,
+      backgroundColor: color2,
+      borderColor,
+      borderWidth,
+      borderDash,
+      type,
+      adjustScaleRange: adjustScaleRange2,
+      enter,
+      leave
+    };
   });
 };
 const getAnnotation = ({
   showAnnotations,
-  annotationsData,
-  visibleAnnotationsIndexes
+  annotationsData
 }) => {
   const shouldGenerateAnnotations = showAnnotations && annotationsData && (annotationsData == null ? void 0 : annotationsData.length);
-  return shouldGenerateAnnotations ? generateAnnotations(annotationsData, visibleAnnotationsIndexes) ?? [] : [];
+  return shouldGenerateAnnotations ? generateAnnotations(annotationsData) ?? [] : [];
 };
 const useReset = (state, dispatch, dependencies) => {
   const prevState = useRef(state);
@@ -25245,16 +25233,13 @@ const useReset = (state, dispatch, dependencies) => {
 const LegendContext = createContext$2(void 0);
 const LegendProvider = ({ children, options }) => {
   const { showAnnotations = true, annotationsData = [] } = (options == null ? void 0 : options.annotations) ?? {};
-  const visibleAnnotationsIndexes = setAnnotations(annotationsData);
   const annotation2 = getAnnotation({
     showAnnotations,
-    annotationsData,
-    visibleAnnotationsIndexes
+    annotationsData
   });
   const initialState2 = {
     ...legendInitialState,
-    annotation: annotation2,
-    visibleAnnotationsIndexes
+    annotation: annotation2
   };
   const [state, dispatch] = useReducer(
     legendReducer,
@@ -25275,71 +25260,44 @@ const useLegend = () => {
   return context;
 };
 const useLegendState = ({ chartRef, options }) => {
-  const [hiddenStatesLocal, setHiddenStatesLocal] = useState(
-    []
-  );
   const { state, dispatch } = useLegend();
   const {
     annotations,
     interactions: { onLegendClick },
     legend: { customLegend }
   } = options ?? {};
-  const upsertHiddenState = useCallback(
-    ({ label, datasetIndex, hidden }) => {
-      setHiddenStatesLocal((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;
-      });
-      dispatch({ type: UPSERT_HIDDEN_STATE, payload: hiddenStatesLocal });
-    },
-    [dispatch]
-  );
   const legendClick = useCallback(
     (_2, legendItem2) => {
-      const { datasetIndex = 0 } = legendItem2;
+      var _a2;
+      const { datasetIndex = -1 } = legendItem2;
+      let annotationIndex = null;
       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 isDatasetVisible = (chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex)) ?? true;
-      upsertHiddenState({
-        label: dataset.label ?? "",
-        datasetIndex,
-        hidden: isDatasetVisible
-      });
-      chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(datasetIndex, !isDatasetVisible);
+      const datasets = ((_a2 = chartInstance == null ? void 0 : chartInstance.data) == null ? void 0 : _a2.datasets) ?? [];
+      const dataset = datasets[datasetIndex] ?? {};
       if ((annotations == null ? void 0 : annotations.controlAnnotation) && (dataset == null ? void 0 : dataset.isAnnotation)) {
-        const { annotationIndex = -1 } = dataset;
-        dispatch({
-          type: TOGGLE_ANNOTATION_VISIBILITY,
-          payload: annotationIndex
-        });
-      }
-      if (dataset == null ? void 0 : 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;
-          }
-        });
+        annotationIndex = dataset.annotationIndex ?? null;
       }
       if (onLegendClick) {
         const legendState = legendItem2.hidden ?? false;
         onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendState);
       }
+      dispatch({
+        type: TOGGLE_DATA_VISIBILITY,
+        payload: {
+          chartInstance,
+          dsConfig: {
+            datasetIndex,
+            datasets,
+            dataset
+          },
+          annotationConfig: {
+            annotationIndex
+          }
+        }
+      });
       chartInstance == null ? void 0 : chartInstance.update();
     },
-    [chartRef, annotations, onLegendClick, state.hiddenStates]
+    [chartRef, annotations, dispatch]
   );
   const legend2 = useMemo(
     () => getLegend(options, legendClick),
@@ -25355,11 +25313,9 @@ const useLegendState = ({ chartRef, options }) => {
   );
   return {
     legendClick,
-    hiddenStates: hiddenStatesLocal,
+    annotation: state.annotation,
     legend: legend2,
-    customLegendPlugin,
-    upsertHiddenState,
-    visibleAnnotationsIndexes: state.visibleAnnotationsIndexes
+    customLegendPlugin
   };
 };
 const toAnnotationObject = (annotationArr = []) => {
@@ -26046,9 +26002,37 @@ const LegendItem = ({
     }
   );
 };
-const getGeneratedLabels = (chart2) => {
+const generateAnnotationLabels = (chart2) => {
+  const annotations = cloneDeep(
+    get$1(chart2, "options.plugins.annotation.annotations", {})
+  );
+  if (!annotations || !Object.keys(annotations).length) {
+    return [];
+  }
+  return values(annotations);
+};
+const generatedLabels = (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)) ?? [];
+  return cloneDeep(
+    (_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 getGeneratedLabels = (chart2) => {
+  const datasetLabels = generatedLabels(chart2);
+  const annotationLabels = generateAnnotationLabels(chart2);
+  return map$3(datasetLabels, (el) => {
+    const annotation2 = find(
+      annotationLabels,
+      (item) => {
+        var _a2;
+        return el.text === ((_a2 = item == null ? void 0 : item.label) == null ? void 0 : _a2.content);
+      }
+    );
+    return annotation2 ? {
+      ...el,
+      hidden: !(annotation2 == null ? void 0 : annotation2.display)
+    } : el;
+  });
 };
 const useGeneratedLabels = (chartRef, generatedDatasets) => {
   const [items, setItems] = useState([]);
@@ -26077,20 +26061,17 @@ const createLegendStyle = (legendPosition, chart2) => {
 };
 const LegendItems = ({
   items,
-  hiddenStates,
   datasets,
   legendClick,
   chartType
 }) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
-  var _a2;
   if (datasets[item.datasetIndex].hideLegend) {
     return null;
   }
-  const hiddenState = ((_a2 = hiddenStates.find((state) => state.label === item.text)) == null ? void 0 : _a2.hidden) ?? false;
   return /* @__PURE__ */ jsx(
     LegendItem,
     {
-      hidden: hiddenState,
+      hidden: item.hidden,
       dataset: datasets[item.datasetIndex],
       handleClick: (_2) => legendClick(_2, item),
       chartType
@@ -26104,7 +26085,7 @@ const LegendPanel = forwardRef(
     const chart2 = chartRef == null ? void 0 : chartRef.current;
     const { options, generatedDatasets, chartType } = legendConfig;
     const datasets = (_a2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _a2.datasets;
-    const { legend: legend2, legendClick, hiddenStates } = useLegendState({
+    const { legend: legend2, legendClick } = useLegendState({
       chartRef,
       options
     });
@@ -26135,7 +26116,6 @@ const LegendPanel = forwardRef(
             LegendItems,
             {
               items,
-              hiddenStates,
               datasets,
               legendClick,
               chartType
@@ -27046,16 +27026,16 @@ function _lookup(table2, value, cmp) {
 }
 const _lookupByKey = (table2, key, value, last) => _lookup(table2, value, last ? (index2) => table2[index2][key] <= value : (index2) => table2[index2][key] < value);
 const _rlookupByKey = (table2, key, value) => _lookup(table2, value, (index2) => table2[index2][key] >= value);
-function _filterBetween(values, min, max) {
+function _filterBetween(values2, min, max) {
   let start = 0;
-  let end = values.length;
-  while (start < end && values[start] < min) {
+  let end = values2.length;
+  while (start < end && values2[start] < min) {
     start++;
   }
-  while (end > start && values[end - 1] > max) {
+  while (end > start && values2[end - 1] > max) {
     end--;
   }
-  return start > 0 || end < values.length ? values.slice(start, end) : values;
+  return start > 0 || end < values2.length ? values2.slice(start, end) : values2;
 }
 const arrayEvents = ["push", "pop", "shift", "splice", "unshift"];
 function listenArrayEvents(array, listener) {
@@ -27858,9 +27838,9 @@ function getScope$1(node, key) {
   }
   return node;
 }
-function set(root, scope2, values) {
+function set(root, scope2, values2) {
   if (typeof scope2 === "string") {
-    return merge(getScope$1(root, scope2), values);
+    return merge(getScope$1(root, scope2), values2);
   }
   return merge(getScope$1(root, ""), scope2);
 }
@@ -27909,17 +27889,17 @@ class Defaults2 {
     this.drawActiveElementsOnTop = true;
     this.describe(_descriptors2);
   }
-  set(scope2, values) {
-    return set(this, scope2, values);
+  set(scope2, values2) {
+    return set(this, scope2, values2);
   }
   get(scope2) {
     return getScope$1(this, scope2);
   }
-  describe(scope2, values) {
-    return set(descriptors, scope2, values);
+  describe(scope2, values2) {
+    return set(descriptors, scope2, values2);
   }
-  override(scope2, values) {
-    return set(overrides, scope2, values);
+  override(scope2, values2) {
+    return set(overrides, scope2, values2);
   }
   route(scope2, name, targetScope, targetName) {
     const scopeObject = getScope$1(this, scope2);
@@ -29584,8 +29564,8 @@ class Animations2 {
       });
     });
   }
-  _animateOptions(target, values) {
-    const newOptions = values.options;
+  _animateOptions(target, values2) {
+    const newOptions = values2.options;
     const options = resolveTargetOptions(target, newOptions);
     if (!options) {
       return [];
@@ -29599,11 +29579,11 @@ class Animations2 {
     }
     return animations;
   }
-  _createAnimations(target, values) {
+  _createAnimations(target, values2) {
     const animatedProps = this._properties;
     const animations = [];
     const running = target.$animations || (target.$animations = {});
-    const props = Object.keys(values);
+    const props = Object.keys(values2);
     const date = Date.now();
     let i2;
     for (i2 = props.length - 1; i2 >= 0; --i2) {
@@ -29612,10 +29592,10 @@ class Animations2 {
         continue;
       }
       if (prop === "options") {
-        animations.push(...this._animateOptions(target, values));
+        animations.push(...this._animateOptions(target, values2));
         continue;
       }
-      const value = values[prop];
+      const value = values2[prop];
       let animation = running[prop];
       const cfg = animatedProps.get(prop);
       if (animation) {
@@ -29635,12 +29615,12 @@ class Animations2 {
     }
     return animations;
   }
-  update(target, values) {
+  update(target, values2) {
     if (this._properties.size === 0) {
-      Object.assign(target, values);
+      Object.assign(target, values2);
       return;
     }
-    const animations = this._createAnimations(target, values);
+    const animations = this._createAnimations(target, values2);
     if (animations.length) {
       animator.add(this._chart, animations);
       return true;
@@ -30078,9 +30058,9 @@ class DatasetController {
   updateRangeFromParsed(range, scale, parsed, stack) {
     const parsedValue = parsed[scale.axis];
     let value = parsedValue === null ? NaN : parsedValue;
-    const values = stack && parsed._stacks[scale.axis];
-    if (stack && values) {
-      stack.values = values;
+    const values2 = stack && parsed._stacks[scale.axis];
+    if (stack && values2) {
+      stack.values = values2;
       value = applyStack(stack, parsedValue, this._cachedMeta.index);
     }
     range.min = Math.min(range.min, value);
@@ -30123,15 +30103,15 @@ class DatasetController {
   }
   getAllParsedValues(scale) {
     const parsed = this._cachedMeta._parsed;
-    const values = [];
+    const values2 = [];
     let i2, ilen, value;
     for (i2 = 0, ilen = parsed.length; i2 < ilen; ++i2) {
       value = parsed[i2][scale.axis];
       if (isNumberFinite(value)) {
-        values.push(value);
+        values2.push(value);
       }
     }
-    return values;
+    return values2;
   }
   getMaxOverflow() {
     return false;
@@ -30225,12 +30205,12 @@ class DatasetController {
     const scopes = config2.getOptionScopes(this.getDataset(), scopeKeys);
     const names2 = Object.keys(defaults.elements[elementType]);
     const context = () => this.getContext(index2, active);
-    const values = config2.resolveNamedOptions(scopes, names2, context, prefixes);
-    if (values.$shared) {
-      values.$shared = sharing;
-      cache2[cacheKey] = Object.freeze(cloneIfNotShared(values, sharing));
+    const values2 = config2.resolveNamedOptions(scopes, names2, context, prefixes);
+    if (values2.$shared) {
+      values2.$shared = sharing;
+      cache2[cacheKey] = Object.freeze(cloneIfNotShared(values2, sharing));
     }
-    return values;
+    return values2;
   }
   _resolveAnimations(index2, transition, active) {
     const chart2 = this.chart;
@@ -30399,17 +30379,17 @@ DatasetController.prototype.dataElementType = null;
 function getAllScaleValues(scale, type) {
   if (!scale._cache.$bar) {
     const visibleMetas = scale.getMatchingVisibleMetas(type);
-    let values = [];
+    let values2 = [];
     for (let i2 = 0, ilen = visibleMetas.length; i2 < ilen; i2++) {
-      values = values.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
+      values2 = values2.concat(visibleMetas[i2].controller.getAllParsedValues(scale));
     }
-    scale._cache.$bar = _arrayUnique(values.sort((a2, b2) => a2 - b2));
+    scale._cache.$bar = _arrayUnique(values2.sort((a2, b2) => a2 - b2));
   }
   return scale._cache.$bar;
 }
 function computeMinSampleSize(meta) {
   const scale = meta.iScale;
-  const values = getAllScaleValues(scale, meta.type);
+  const values2 = getAllScaleValues(scale, meta.type);
   let min = scale._length;
   let i2, ilen, curr, prev;
   const updateMinAndPrev = () => {
@@ -30421,8 +30401,8 @@ function computeMinSampleSize(meta) {
     }
     prev = curr;
   };
-  for (i2 = 0, ilen = values.length; i2 < ilen; ++i2) {
-    curr = scale.getPixelForValue(values[i2]);
+  for (i2 = 0, ilen = values2.length; i2 < ilen; ++i2) {
+    curr = scale.getPixelForValue(values2[i2]);
     updateMinAndPrev();
   }
   prev = void 0;
@@ -30922,16 +30902,16 @@ class BubbleController extends DatasetController {
   }
   resolveDataElementOptions(index2, mode) {
     const parsed = this.getParsed(index2);
-    let values = super.resolveDataElementOptions(index2, mode);
-    if (values.$shared) {
-      values = Object.assign({}, values, { $shared: false });
+    let values2 = super.resolveDataElementOptions(index2, mode);
+    if (values2.$shared) {
+      values2 = Object.assign({}, values2, { $shared: false });
     }
-    const radius = values.radius;
+    const radius = values2.radius;
     if (mode !== "active") {
-      values.radius = 0;
+      values2.radius = 0;
     }
-    values.radius += valueOrDefault(parsed && parsed._custom, radius);
-    return values;
+    values2.radius += valueOrDefault(parsed && parsed._custom, radius);
+    return values2;
   }
 }
 BubbleController.id = "bubble";
@@ -37954,13 +37934,13 @@ function setMajorTicks(scale, ticks, map2, majorUnit) {
   }
   return ticks;
 }
-function ticksFromTimestamps(scale, values, majorUnit) {
+function ticksFromTimestamps(scale, values2, majorUnit) {
   const ticks = [];
   const map2 = {};
-  const ilen = values.length;
+  const ilen = values2.length;
   let i2, value;
   for (i2 = 0; i2 < ilen; ++i2) {
-    value = values[i2];
+    value = values2[i2];
     map2[value] = i2;
     ticks.push({
       value,
@@ -38210,8 +38190,8 @@ class TimeScale extends Scale2 {
     }
     return this._cache.labels = this._normalized ? timestamps : this.normalize(timestamps);
   }
-  normalize(values) {
-    return _arrayUnique(values.sort(sorter));
+  normalize(values2) {
+    return _arrayUnique(values2.sort(sorter));
   }
 }
 TimeScale.id = "time";
@@ -39457,10 +39437,13 @@ const defaultGraph = (graph) => ({
   showDataLabels: (graph == null ? void 0 : graph.showDataLabels) || false,
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) || false
 });
+const defaultAnnotationsData = (annotationsData) => {
+  return annotationsData ? annotationsData.map((ann) => ({ ...ann, display: (ann == null ? void 0 : ann.display) ?? true })) : [];
+};
 const defaultAnnotations = (annotations) => ({
   showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? true,
   controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) || false,
-  annotationsData: (annotations == null ? void 0 : annotations.annotationsData) || []
+  annotationsData: defaultAnnotationsData(annotations == null ? void 0 : annotations.annotationsData)
 });
 const defaultLegend = (legend2) => ({
   display: (legend2 == null ? void 0 : legend2.display) ?? true,