@oliasoft-open-source/charts-library 2.14.1 → 2.16.0-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.14.1",
+  "version": "2.16.0-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,7 @@
 # Charts Library Release Notes
 
-## 2.14.1 
-- Fix save initAxesRange when dataset changed by parent component([OW-11332](https://oliasoft.atlassian.net/browse/OW-11332))
+## 2.16.0
+- Added common chart area text plugin
 
 ## 2.14.0
 - Refactored line chart, for better performance, readable and reduce not needed re-renders

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

@@ -38,6 +38,17 @@ export const useChartOptions = ({
 }) => {
   const {
     interactions: { onAnimationComplete },
+    annotations: {
+      labelAnnotation: {
+        showLabel,
+        text,
+        fontSize,
+        xOffset,
+        yOffset,
+        maxWidth,
+        lineHeight,
+      },
+    },
   } = options;
 
   const {
@@ -122,6 +133,15 @@ export const useChartOptions = ({
     chartAreaBorder: {
       borderColor: BORDER_COLOR,
     },
+    chartAreaText: {
+      showLabel,
+      text,
+      fontSize,
+      xOffset,
+      yOffset,
+      maxWidth,
+      lineHeight,
+    },
     ...dragData,
   };
 

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

@@ -72,7 +72,18 @@ 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),
+          ]),
+          fontSize: PropTypes.number,
+          xOffset: PropTypes.number,
+          yOffset: PropTypes.number,
+          maxWidth: PropTypes.number,
+          lineHeight: PropTypes.number,
+        }),
         showAnnotations: PropTypes.bool,
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
@@ -201,7 +212,21 @@ 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 ?? '',
+          fontSize:
+            props.chart.options.annotations.labelAnnotation?.fontSize ?? 12,
+          xOffset:
+            props.chart.options.annotations.labelAnnotation?.xOffset ?? 5,
+          yOffset:
+            props.chart.options.annotations.labelAnnotation?.yOffset ?? 10,
+          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';
 
 ChartJS.register(
   LinearScale,
@@ -44,6 +45,7 @@ ChartJS.register(
   dataLabelsPlugin,
   annotationPlugin,
   dragDataPlugin,
+  chartAreaTextPlugin,
 );
 
 /**
@@ -80,14 +82,7 @@ const LineChart = (props) => {
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
   // Call the custom hooks.
-  useChartState({
-    chartRef,
-    options,
-    state,
-    generatedDatasets,
-    dispatch,
-    persistenceId,
-  });
+  useChartState({ chartRef, options, state, dispatch, persistenceId });
 
   const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
     useChartFunctions({

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

@@ -0,0 +1,117 @@
+const WORD_SEPARATOR = ' ';
+const 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).split(WORD_SEPARATOR)
+    : text.split(WORD_SEPARATOR);
+};
+
+/**
+ * Counts the number of lines required to render the words within the specified maxWidth.
+ * It takes into consideration the context (ctx) provided to calculate the text width.
+ *
+ * @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 {number} The number of lines required.
+ */
+const countLines = (words, maxWidth, ctx) => {
+  let line = '';
+  let lines = 0;
+
+  for (const word of words) {
+    const testLine = `${line}${word}${WORD_SEPARATOR}`;
+    const { width: testWidth } = ctx.measureText(testLine);
+
+    if (testWidth > maxWidth) {
+      line = `${word}${WORD_SEPARATOR}`;
+      lines++;
+    } else {
+      line = testLine;
+    }
+  }
+  lines++; // Add the last line
+  return lines;
+};
+
+const drawText = (ctx, lines, lineHeight, x, y) => {
+  lines.forEach((line, index) => {
+    ctx.fillText(line, x, y - (lines.length - 1 - index) * lineHeight);
+  });
+};
+
+export const chartAreaTextPlugin = {
+  id: 'chartAreaText',
+
+  beforeLayout: (chart, args, options) => {
+    const { showLabel, text, fontStyle, fontSize, maxWidth, lineHeight } =
+      options;
+    const { ctx } = chart;
+
+    if (!showLabel || !text) return;
+
+    ctx.save();
+    ctx.font = `${fontStyle} ${fontSize}px Arial`;
+
+    const words = getWords(text);
+    const lines = countLines(words, maxWidth, ctx);
+
+    // Calculate and set the padding needed at the bottom of the chart
+    const paddingNeeded = lines * lineHeight + lineHeight;
+    chart.options.layout.padding.bottom = paddingNeeded;
+
+    ctx.restore();
+  },
+
+  beforeDraw: (chart, args, options) => {
+    const { showLabel, text, fontSize, xOffset, yOffset, lineHeight } = options;
+    const { ctx, chartArea } = chart;
+
+    if (!showLabel || !text) return;
+
+    // Determine the maxWidth based on chartArea width
+    const maxWidth =
+      chartArea.width < 500
+        ? 100
+        : chartArea.width < 700
+        ? 200
+        : options.maxWidth;
+
+    // Split the text into words and calculate the number of lines
+    const words = getWords(text);
+    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
+
+    // Wrap the text based on the maxWidth and draw it on the canvas
+    ctx.save();
+    ctx.font = `${fontSize}px Arial`;
+    ctx.fillStyle = TRANSPARENT;
+    ctx.textAlign = 'right';
+
+    const y = chartArea.bottom - yOffset;
+    const x = chartArea.right - xOffset; // Subtract margin on the right
+
+    drawText(ctx, lines, lineHeight, x, y);
+
+    ctx.restore();
+  },
+};

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

@@ -75,38 +75,26 @@ const useUpdateAxesRanges = (range, dispatch) => {
 };
 
 /**
- * A custom hook to save the initial axes ranges of a chart when the generated datasets change.
+ * Hook for saving the initial axes ranges in the chart state.
  *
- * @param {Object} chartRef - A reference to the chart object.
- * @param {Array} axes - An array of axes configurations.
- * @param {Array} generatedDatasets - An array of generated datasets for the chart.
- * @param {Function} dispatch - A dispatch function from the useContext hook for managing the state.
+ * @param chartRef - The reference to the chart.
+ * @param axes - The axes data.
+ * @param dispatch - The dispatch function for state management.
  */
-const useSaveInitialAxesRanges = (
-  chartRef,
-  axes,
-  generatedDatasets,
-  dispatch,
-) => {
-  const prevGeneratedDatasets = useRef();
-
+const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
   const saveInitialAxesRanges = useCallback(() => {
-    if (
-      chartRef &&
-      !isEqual(generatedDatasets, prevGeneratedDatasets.current)
-    ) {
+    if (chartRef) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges },
       });
-      prevGeneratedDatasets.current = generatedDatasets;
     }
-  }, [chartRef, generatedDatasets]);
+  }, [chartRef]);
 
   useEffect(() => {
     saveInitialAxesRanges();
-  }, [saveInitialAxesRanges, generatedDatasets]);
+  }, [saveInitialAxesRanges]);
 };
 
 /**
@@ -115,7 +103,6 @@ const useSaveInitialAxesRanges = (
  * @param chartRef - The reference to the chart.
  * @param options - The chart options.
  * @param state - The chart state.
- * @param {Array} generatedDatasets - An array of generated datasets for the chart.
  * @param dispatch - The dispatch function for state management.
  * @param persistenceId - The chart persistenceId.
  */
@@ -123,7 +110,6 @@ export const useChartState = ({
   chartRef,
   options,
   state,
-  generatedDatasets,
   dispatch,
   persistenceId,
 }) => {
@@ -137,5 +123,5 @@ export const useChartState = ({
   useStoreChartStateInStorage(memoState, persistenceId);
   useToggleCustomLegendVisibility(memoState, memoOptions);
   useUpdateAxesRanges(range, dispatch);
-  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
+  useSaveInitialAxesRanges(chartRef, axes, dispatch);
 };

package/src/helpers/chart-interface.ts

@@ -26,12 +26,16 @@ export interface IChartAnnotationsData {
 };
 
 export interface ILabelAnnotation {
-    content: string[];
-    fontSize: number;
-    xAdjust: number;
-    yAdjust: number;
+    showLabel: boolean;
+    text: string | 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;