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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.11.3",
+  "version": "2.12.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,9 @@
 # Charts Library Release Notes
 
+## 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

@@ -16,6 +16,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 +111,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,
@@ -217,6 +227,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.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

@@ -113,6 +113,7 @@ const LineChart = (props) => {
     graph,
     interactions,
     legend,
+    depthType,
     dragData,
   } = options;
   const { showLine, showPoints, enableZoom, enablePan } = chartOptions;
@@ -161,7 +162,7 @@ const LineChart = (props) => {
       //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) },
       });
     }
   }, []);
@@ -364,11 +365,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 +460,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 })}

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

@@ -11,6 +11,9 @@ const initialState = ({
   legendDisplay,
   annotationsData,
   customAxesRange,
+  selectedDepthTypes,
+  selectedUnits,
+  setSelectedDepthTypes,
 }) => {
   /**
    * getStateAxesByType
@@ -28,23 +31,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 } : {}),
         },
       ];
     }
@@ -63,6 +70,9 @@ const initialState = ({
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
+    selectedDepthTypes,
+    selectedUnits,
+    setSelectedDepthTypes,
     enableDragPoints: false,
   };
 };