@oliasoft-open-source/charts-library 2.11.3 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.11.3",
+  "version": "2.13.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.13.0
+
+- Added feature to save state to localStorage and clean when expired, fixed panEnable(state) bug.
+
+## 2.12.0
+
+- Add unit selector and depth selector to axes options ([OW-9496](https://oliasoft.atlassian.net/browse/OW-9496))
+
 ## 2.11.3
 
 - Submit Axes option on keyboard Enter ([OW-10995](https://oliasoft.atlassian.net/browse/OW-10995))

package/src/components/controls/axes-options/axes-options-form-state.js

@@ -8,6 +8,7 @@ import {
 export const actionTypes = Object.freeze({
   reset: 'reset',
   valueUpdated: 'valueUpdated',
+  unitUpdated: 'unitUpdated',
 });
 
 /**
@@ -25,6 +26,7 @@ export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
       id: initialAxisRange.id,
       min: currentAxisRange?.min ?? initialAxisRange?.min,
       max: currentAxisRange?.max ?? initialAxisRange?.max,
+      unit: currentAxisRange?.unit,
     };
   });
 };
@@ -80,8 +82,8 @@ export const validateAxes = (formState) => {
 export const reducer = (state, action) => {
   switch (action.type) {
     case actionTypes.reset: {
-      const { initialAxesRanges } = action.payload;
-      return initializeFormState({ initialAxesRanges });
+      const { initialAxesRanges, axes } = action.payload;
+      return initializeFormState({ initialAxesRanges, axes });
     }
     case actionTypes.valueUpdated:
       return produce(state, (draft) => {
@@ -89,6 +91,12 @@ export const reducer = (state, action) => {
         const axis = draft.find((a) => a.id === id);
         axis[name] = value;
       });
+    case actionTypes.unitUpdated:
+      return produce(state, (draft) => {
+        const { name, value, id } = action.payload;
+        const axis = draft.find((a) => a.id === id);
+        axis.unit[name] = value;
+      });
     default:
       return state;
   }

package/src/components/controls/axes-options/axes-options.jsx

@@ -1,12 +1,15 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, useState } from 'react';
 import {
   Button,
+  ButtonGroup,
   Field,
   Flex,
   Input,
   InputGroup,
   InputGroupAddon,
   Popover,
+  Select,
+  Spacer,
   Text,
   Tooltip,
 } from '@oliasoft-open-source/react-ui-library';
@@ -26,7 +29,11 @@ const AxesOptionsPopover = ({
   onUpdateAxes,
   onResetAxes,
   close,
+  depthType,
 }) => {
+  const [depthTypeState, setDepthTypeState] = useState(
+    depthType?.selectedDepthType,
+  );
   const [formState, dispatch] = useReducer(
     reducer,
     {
@@ -45,6 +52,13 @@ const AxesOptionsPopover = ({
     });
   };
 
+  const onEditUnit = ({ name, value, id }) => {
+    dispatch({
+      type: actionTypes.unitUpdated,
+      payload: { name, value, id },
+    });
+  };
+
   const onDone = (e) => {
     e.preventDefault();
     if (valid) {
@@ -56,6 +70,17 @@ const AxesOptionsPopover = ({
       onUpdateAxes({
         axes: sanitizedFormState,
       });
+
+      //update units
+      sanitizedFormState.map((el, i) => {
+        if (el.unit?.selectedUnit) {
+          axes[i].unit.setSelectedUnit(el.unit.selectedUnit);
+        }
+      });
+      //update depthType
+      if (depthType) {
+        depthType.setSelectedDepthType(depthTypeState);
+      }
     }
     close();
   };
@@ -66,8 +91,16 @@ const AxesOptionsPopover = ({
       type: actionTypes.reset,
       payload: { axes, initialAxesRanges },
     });
+    //update units
+    initialAxesRanges.map((el, i) => {
+      if (el?.unit?.selectedUnit) {
+        axes[i].unit.setSelectedUnit(el.unit.selectedUnit);
+      }
+    });
+
     //reset parent state
     onResetAxes();
+    close();
   };
 
   const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
@@ -83,6 +116,7 @@ const AxesOptionsPopover = ({
         const max = formState.find((a) => a.id === axis.id)?.max;
         const minError = errors?.find((a) => a.id === axis.id)?.min?.[0];
         const maxError = errors?.find((a) => a.id === axis.id)?.max?.[0];
+        const unit = formState.find((a) => a.id === axis.id)?.unit;
         return (
           <Field key={i} label={axisLabel || axis.id || ''}>
             <InputGroup small>
@@ -117,10 +151,43 @@ const AxesOptionsPopover = ({
                 }
                 onFocus={handleInputFocus}
               />
+              {axis.unit ? (
+                <Select
+                  name="selectedUnit"
+                  options={axis?.unit?.options}
+                  value={unit?.selectedUnit}
+                  onChange={(e) => {
+                    onEditUnit({
+                      name: e.target.name,
+                      value: e.target.value,
+                      id: axis.id,
+                    });
+                  }}
+                  width="auto"
+                />
+              ) : null}
             </InputGroup>
           </Field>
         );
       })}
+
+      {depthType?.options?.length > 0 ? (
+        <>
+          <ButtonGroup
+            items={depthType.options.map((depth, i) => ({
+              key: i,
+              label: depth,
+            }))}
+            onSelected={(key) => {
+              setDepthTypeState(depthType.options[key]);
+            }}
+            small
+            value={depthType.options.indexOf(depthTypeState)}
+          />
+          <Spacer />
+        </>
+      ) : null}
+
       <Flex gap="8px" alignItems="center">
         <Button type="submit" small colored label="Done" disabled={!valid} />
         <Button
@@ -144,6 +211,7 @@ export const AxesOptions = ({
   controlsAxesLabels,
   onUpdateAxes,
   onResetAxes,
+  depthType,
 }) => {
   return (
     <Popover
@@ -156,6 +224,7 @@ export const AxesOptions = ({
           controlsAxesLabels={controlsAxesLabels}
           onUpdateAxes={onUpdateAxes}
           onResetAxes={onResetAxes}
+          depthType={depthType}
         />
       }
     >

package/src/components/controls/controls.jsx

@@ -34,6 +34,7 @@ const Controls = ({
   subheaderComponent,
   table,
   zoomEnabled,
+  depthType,
   enableDragPoints,
   isDragDataAllowed,
   onToggleDragPoints,
@@ -53,6 +54,7 @@ const Controls = ({
                 controlsAxesLabels={controlsAxesLabels}
                 onUpdateAxes={onUpdateAxes}
                 onResetAxes={onResetAxes}
+                depthType={depthType}
               />
               <LineOptions
                 lineEnabled={lineEnabled}

package/src/components/line-chart/get-axes-ranges-from-chart.js

@@ -1,10 +1,13 @@
-export const getAxesRangesFromChart = (chartRef) => {
+export const getAxesRangesFromChart = (chartRef, axes) => {
   const { scales = {} } = chartRef.current || {};
-  return Object.entries(scales).map(([key, { min, max }]) => {
+  return Object.entries(scales).map(([key, { min, max }], i) => {
+    const axesArray = axes.x.concat(axes.y);
+    const unit = axesArray?.[i]?.unit;
     return {
       id: key,
       min,
       max,
+      ...(unit ? { unit } : {}),
     };
   });
 };

package/src/components/line-chart/line-chart-prop-types.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 export const LineChartPropTypes = {
   table: PropTypes.node,
   chart: PropTypes.shape({
+    persistenceId: PropTypes.string,
     testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
@@ -16,6 +17,11 @@ export const LineChartPropTypes = {
             label: PropTypes.string,
             position: PropTypes.oneOf(['top', 'bottom']),
             color: PropTypes.string,
+            unit: PropTypes.shape({
+              options: PropTypes.arrayOf(PropTypes.string),
+              selectedUnit: PropTypes.string,
+              setSelectedUnit: PropTypes.func,
+            }),
           }),
         ),
         y: PropTypes.arrayOf(
@@ -106,6 +112,11 @@ export const LineChartPropTypes = {
         onPointUnhover: PropTypes.func,
         onAnimationComplete: PropTypes.func,
       }),
+      depthType: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.string),
+        selectedDepthType: PropTypes.string,
+        setSelectedDepthType: PropTypes.func,
+      }),
       dragData: PropTypes.shape({
         enableDragData: PropTypes.bool,
         showTooltip: PropTypes.bool,
@@ -138,6 +149,7 @@ export const getDefaultProps = (props) => {
   props.chart.options.dragData = props.chart.options.dragData || {};
   // Set defaults for missing properties
   const chart = {
+    persistenceId: props.chart.persistenceId ?? '',
     testId: props.chart.testId ?? null,
     data: props.chart.data,
     options: {
@@ -217,6 +229,7 @@ export const getDefaultProps = (props) => {
         onAnimationComplete:
           props.chart.options.interactions.onAnimationComplete,
       },
+      depthType: props.chart.options.depthType,
       dragData: {
         enableDragData: props.chart.options.dragData.enableDragData || false,
         showTooltip: props.chart.options.dragData.showTooltip || true,

package/src/components/line-chart/line-chart-utils.js

@@ -56,3 +56,15 @@ export const generateAxisId = (axisType, index = 0, hasMultiAxes = false) => {
 export const getAxisTypeFromKey = (string) => {
   return string.match(/[^0-9/]+/gi)[0];
 };
+
+/**
+ * Generates a key based on an array of values. The key changes
+ * if any of the values in the array change.
+ *
+ * @param {Array} values - The array of values to base the key on.
+ * @returns {String} The key.
+ */
+export const generateKey = (values) => {
+  const key = values.join('');
+  return key;
+};

package/src/components/line-chart/line-chart.interface.ts

@@ -46,10 +46,17 @@ export interface ILineChartAdditionalAxesOptions {
     autoAxisPadding: boolean;
 }
 
+export interface IUnitOptions {
+    options: string[],
+    selectedUnit: string,
+    setSelectedUnit: () => void,
+}
+
 export interface ILineChartAxis<PositionType> {
     label: string;
     position: PositionType;
     color: string;
+    unit: IUnitOptions
 }
 
 export interface ILineChartAxes {
@@ -57,6 +64,11 @@ export interface ILineChartAxes {
     y: ILineChartAxis<'left' | 'right'>[];
 }
 
+export interface IDepthType {
+    options: string[],
+    selectedUnit: string,
+    setSelectedUnit: () => void,
+}
 export interface ILineChartOptions {
     title: string | string[];
     axes: ILineChartAxes;
@@ -68,6 +80,7 @@ export interface ILineChartOptions {
     legend: IChartLegend;
     chartOptions: IChartOptions;
     interactions: IChartInteractions;
+    depthType: IDepthType
     draggableData :IChartDraggableData;
 }
 

package/src/components/line-chart/line-chart.jsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useReducer, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -21,19 +27,18 @@ import styles from './line-chart.module.less';
 import { reducer } from './state/line-chart-reducer';
 import initialState from './state/initial-state';
 import {
-  SET_POINTS_ZOOM_DEFAULTS,
+  DISABLE_DRAG_OPTIONS,
+  RESET_AXES_RANGES,
+  SAVE_INITIAL_AXES_RANGES,
   TOGGLE_ANNOTATION,
+  TOGGLE_DRAG_POINTS,
   TOGGLE_LEGEND,
   TOGGLE_LINE,
   TOGGLE_PAN,
   TOGGLE_POINTS,
   TOGGLE_TABLE,
   TOGGLE_ZOOM,
-  SAVE_INITIAL_AXES_RANGES,
   UPDATE_AXES_RANGES,
-  RESET_AXES_RANGES,
-  TOGGLE_DRAG_POINTS,
-  DISABLE_DRAG_OPTIONS,
 } from './state/action-types';
 import Controls from '../controls/controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
@@ -61,9 +66,9 @@ import {
 import {
   ANIMATION_DURATION,
   AUTO,
+  BORDER_COLOR,
   COLORS,
   CUSTOM_LEGEND_PLUGIN_NAME,
-  BORDER_COLOR,
 } from '../../helpers/chart-consts';
 import {
   AxisType,
@@ -73,9 +78,10 @@ import {
   PointStyle,
 } from '../../helpers/enums';
 import getDraggableData from '../../helpers/get-draggableData';
-import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
-import { generateAxisId } from './line-chart-utils';
+import { generateAxisId, generateKey } from './line-chart-utils';
 import { autoScale } from './axis-scales/axis-scales';
+import useChartState from './state/use-chart-state';
+import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
 
 ChartJS.register(
   LinearScale,
@@ -102,20 +108,19 @@ const LineChart = (props) => {
   const chartRef = useRef(null);
   const [hoveredPoint, setHoveredPoint] = useState(null);
   const chart = getDefaultProps(props);
-  const { options, testId } = chart;
+  const { options, testId, persistenceId } = chart;
   const { headerComponent, subheaderComponent, table } = props;
   const {
     additionalAxesOptions,
     annotations,
     axes,
-    chartOptions,
     chartStyling,
     graph,
     interactions,
     legend,
+    depthType,
     dragData,
   } = options;
-  const { showLine, showPoints, enableZoom, enablePan } = chartOptions;
 
   /**
    * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
@@ -123,19 +128,13 @@ const LineChart = (props) => {
   const [state, dispatch] = useReducer(
     reducer,
     {
-      axes,
-      enableZoom: chartOptions.enableZoom,
-      enablePan: chartOptions.enablePan,
-      showPoints: chartOptions.showPoints,
-      showLine: chartOptions.showLine,
-      legendDisplay: legend.display,
-      annotationsData: annotations.annotationsData,
-      customAxesRange: additionalAxesOptions?.range,
+      options,
+      persistenceId,
     },
     initialState,
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const { range } = props.chart.options.additionalAxesOptions;
     if (range?.x && range?.y) {
       const axes = Object.entries(range).map(([key, { min, max }]) => {
@@ -154,41 +153,17 @@ const LineChart = (props) => {
   }, [props.chart.options]);
 
   useEffect(() => {
-    if (chartOptions.enablePan !== true) {
-      dispatch({ type: TOGGLE_PAN });
-    }
     if (chartRef) {
       //save the initial axis ranges in state (we need this for resetting ranges)
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
-        payload: { initialAxesRanges: getAxesRangesFromChart(chartRef) },
+        payload: { initialAxesRanges: getAxesRangesFromChart(chartRef, axes) },
       });
     }
   }, []);
 
-  useEffect(() => {
-    dispatch({
-      type: SET_POINTS_ZOOM_DEFAULTS,
-      payload: { showLine, showPoints, enableZoom, enablePan },
-    });
-  }, [showLine, showPoints, enableZoom, enablePan]);
-
-  /**
-   * Toggle custom legends visibility.
-   * Needed because they are rendered in a html element separate from the chart.
-   */
-  useEffect(() => {
-    if (options.legend.customLegend.customLegendPlugin) {
-      const parent = document.getElementById(
-        options.legend.customLegend.customLegendContainerID,
-      );
-      if (state.legendEnabled) {
-        parent.style.visibility = 'visible';
-      } else {
-        parent.style.visibility = 'hidden';
-      }
-    }
-  }, [state.legendEnabled]);
+  // Call the custom hook.
+  useChartState(options, state, persistenceId);
 
   const generateLineChartDatasets = (datasets) => {
     const copyDataset = [...datasets];
@@ -364,11 +339,15 @@ const LineChart = (props) => {
       const axisType = i ? AxisType.Y : AxisType.X; // only first element is 'x' - rest is 'y'
       const min = axis.min ?? additionalAxesOptions?.range?.[axisType]?.min;
       const max = axis.max ?? additionalAxesOptions?.range?.[axisType]?.max;
+      // we need to get all axes element to array to set unit.
+      const axesArray = axes.x.concat(axes.y);
+      const unit = axesArray?.[i]?.unit;
       return {
         ...axis,
         //only add min and max properties if they are defined:
         ...(min ? { min } : {}),
         ...(max ? { max } : {}),
+        ...(unit ? { unit } : {}),
       };
     });
   };
@@ -455,6 +434,7 @@ const LineChart = (props) => {
         subheaderComponent={subheaderComponent}
         table={table}
         zoomEnabled={state.zoomEnabled}
+        depthType={depthType}
         enableDragPoints={state.enableDragPoints}
         isDragDataAllowed={dragData.enableDragData}
         onToggleDragPoints={() => dispatch({ type: TOGGLE_DRAG_POINTS })}
@@ -465,7 +445,11 @@ const LineChart = (props) => {
       ) : (
         <div className={styles.canvas}>
           <Line
-            key={state.enableDragPoints}
+            key={generateKey([
+              state.enableDragPoints,
+              state.zoomEnabled,
+              state.panEnabled,
+            ])}
             ref={chartRef}
             data={{
               datasets: generatedDatasets,

package/src/components/line-chart/state/action-types.js

@@ -3,7 +3,6 @@ export const TOGGLE_PAN = 'TOGGLE_PAN';
 export const TOGGLE_POINTS = 'TOGGLE_POINTS';
 export const TOGGLE_LINE = 'TOGGLE_LINE';
 export const TOGGLE_LEGEND = 'TOGGLE_LEGEND';
-export const SET_POINTS_ZOOM_DEFAULTS = 'SET_POINTS_ZOOM_DEFAULTS';
 export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
 export const TOGGLE_TABLE = 'TOGGLE_TABLE';
 export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';

package/src/components/line-chart/state/initial-state.js

@@ -1,17 +1,24 @@
 import { AxisType } from '../../../helpers/enums';
 import { setAnnotations } from '../../../helpers/chart-utils';
 import { generateAxisId } from '../line-chart-utils';
+import { getChartStateFromStorage } from './manage-state-in-local-storage';
 
-const initialState = ({
-  axes,
-  enableZoom,
-  enablePan,
-  showPoints,
-  showLine,
-  legendDisplay,
-  annotationsData,
-  customAxesRange,
-}) => {
+/**
+
+ Initial chart state for the line chart.
+ @param {Object} options - The chart options.
+ @return {Object} The initial chart state.
+ */
+const initialState = ({ options, persistenceId }) => {
+  const {
+    additionalAxesOptions: { range: customAxesRange },
+    annotations,
+    axes,
+    chartOptions,
+    legend,
+    dragData,
+  } = options;
+  const { enableZoom, enablePan, showPoints, showLine } = chartOptions;
   /**
    * getStateAxesByType
    * @param {'x'|'y'} axisType
@@ -28,23 +35,27 @@ const initialState = ({
         const id = generateAxisId(axisType, index, axes[axisType].length > 1);
         const customMin = customAxesRange?.[id]?.min;
         const customMax = customAxesRange?.[id]?.max;
+        const { unit } = axisObj;
         return {
           id,
           //only add custom axis ranges if defined:
           ...(customMin ? { min: customMin } : {}),
           ...(customMax ? { max: customMax } : {}),
+          ...(unit ? { unit } : {}),
         };
       });
     } else {
       const id = generateAxisId(axisType);
       const customMin = customAxesRange?.[id]?.min;
       const customMax = customAxesRange?.[id]?.max;
+      const unit = axes?.[id][0].unit;
       return [
         {
           id,
           //only add custom axis ranges if defined:
           ...(customMin ? { min: customMin } : {}),
           ...(customMax ? { max: customMax } : {}),
+          ...(unit ? { unit } : {}),
         },
       ];
     }
@@ -54,16 +65,25 @@ const initialState = ({
   const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
   const stateAxes = [...xStateAxes, ...yStateAxes];
 
+  const {
+    zoomEnabled,
+    panEnabled,
+    pointsEnabled,
+    lineEnabled,
+    legendEnabled,
+    enableDragPoints,
+  } = getChartStateFromStorage(persistenceId) || {};
+
   return {
-    zoomEnabled: enableZoom,
-    panEnabled: true, // TODO: work out why this logic doesn't work, workaround wih dispatch is currently used
-    pointsEnabled: showPoints,
-    lineEnabled: showLine,
-    legendEnabled: legendDisplay !== false,
+    zoomEnabled: zoomEnabled ?? enableZoom,
+    panEnabled: panEnabled ?? enablePan,
+    pointsEnabled: pointsEnabled ?? showPoints,
+    lineEnabled: lineEnabled ?? showLine,
+    legendEnabled: legendEnabled !== false ?? legend.display !== false,
     axes: stateAxes,
-    showAnnotationLineIndex: setAnnotations(annotationsData),
+    showAnnotationLineIndex: setAnnotations(annotations.annotationsData),
     showTable: false,
-    enableDragPoints: false,
+    enableDragPoints: dragData.enableDragData && enableDragPoints,
   };
 };
 

package/src/components/line-chart/state/line-chart-reducer.js

@@ -3,7 +3,6 @@ import {
   DISABLE_DRAG_OPTIONS,
   RESET_AXES_RANGES,
   SAVE_INITIAL_AXES_RANGES,
-  SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
   TOGGLE_DRAG_POINTS,
   TOGGLE_LEGEND,
@@ -79,15 +78,6 @@ export const reducer = (state, action) => {
         }));
       });
     }
-    case SET_POINTS_ZOOM_DEFAULTS:
-      const { showPoints, enableZoom, enablePan, showLine } = action.payload;
-      return {
-        ...newState,
-        zoomEnabled: enableZoom,
-        pointsEnabled: showPoints,
-        lineEnabled: showLine,
-        panEnabled: enablePan,
-      };
     case TOGGLE_ANNOTATION:
       const { annotationIndex } = action.payload;
       const updatedIndexes = newState.showAnnotationLineIndex.includes(

package/src/components/line-chart/state/manage-state-in-local-storage.js

@@ -0,0 +1,86 @@
+/**
+ * Retrieves the chart state from local storage.
+ *
+ * @param {string|''} persistenceId - The chart persistenceId.
+ * @returns {object|null} The chart state object or null if not found.
+ */
+export const getChartStateFromStorage = (persistenceId) => {
+  if (!persistenceId) return null;
+
+  // Retrieve the chart state object from local storage
+  const chartStateKey = `line-chart-state-${persistenceId}`;
+  const chartStateObjectJSON = localStorage.getItem(chartStateKey);
+
+  if (chartStateObjectJSON) {
+    // If the chart state object was found, parse it
+    const chartStateObject = JSON.parse(chartStateObjectJSON);
+
+    // Return the state property of the parsed chart state object
+    return chartStateObject.state;
+  }
+
+  // If the chart state object was not found, return null
+  return null;
+};
+
+/**
+ * Remove expired chart states from local storage.
+ *
+ * @param {number} maxAgeInHours - The maximum age of chart states to keep in local storage (in hours). Default is 72 hours.
+ */
+const removeExpiredChartStates = (maxAgeInHours = 72) => {
+  const currentTime = new Date().getTime();
+  const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1000;
+
+  // Iterate through all keys in local storage
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+
+    // Check if the key is related to a line-chart-state
+    if (key.includes('line-chart-state-')) {
+      const chartStateObjectJSON = localStorage.getItem(key);
+
+      // If a valid chart state object JSON is found
+      if (chartStateObjectJSON) {
+        const chartStateObject = JSON.parse(chartStateObjectJSON);
+        const storedTime = chartStateObject.timestamp;
+
+        // If a valid timestamp is found
+        if (storedTime) {
+          const ageInMilliseconds = currentTime - storedTime;
+
+          // If the age of the chart state is older than the specified maxAgeInHours
+          if (ageInMilliseconds > maxAgeInMilliseconds) {
+            // Remove the expired chart state from local storage
+            localStorage.removeItem(key);
+          }
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Stores the chart state in local storage.
+ *
+ * @param {object} state - The chart state object to store.
+ * @param {string|''} persistenceId - The chart persistenceId.
+ */
+export const storeChartStateInStorage = (state, persistenceId) => {
+  if (!persistenceId) return;
+
+  const currentTime = new Date().getTime();
+  const chartStateKey = `line-chart-state-${persistenceId}`;
+
+  // Create an object containing the chart state and the timestamp
+  const chartStateObject = {
+    state,
+    timestamp: currentTime,
+  };
+
+  // Serialize the chart state object as a JSON string and store it in local storage
+  localStorage.setItem(chartStateKey, JSON.stringify(chartStateObject));
+
+  // Remove expired chart states from local storage
+  removeExpiredChartStates();
+};

package/src/components/line-chart/state/use-chart-state.js

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from 'react';
+import { storeChartStateInStorage } from './manage-state-in-local-storage';
+
+/**
+ * Hook for toggling the visibility of the custom legend.
+ *
+ * @param memoState - The memoized state object.
+ * @param memoOptions - The memoized options object.
+ */
+const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
+  useEffect(() => {
+    if (memoOptions.legend.customLegend.customLegendPlugin) {
+      // Get the parent element of the custom legend container and toggle its visibility based on the state.
+      const parent = document.getElementById(
+        memoOptions.legend.customLegend.customLegendContainerID,
+      );
+      parent.style.visibility = memoState.legendEnabled ? 'visible' : 'hidden';
+    }
+  }, [
+    memoOptions.legend.customLegend.customLegendPlugin,
+    memoState.legendEnabled,
+  ]);
+};
+
+/**
+ * Hook for storing the chart state in local storage.
+ *
+ * @param memoState - The memoized state object.
+ * @param persistenceId - The chart persistenceId.
+ */
+const useStoreChartStateInStorage = (memoState, persistenceId) => {
+  useEffect(() => {
+    // Store the chart state in local storage.
+    storeChartStateInStorage(memoState, persistenceId);
+  }, [
+    memoState.panEnabled,
+    memoState.lineEnabled,
+    memoState.pointsEnabled,
+    memoState.legendEnabled,
+    memoState.enableDragPoints,
+    memoState.zoomEnabled,
+  ]);
+};
+
+/**
+ * Hook for managing the state of the chart.
+ *
+ * @param options - The chart options.
+ * @param state - The chart state.
+ * @param persistenceId - The chart persistenceId.
+ */
+const useChartState = (options, state, persistenceId) => {
+  const memoized = useMemo(() => {
+    return {
+      state,
+      options,
+    };
+  }, [state, options]);
+
+  const { state: memoState, options: memoOptions } = memoized ?? {};
+
+  useStoreChartStateInStorage(memoState, persistenceId);
+  useToggleCustomLegendVisibility(memoState, memoOptions);
+};
+
+export default useChartState;