@oliasoft-open-source/charts-library 2.5.2 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [

package/release-notes.md

@@ -1,6 +1,14 @@
 # Charts Library Release Notes
 
-## 2.5.1
+## 2.5.4
+
+- Fixed onPointHover event
+
+## 2.5.3
+
+- Fixed datalabels position, set labels position inside chart area
+
+## 2.5.2
 
 - Fix crashes when type a non number into the axis range - add validation in getLinechartAxis method
 

package/src/components/line-chart/datalabels-alignment/__tests__/get-alignment-condition.test.js

@@ -0,0 +1,36 @@
+import { getCondition } from '../get-alignment-condition';
+
+describe('Datalabels alignment condition', () => {
+  test('should return overLeftSide = true', () => {
+    const result = getCondition(36, 325, 36, 1204, 325);
+    expect(result).toStrictEqual({
+      overLeftSide: true,
+      overRightSide: false,
+      overBottomSide: true,
+    });
+  });
+  test('should return overRightSide = true', () => {
+    const result = getCondition(1200, 325, 36, 1204, 325);
+    expect(result).toStrictEqual({
+      overLeftSide: false,
+      overRightSide: true,
+      overBottomSide: false,
+    });
+  });
+  test('should return overBottomSide = true', () => {
+    const result = getCondition(457, 250, 36, 1204, 325);
+    expect(result).toStrictEqual({
+      overLeftSide: false,
+      overRightSide: false,
+      overBottomSide: true,
+    });
+  });
+  test('should return all false', () => {
+    const result = getCondition(789, 100, 36, 1204, 325);
+    expect(result).toStrictEqual({
+      overLeftSide: false,
+      overRightSide: false,
+      overBottomSide: false,
+    });
+  });
+});

package/src/components/line-chart/datalabels-alignment/__tests__/get-alignment-data.test.js

@@ -0,0 +1,29 @@
+import { getAlignmentData } from '../get-alignment-data';
+
+const mockedContext = {
+  chart: {
+    chartArea: {
+      left: 36,
+      right: 1204,
+      bottom: 325,
+    },
+    getDatasetMeta: jest.fn(),
+  },
+  dataIndex: 0,
+  datasetIndex: 0,
+};
+
+describe('Datalabels alignment data', () => {
+  test('should return destructured data from context', () => {
+    const result = getAlignmentData(mockedContext);
+    expect(result).toEqual(
+      expect.objectContaining({
+        x: null,
+        y: null,
+        left: 36,
+        right: 1204,
+        bottom: 325,
+      }),
+    );
+  });
+});

package/src/components/line-chart/datalabels-alignment/__tests__/get-datalabels-position.test.js

@@ -0,0 +1,21 @@
+import { getPosition } from '../get-datalabels-position';
+
+const mockedContext = {
+  chart: {
+    chartArea: {
+      left: 36,
+      right: 1204,
+      bottom: 325,
+    },
+    getDatasetMeta: jest.fn(),
+  },
+  dataIndex: 0,
+  datasetIndex: 0,
+};
+
+describe('Datalabels alignment position', () => {
+  test('should return position', () => {
+    const result = getPosition()(mockedContext);
+    expect(result).toBe('right');
+  });
+});

package/src/components/line-chart/datalabels-alignment/get-alignment-condition.js

@@ -0,0 +1,13 @@
+/** returning boolean condition depends on label position and chart area
+ *
+ * @return {object} - returning object with boolean props
+ */
+export const getCondition = (x, y, left, right, bottom) => {
+  const threshold = 100;
+  const overLeftSide = x - threshold <= left;
+  const overRightSide = x + threshold >= right;
+  const overBottomSide =
+    x + threshold >= left && x + threshold < right && y + threshold >= bottom;
+
+  return { overLeftSide, overRightSide, overBottomSide };
+};

package/src/components/line-chart/datalabels-alignment/get-alignment-data.js

@@ -0,0 +1,20 @@
+/** returning destructured data from context
+ *
+ * @return {object}
+ */
+export const getAlignmentData = (context) => {
+  const { chart = {}, dataIndex = 0, datasetIndex = 0 } = context || {};
+  const { chartArea = {} } = chart;
+  const { left = null, right = null, bottom = null } = chartArea;
+
+  const meta = chart.getDatasetMeta(datasetIndex);
+  const { x = null, y = null } = meta?.data?.[dataIndex] || {};
+
+  return {
+    x,
+    y,
+    left,
+    right,
+    bottom,
+  };
+};

package/src/components/line-chart/datalabels-alignment/get-datalabels-position.js

@@ -0,0 +1,24 @@
+import { getCondition } from './get-alignment-condition';
+import { getAlignmentData } from './get-alignment-data';
+
+/** returning position depends on condition
+ *
+ * @return {string} - position
+ */
+export const getPosition = () => {
+  return (context) => {
+    const { x, y, left, right, bottom } = getAlignmentData(context);
+    const {
+      overLeftSide = false,
+      overRightSide = false,
+      overBottomSide = false,
+    } = getCondition(x, y, left, right, bottom);
+
+    return (
+      (overLeftSide && 'right') ||
+      (overRightSide && 'left') ||
+      (overBottomSide && 'end') ||
+      'start'
+    );
+  };
+};

package/src/components/line-chart/datalabels-alignment/set-chart-line-datalabels-alignment.js

@@ -0,0 +1,19 @@
+import { getPosition } from './get-datalabels-position';
+
+/** adjusts the position of the label depends on chart area
+ *
+ * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
+ * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
+ * @return {object} - returning position, if label exist in datasets item
+ */
+export const setDataLabelsAlignment = (options) => {
+  const { graph = {} } = options || {};
+  const { showDataLabels = false } = graph;
+
+  return showDataLabels
+    ? {
+        display: true,
+        align: getPosition(),
+      }
+    : {};
+};

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useRef } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -70,6 +70,7 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
+import { setDataLabelsAlignment } from './datalabels-alignment/set-chart-line-datalabels-alignment';
 
 ChartJS.register(
   LinearScale,
@@ -93,7 +94,7 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  let pointHover = false;
+  const [hoveredPoint, setHoveredPoint] = useState(null);
   const chart = getDefaultProps(props);
   const { options, testId } = chart;
   const { headerComponent, subheaderComponent, table } = props;
@@ -231,6 +232,7 @@ const LineChart = (props) => {
             : DEFAULT_LINE_POINT_RADIUS,
         pointHoverRadius,
         pointHitRadius: line.pointHitRadius || pointHoverRadius,
+        datalabels: setDataLabelsAlignment(options),
       };
     });
     return generatedDatasets;
