@oliasoft-open-source/charts-library 2.10.2 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -36,6 +36,7 @@
     "chart.js": "^3.9.1",
     "chartjs-plugin-annotation": "^1.4.0",
     "chartjs-plugin-datalabels": "^2.1.0",
+    "chartjs-plugin-dragdata": "^2.2.5",
     "chartjs-plugin-zoom": "^1.2.1",
     "classnames": "^2.3.1",
     "fraction.js": "^4.2.0",

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.11.0
+
+- added dragData feature(plugin-https://github.com/chrispahm/chartjs-plugin-dragData)
+
 ## 2.10.2
 
 - remove dead `less-vars-to-js` package ([OW-11017](https://oliasoft.atlassian.net/browse/OW-11017))

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

@@ -85,6 +85,16 @@ export const BarChartPropTypes = {
         onBarHover: PropTypes.func,
         onBarUnhover: PropTypes.func,
       }),
+      dragData: PropTypes.shape({
+        enableDragData: PropTypes.bool,
+        showTooltip: PropTypes.bool,
+        roundPoints: PropTypes.bool,
+        dragX: PropTypes.bool,
+        dragY: PropTypes.bool,
+        onDragStart: PropTypes.func,
+        onDrag: PropTypes.func,
+        onDragEnd: PropTypes.func,
+      }),
     }),
   }).isRequired,
 };
@@ -104,6 +114,7 @@ export const getDefaultProps = (props) => {
     .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
   props.chart.options.chartOptions = props.chart.options.chartOptions || {};
   props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
   // Set defaults for missing properties
   const chart = {
     testId: props.chart.testId ?? null,
@@ -182,6 +193,16 @@ export const getDefaultProps = (props) => {
         onBarHover: props.chart.options.interactions.onBarHover,
         onBarUnhover: props.chart.options.interactions.onBarUnhover,
       },
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData || false,
+        showTooltip: props.chart.options.dragData.showTooltip || true,
+        roundPoints: props.chart.options.dragData.roundPoints || true,
+        dragX: props.chart.options.dragData.dragX || true,
+        dragY: props.chart.options.dragData.dragY || true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd,
+      },
     },
   };
   return chart;

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

