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

package/index.js

@@ -5,6 +5,7 @@
 import ScatterChart from './src/components/scatter-chart/scatter-chart';
 
 export { LineChart } from './src/components/line-chart/line-chart';
+export { initializeLineChart } from './src/components/line-chart/utils/initialize/initialize-line-chart';
 
 export { PieChart } from './src/components/pie-chart/pie-chart';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.16.0-beta-3",
+  "version": "2.17.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.16.0
-- Added common chart area text plugin
+## 2.17.0
+- Added initialize logic, for improve translations
 
 ## 2.15.0
 - Added translation, by provider handled([OW-11237](https://oliasoft.atlassian.net/browse/OW-11237))

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

@@ -6,3 +6,6 @@ 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)';
 export const DOUBLE_CLICK = 'dblclick';
+export const INIT_KEYS = {
+  TRANSLATIONS: 'translations',
+};

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

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

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

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { TextLabelPosition } from './plugins/plugin-constants';
 
 export const LineChartPropTypes = {
   table: PropTypes.node,
@@ -73,19 +72,7 @@ export const LineChartPropTypes = {
         showMinorGridlines: PropTypes.bool,
       }),
       annotations: PropTypes.shape({
-        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,
-        }),
+        labelAnnotation: PropTypes.object,
         showAnnotations: PropTypes.bool,
         controlAnnotation: PropTypes.bool,
         annotationsData: PropTypes.arrayOf(
@@ -106,7 +93,7 @@ export const LineChartPropTypes = {
       }),
       legend: PropTypes.shape({
         display: PropTypes.bool,
-        position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+        position: PropTypes.oneOf(['top', 'bottom', 'right']),
         align: PropTypes.oneOf(['start', 'center', 'end']),
         customLegend: PropTypes.shape({
           customLegendPlugin: PropTypes.object,
@@ -214,24 +201,7 @@ export const getDefaultProps = (props) => {
           props.chart.options.graph.showMinorGridlines || false,
       },
       annotations: {
-        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,
-        },
+        labelAnnotation: props.chart.options.annotations.labelAnnotation || {},
         showAnnotations:
           props.chart.options.annotations.showAnnotations ?? false,
         controlAnnotation:

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

@@ -29,8 +29,8 @@ 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 { getTranslations } from './utils/get-translations/get-translations';
-import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
+import { getConfig } from './utils/initialize/initialize-line-chart';
+import { INIT_KEYS } from './constants/line-chart-consts';
 
 ChartJS.register(
   LinearScale,
@@ -46,7 +46,6 @@ ChartJS.register(
   dataLabelsPlugin,
   annotationPlugin,
   dragDataPlugin,
-  chartAreaTextPlugin,
 );
 
 /**
@@ -57,7 +56,7 @@ const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
   const { table, translations: translationsRaw } = props;
-  const translations = getTranslations(translationsRaw);
+  const translations = getConfig(INIT_KEYS.TRANSLATIONS);
   const chart = getDefaultProps(props);
   const {
     data: { datasets },
@@ -93,14 +92,13 @@ const LineChart = (props) => {
     persistenceId,
   });
 
-  const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
-    useChartFunctions({
-      chartRef,
-      state,
-      options,
-      dispatch,
-      generatedDatasets,
-    });
+  const { resetZoom, handleKeyDown, handleKeyUp } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+  });
 
   const useOptions = useChartOptions({
     chartRef,

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

@@ -0,0 +1,28 @@
+import { getTranslations } from '../get-translations/get-translations';
+import { INIT_KEYS } from '../../constants/line-chart-consts';
+
+const config = {
+  [INIT_KEYS.TRANSLATIONS]: getTranslations(),
+};
+
+/**
+ * Retrieve the value for the given key from the config object.
+ * @param {string} key - The key to access the corresponding value in the config object.
+ * @returns {*} - The value associated with the given key in the config object.
+ */
+export const getConfig = (key) => config[key];
+
+/**
+ * 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.
+ */
+export const initializeLineChart = (options = {}) => {
+  Object.entries(options).forEach(([key, value]) => {
+    if (key === INIT_KEYS.TRANSLATIONS) {
+      config[key] = getTranslations(value);
+    } else {
+      config[key] = { ...value };
+    }
+  });
+};

package/src/helpers/chart-interface.ts

@@ -26,17 +26,12 @@ export interface IChartAnnotationsData {
 };
 
 export interface ILabelAnnotation {
-    showLabel: boolean;
-    text: string | string[];
-    position?: string
-    fontSize?: number;
-    xOffset?: number
-    yOffset?: number
-    maxWidth?: number
-    lineHeight?: number
+    content: string[];
+    fontSize: number;
+    xAdjust: number;
+    yAdjust: 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/plugins/line-chart.minor-gridlines-plugin';
+import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
   BORDER_COLOR,
   CUSTOM_LEGEND_PLUGIN_NAME,

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

@@ -86,6 +86,37 @@ 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
@@ -93,14 +124,20 @@ const generateAnnotations = (options, state) => {
  * @return {{annotations: []}}
  */
 const getAnnotation = (options, state) => {
-  const { showAnnotations, annotationsData } = options.annotations || {};
-  const shouldGenerateAnnotations = showAnnotations && annotationsData?.length;
+  const { annotations } = options;
+  const isAnnotationShown = annotations?.showAnnotations;
+  const isAnnotationDataProvided = annotations?.annotationsData?.length;
 
-  const annotations = shouldGenerateAnnotations
-    ? generateAnnotations(options, state)
-    : null;
+  const formAnnotation =
+    isAnnotationShown && isAnnotationDataProvided
+      ? {
+          ...getLabelAnnotation(options),
+          ...generateAnnotations(options, state),
+        }
+      : null;
 
-  return { annotations };
+  return {
+    annotations: formAnnotation,
+  };
 };
-
 export default getAnnotation;

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

@@ -1,267 +0,0 @@
-import { TextLabelPosition } from './plugin-constants';
-import { AlignOptions } from '../../../helpers/enums';
-
-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) : 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) => {
-  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.
- *
- * @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 } = chart;
-
-  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 [
-        chartArea.right - xOffset,
-        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 [
-        chartArea.right - xOffset - legendWidth,
-        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 [
-        chartArea.right - xOffset - legendWidth,
-        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;
-  }
-};
-
-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 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();
-  },
-
-  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);
-
-    // 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;
-
-    const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
-    ctx.textAlign = getTextAlign(position);
-
-    drawText(ctx, lines, lineHeight, x, y, position);
-
-    ctx.restore();
-  },
-};

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

@@ -1,11 +0,0 @@
-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',
-};