@oliasoft-open-source/charts-library 2.5.18 → 2.5.20

package/package.json

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

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.5.20
+
+- Minor refactor (code cleanup)
+
+## 2.5.19
+
+- Hide irregular major axis ticks ([OW-10088](https://oliasoft.atlassian.net/browse/OW-10088))
+
 ## 2.5.18
 
 - Fixed minor gridlines when last major tick does not reach axis bounds ([OW-10296](https://oliasoft.atlassian.net/browse/OW-10296))

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

@@ -37,6 +37,7 @@ import {
   AUTO,
   COLORS,
   CUSTOM_LEGEND_PLUGIN_NAME,
+  BORDER_COLOR,
 } from '../../helpers/chart-consts';
 import {
   AxisType,
@@ -226,6 +227,9 @@ const BarChart = (props) => {
               .customLegendPlugin && {
               containerID: options.legend.customLegend.customLegendContainerID,
             },
+            chartAreaBorder: {
+              borderColor: BORDER_COLOR,
+            },
           },
         }}
         plugins={getPlugins(graph, options.legend)}

package/src/components/line-chart/get-line-chart-scales.js

@@ -38,24 +38,29 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
         }
       : {};
 
-    return additionalAxesOptions.chartScaleType === ScaleType.Logarithmic
-      ? {
-          callback: (tick) => {
-            return LOGARITHMIC_STEPS.includes(tick)
-              ? tick.toLocaleString()
-              : '';
-          },
-        }
-      : {
-          callback(val) {
-            const value = this.getLabelForValue(val);
-            return value.replaceAll(/,/g, ' ');
-          },
-          stepSize:
-            axisData.stepSize ||
-            (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
-          ...truncateAxisNumbersToDigitsCallback,
-        };
+    const ticks =
+      additionalAxesOptions.chartScaleType === ScaleType.Logarithmic
+        ? {
+            callback: (tick) => {
+              return LOGARITHMIC_STEPS.includes(tick)
+                ? tick.toLocaleString()
+                : '';
+            },
+          }
+        : {
+            callback(val) {
+              const value = this.getLabelForValue(val);
+              return value.replaceAll(/,/g, ' ');
+            },
+            stepSize:
+              axisData.stepSize ||
+              (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
+            ...truncateAxisNumbersToDigitsCallback,
+          };
+    return {
+      ...ticks,
+      includeBounds: false, //OW-10088 disable irregular axis ticks
+    };
   };
 
   return {

package/src/components/line-chart/line-chart-consts.js

@@ -4,3 +4,4 @@ export const DEFAULT_BORDER_WIDTH = 1;
 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)';

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

@@ -45,6 +45,7 @@ import {
   DEFAULT_HOVER_RADIUS,
   DEFAULT_LINE_POINT_RADIUS,
   DEFAULT_POINT_RADIUS,
+  ZOOM_BOX_BACKGROUND_COLOR,
 } from './line-chart-consts';
 
 import getAnnotation from '../../helpers/get-chart-annotation';
@@ -63,6 +64,7 @@ import {
   AUTO,
   COLORS,
   CUSTOM_LEGEND_PLUGIN_NAME,
+  BORDER_COLOR,
 } from '../../helpers/chart-consts';
 import {
   AxisType,
@@ -486,8 +488,8 @@ const LineChart = (props) => {
                     drag: {
                       enabled: state.zoomEnabled,
                       threshold: 3,
-                      backgroundColor: 'rgba(0,0,0,0.1)',
-                      borderColor: 'rgba(0,0,0,0.2)',
+                      backgroundColor: ZOOM_BOX_BACKGROUND_COLOR,
+                      borderColor: BORDER_COLOR,
                       borderWidth: 1,
                     },
                     onZoomComplete({ chart }) {
@@ -502,6 +504,9 @@ const LineChart = (props) => {
                   containerID:
                     options.legend.customLegend.customLegendContainerID,
                 },
+                chartAreaBorder: {
+                  borderColor: BORDER_COLOR,
+                },
               },
             }}
             plugins={getPlugins(graph, legend, state)}

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

@@ -79,9 +79,8 @@ export const reducer = (state, action) => {
       };
     }
     case SET_AXIS_VALUE: {
-      const valiateElement = (name, nextInputValue, id) => {
+      const validateElement = (name, nextInputValue, id) => {
         const nextValue = cleanNumStr(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);
@@ -109,11 +108,11 @@ export const reducer = (state, action) => {
       if (Array.isArray(action.payload)) {
         action.payload.forEach((element) => {
           const { name, value: nextInputValue, id } = element;
-          valiateElement(name, nextInputValue, id);
+          validateElement(name, nextInputValue, id);
         });
       } else {
         const { name, value: nextInputValue, id } = action.payload;
-        valiateElement(name, nextInputValue, id);
+        validateElement(name, nextInputValue, id);
       }
 
       return newState;

package/src/helpers/chart-border-plugin.js

@@ -0,0 +1,19 @@
+/**
+ * Chart border plugin config
+ */
+export const chartAreaBorderPlugin = {
+  id: 'chartAreaBorder',
+  beforeDraw(chart, args, options) {
+    const {
+      ctx,
+      chartArea: { left, top, width, height },
+    } = chart;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.setLineDash(options.borderDash || []);
+    ctx.lineDashOffset = options.borderDashOffset;
+    ctx.strokeRect(left, top, width, height);
+    ctx.restore();
+  },
+};

package/src/helpers/chart-consts.js

@@ -2,9 +2,9 @@ export const BORDER_WIDTH = {
   INITIAL: 2,
   HOVERED: 6,
 };
+export const BORDER_COLOR = 'rgba(0,0,0,0.1)';
 
 export const ANNOTATION_DASH = [10, 2];
-export const DEFAULT_BORDER_COLOR = 'rgba(0,0,0,0.1)';
 export const DEFAULT_FONT_SIZE = 13;
 export const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
 export const DEFAULT_COLOR = 'rgba(0,0,0,.87)';

package/src/helpers/chart-utils.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
   CUSTOM_LEGEND_PLUGIN_NAME,
-  DEFAULT_BORDER_COLOR,
+  BORDER_COLOR,
   DEFAULT_CHART_NAME,
   DEFAULT_COLOR,
   DEFAULT_FONT_FAMILY,
@@ -12,6 +12,7 @@ import {
   WHITE_COLOR_AS_DECIMAL,
 } from './chart-consts';
 import { AxisType, ChartDirection, Position } from './enums';
+import { chartAreaBorderPlugin } from './chart-border-plugin';
 
 /**
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
@@ -35,6 +36,7 @@ export const getPlugins = (graph, legend, state = null) => {
       ...legend.customLegend.customLegendPlugin,
     });
   }
+  plugins.push(chartAreaBorderPlugin);
   return plugins;
 };
 
@@ -201,5 +203,5 @@ export const setDefaultTheme = () => {
   defaults.font.size = DEFAULT_FONT_SIZE;
   defaults.font.family = DEFAULT_FONT_FAMILY;
   defaults.color = DEFAULT_COLOR;
-  defaults.borderColor = DEFAULT_BORDER_COLOR;
+  defaults.borderColor = BORDER_COLOR;
 };