@oliasoft-open-source/charts-library 2.17.0-beta-3 → 2.17.1-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.17.0-beta-3",
+  "version": "2.17.1-beta-1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {

package/release-notes.md

@@ -1,7 +1,13 @@
 # Charts Library Release Notes
 
+## 2.17.1
+- Added debounce to prevent maximum call stack size exceeded
+
 ## 2.17.0
-- Added initialize logic, for improve getTranslations
+- Added initialize logic, for improve translations
+
+## 2.16.0
+- Added common chart area text plugin
 
 ## 2.15.0
 - Added translation, by provider handled([OW-11237](https://oliasoft.atlassian.net/browse/OW-11237))

package/src/components/line-chart/hooks/use-chart-options.js

@@ -38,6 +38,19 @@ export const useChartOptions = ({
 }) => {
   const {
     interactions: { onAnimationComplete },
+    annotations: {
+      labelAnnotation: {
+        showLabel,
+        text,
+        position,
+        fontSize,
+        xOffset,
+        yOffset,
+        maxWidth,
+        lineHeight,
+      },
+    },
+    chartStyling: { layoutPadding },
   } = options;
 
   const {
@@ -122,11 +135,24 @@ export const useChartOptions = ({
     chartAreaBorder: {
       borderColor: BORDER_COLOR,
     },
+    chartAreaText: {
+      showLabel,
+      text,
+      position,
+      fontSize,
+      xOffset,
+      yOffset,
+      maxWidth,
+      lineHeight,
+    },
     ...dragData,
   };
 
   return useMemo(
     () => ({
+      layout: {
+        padding: layoutPadding,
+      },
       onHover: onHover(hoveredPoint, setHoveredPoint),
       maintainAspectRatio: options.chartStyling.maintainAspectRatio,
       aspectRatio: options.chartStyling.squareAspectRatio ? 1 : null,

package/src/components/line-chart/hooks/use-chart-plugins.js

@@ -1,17 +1,26 @@
 import { useCallback, useMemo } from 'react';
+import { debounce } from 'lodash';
 import { getPlugins } from '../../../helpers/chart-utils';
 import { DOUBLE_CLICK } from '../constants/line-chart-consts';
 
 export const useChartPlugins = ({ options, resetZoom }) => {
   const { graph, legend } = options;
+
+  const debouncedResetZoom = useCallback(
+    debounce(() => {
+      resetZoom();
+    }, 100), // 300ms debounce delay
+    [resetZoom],
+  );
+
   const handleDoubleClick = useCallback(
     (chart, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
-        resetZoom();
+        debouncedResetZoom();
       }
     },
-    [resetZoom],
+    [debouncedResetZoom],
   );
 
   return useMemo(() => {

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

@@ -1,14 +1,14 @@
 import { INIT_KEYS } from '../constants/line-chart-consts';
 import { setConfig } from './config';
-import { isPrimitiveValue } from '../utils/line-chart-utils';
 import { getTranslations } from '../utils/translations/get-translations';
+import { isPrimitiveValue } from '../utils/line-chart-utils';
 
 /**
  * Initialize the charts library with the provided configurations.
  * This function will store the configuration options in a config object.
  * @param {object} options - An object containing the configuration options for the library.
- * @param {object} options.getTranslations - The getTranslations to be used in the library.
- * @param {string} options.languageKey - The language key to be stored in the config object, used for getTranslations.
+ * @param {object} options.translations - The translations to be used in the library.
+ * @param {string} options.languageKey - The language key to be stored in the config object, used for translations.
  * @param {...object} options - Any additional options to be stored in the config object.
  */
 export const initializeLineChart = ({ languageKey = 'en', ...options }) => {

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

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { TextLabelPosition } from './plugins/plugin-constants';
 
 export const LineChartPropTypes = {
   table: PropTypes.node,
@@ -59,6 +60,15 @@ export const LineChartPropTypes = {
         staticChartHeight: PropTypes.bool,
         performanceMode: PropTypes.bool,
         squareAspectRatio: PropTypes.bool,
+        layoutPadding: PropTypes.oneOfType([
+          PropTypes.number,
+          PropTypes.shape({
+            top: PropTypes.number,
+            bottom: PropTypes.number,
+            left: PropTypes.number,
+            right: PropTypes.number,
+          }),
+        ]),
       }),
       tooltip: PropTypes.shape({
         tooltips: PropTypes.bool,
@@ -72,7 +82,19 @@ export const LineChartPropTypes = {
         showMinorGridlines: PropTypes.bool,
       }),
       annotations: PropTypes.shape({
-        labelAnnotation: PropTypes.object,
+        labelAnnotation: PropTypes.shape({
+          showLabel: PropTypes.bool,
+          text: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+          ]),
+          position: PropTypes.string,
+          fontSize: PropTypes.number,
+          xOffset: PropTypes.number,
+          yOffset: PropTypes.number,
+          maxWidth: PropTypes.number,
+          lineHeight: PropTypes.number,
+        }),
         showAnnotations: PropTypes.bool,
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
@@ -93,7 +115,7 @@ export const LineChartPropTypes = {
       }),
       legend: PropTypes.shape({
         display: PropTypes.bool,
-        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
         align: PropTypes.oneOf(['start', 'center', 'end']),
         customLegend: PropTypes.shape({
           customLegendPlugin: PropTypes.object,
@@ -185,6 +207,12 @@ export const getDefaultProps = (props) => {
           props.chart.options.chartStyling.performanceMode ?? true,
         squareAspectRatio:
           props.chart.options.chartStyling.squareAspectRatio || false,
+        layoutPadding: props.chart.options.chartStyling.layoutPadding || {
+          top: 0,
+          bottom: 20,
+          left: 0,
+          right: 0,
+        },
       },
       tooltip: {
         tooltips: props.chart.options.tooltip.tooltips ?? true,
@@ -201,7 +229,24 @@ export const getDefaultProps = (props) => {
           props.chart.options.graph.showMinorGridlines || false,
       },
       annotations: {
-        labelAnnotation: props.chart.options.annotations.labelAnnotation || {},
+        labelAnnotation: {
+          showLabel:
+            props.chart.options.annotations.labelAnnotation?.showLabel ?? false,
+          text: props.chart.options.annotations.labelAnnotation?.text ?? '',
+          position:
+            props.chart.options.annotations.labelAnnotation?.position ??
+            TextLabelPosition.BOTTOM_RIGHT,
+          fontSize:
+            props.chart.options.annotations.labelAnnotation?.fontSize ?? 12,
+          xOffset:
+            props.chart.options.annotations.labelAnnotation?.xOffset ?? 5,
+          yOffset:
+            props.chart.options.annotations.labelAnnotation?.yOffset ?? 5,
+          maxWidth:
+            props.chart.options.annotations.labelAnnotation?.maxWidth ?? 300,
+          lineHeight:
+            props.chart.options.annotations.labelAnnotation?.lineHeight ?? 12,
+        },
         showAnnotations:
           props.chart.options.annotations.showAnnotations ?? false,
         controlAnnotation:

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

@@ -29,6 +29,7 @@ import { useChartOptions } from './hooks/use-chart-options';
 import { useChartPlugins } from './hooks/use-chart-plugins';
 import { generateKey } from './utils/line-chart-utils';
 import { useChartState } from './state/use-chart-state';
+import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
 import { getConfig } from './initialize/config';
 
 ChartJS.register(
@@ -45,6 +46,7 @@ ChartJS.register(
   dataLabelsPlugin,
   annotationPlugin,
   dragDataPlugin,
+  chartAreaTextPlugin,
 );
 
 /**
@@ -56,7 +58,6 @@ const LineChart = (props) => {
   const chartRef = useRef(null);
   const { table } = props;
   const { translations, languageKey } = getConfig();
-
   const chart = getDefaultProps(props);
   const {
     data: { datasets },

package/src/components/line-chart/plugins/chart-area-text-plugin.js

@@ -0,0 +1,246 @@
+import { TextLabelPosition } from './plugin-constants';
+import { AlignOptions } from '../../../helpers/enums';
+
+const WORD_SEPARATOR = ' ';
+const SEMI_TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
+
+/**
+ * Splits the input text into words based on the predefined WORD_SEPARATOR.
+ * If the input is an array, it first joins the array and then splits it.
+ *
+ * @param {string | string[]} text - The text to split into words.
+ * @returns {string[]} An array of words.
+ */
+const getWords = (text) => {
+  return (Array.isArray(text) ? text.join(WORD_SEPARATOR) : text).split(
+    WORD_SEPARATOR,
+  );
+};
+
+/**
+ * Renders the lines of text on the canvas context.
+ * It iterates over the array of lines and renders each line with the provided styling.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to draw on.
+ * @param {string[]} lines - The array of lines to be rendered.
+ * @param {number} lineHeight - The height of each line.
+ * @param {number} x - The x-coordinate of the starting position.
+ * @param {number} y - The y-coordinate of the starting position.
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
+ */
+const drawText = (ctx, lines, lineHeight, x, y, position) => {
+  lines.forEach((line, index) => {
+    const lineY = position.includes('top')
+      ? y + lineHeight * (index + 1) - 5
+      : y - (lines.length - 1 - index) * lineHeight;
+    ctx.fillText(line, x, lineY);
+  });
+};
+
+/**
+ * Calculates the maximum width for the text based on the initial maximum width
+ * and the chart area width.
+ * @param {number} initialMaxWidth - The initial maximum width.
+ * @param {number} chartAreaWidth - The width of the chart area.
+ * @returns {number} The updated maximum width.
+ */
+const calculateMaxWidth = (initialMaxWidth, chartAreaWidth) => {
+  const factorMiddle = 0.5;
+  const factorSmall = 0.7;
+  const maxWidthFactor =
+    chartAreaWidth < 500
+      ? factorMiddle
+      : chartAreaWidth < 700
+      ? factorSmall
+      : 1;
+  return initialMaxWidth * maxWidthFactor;
+};
+
+/**
+ * Determines the legend dimensions (width and height) based on its position.
+ *
+ * @param {object} chart - The Chart.js chart object.
+ * @returns {object} An object containing the legend width and height.
+ */
+const getLegendDimensions = (chart) => {
+  const { legend } = chart;
+
+  const legendWidth =
+    legend && legend.display && legend.options.position === 'left'
+      ? legend.width + legend.options.labels.padding * 2
+      : 0;
+
+  const legendHeight =
+    legend &&
+    legend.display &&
+    (legend.options.position === 'top' || legend.options.position === 'bottom')
+      ? legend.height + legend.options.labels.padding * 2
+      : 0;
+
+  return { legendWidth, legendHeight };
+};
+
+/**
+ * Determines the X and Y coordinates for the provided position.
+ *
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
+ * @param {object} chart - The Chart.js chart object.
+ * @param {number} xOffset - The horizontal offset from the specified position.
+ * @param {number} yOffset - The vertical offset from the specified position.
+ * @returns {number[]} An array with the X and Y coordinates.
+ */
+const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
+  const { chartArea, width } = chart;
+  const temporaryChartAreaRight = width - 8;
+
+  const { legendWidth, legendHeight } = getLegendDimensions(chart);
+
+  switch (position) {
+    case TextLabelPosition.TOP_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.TOP_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.TOP_RIGHT:
+      return [
+        temporaryChartAreaRight - xOffset, //replace within chartArea.right when resize bug will be fixed
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.MIDDLE_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.MIDDLE_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.MIDDLE_RIGHT:
+      return [
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.BOTTOM_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+    case TextLabelPosition.BOTTOM_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+    case TextLabelPosition.BOTTOM_RIGHT:
+    default:
+      return [
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+  }
+};
+
+/**
+ * Determines the appropriate text alignment based on the position provided.
+ *
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
+ * @returns {string} The text alignment ('left', 'center', or 'right').
+ */
+const getTextAlign = (position) => {
+  if (position.includes(AlignOptions.Center)) {
+    return AlignOptions.Center;
+  } else if (position.includes(AlignOptions.Left)) {
+    return AlignOptions.Left;
+  } else {
+    return AlignOptions.Right;
+  }
+};
+
+/**
+ * Wraps the text into lines based on the maxWidth provided.
+ *
+ * @param {string[]} words - The array of words to be processed.
+ * @param {number} maxWidth - The maximum width allowed for the text.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to measure the text width.
+ * @returns {string[]} An array of wrapped lines.
+ */
+const wrapText = (words, maxWidth, ctx) => {
+  let line = '';
+  let lines = [];
+  for (let i = 0; i < words.length; i++) {
+    const testLine = `${line}${words[i]}${WORD_SEPARATOR}`;
+    const { width: testWidth } = ctx.measureText(testLine);
+    if (testWidth > maxWidth) {
+      lines.push(line.trim());
+      line = `${words[i]}${WORD_SEPARATOR}`;
+    } else {
+      line = testLine;
+    }
+  }
+  lines.push(line.trim()); // Add the last line
+  return lines;
+};
+
+/**
+ * Renders the wrapped text on the canvas context.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to draw on.
+ * @param {object} options - The options object containing text, maxWidth, fontSize, lineHeight, position, and coordinates (x, y).
+ */
+const renderWrappedText = (ctx, options) => {
+  const { text, maxWidth, fontSize, lineHeight, x, y, position } = options;
+
+  const words = getWords(text);
+  const wrappedLines = wrapText(words, maxWidth, ctx);
+
+  ctx.save();
+  ctx.font = `${fontSize}px Arial`;
+  ctx.fillStyle = SEMI_TRANSPARENT;
+  ctx.textAlign = getTextAlign(position);
+
+  drawText(ctx, wrappedLines, lineHeight, x, y, position);
+
+  ctx.restore();
+};
+
+export const chartAreaTextPlugin = {
+  id: 'chartAreaText',
+
+  beforeDraw: (chart, args, options) => {
+    const {
+      showLabel,
+      text,
+      fontSize,
+      xOffset,
+      yOffset,
+      lineHeight,
+      maxWidth: initialMaxWidth,
+      position,
+    } = options;
+    const { ctx, chartArea } = chart;
+
+    if (!showLabel || !text) return;
+
+    // Determine the maxWidth based on chartArea width
+    const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
+
+    // Get the position coordinates
+    const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
+
+    // Render the wrapped text
+    renderWrappedText(ctx, {
+      text,
+      maxWidth,
+      fontSize,
+      lineHeight,
+      x,
+      y,
+      position,
+    });
+  },
+};

package/src/components/line-chart/plugins/plugin-constants.js

@@ -0,0 +1,11 @@
+export const TextLabelPosition = {
+  TOP_LEFT: 'top-left',
+  TOP_CENTER: 'top-center',
+  TOP_RIGHT: 'top-right',
+  MIDDLE_LEFT: 'middle-left',
+  MIDDLE_CENTER: 'middle-center',
+  MIDDLE_RIGHT: 'middle-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_CENTER: 'bottom-center',
+  BOTTOM_RIGHT: 'bottom-right',
+};

package/src/helpers/chart-interface.ts

@@ -26,12 +26,17 @@ export interface IChartAnnotationsData {
 };
 
 export interface ILabelAnnotation {
-    content: string[];
-    fontSize: number;
-    xAdjust: number;
-    yAdjust: number;
+    showLabel: boolean;
+    text: string | string[];
+    position?: string
+    fontSize?: number;
+    xOffset?: number
+    yOffset?: number
+    maxWidth?: number
+    lineHeight?: number
 }
 
+
 export interface IChartAnnotations {
     showAnnotations: boolean;
     controlAnnotation: boolean;

package/src/helpers/chart-utils.js

@@ -1,7 +1,7 @@
 import { round } from '@oliasoft-open-source/units';
 import { defaults } from 'chart.js';
 import cx from 'classnames';
-import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
+import { chartMinorGridlinesPlugin } from '../components/line-chart/plugins/line-chart.minor-gridlines-plugin';
 import {
   BORDER_COLOR,
   CUSTOM_LEGEND_PLUGIN_NAME,

package/src/helpers/get-chart-annotation.js

@@ -86,37 +86,6 @@ const generateAnnotations = (options, state) => {
   return annotations;
 };
 
-/**
- * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
- * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
- * @return {{label1: {}}}
- */
-const getLabelAnnotation = (options) => {
-  const { annotations = {} } = options;
-  const { labelAnnotation = {} } = annotations;
-  const isDarkModeOn = options.chartStyling.darkMode || false;
-  const {
-    content = [],
-    xAdjust = -200,
-    yAdjust = 120,
-    fontSize = 12,
-  } = labelAnnotation;
-
-  return {
-    label1: {
-      type: 'label',
-      xAdjust,
-      yAdjust,
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      color: isDarkModeOn && 'rgba(255, 255, 255, 1)',
-      content,
-      font: {
-        size: fontSize,
-      },
-    },
-  };
-};
-
 /**
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartOptions |
  * import('../components/line-chart/line-chart.interface').ILineChartOptions} options - chart options object
@@ -124,20 +93,14 @@ const getLabelAnnotation = (options) => {
  * @return {{annotations: []}}
  */
 const getAnnotation = (options, state) => {
-  const { annotations } = options;
-  const isAnnotationShown = annotations?.showAnnotations;
-  const isAnnotationDataProvided = annotations?.annotationsData?.length;
+  const { showAnnotations, annotationsData } = options.annotations || {};
+  const shouldGenerateAnnotations = showAnnotations && annotationsData?.length;
 
-  const formAnnotation =
-    isAnnotationShown && isAnnotationDataProvided
-      ? {
-          ...getLabelAnnotation(options),
-          ...generateAnnotations(options, state),
-        }
-      : null;
+  const annotations = shouldGenerateAnnotations
+    ? generateAnnotations(options, state)
+    : null;
 
-  return {
-    annotations: formAnnotation,
-  };
+  return { annotations };
 };
+
 export default getAnnotation;