@@ -1,4 +1,10 @@
-import {IChartAnnotations, IChartInteractions, IChartLegend, IChartStyling} from "../../helpers/chart-interface";
+import {
+    IChartAnnotations,
+    IChartDraggableData,
+    IChartInteractions,
+    IChartLegend,
+    IChartStyling
+} from "../../helpers/chart-interface";
 
 export interface IChartOptions {
     enableZoom: boolean;
@@ -49,6 +55,7 @@ export interface IBarChartOptions {
     legend: IChartLegend;
     chartOptions: IChartOptions;
     interactions: IChartInteractions;
+    draggableData :IChartDraggableData;
 }
 
 export interface IBarDataPoint {

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

@@ -14,6 +14,7 @@ import { Bar } from 'react-chartjs-2';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import dragDataPlugin from 'chartjs-plugin-dragdata';
 
 import styles from './bar-chart.module.less';
 import { BarChartPropTypes, getDefaultProps } from './bar-chart-prop-types';
@@ -45,6 +46,7 @@ import {
   ChartType,
   PointStyle,
 } from '../../helpers/enums';
+import getDraggableData from '../../helpers/get-draggableData';
 
 ChartJS.register(
   LinearScale,
@@ -58,6 +60,7 @@ ChartJS.register(
   zoomPlugin,
   dataLabelsPlugin,
   annotationPlugin,
+  dragDataPlugin,
 );
 
 /**
@@ -230,6 +233,7 @@ const BarChart = (props) => {
             chartAreaBorder: {
               borderColor: BORDER_COLOR,
             },
+            dragData: getDraggableData(options),
           },
         }}
         plugins={getPlugins(graph, options.legend)}

package/src/components/controls/controls.jsx

@@ -34,6 +34,10 @@ const Controls = ({
   subheaderComponent,
   table,
   zoomEnabled,
+  enableDragPoints,
+  isDragDataAllowed,
+  onToggleDragPoints,
+  onDisableDragOptions,
 }) => {
   return (
     <>
@@ -65,6 +69,10 @@ const Controls = ({
                 zoomEnabled={zoomEnabled}
                 onTogglePan={onTogglePan}
                 onToggleZoom={onToggleZoom}
+                enableDragPoints={enableDragPoints}
+                isDragDataAllowed={isDragDataAllowed}
+                onToggleDragPoints={onToggleDragPoints}
+                onDisableDragOptions={onDisableDragOptions}
               />
               <Tooltip text="Download as PNG" placement="bottom-end">
                 <Button

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

@@ -2,17 +2,39 @@ import React from 'react';
 import {
   Button,
   Flex,
+  Menu,
   Text,
   Tooltip,
 } from '@oliasoft-open-source/react-ui-library';
 import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
+import { TbHandStop } from 'react-icons/all';
 
 export const DragOptions = ({
   onTogglePan,
   onToggleZoom,
   panEnabled,
   zoomEnabled,
+  enableDragPoints,
+  isDragDataAllowed,
+  onToggleDragPoints,
+  onDisableDragOptions,
 }) => {
+  const handleToggleZoom = () => {
+    if (isDragDataAllowed) {
+      onToggleZoom();
+    } else {
+      onToggleZoom();
+      onTogglePan();
+    }
+  };
+
+  const handleToggleDragPoints = () => {
+    if (isDragDataAllowed) {
+      onDisableDragOptions();
+    } else {
+      onToggleZoom();
+    }
+  };
   // TODO: Translate strings
   const options = [
     {
@@ -29,10 +51,7 @@ export const DragOptions = ({
       ),
       icon: <RiZoomInLine />,
       selected: zoomEnabled,
-      onClick: () => {
-        onToggleZoom();
-        onTogglePan();
-      },
+      onClick: handleToggleZoom,
     },
     {
       label: (
@@ -48,30 +67,67 @@ export const DragOptions = ({
       ),
       icon: <RiDragMove2Line />,
       selected: panEnabled,
-      onClick: () => {
-        onTogglePan();
-      },
+      onClick: onTogglePan,
     },
+    ...(isDragDataAllowed
+      ? [
+          {
+            label: 'Drag to move points',
+            icon: <TbHandStop />,
+            selected: enableDragPoints,
+            type: 'Option',
+            onClick: onToggleDragPoints,
+          },
+        ]
+      : []),
     {
       label: 'Drag disabled',
       icon: <RiForbidLine />,
-      selected: !zoomEnabled && !panEnabled,
-      onClick: () => {
-        onToggleZoom();
-      },
+      selected: !zoomEnabled && !panEnabled && !enableDragPoints,
+      onClick: handleToggleDragPoints,
     },
   ];
+
   const selectedOption = options.filter((option) => option.selected)[0];
+  const optionsWithDragPoints = options.map(
+    ({ icon, label, onClick, selected }) => ({
+      icon,
+      label,
+      type: 'Option',
+      onClick,
+      disabled: selected,
+    }),
+  );
+
   return (
     <Tooltip text={selectedOption.label} placement="bottom-end">
-      <Button
-        small
-        basic
-        colored="muted"
-        round
-        icon={selectedOption.icon}
-        onClick={selectedOption.onClick}
-      />
+      {!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>
   );
 };

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

@@ -106,6 +106,16 @@ export const LineChartPropTypes = {
         onPointUnhover: PropTypes.func,
         onAnimationComplete: PropTypes.func,
       }),
+      dragData: PropTypes.shape({
+        enableDragData: PropTypes.bool,
+        showTooltip: PropTypes.bool,
+        roundPoints: PropTypes.bool,
+        dragX: PropTypes.bool,
+        dragY: PropTypes.bool,
+        onDragStart: PropTypes.func,
+        onDrag: PropTypes.func,
+        onDragEnd: PropTypes.func,
+      }),
     }),
   }).isRequired,
 };
@@ -125,6 +135,7 @@ export const getDefaultProps = (props) => {
     .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
   props.chart.options.chartOptions = props.chart.options.chartOptions || {};
   props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
   // Set defaults for missing properties
   const chart = {
     testId: props.chart.testId ?? null,
@@ -206,6 +217,16 @@ export const getDefaultProps = (props) => {
         onAnimationComplete:
           props.chart.options.interactions.onAnimationComplete,
       },
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData || false,
+        showTooltip: props.chart.options.dragData.showTooltip || true,
+        roundPoints: props.chart.options.dragData.roundPoints || true,
+        dragX: props.chart.options.dragData.dragX || true,
+        dragY: props.chart.options.dragData.dragY || true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd,
+      },
     },
   };
   return chart;

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

@@ -1,5 +1,5 @@
 import {
-    IChartAnnotations,
+    IChartAnnotations, IChartDraggableData,
     IChartInteractions,
     IChartLegend,
     IChartStyling,
@@ -68,6 +68,7 @@ export interface ILineChartOptions {
     legend: IChartLegend;
     chartOptions: IChartOptions;
     interactions: IChartInteractions;
+    draggableData :IChartDraggableData;
 }
 
 export interface IDataPoint {

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

@@ -15,6 +15,7 @@ import { Line } from 'react-chartjs-2';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import dragDataPlugin from 'chartjs-plugin-dragdata';
 import { triggerBase64Download } from 'react-base64-downloader';
 import styles from './line-chart.module.less';
 import { reducer } from './state/line-chart-reducer';
@@ -31,6 +32,8 @@ import {
   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';
@@ -69,6 +72,7 @@ import {
   PanZoomMode,
   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 { autoScale } from './axis-scales/axis-scales';
@@ -86,6 +90,7 @@ ChartJS.register(
   zoomPlugin,
   dataLabelsPlugin,
   annotationPlugin,
+  dragDataPlugin,
 );
 
 /**
@@ -108,6 +113,7 @@ const LineChart = (props) => {
     graph,
     interactions,
     legend,
+    dragData,
   } = options;
   const { showLine, showPoints, enableZoom, enablePan } = chartOptions;
 
@@ -449,12 +455,17 @@ const LineChart = (props) => {
         subheaderComponent={subheaderComponent}
         table={table}
         zoomEnabled={state.zoomEnabled}
+        enableDragPoints={state.enableDragPoints}
+        isDragDataAllowed={dragData.enableDragData}
+        onToggleDragPoints={() => dispatch({ type: TOGGLE_DRAG_POINTS })}
+        onDisableDragOptions={() => dispatch({ type: DISABLE_DRAG_OPTIONS })}
       />
       {table && state.showTable ? (
         <div className={styles.table}>{table}</div>
       ) : (
         <div className={styles.canvas}>
           <Line
+            key={state.enableDragPoints}
             ref={chartRef}
             data={{
               datasets: generatedDatasets,
@@ -516,6 +527,7 @@ const LineChart = (props) => {
                 chartAreaBorder: {
                   borderColor: BORDER_COLOR,
                 },
+                ...(state.enableDragPoints ? getDraggableData(options) : {}),
               },
               events: [
                 'mousemove',

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

@@ -9,3 +9,5 @@ export const TOGGLE_TABLE = 'TOGGLE_TABLE';
 export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';
 export const RESET_AXES_RANGES = 'RESET_AXES_RANGES';
 export const UPDATE_AXES_RANGES = 'UPDATE_AXES_RANGES';
+export const TOGGLE_DRAG_POINTS = 'TOGGLE_DRAG_POINTS';
+export const DISABLE_DRAG_OPTIONS = 'DISABLE_DRAG_OPTIONS';

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

@@ -63,6 +63,7 @@ const initialState = ({
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
+    enableDragPoints: false,
   };
 };
 

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

@@ -1,16 +1,18 @@
 import { produce } from 'immer';
 import {
-  TOGGLE_PAN,
-  TOGGLE_ZOOM,
-  TOGGLE_POINTS,
-  TOGGLE_LINE,
-  TOGGLE_LEGEND,
+  DISABLE_DRAG_OPTIONS,
+  RESET_AXES_RANGES,
+  SAVE_INITIAL_AXES_RANGES,
   SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
+  TOGGLE_DRAG_POINTS,
+  TOGGLE_LEGEND,
+  TOGGLE_LINE,
+  TOGGLE_PAN,
+  TOGGLE_POINTS,
   TOGGLE_TABLE,
-  SAVE_INITIAL_AXES_RANGES,
+  TOGGLE_ZOOM,
   UPDATE_AXES_RANGES,
-  RESET_AXES_RANGES,
 } from './action-types';
 
 export const reducer = (state, action) => {
@@ -21,6 +23,9 @@ export const reducer = (state, action) => {
       if (newState.panEnabled) {
         newState.panEnabled = false;
       }
+      if (newState.enableDragPoints) {
+        newState.enableDragPoints = false;
+      }
       return newState;
     }
     case TOGGLE_PAN: {
@@ -94,6 +99,28 @@ export const reducer = (state, action) => {
         ...newState,
         showAnnotationLineIndex: updatedIndexes,
       };
+    case TOGGLE_DRAG_POINTS: {
+      newState.enableDragPoints = !newState.enableDragPoints;
+      if (newState.panEnabled) {
+        newState.panEnabled = false;
+      }
+      if (newState.zoomEnabled) {
+        newState.zoomEnabled = false;
+      }
+      return newState;
+    }
+    case DISABLE_DRAG_OPTIONS: {
+      if (
+        newState.enableDragPoints ||
+        newState.panEnabled ||
+        newState.zoomEnabled
+      ) {
+        newState.enableDragPoints = false;
+        newState.panEnabled = false;
+        newState.zoomEnabled = false;
+      }
+      return newState;
+    }
     default: {
       return newState;
     }

package/src/helpers/chart-interface.ts

@@ -1,5 +1,16 @@
 import { Plugin } from "chart.js";
 
+export interface IChartDraggableData {
+    enableDragData: boolean;
+    showTooltip: boolean;
+    roundPoints: boolean;
+    dragX: boolean;
+    dragY: boolean;
+    onDragStart: () => any;
+    onDrag: () => any;
+    onDragEnd: () => any;
+};
+
 export interface IChartAnnotationsData {
     adjustScaleRange: boolean;
     annotationAxis: 'x' | 'y';
@@ -63,6 +74,7 @@ export interface IInitialState {
     legendEnabled?: boolean;
     axes?: {id: string, label: string | any, min?: {}, max?: {}}[];
     showAnnotationLineIndex: [];
+    enableDragData?: boolean;
 }
 
 export interface IChartPlugins {

package/src/helpers/get-draggableData.js

@@ -0,0 +1,32 @@
+/**
+ * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ */
+const getDraggableData = (options) => {
+  const { dragData = {} } = options;
+  const {
+    enableDragData = false,
+    showTooltip = true,
+    roundPoints = true,
+    dragX = true,
+    dragY = true,
+    onDragStart = () => {},
+    onDrag = () => {},
+    onDragEnd = () => {},
+  } = dragData;
+
+  return enableDragData
+    ? {
+        dragData: {
+          dragX,
+          dragY,
+          round: roundPoints,
+          showTooltip,
+          onDragStart,
+          onDrag,
+          onDragEnd,
+        },
+      }
+    : {};
+};
+
+export default getDraggableData;