@oliasoft-open-source/charts-library 2.12.0 → 2.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.12.0",
+  "version": "2.13.1",
   "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.1
+
+- Text label for drag options trigger, to make current behaviour more obvious ([OW-11102](https://oliasoft.atlassian.net/browse/OW-11102))
+
+## 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))

package/src/components/controls/controls.jsx

@@ -66,16 +66,6 @@ const Controls = ({
                 legendEnabled={legendEnabled}
                 onToggleLegend={onToggleLegend}
               />
-              <DragOptions
-                panEnabled={panEnabled}
-                zoomEnabled={zoomEnabled}
-                onTogglePan={onTogglePan}
-                onToggleZoom={onToggleZoom}
-                enableDragPoints={enableDragPoints}
-                isDragDataAllowed={isDragDataAllowed}
-                onToggleDragPoints={onToggleDragPoints}
-                onDisableDragOptions={onDisableDragOptions}
-              />
               <Tooltip text="Download as PNG" placement="bottom-end">
                 <Button
                   small
@@ -86,6 +76,16 @@ const Controls = ({
                   onClick={onDownload}
                 />
               </Tooltip>
+              <DragOptions
+                panEnabled={panEnabled}
+                zoomEnabled={zoomEnabled}
+                onTogglePan={onTogglePan}
+                onToggleZoom={onToggleZoom}
+                enableDragPoints={enableDragPoints}
+                isDragDataAllowed={isDragDataAllowed}
+                onToggleDragPoints={onToggleDragPoints}
+                onDisableDragOptions={onDisableDragOptions}
+              />
             </>
           )}
 

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

@@ -19,25 +19,10 @@ export const DragOptions = ({
   onToggleDragPoints,
   onDisableDragOptions,
 }) => {
-  const handleToggleZoom = () => {
-    if (isDragDataAllowed) {
-      onToggleZoom();
-    } else {
-      onToggleZoom();
-      onTogglePan();
-    }
-  };
-
-  const handleToggleDragPoints = () => {
-    if (isDragDataAllowed) {
-      onDisableDragOptions();
-    } else {
-      onToggleZoom();
-    }
-  };
   // TODO: Translate strings
   const options = [
     {
+      buttonLabel: 'Drag to zoom',
       label: (
         <Flex direction="column">
           <Text>Drag to zoom</Text>
@@ -51,9 +36,10 @@ export const DragOptions = ({
       ),
       icon: <RiZoomInLine />,
       selected: zoomEnabled,
-      onClick: handleToggleZoom,
+      onClick: onToggleZoom,
     },
     {
+      buttonLabel: 'Drag to pan',
       label: (
         <Flex direction="column">
           <Text>Drag to pan</Text>
@@ -84,7 +70,7 @@ export const DragOptions = ({
       label: 'Drag disabled',
       icon: <RiForbidLine />,
       selected: !zoomEnabled && !panEnabled && !enableDragPoints,
-      onClick: handleToggleDragPoints,
+      onClick: onDisableDragOptions,
     },
   ];
 
@@ -100,34 +86,13 @@ export const DragOptions = ({
   );
 
   return (
-    <Tooltip text={selectedOption.label} placement="bottom-end">
-      {!isDragDataAllowed ? (
-        <Button
-          small
-          basic
-          colored="muted"
-          round
-          icon={selectedOption.icon}
-          onClick={selectedOption.onClick}
-        />
-      ) : (
-        <Menu
-          menu={{
-            component: (
-              <Button
-                small
-                basic
-                colored="muted"
-                round
-                icon={selectedOption.icon}
-              />
-            ),
-            label: 'Select',
-            sections: optionsWithDragPoints,
-            trigger: 'Component',
-          }}
-        />
-      )}
-    </Tooltip>
+    <Menu
+      menu={{
+        label: selectedOption.buttonLabel || selectedOption.label,
+        sections: optionsWithDragPoints,
+        trigger: 'DropDownButton',
+        small: true,
+      }}
+    />
   );
 };

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({
@@ -148,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: {

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.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,13 +108,12 @@ 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,
@@ -116,7 +121,6 @@ const LineChart = (props) => {
     depthType,
     dragData,
   } = options;
-  const { showLine, showPoints, enableZoom, enablePan } = chartOptions;
 
   /**
    * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
@@ -124,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 }]) => {
@@ -155,9 +153,6 @@ 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({
@@ -167,29 +162,8 @@ const LineChart = (props) => {
     }
   }, []);
 
-  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];
@@ -471,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,20 +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,
-  selectedDepthTypes,
-  selectedUnits,
-  setSelectedDepthTypes,
-}) => {
+/**
+
+ 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
@@ -61,19 +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,
-    selectedDepthTypes,
-    selectedUnits,
-    setSelectedDepthTypes,
-    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;