@oliasoft-open-source/charts-library 2.1.0 → 2.1.2

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

@@ -50,6 +50,7 @@ export const LineChartPropTypes = {
         staticChartHeight: PropTypes.bool,
         performanceMode: PropTypes.bool,
         darkMode: PropTypes.bool,
+        squareAspectRatio: PropTypes.bool,
       }),
       tooltip: PropTypes.shape({
         tooltips: PropTypes.bool,
@@ -79,6 +80,10 @@ export const LineChartPropTypes = {
         display: PropTypes.bool,
         position: PropTypes.oneOf(['top', 'bottom', 'right']),
         align: PropTypes.oneOf(['start', 'center', 'end']),
+        customLegend: PropTypes.shape({
+          customLegendPlugin: PropTypes.object,
+          customLegendContainerID: PropTypes.string,
+        }),
       }),
       chartOptions: PropTypes.shape({
         showPoints: PropTypes.bool,
@@ -106,6 +111,8 @@ export const getDefaultProps = (props) => {
   props.chart.options.graph = props.chart.options.graph || {};
   props.chart.options.annotations = props.chart.options.annotations || {};
   props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend
+    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
   props.chart.options.chartOptions = props.chart.options.chartOptions || {};
   props.chart.options.interactions = props.chart.options.interactions || {};
   // Set defaults for missing properties
@@ -141,6 +148,8 @@ export const getDefaultProps = (props) => {
         performanceMode:
           props.chart.options.chartStyling.performanceMode ?? true,
         darkMode: props.chart.options.chartStyling.darkMode || false,
+        squareAspectRatio:
+          props.chart.options.chartStyling.squareAspectRatio || false,
       },
       tooltip: {
         tooltips: props.chart.options.tooltip.tooltips ?? true,
@@ -167,6 +176,7 @@ export const getDefaultProps = (props) => {
         display: props.chart.options.legend.display ?? true,
         position: props.chart.options.legend.position || 'bottom',
         align: props.chart.options.legend.align || 'center',
+        customLegend: props.chart.options.legend.customLegend,
       },
       chartOptions: {
         showPoints: props.chart.options.chartOptions.showPoints ?? true,

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

@@ -60,6 +60,7 @@ import {
   ANIMATION_DURATION,
   AUTO,
   COLORS,
+  CUSTOM_LEGEND_PLUGIN_NAME,
   DARK_MODE_COLORS,
   DEFAULT_COLOR,
   DEFAULT_DARK_MODE_BORDER_COLOR,
@@ -102,7 +103,6 @@ defaults.darkModeBorderColor = DEFAULT_DARK_MODE_BORDER_COLOR;
  */
 const LineChart = (props) => {
   const chartRef = useRef(null);
-  const [shiftPressed, setShiftPressed] = useState(false);
   let pointHover = false;
   const chart = getDefaultProps(props);
   const { options } = chart;
@@ -150,6 +150,23 @@ const LineChart = (props) => {
     });
   }, [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]);
+
   const generateLineChartDatasets = (datasets) => {
     const copyDataset = [...datasets];
 
@@ -303,14 +320,20 @@ const LineChart = (props) => {
   };
 
   const handleKeyDown = (evt) => {
-    if (evt.key === Key.Shift && !shiftPressed) {
-      setShiftPressed(true);
+    if (evt.key === Key.Shift) {
+      const chart = chartRef.current;
+      chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Y;
+      chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Y;
+      chart.update();
     }
   };
 
   const handleKeyUp = (evt) => {
     if (evt.key === Key.Shift) {
-      setShiftPressed(false);
+      const chart = chartRef.current;
+      chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Z;
+      chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Z;
+      chart.update();
     }
   };
 
@@ -329,19 +352,66 @@ const LineChart = (props) => {
   };
   const controlsAxes = getControlsAxes();
 
+  const setAxisValuesInSettings = (chart) => {
+    dispatch({
+      type: SET_AXIS_VALUE,
+      payload: [
+        {
+          name: 'min',
+          value: chart.scales?.x?.min ? chart.scales.x.min.toFixed(1) : 0,
+          id: 'x',
+        },
+        {
+          name: 'max',
+          value: chart.scales?.x?.max ? chart.scales.x.max.toFixed(1) : 0,
+          id: 'x',
+        },
+        {
+          name: 'min',
+          value: chart.scales?.y?.min ? chart.scales.y.min.toFixed(1) : 0,
+          id: 'y',
+        },
+        {
+          name: 'max',
+          value: chart.scales?.y?.max ? chart.scales.y.max.toFixed(1) : 0,
+          id: 'y',
+        },
+      ],
+    });
+  };
+
+  const getScalesMaxMin = () => {
+    const chart = chartRef.current;
+    return {
+      x: {
+        min: chart?.scales?.x?.min,
+        max: chart?.scales?.x?.max,
+      },
+      y: {
+        min: chart?.scales?.y?.min,
+        max: chart?.scales?.y?.max,
+      },
+    };
+  };
+
   return (
     <div
       className={getClassName(chartStyling, styles)}
-      style={{
-        width: chartStyling.width || AUTO,
-        height: chartStyling.height || AUTO,
-      }}
+      style={
+        chartStyling.squareAspectRatio
+          ? {}
+          : {
+              width: chartStyling.width || AUTO,
+              height: chartStyling.height || AUTO,
+            }
+      }
       tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
     >
       <div className={styles.zoomForm}>
         <Controls
+          scalesMaxMin={getScalesMaxMin()}
           axes={controlsAxes}
           legendEnabled={state.legendEnabled}
           lineEnabled={state.lineEnabled}
@@ -372,6 +442,7 @@ const LineChart = (props) => {
           onClick,
           onHover,
           maintainAspectRatio: chartStyling.maintainAspectRatio,
+          aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
           animation: {
             duration: chartStyling.performanceMode
               ? ANIMATION_DURATION.NO
@@ -398,7 +469,10 @@ const LineChart = (props) => {
             zoom: {
               pan: {
                 enabled: state.panEnabled,
-                mode: shiftPressed ? PanZoomMode.Y : PanZoomMode.X,
+                mode: PanZoomMode.X,
+                onPanComplete({ chart }) {
+                  setAxisValuesInSettings(chart);
+                },
               },
               zoom: {
                 mode: PanZoomMode.X,
@@ -406,13 +480,20 @@ const LineChart = (props) => {
                   enabled: state.zoomEnabled,
                   threshold: 3,
                 },
+                onZoomComplete({ chart }) {
+                  setAxisValuesInSettings(chart);
+                },
               },
             },
             tooltip: getLineChartToolTips(options),
             legend: getLegend(options, legendClick, state),
+            [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+              .customLegendPlugin && {
+              containerID: options.legend.customLegend.customLegendContainerID,
+            },
           },
         }}
-        plugins={getPlugins(graph)}
+        plugins={getPlugins(graph, legend, state)}
       />
     </div>
   );

package/src/components/line-chart/line-chart.module.less

@@ -22,6 +22,12 @@
     height: 100%;
   }
 
+  // TODO: fix square plot scaling
+  &.squareAspectRatio {
+    max-height: 450px;
+    max-width: 450px;
+  }
+
   &:focus {
     border: 1px solid #85b7d9;
     outline: none; // Remove dotted outline on FF

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

@@ -0,0 +1,393 @@
+import React from 'react';
+import { LineChart } from './line-chart';
+import { getCustomLegendPlugin } from '../../helpers/get-custom-legend-plugin-example';
+
+const dataset1 = {
+  label: 'Dataset 1',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 5,
+      y: 25,
+    },
+    {
+      x: 10,
+      y: 60,
+    },
+    {
+      x: 15,
+      y: 90,
+    },
+    {
+      x: 20,
+      y: 120,
+    },
+    {
+      x: 25,
+      y: 150,
+    },
+  ],
+};
+
+const datasetLabelled1 = {
+  ...dataset1,
+  data: dataset1.data.map((item) => ({ ...item, label: ['Label'] })),
+};
+
+const dataset2 = {
+  label: 'Dataset 2',
+  data: [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 3,
+      y: 15,
+    },
+    {
+      x: 6,
+      y: 30,
+    },
+    {
+      x: 9,
+      y: 60,
+    },
+    {
+      x: 12,
+      y: 120,
+    },
+    {
+      x: 15,
+      y: 240,
+    },
+  ],
+};
+
+const datasetLabelled2 = {
+  ...dataset2,
+  data: dataset2.data.map((item) => ({ ...item, label: ['Label'] })),
+};
+
+const basicChart = {
+  data: {
+    datasets: [dataset1, dataset2],
+  },
+  options: {
+    title: 'Chart title',
+    chartStyling: {
+      height: 400,
+    },
+  },
+};
+
+export default {
+  title: 'LineChart',
+  component: LineChart,
+  args: {
+    chart: basicChart,
+  },
+};
+
+const Template = (args) => {
+  return (
+    <LineChart
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+    />
+  );
+};
+
+const customLegendContainerID = 'custom-legend-container';
+
+const TemplateWithCustomLegendContainer = (args) => {
+  return (
+    <>
+      <LineChart
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...args}
+      />
+      <div id={customLegendContainerID}></div>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const MinorGridlines = Template.bind({});
+MinorGridlines.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      graph: {
+        showMinorGridlines: true,
+      },
+    },
+  },
+};
+
+export const AxesLabels = Template.bind({});
+AxesLabels.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      axes: {
+        x: [
+          {
+            label: 'x-axis title here',
+          },
+        ],
+        y: [
+          {
+            label: 'y-axis title here',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const MultipleXAxes = Template.bind({});
+MultipleXAxes.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      axes: {
+        x: [
+          {
+            label: 'The X',
+            position: 'bottom',
+          },
+          {
+            label: 'The X 2',
+            position: 'top',
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const ReversedYAxis = Template.bind({});
+ReversedYAxis.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      additionalAxesOptions: {
+        reverse: true,
+      },
+    },
+  },
+};
+
+export const LogarithmicScale = Template.bind({});
+LogarithmicScale.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      additionalAxesOptions: {
+        chartScaleType: 'logarithmic',
+      },
+    },
+  },
+};
+
+export const PresetRange = Template.bind({});
+PresetRange.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      additionalAxesOptions: {
+        range: {
+          x: {
+            min: -10,
+            max: 40,
+          },
+          y: {
+            min: -10,
+            max: 180,
+          },
+        },
+      },
+    },
+  },
+};
+
+export const DataLabels = Template.bind({});
+DataLabels.args = {
+  chart: {
+    ...basicChart,
+    data: {
+      datasets: [datasetLabelled1, datasetLabelled2],
+    },
+    options: {
+      ...basicChart.options,
+      graph: {
+        showDataLabels: true,
+      },
+    },
+  },
+};
+
+export const DataLabelsInTooltips = Template.bind({});
+DataLabelsInTooltips.args = {
+  chart: {
+    ...basicChart,
+    data: {
+      datasets: [datasetLabelled1, datasetLabelled2],
+    },
+    options: {
+      ...basicChart.options,
+      tooltip: {
+        showLabelsInTooltips: true,
+      },
+    },
+  },
+};
+
+export const LegendOnRight = Template.bind({});
+LegendOnRight.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      legend: {
+        position: 'right',
+      },
+    },
+  },
+};
+
+export const Annotations = Template.bind({});
+Annotations.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      annotations: {
+        showAnnotations: true,
+        annotationsData: [
+          {
+            annotationAxis: 'y',
+            label: 'Annotation on y-axis',
+            value: 50,
+          },
+          {
+            annotationAxis: 'x',
+            label: 'Annotation on x-axis',
+            value: 10,
+          },
+          {
+            annotationAxis: 'y',
+            label: 'Diagonal annotation',
+            value: 20,
+            endValue: 170,
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const AnnotationsInLegend = Template.bind({});
+AnnotationsInLegend.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      annotations: {
+        controlAnnotation: true,
+        showAnnotations: true,
+        annotationsData: [
+          {
+            annotationAxis: 'x',
+            label: 'Annotation',
+            value: 20,
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const CustomLegend = TemplateWithCustomLegendContainer.bind({});
+CustomLegend.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: 'Custom HTML legend',
+      legend: {
+        customLegend: {
+          customLegendPlugin: getCustomLegendPlugin(customLegendContainerID),
+          customLegendContainerID,
+        },
+      },
+    },
+  },
+};
+
+export const Animation = Template.bind({});
+Animation.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartStyling: {
+        ...basicChart.options.chartStyling,
+        performanceMode: false,
+      },
+    },
+  },
+};
+
+export const CloseControlsOnOutsideClick = Template.bind({});
+CloseControlsOnOutsideClick.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartOptions: {
+        closeOnOutsideClick: true,
+      },
+    },
+  },
+};
+
+export const SquareAspectRatio = Template.bind({});
+SquareAspectRatio.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: 'Square aspect ratio',
+      chartStyling: {
+        squareAspectRatio: true,
+        maintainAspectRatio: true,
+      },
+    },
+  },
+};
+
+export const DarkMode = Template.bind({});
+DarkMode.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartStyling: {
+        ...basicChart.options.chartStyling,
+        darkMode: true,
+      },
+    },
+  },
+};

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

