@oliasoft-open-source/charts-library 2.13.5 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.13.5",
+  "version": "2.14.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -33,7 +33,7 @@
     ]
   },
   "dependencies": {
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.2.1",
     "chartjs-plugin-annotation": "^1.4.0",
     "chartjs-plugin-datalabels": "^2.1.0",
     "chartjs-plugin-dragdata": "^2.2.5",

package/release-notes.md

@@ -1,5 +1,8 @@
 # Charts Library Release Notes
 
+## 2.14.0
+- Refactored line chart, for better performance, readable and reduce not needed re-renders
+
 ## 2.13.5
 
 - Fixed reset range when subComponent update data, prevent extra re-renders when range have same deep values but different reference

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

@@ -14,13 +14,14 @@ import {
   Tooltip,
 } from '@oliasoft-open-source/react-ui-library';
 import { RiRuler2Line } from 'react-icons/ri';
-import { toNum } from '../../line-chart/line-chart-utils';
+import PropTypes from 'prop-types';
+import { toNum } from '@oliasoft-open-source/units';
 import {
-  actionTypes,
-  reducer,
   initializeFormState,
+  reducer,
   validateAxes,
-} from './axes-options-form-state';
+} from '../../line-chart/controls/axes-options/axes-options-form-state';
+import { actionTypes } from '../../line-chart/controls/axes-options/action-types';
 
 const AxesOptionsPopover = ({
   initialAxesRanges,
@@ -234,3 +235,23 @@ export const AxesOptions = ({
     </Popover>
   );
 };
+
+AxesOptionsPopover.defaultProps = {
+  depthType: null,
+  initialAxesRanges: [],
+  close: () => {},
+};
+
+AxesOptionsPopover.propTypes = {
+  initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
+  axes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  controlsAxesLabels: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  onUpdateAxes: PropTypes.func.isRequired,
+  onResetAxes: PropTypes.func.isRequired,
+  close: PropTypes.func,
+  depthType: PropTypes.shape({
+    selectedDepthType: PropTypes.string,
+    setSelectedDepthType: PropTypes.func,
+    options: PropTypes.arrayOf(PropTypes.string),
+  }),
+};

package/src/components/line-chart/{line-chart-consts.js → constants/line-chart-consts.js}

@@ -5,3 +5,4 @@ export const BORDER_JOIN_STYLE = 'round';
 export const DEFAULT_LINE_POINT_RADIUS = 0;
 export const DEFAULT_BACKGROUND_COLOR = 'transparent';
 export const ZOOM_BOX_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.1)';
+export const DOUBLE_CLICK = 'dblclick';

package/src/components/line-chart/controls/axes-options/action-types.js

@@ -0,0 +1,5 @@
+export const actionTypes = Object.freeze({
+  reset: 'reset',
+  valueUpdated: 'valueUpdated',
+  unitUpdated: 'unitUpdated',
+});

package/src/components/{controls → line-chart/controls}/axes-options/axes-options-form-state.js

@@ -3,13 +3,8 @@ import {
   isGreaterThanMin,
   isLessThanMax,
   validNumber,
-} from '../../line-chart/line-chart-utils';
-
-export const actionTypes = Object.freeze({
-  reset: 'reset',
-  valueUpdated: 'valueUpdated',
-  unitUpdated: 'unitUpdated',
-});
+} from '../../utils/line-chart-utils';
+import { actionTypes } from './action-types';
 
 /**
  * Initialize local component form state for a custom loads density table
@@ -39,23 +34,27 @@ export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
 
 const isEmptyString = (value) => value === '';
 
+const createErrorMessages = (value, compareTo, type) => {
+  const errors = [];
+  if (isEmptyString(value)) errors.push('Must have a value');
+  if (!validNumber(value)) errors.push('Must be a number');
+
+  if (type === 'min' && !isLessThanMax(value, compareTo)) {
+    errors.push('Must be less than max');
+  } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
+    errors.push('Must be greater than min');
+  }
+
+  return errors;
+};
+
 export const validateAxes = (formState) => {
   return formState.reduce(
     (acc, { id, min, max }) => {
       return produce(acc, (draft) => {
         const errors = {
-          min: [
-            ...(isEmptyString(min) ? ['Must have a value'] : []),
-            ...(!validNumber(min) ? ['Must be a number'] : []),
-            ...(!isLessThanMax(min, max) ? ['Must be less than max'] : []),
-          ],
-          max: [
-            ...(isEmptyString(max) ? ['Must have a value'] : []),
-            ...(!validNumber(max) ? ['Must be a number'] : []),
-            ...(!isGreaterThanMin(max, min)
-              ? ['Must be greater than min']
-              : []),
-          ],
+          min: createErrorMessages(min, max, 'min'),
+          max: createErrorMessages(max, min, 'max'),
         };
         draft.errors.push({
           id,

package/src/components/{controls → line-chart/controls}/controls.jsx

@@ -5,56 +5,73 @@ import {
   RiLineChartLine,
   RiTableLine,
 } from 'react-icons/ri';
+import PropTypes from 'prop-types';
 import { LineOptions } from './line-options';
 import { DragOptions } from './drag-options';
-import { AxesOptions } from './axes-options/axes-options';
 import { LegendOptions } from './legend-options';
 import styles from './controls.module.less';
+import { useToggleHandlers } from '../hooks/use-toggle-handler';
+import { useChartFunctions } from '../hooks/use-chart-functions';
+import { AxesOptions } from '../../controls/axes-options/axes-options';
 
 const Controls = ({
-  axes,
-  controlsAxesLabels,
-  chart,
-  headerComponent,
-  legendEnabled,
-  lineEnabled,
-  onDownload,
-  onResetAxes,
-  onUpdateAxes,
-  onToggleLegend,
-  onToggleLine,
-  onTogglePan,
-  onTogglePoints,
-  onToggleTable,
-  onToggleZoom,
-  panEnabled,
-  pointsEnabled,
-  initialAxesRanges,
-  showTable,
-  subheaderComponent,
-  table,
-  zoomEnabled,
-  depthType,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
+  props: { headerComponent, subheaderComponent, table },
+  chartRef,
+  state,
+  options,
+  dispatch,
+  generatedDatasets,
 }) => {
+  const {
+    enableDragPoints,
+    initialAxesRanges,
+    legendEnabled,
+    lineEnabled,
+    panEnabled,
+    pointsEnabled,
+    showTable,
+    zoomEnabled,
+  } = state;
+  const { dragData } = options;
+  const {
+    onToggleLegend,
+    onToggleLine,
+    onTogglePan,
+    onTogglePoints,
+    onToggleTable,
+    onToggleZoom,
+    onToggleDragPoints,
+    onDisableDragOptions,
+  } = useToggleHandlers(dispatch);
+  const {
+    handleDownload,
+    controlsAxes,
+    controlsAxesLabels,
+    onResetAxes,
+    onUpdateAxes,
+  } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+  });
+
   return (
     <>
       <div className={styles.controls}>
-        {!!chart.options.title && <Text bold>{chart.options.title}</Text>}
+        {!!options.title && <Text bold>{options.title}</Text>}
         {headerComponent}
         <div className={styles.buttons}>
           {!showTable && (
             <>
               <AxesOptions
                 initialAxesRanges={initialAxesRanges}
-                axes={axes}
+                axes={controlsAxes}
                 controlsAxesLabels={controlsAxesLabels}
                 onUpdateAxes={onUpdateAxes}
                 onResetAxes={onResetAxes}
-                depthType={depthType}
+                depthType={options.depthType}
               />
               <LineOptions
                 lineEnabled={lineEnabled}
@@ -73,7 +90,7 @@ const Controls = ({
                   colored="muted"
                   round
                   icon={<RiFileDownloadLine />}
-                  onClick={onDownload}
+                  onClick={handleDownload}
                 />
               </Tooltip>
               <DragOptions
@@ -82,7 +99,7 @@ const Controls = ({
                 onTogglePan={onTogglePan}
                 onToggleZoom={onToggleZoom}
                 enableDragPoints={enableDragPoints}
-                isDragDataAllowed={isDragDataAllowed}
+                isDragDataAllowed={dragData.enableDragData}
                 onToggleDragPoints={onToggleDragPoints}
                 onDisableDragOptions={onDisableDragOptions}
               />
@@ -111,4 +128,42 @@ const Controls = ({
   );
 };
 
+Controls.defaultProps = {
+  props: {
+    headerComponent: null,
+    subheaderComponent: null,
+    table: null,
+  },
+  state: {
+    initialAxesRanges: [],
+  },
+  options: {},
+};
+
+Controls.propTypes = {
+  props: PropTypes.shape({
+    headerComponent: PropTypes.node,
+    subheaderComponent: PropTypes.node,
+    table: PropTypes.node,
+  }),
+  chartRef: PropTypes.object.isRequired,
+  state: PropTypes.shape({
+    enableDragPoints: PropTypes.bool,
+    initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
+    legendEnabled: PropTypes.bool,
+    lineEnabled: PropTypes.bool,
+    panEnabled: PropTypes.bool,
+    pointsEnabled: PropTypes.bool,
+    showTable: PropTypes.bool,
+    zoomEnabled: PropTypes.bool,
+  }),
+  options: PropTypes.shape({
+    dragData: PropTypes.shape({
+      enableDragData: PropTypes.bool,
+    }),
+  }),
+  dispatch: PropTypes.func.isRequired,
+  generatedDatasets: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
 export default Controls;

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

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Menu, Text } from '@oliasoft-open-source/react-ui-library';
+import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
+import { TbHandStop } from 'react-icons/tb';
+
+export const DragOptions = ({
+  onTogglePan,
+  onToggleZoom,
+  panEnabled,
+  zoomEnabled,
+  enableDragPoints,
+  isDragDataAllowed,
+  onToggleDragPoints,
+  onDisableDragOptions,
+}) => {
+  const options = useMemo(
+    () => [
+      {
+        buttonLabel: 'Drag to zoom',
+        label: (
+          <Flex direction="column">
+            <Text>Drag to zoom</Text>
+            <Text small muted>
+              Double click on canvas to reset
+            </Text>
+          </Flex>
+        ),
+        icon: <RiZoomInLine />,
+        selected: zoomEnabled,
+        onClick: onToggleZoom,
+      },
+      {
+        buttonLabel: 'Drag to pan',
+        label: (
+          <Flex direction="column">
+            <Text>Drag to pan</Text>
+            <Text small muted>
+              Double click on canvas to reset
+            </Text>
+          </Flex>
+        ),
+        icon: <RiDragMove2Line />,
+        selected: panEnabled,
+        onClick: onTogglePan,
+      },
+      ...(isDragDataAllowed
+        ? [
+            {
+              label: 'Drag to move points',
+              icon: <TbHandStop />,
+              selected: enableDragPoints,
+              type: 'Option',
+              onClick: onToggleDragPoints,
+            },
+          ]
+        : []),
+      {
+        label: 'Drag disabled',
+        icon: <RiForbidLine />,
+        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
+        onClick: onDisableDragOptions,
+      },
+    ],
+    [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed],
+  );
+
+  const selectedOption = options.find((option) => option.selected);
+  const optionsWithDragPoints = options.map(
+    ({ icon, label, onClick, selected }) => ({
+      icon,
+      label,
+      type: 'Option',
+      onClick,
+      disabled: selected,
+    }),
+  );
+
+  return (
+    <Menu
+      menu={{
+        label: selectedOption.buttonLabel || selectedOption.label,
+        sections: optionsWithDragPoints,
+        trigger: 'DropDownButton',
+        small: true,
+      }}
+    />
+  );
+};
+
+DragOptions.defaultProps = {
+  enableDragPoints: false,
+};
+
+DragOptions.propTypes = {
+  onTogglePan: PropTypes.func.isRequired,
+  onToggleZoom: PropTypes.func.isRequired,
+  panEnabled: PropTypes.bool.isRequired,
+  zoomEnabled: PropTypes.bool.isRequired,
+  enableDragPoints: PropTypes.bool,
+  isDragDataAllowed: PropTypes.bool.isRequired,
+  onToggleDragPoints: PropTypes.func.isRequired,
+  onDisableDragOptions: PropTypes.func.isRequired,
+};

package/src/components/line-chart/controls/legend-options.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import { RiListUnordered } from 'react-icons/ri';
+import listHideIcon from '../../../assets/icons/list-hide.svg';
+
+export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
+  const tooltipText = legendEnabled ? 'Hide Legend' : 'Show Legend';
+  const icon = legendEnabled ? (
+    <RiListUnordered />
+  ) : (
+    <Icon icon={listHideIcon} />
+  );
+
+  return (
+    <Tooltip text={tooltipText} placement="bottom">
+      <Button
+        small
+        basic
+        colored="muted"
+        round
+        icon={icon}
+        onClick={onToggleLegend}
+      />
+    </Tooltip>
+  );
+};
+
+LegendOptions.propTypes = {
+  legendEnabled: PropTypes.bool.isRequired,
+  onToggleLegend: PropTypes.func.isRequired,
+};

package/src/components/{controls → line-chart/controls}/line-options.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import lineOnlyIcon from '../../assets/icons/line-only.svg';
-import pointOnlyIcon from '../../assets/icons/point-only.svg';
-import lineAndPointIcon from '../../assets/icons/line-and-point.svg';
+import PropTypes from 'prop-types';
+import lineOnlyIcon from '../../../assets/icons/line-only.svg';
+import pointOnlyIcon from '../../../assets/icons/point-only.svg';
+import lineAndPointIcon from '../../../assets/icons/line-and-point.svg';
 
 export const LineOptions = ({
   lineEnabled,
@@ -10,7 +11,6 @@ export const LineOptions = ({
   onTogglePoints,
   pointsEnabled,
 }) => {
-  // TODO: Translate strings
   const options = [
     {
       label: 'Points & lines',
@@ -38,7 +38,9 @@ export const LineOptions = ({
       },
     },
   ];
-  const selectedOption = options.filter((option) => option.selected)[0];
+
+  const selectedOption = options.find((option) => option.selected);
+
   return (
     <Tooltip text={selectedOption.label} placement="bottom">
       <Button
@@ -52,3 +54,10 @@ export const LineOptions = ({
     </Tooltip>
   );
 };
+
+LineOptions.propTypes = {
+  lineEnabled: PropTypes.bool.isRequired,
+  onToggleLine: PropTypes.func.isRequired,
+  onTogglePoints: PropTypes.func.isRequired,
+  pointsEnabled: PropTypes.bool.isRequired,
+};