@oliasoft-open-source/charts-library 2.13.4 → 2.14.0-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.13.4",
+  "version": "2.14.0-beta-1",
   "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,9 @@
 # Charts Library Release Notes
 
+## 2.13.5
+
+- Fixed reset range when subComponent update data, prevent extra re-renders when range have same deep values but different reference
+
 ## 2.13.4
 
 - Fixed legend state

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,
@@ -30,6 +31,7 @@ const AxesOptionsPopover = ({
   onResetAxes,
   close,
   depthType,
+  translations,
 }) => {
   const [depthTypeState, setDepthTypeState] = useState(
     depthType?.selectedDepthType,
@@ -43,7 +45,7 @@ const AxesOptionsPopover = ({
     initializeFormState,
   );
 
-  const { errors, valid } = validateAxes(formState);
+  const { errors, valid } = validateAxes(formState, translations);
 
   const onEditValue = ({ name, value, id }) => {
     dispatch({
@@ -189,16 +191,22 @@ const AxesOptionsPopover = ({
       ) : null}
 
       <Flex gap="8px" alignItems="center">
-        <Button type="submit" small colored label="Done" disabled={!valid} />
+        <Button
+          type="submit"
+          small
+          colored
+          label={translations.done}
+          disabled={!valid}
+        />
         <Button
           small
           name="resetAxes"
-          label="Reset Axes"
+          label={translations.resetAxes}
           onClick={onReset}
           disabled={!isCustomValue}
         />
         <Text small muted>
-          or double click on canvas
+          {translations.orDoubleClickToCanvas}
         </Text>
       </Flex>
     </form>
@@ -212,6 +220,7 @@ export const AxesOptions = ({
   onUpdateAxes,
   onResetAxes,
   depthType,
+  translations,
 }) => {
   return (
     <Popover
@@ -225,12 +234,37 @@ export const AxesOptions = ({
           onUpdateAxes={onUpdateAxes}
           onResetAxes={onResetAxes}
           depthType={depthType}
+          translations={translations}
         />
       }
     >
-      <Tooltip text="Axes options" placement="bottom" display="flex">
+      <Tooltip
+        text={translations.axesOptions}
+        placement="bottom"
+        display="flex"
+      >
         <Button small basic colored="muted" round icon={<RiRuler2Line />} />
       </Tooltip>
     </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/constants/default-translations.js

@@ -0,0 +1,24 @@
+export const defaultTranslations = Object.freeze({
+  label: 'Label',
+  pointsLines: 'Points & lines',
+  linesOnly: 'Lines only',
+  pointsOnly: 'Points only',
+  axesOptions: 'Axes options',
+  resetAxes: 'Reset Axes',
+  done: 'Done',
+  downloadAsPNG: 'Download as PNG',
+  showChart: 'Show chart',
+  showTable: 'Show table',
+  dragToZoom: 'Drag to zoom',
+  dragToPan: 'Drag to pan',
+  dragToMovePoints: 'Drag to move points',
+  dragDisabled: 'Drag disabled',
+  hideLegend: 'Hide Legend',
+  showLegend: 'Show Legend',
+  mustHaveAValue: 'Must have a value',
+  mustBeANumber: 'Must be a number',
+  mustBeLessThanMax: 'Must be less than max',
+  mustBeGreaterThanMin: 'Must be greater than min',
+  doubleClickToReset: 'Double click on canvas to reset',
+  orDoubleClickToCanvas: 'or double click on canvas',
+});

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 === '';
 
-export const validateAxes = (formState) => {
+const createErrorMessages = (value, compareTo, type, translations) => {
+  const errors = [];
+  if (isEmptyString(value)) errors.push(translations.mustHaveAValue);
+  if (!validNumber(value)) errors.push(translations.mustBeANumber);
+
+  if (type === 'min' && !isLessThanMax(value, compareTo)) {
+    errors.push(translations.mustBeLessThanMax);
+  } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
+    errors.push(translations.mustBeGreaterThanMin);
+  }
+
+  return errors;
+};
+
+export const validateAxes = (formState, translations) => {
   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', translations),
+          max: createErrorMessages(max, min, 'max', translations),
         };
         draft.errors.push({
           id,

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
+import {
+  RiFileDownloadLine,
+  RiLineChartLine,
+  RiTableLine,
+} from 'react-icons/ri';
+import PropTypes from 'prop-types';
+import { LineOptions } from './line-options';
+import { DragOptions } from './drag-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 = ({
+  props: { headerComponent, subheaderComponent, table },
+  chartRef,
+  state,
+  options,
+  dispatch,
+  generatedDatasets,
+  translations,
+}) => {
+  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}>
+        {!!options.title && <Text bold>{options.title}</Text>}
+        {headerComponent}
+        <div className={styles.buttons}>
+          {!showTable && (
+            <>
+              <AxesOptions
+                initialAxesRanges={initialAxesRanges}
+                axes={controlsAxes}
+                controlsAxesLabels={controlsAxesLabels}
+                onUpdateAxes={onUpdateAxes}
+                onResetAxes={onResetAxes}
+                depthType={options.depthType}
+                translations={translations}
+              />
+              <LineOptions
+                lineEnabled={lineEnabled}
+                pointsEnabled={pointsEnabled}
+                onToggleLine={onToggleLine}
+                onTogglePoints={onTogglePoints}
+                translations={translations}
+              />
+              <LegendOptions
+                legendEnabled={legendEnabled}
+                onToggleLegend={onToggleLegend}
+                translations={translations}
+              />
+              <Tooltip text={translations.downloadAsPNG} placement="bottom-end">
+                <Button
+                  small
+                  basic
+                  colored="muted"
+                  round
+                  icon={<RiFileDownloadLine />}
+                  onClick={handleDownload}
+                />
+              </Tooltip>
+              <DragOptions
+                panEnabled={panEnabled}
+                zoomEnabled={zoomEnabled}
+                onTogglePan={onTogglePan}
+                onToggleZoom={onToggleZoom}
+                enableDragPoints={enableDragPoints}
+                isDragDataAllowed={dragData.enableDragData}
+                onToggleDragPoints={onToggleDragPoints}
+                onDisableDragOptions={onDisableDragOptions}
+                translations={translations}
+              />
+            </>
+          )}
+
+          {table ? (
+            <Tooltip
+              text={showTable ? translations.showChart : translations.showTable}
+              placement="bottom-end"
+            >
+              <Button
+                small
+                basic
+                colored="muted"
+                round
+                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
+                onClick={onToggleTable}
+              />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+      {subheaderComponent}
+    </>
+  );
+};
+
+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,112 @@
+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,
+  translations: {
+    dragToZoom,
+    doubleClickToReset,
+    dragToPan,
+    orDoubleClickToCanvas,
+    dragToMovePoints,
+    dragDisabled,
+  },
+}) => {
+  const options = useMemo(
+    () => [
+      {
+        buttonLabel: dragToZoom,
+        label: (
+          <Flex direction="column">
+            <Text>Drag to zoom</Text>
+            <Text small muted>
+              {doubleClickToReset}
+            </Text>
+          </Flex>
+        ),
+        icon: <RiZoomInLine />,
+        selected: zoomEnabled,
+        onClick: onToggleZoom,
+      },
+      {
+        buttonLabel: dragToPan,
+        label: (
+          <Flex direction="column">
+            <Text>Drag to pan</Text>
+            <Text small muted>
+              {orDoubleClickToCanvas}
+            </Text>
+          </Flex>
+        ),
+        icon: <RiDragMove2Line />,
+        selected: panEnabled,
+        onClick: onTogglePan,
+      },
+      ...(isDragDataAllowed
+        ? [
+            {
+              label: dragToMovePoints,
+              icon: <TbHandStop />,
+              selected: enableDragPoints,
+              type: 'Option',
+              onClick: onToggleDragPoints,
+            },
+          ]
+        : []),
+      {
+        label: dragDisabled,
+        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,36 @@
+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,
+  translations: { hideLegend, showLegend },
+}) => {
+  const tooltipText = legendEnabled ? hideLegend : showLegend;
+  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,19 +1,20 @@
 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,
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
+  translations,
 }) => {
-  // TODO: Translate strings
   const options = [
     {
-      label: 'Points & lines',
+      label: translations.pointsLines,
       icon: <Icon icon={lineAndPointIcon} />,
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
@@ -21,7 +22,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Lines only',
+      label: translations.linesOnly,
       icon: <Icon icon={lineOnlyIcon} />,
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
@@ -30,7 +31,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Points only',
+      label: translations.pointsOnly,
       icon: <Icon icon={pointOnlyIcon} />,
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {
@@ -38,7 +39,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 +55,10 @@ export const LineOptions = ({
     </Tooltip>
   );
 };
+
+LineOptions.propTypes = {
+  lineEnabled: PropTypes.bool.isRequired,
+  onToggleLine: PropTypes.func.isRequired,
+  onTogglePoints: PropTypes.func.isRequired,
+  pointsEnabled: PropTypes.bool.isRequired,
+};