@@ -274,18 +276,19 @@ const LineChart = (props) => {
   };
 
   const onHover = (evt, hoveredItems, chartInstance) => {
-    if (pointHover && !hoveredItems?.length) {
-      pointHover = false;
-      if (interactions.onPointUnhover) {
-        interactions.onPointUnhover(evt);
-      }
+    if (!hoveredItems?.length && interactions.onPointUnhover && hoveredPoint) {
+      setHoveredPoint(null);
+      interactions.onPointUnhover(evt);
     }
-    if (!pointHover && hoveredItems?.length) {
-      pointHover = true;
-      if (interactions.onPointHover) {
-        const { index, datasetIndex } = hoveredItems[0];
-        const generatedDataset = generatedDatasets;
-        interactions.onPointHover(evt, datasetIndex, index, generatedDataset);
+
+    if (hoveredItems?.length && interactions.onPointHover) {
+      const { index, datasetIndex } = hoveredItems[0];
+      const dataset = generatedDatasets[datasetIndex];
+      const point = dataset?.data[index];
+
+      if (point && hoveredPoint !== point) {
+        setHoveredPoint(point);
+        interactions.onPointHover(evt, datasetIndex, index, generatedDatasets);
       }
     }
   };

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

@@ -593,3 +593,22 @@ SquareAspectRatioFillContainer.decorators = [
     </div>
   ),
 ];
+
+export const OnPointHover = Template.bind({});
+OnPointHover.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      interactions: {
+        onPointHover: (evt, datasetIndex, pointIndex, datasets) => {
+          console.log({ evt });
+          console.log(datasets[datasetIndex].data[pointIndex]);
+        },
+        onPointUnhover: () => {
+          console.log('No point hovered');
+        },
+      },
+    },
+  },
+};