@oliasoft-open-source/charts-library 2.16.0-beta-3 → 2.16.0-beta-5

package/package.json

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

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

@@ -2,7 +2,7 @@ import { TextLabelPosition } from './plugin-constants';
 import { AlignOptions } from '../../../helpers/enums';
 
 const WORD_SEPARATOR = ' ';
-const TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
+const SEMI_TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
 
 /**
  * Splits the input text into words based on the predefined WORD_SEPARATOR.
@@ -17,36 +17,6 @@ const getWords = (text) => {
   );
 };
 
-/**
- * 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) => {
-  const lineCount = words.reduce(
-    (lines, word) => {
-      const testLine = `${lines.currentLine}${word}${WORD_SEPARATOR}`;
-      const { width: testWidth } = ctx.measureText(testLine);
-
-      if (testWidth > maxWidth) {
-        return {
-          lineCount: lines.lineCount + 1,
-          currentLine: `${word}${WORD_SEPARATOR}`,
-        };
-      } else {
-        return { lineCount: lines.lineCount, currentLine: testLine };
-      }
-    },
-    { lineCount: 0, currentLine: '' },
-  );
-
-  return lineCount.lineCount + 1; // Add the last line
-};
-
 /**
  * Renders the lines of text on the canvas context.
  * It iterates over the array of lines and renders each line with the provided styling.
@@ -120,7 +90,8 @@ const getLegendDimensions = (chart) => {
  * @returns {number[]} An array with the X and Y coordinates.
  */
 const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
-  const { chartArea } = chart;
+  const { chartArea, width } = chart;
+  const temporaryChartAreaRight = width - 8;
 
   const { legendWidth, legendHeight } = getLegendDimensions(chart);
 
@@ -137,7 +108,7 @@ const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
       ];
     case TextLabelPosition.TOP_RIGHT:
       return [
-        chartArea.right - xOffset,
+        temporaryChartAreaRight - xOffset, //replace within chartArea.right when resize bug will be fixed
         chartArea.top + yOffset + legendHeight,
       ];
     case TextLabelPosition.MIDDLE_LEFT:
@@ -152,7 +123,7 @@ const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
       ];
     case TextLabelPosition.MIDDLE_RIGHT:
       return [
-        chartArea.right - xOffset - legendWidth,
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
         chartArea.top + chartArea.height / 2,
       ];
     case TextLabelPosition.BOTTOM_LEFT:
@@ -168,7 +139,7 @@ const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
     case TextLabelPosition.BOTTOM_RIGHT:
     default:
       return [
-        chartArea.right - xOffset - legendWidth,
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
         chartArea.bottom - yOffset - legendHeight,
       ];
   }
@@ -190,32 +161,55 @@ const getTextAlign = (position) => {
   }
 };
 
-export const chartAreaTextPlugin = {
-  id: 'chartAreaText',
+/**
+ * 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;
+};
 
-  beforeLayout: (chart, args, options) => {
-    const { showLabel, text, fontStyle, fontSize, maxWidth, lineHeight } =
-      options;
-    const { ctx } = chart;
+/**
+ * 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;
 
-    if (!showLabel || !text) return;
+  const words = getWords(text);
+  const wrappedLines = wrapText(words, maxWidth, ctx);
 
-    ctx.save();
-    ctx.font = `${fontStyle} ${fontSize}px Arial`;
+  ctx.save();
+  ctx.font = `${fontSize}px Arial`;
+  ctx.fillStyle = SEMI_TRANSPARENT;
+  ctx.textAlign = getTextAlign(position);
 
-    const words = getWords(text);
-    const lines = countLines(words, maxWidth, ctx);
+  drawText(ctx, wrappedLines, lineHeight, x, y, position);
 
-    // Calculate and set the padding needed at the top or bottom of the chart
-    const paddingNeeded = lines * lineHeight + lineHeight;
-    if (options.position.includes('top')) {
-      chart.options.layout.padding.top = paddingNeeded;
-    } else {
-      chart.options.layout.padding.bottom = paddingNeeded;
-    }
+  ctx.restore();
+};
 
-    ctx.restore();
-  },
+export const chartAreaTextPlugin = {
+  id: 'chartAreaText',
 
   beforeDraw: (chart, args, options) => {
     const {
@@ -235,33 +229,18 @@ export const chartAreaTextPlugin = {
     // Determine the maxWidth based on chartArea width
     const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
 
-    // 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 = AlignOptions.Right;
-
+    // Get the position coordinates
     const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
-    ctx.textAlign = getTextAlign(position);
 
-    drawText(ctx, lines, lineHeight, x, y, position);
-
-    ctx.restore();
+    // Render the wrapped text
+    renderWrappedText(ctx, {
+      text,
+      maxWidth,
+      fontSize,
+      lineHeight,
+      x,
+      y,
+      position,
+    });
   },
 };