@oliasoft-open-source/charts-library 2.5.1 → 2.5.3

package/package.json

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

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 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
+
 ## 2.5.1
 
 - Added resize delay for performance

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/get-line-chart-scales.js

@@ -57,8 +57,12 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
     reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
     suggestedMax: additionalAxesOptions.suggestedMax,
     suggestedMin: additionalAxesOptions.suggestedMin,
-    min: stateAxis.min?.value || additionalAxesOptions?.range?.[axisType]?.min,
-    max: stateAxis.max?.value || additionalAxesOptions?.range?.[axisType]?.max,
+    min: stateAxis.min?.valid
+      ? stateAxis.min?.value
+      : additionalAxesOptions?.range?.[axisType]?.min,
+    max: stateAxis.max?.valid
+      ? stateAxis.max?.value
+      : additionalAxesOptions?.range?.[axisType]?.max,
     title: {
       display: axisData.label?.length,
       text: axisData.label,
@@ -104,6 +108,7 @@ const getLineChartScales = (options, state) => {
   const yAxes = hasMultipleYAxes
     ? getLineChartAxes(options, AxisType.Y, state)
     : { y: getLineChartAxis(options, AxisType.Y, state) };
+
   return {
     ...xAxes,
     ...yAxes,

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

@@ -70,6 +70,7 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
+import { setDataLabelsAlignment } from './datalabels-alignment/set-chart-line-datalabels-alignment';
 
 ChartJS.register(
   LinearScale,
@@ -231,6 +232,7 @@ const LineChart = (props) => {
             : DEFAULT_LINE_POINT_RADIUS,
         pointHoverRadius,
         pointHitRadius: line.pointHitRadius || pointHoverRadius,
+        datalabels: setDataLabelsAlignment(options),
       };
     });
     return generatedDatasets;