@@ -71,21 +71,32 @@ export const reducer = (state, action) => {
       };
     }
     case SET_AXIS_VALUE: {
-      const { name, value: nextInputValue, id } = action.payload;
-      const nextValue = isNaN(nextInputValue)
-        ? cleanNumStr(nextInputValue)
-        : toNum(nextInputValue);
-      const axis = newState.axes.find((a) => a.id === id);
-      axis.min = getAxisValue(name === 'min' ? nextValue : axis.min?.value);
-      axis.max = getAxisValue(name === 'max' ? nextValue : axis.max?.value);
-      axis.min.valid =
-        validNumber(axis.min.inputValue ?? '') &&
-        isLessThanMax(axis.min.value, axis.max.value);
-      axis.min.displayValue = axis.min.valid ? axis.min.value : undefined;
-      axis.max.valid =
-        validNumber(axis.max.inputValue ?? '') &&
-        isGreaterThanMin(axis.max.value, axis.min.value);
-      axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+      const valiateElement = (name, nextInputValue, id) => {
+        const nextValue = isNaN(nextInputValue)
+          ? cleanNumStr(nextInputValue)
+          : toNum(nextInputValue);
+        const axis = newState.axes.find((a) => a.id === id);
+        axis.min = getAxisValue(name === 'min' ? nextValue : axis.min?.value);
+        axis.max = getAxisValue(name === 'max' ? nextValue : axis.max?.value);
+        axis.min.valid =
+          validNumber(axis.min.inputValue ?? '') &&
+          isLessThanMax(axis.min.value, axis.max.value);
+        axis.min.displayValue = axis.min.valid ? axis.min.value : undefined;
+        axis.max.valid =
+          validNumber(axis.max.inputValue ?? '') &&
+          isGreaterThanMin(axis.max.value, axis.min.value);
+        axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+      };
+      if (Array.isArray(action.payload)) {
+        action.payload.forEach((element) => {
+          const { name, value: nextInputValue, id } = element;
+          valiateElement(name, nextInputValue, id);
+        });
+      } else {
+        const { name, value: nextInputValue, id } = action.payload;
+        valiateElement(name, nextInputValue, id);
+      }
+
       return newState;
     }
     case SET_POINTS_ZOOM_DEFAULTS: