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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.16.0-beta-1",
+  "version": "2.16.0-beta-3",
   "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

@@ -3,6 +3,12 @@
 ## 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))
+
+## 2.14.1 
+- Fix save initAxesRange when dataset changed by parent component([OW-11332](https://oliasoft.atlassian.net/browse/OW-11332))
+
 ## 2.14.0
 - Refactored line chart, for better performance, readable and reduce not needed re-renders
 

package/src/components/controls/axes-options/axes-options.jsx

@@ -31,6 +31,7 @@ const AxesOptionsPopover = ({
   onResetAxes,
   close,
   depthType,
+  translations,
 }) => {
   const [depthTypeState, setDepthTypeState] = useState(
     depthType?.selectedDepthType,
@@ -124,7 +125,7 @@ const AxesOptionsPopover = ({
               <Input
                 name="min"
                 value={min}
-                error={minError}
+                error={translations[minError]}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
@@ -140,7 +141,7 @@ const AxesOptionsPopover = ({
               <Input
                 name="max"
                 value={max}
-                error={maxError}
+                error={translations[maxError]}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
@@ -190,16 +191,22 @@ const AxesOptionsPopover = ({
       ) : null}
 
       <Flex gap="8px" alignItems="center">
-        <Button type="submit" small colored label="Done" disabled={!valid} />
+        <Button
+          type="submit"
+          small
+          colored
+          label={translations.done}
+          disabled={!valid}
+        />
         <Button
           small
           name="resetAxes"
-          label="Reset Axes"
+          label={translations.resetAxes}
           onClick={onReset}
           disabled={!isCustomValue}
         />
         <Text small muted>
-          or double click on canvas
+          {translations.orDoubleClickToCanvas}
         </Text>
       </Flex>
     </form>
@@ -213,6 +220,7 @@ export const AxesOptions = ({
   onUpdateAxes,
   onResetAxes,
   depthType,
+  translations,
 }) => {
   return (
     <Popover
@@ -226,10 +234,15 @@ export const AxesOptions = ({
           onUpdateAxes={onUpdateAxes}
           onResetAxes={onResetAxes}
           depthType={depthType}
+          translations={translations}
         />
       }
     >
-      <Tooltip text="Axes options" placement="bottom" display="flex">
+      <Tooltip
+        text={translations.axesOptions}
+        placement="bottom"
+        display="flex"
+      >
         <Button small basic colored="muted" round icon={<RiRuler2Line />} />
       </Tooltip>
     </Popover>

package/src/components/line-chart/constants/default-translations.js

@@ -0,0 +1,24 @@
+export const defaultTranslations = Object.freeze({
+  label: 'Label',
+  pointsLines: 'Points & lines',
+  linesOnly: 'Lines only',
+  pointsOnly: 'Points only',
+  axesOptions: 'Axes options',
+  resetAxes: 'Reset Axes',
+  done: 'Done',
+  downloadAsPNG: 'Download as PNG',
+  showChart: 'Show chart',
+  showTable: 'Show table',
+  dragToZoom: 'Drag to zoom',
+  dragToPan: 'Drag to pan',
+  dragToMovePoints: 'Drag to move points',
+  dragDisabled: 'Drag disabled',
+  hideLegend: 'Hide Legend',
+  showLegend: 'Show Legend',
+  mustHaveAValue: 'Must have a value',
+  mustBeANumber: 'Must be a number',
+  mustBeLessThanMax: 'Must be less than max',
+  mustBeGreaterThanMin: 'Must be greater than min',
+  doubleClickToReset: 'Double click on canvas to reset',
+  orDoubleClickToCanvas: 'or double click on canvas',
+});

package/src/components/line-chart/controls/axes-options/axes-options-form-state.js

@@ -36,13 +36,13 @@ const isEmptyString = (value) => value === '';
 
 const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
-  if (isEmptyString(value)) errors.push('Must have a value');
-  if (!validNumber(value)) errors.push('Must be a number');
+  if (isEmptyString(value)) errors.push('mustHaveAValue');
+  if (!validNumber(value)) errors.push('mustBeANumber');
 
   if (type === 'min' && !isLessThanMax(value, compareTo)) {
-    errors.push('Must be less than max');
+    errors.push('mustBeLessThanMax');
   } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
-    errors.push('Must be greater than min');
+    errors.push('mustBeGreaterThanMin');
   }
 
   return errors;

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

@@ -21,6 +21,7 @@ const Controls = ({
   options,
   dispatch,
   generatedDatasets,
+  translations,
 }) => {
   const {
     enableDragPoints,
@@ -72,18 +73,21 @@ const Controls = ({
                 onUpdateAxes={onUpdateAxes}
                 onResetAxes={onResetAxes}
                 depthType={options.depthType}
+                translations={translations}
               />
               <LineOptions
                 lineEnabled={lineEnabled}
                 pointsEnabled={pointsEnabled}
                 onToggleLine={onToggleLine}
                 onTogglePoints={onTogglePoints}
+                translations={translations}
               />
               <LegendOptions
                 legendEnabled={legendEnabled}
                 onToggleLegend={onToggleLegend}
+                translations={translations}
               />
-              <Tooltip text="Download as PNG" placement="bottom-end">
+              <Tooltip text={translations.downloadAsPNG} placement="bottom-end">
                 <Button
                   small
                   basic
@@ -102,13 +106,14 @@ const Controls = ({
                 isDragDataAllowed={dragData.enableDragData}
                 onToggleDragPoints={onToggleDragPoints}
                 onDisableDragOptions={onDisableDragOptions}
+                translations={translations}
               />
             </>
           )}
 
           {table ? (
             <Tooltip
-              text={showTable ? 'Show chart' : 'Show table'}
+              text={showTable ? translations.showChart : translations.showTable}
               placement="bottom-end"
             >
               <Button

package/src/components/line-chart/controls/drag-options.jsx

@@ -13,16 +13,24 @@ export const DragOptions = ({
   isDragDataAllowed,
   onToggleDragPoints,
   onDisableDragOptions,
+  translations: {
+    dragToZoom,
+    doubleClickToReset,
+    dragToPan,
+    orDoubleClickToCanvas,
+    dragToMovePoints,
+    dragDisabled,
+  },
 }) => {
   const options = useMemo(
     () => [
       {
-        buttonLabel: 'Drag to zoom',
+        buttonLabel: dragToZoom,
         label: (
           <Flex direction="column">
             <Text>Drag to zoom</Text>
             <Text small muted>
-              Double click on canvas to reset
+              {doubleClickToReset}
             </Text>
           </Flex>
         ),
@@ -31,12 +39,12 @@ export const DragOptions = ({
         onClick: onToggleZoom,
       },
       {
-        buttonLabel: 'Drag to pan',
+        buttonLabel: dragToPan,
         label: (
           <Flex direction="column">
             <Text>Drag to pan</Text>
             <Text small muted>
-              Double click on canvas to reset
+              {orDoubleClickToCanvas}
             </Text>
           </Flex>
         ),
@@ -47,7 +55,7 @@ export const DragOptions = ({
       ...(isDragDataAllowed
         ? [
             {
-              label: 'Drag to move points',
+              label: dragToMovePoints,
               icon: <TbHandStop />,
               selected: enableDragPoints,
               type: 'Option',
@@ -56,7 +64,7 @@ export const DragOptions = ({
           ]
         : []),
       {
-        label: 'Drag disabled',
+        label: dragDisabled,
         icon: <RiForbidLine />,
         selected: !zoomEnabled && !panEnabled && !enableDragPoints,
         onClick: onDisableDragOptions,

package/src/components/line-chart/controls/legend-options.jsx

@@ -4,8 +4,12 @@ import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
 import { RiListUnordered } from 'react-icons/ri';
 import listHideIcon from '../../../assets/icons/list-hide.svg';
 
-export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
-  const tooltipText = legendEnabled ? 'Hide Legend' : 'Show Legend';
+export const LegendOptions = ({
+  legendEnabled,
+  onToggleLegend,
+  translations: { hideLegend, showLegend },
+}) => {
+  const tooltipText = legendEnabled ? hideLegend : showLegend;
   const icon = legendEnabled ? (
     <RiListUnordered />
   ) : (

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

@@ -10,10 +10,11 @@ export const LineOptions = ({
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
+  translations,
 }) => {
   const options = [
     {
-      label: 'Points & lines',
+      label: translations.pointsLines,
       icon: <Icon icon={lineAndPointIcon} />,
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
@@ -21,7 +22,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Lines only',
+      label: translations.linesOnly,
       icon: <Icon icon={lineOnlyIcon} />,
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
@@ -30,7 +31,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Points only',
+      label: translations.pointsOnly,
       icon: <Icon icon={pointOnlyIcon} />,
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {

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

@@ -42,6 +42,7 @@ export const useChartOptions = ({
       labelAnnotation: {
         showLabel,
         text,
+        position,
         fontSize,
         xOffset,
         yOffset,
@@ -136,6 +137,7 @@ export const useChartOptions = ({
     chartAreaText: {
       showLabel,
       text,
+      position,
       fontSize,
       xOffset,
       yOffset,

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,
@@ -78,6 +79,7 @@ export const LineChartPropTypes = {
             PropTypes.string,
             PropTypes.arrayOf(PropTypes.string),
           ]),
+          position: PropTypes.string,
           fontSize: PropTypes.number,
           xOffset: PropTypes.number,
           yOffset: PropTypes.number,
@@ -104,7 +106,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,
@@ -216,12 +218,15 @@ export const getDefaultProps = (props) => {
           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 ?? 10,
+            props.chart.options.annotations.labelAnnotation?.yOffset ?? 5,
           maxWidth:
             props.chart.options.annotations.labelAnnotation?.maxWidth ?? 300,
           lineHeight:

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 { getTranslations } from './utils/get-translations/get-translations';
 import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
 
 ChartJS.register(
@@ -55,7 +56,8 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  const { table } = props;
+  const { table, translations: translationsRaw } = props;
+  const translations = getTranslations(translationsRaw);
   const chart = getDefaultProps(props);
   const {
     data: { datasets },
@@ -78,11 +80,18 @@ const LineChart = (props) => {
   );
 
   const generatedDatasets = useMemo(() => {
-    return generateLineChartDatasets(datasets, state, options);
+    return generateLineChartDatasets(datasets, state, options, translations);
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
   // Call the custom hooks.
-  useChartState({ chartRef, options, state, dispatch, persistenceId });
+  useChartState({
+    chartRef,
+    options,
+    state,
+    generatedDatasets,
+    dispatch,
+    persistenceId,
+  });
 
   const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
     useChartFunctions({
@@ -127,6 +136,7 @@ const LineChart = (props) => {
         options={options}
         dispatch={dispatch}
         generatedDatasets={generatedDatasets}
+        translations={translations}
       />
       {table && state.showTable ? (
         <div className={styles.table}>{table}</div>

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

@@ -1,3 +1,6 @@
+import { TextLabelPosition } from './plugin-constants';
+import { AlignOptions } from '../../../helpers/enums';
+
 const WORD_SEPARATOR = ' ';
 const TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
 
@@ -9,9 +12,9 @@ const TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
  * @returns {string[]} An array of words.
  */
 const getWords = (text) => {
-  return Array.isArray(text)
-    ? text.join(WORD_SEPARATOR).split(WORD_SEPARATOR)
-    : text.split(WORD_SEPARATOR);
+  return (Array.isArray(text) ? text.join(WORD_SEPARATOR) : text).split(
+    WORD_SEPARATOR,
+  );
 };
 
 /**
@@ -24,30 +27,169 @@ const getWords = (text) => {
  * @returns {number} The number of lines required.
  */
 const countLines = (words, maxWidth, ctx) => {
-  let line = '';
-  let lines = 0;
+  const lineCount = words.reduce(
+    (lines, word) => {
+      const testLine = `${lines.currentLine}${word}${WORD_SEPARATOR}`;
+      const { width: testWidth } = ctx.measureText(testLine);
 
-  for (const word of words) {
-    const testLine = `${line}${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: '' },
+  );
 
-    if (testWidth > maxWidth) {
-      line = `${word}${WORD_SEPARATOR}`;
-      lines++;
-    } else {
-      line = testLine;
-    }
-  }
-  lines++; // Add the last line
-  return lines;
+  return lineCount.lineCount + 1; // Add the last line
 };
 
-const drawText = (ctx, lines, lineHeight, x, y) => {
+/**
+ * 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) => {
-    ctx.fillText(line, x, y - (lines.length - 1 - index) * lineHeight);
+    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',
 
@@ -64,26 +206,34 @@ export const chartAreaTextPlugin = {
     const words = getWords(text);
     const lines = countLines(words, maxWidth, ctx);
 
-    // Calculate and set the padding needed at the bottom of the chart
+    // Calculate and set the padding needed at the top or bottom of the chart
     const paddingNeeded = lines * lineHeight + lineHeight;
-    chart.options.layout.padding.bottom = paddingNeeded;
+    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 } = 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 =
-      chartArea.width < 500
-        ? 100
-        : chartArea.width < 700
-        ? 200
-        : options.maxWidth;
+    const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
 
     // Split the text into words and calculate the number of lines
     const words = getWords(text);
@@ -105,12 +255,12 @@ export const chartAreaTextPlugin = {
     ctx.save();
     ctx.font = `${fontSize}px Arial`;
     ctx.fillStyle = TRANSPARENT;
-    ctx.textAlign = 'right';
+    ctx.textAlign = AlignOptions.Right;
 
-    const y = chartArea.bottom - yOffset;
-    const x = chartArea.right - xOffset; // Subtract margin on the right
+    const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
+    ctx.textAlign = getTextAlign(position);
 
-    drawText(ctx, lines, lineHeight, x, y);
+    drawText(ctx, lines, lineHeight, x, y, position);
 
     ctx.restore();
   },

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/components/line-chart/state/use-chart-state.js

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

package/src/components/line-chart/utils/generate-line-chart-datasets.js

@@ -15,9 +15,15 @@ import { generateRandomColor } from '../../../helpers/chart-utils';
  * @param {Array} datasets - The initial datasets for the line chart.
  * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
  * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
+ * @param {Object} translations - The translations object with the label property
  * @returns {Array} - The generated line chart datasets with applied settings and configurations.
  */
-export const generateLineChartDatasets = (datasets, state, options) => {
+export const generateLineChartDatasets = (
+  datasets,
+  state,
+  options,
+  { label },
+) => {
   const copyDataset = [...datasets];
   const { annotations, graph } = options;
   const {
@@ -88,7 +94,7 @@ export const generateLineChartDatasets = (datasets, state, options) => {
     // Return the dataset with applied settings and configurations
     return {
       ...line,
-      label: line.label || `Label ${i + 1}`,
+      label: line.label || `${label} ${i + 1}`,
       data: filteredData,
       showLine: lineEnabled,
       lineTension,

package/src/components/line-chart/utils/get-translations/get-translations.js

@@ -0,0 +1,17 @@
+import { defaultTranslations } from '../../constants/default-translations';
+
+/**
+ * Merges custom translations with the default translations.
+ * If a custom translation is provided for a key, it will override the default one.
+ * @param {object} translations - Custom translations.
+ * @returns {object} - The resulting translations object, containing both default and custom translations.
+ */
+export const getTranslations = (translations = {}) => {
+  return Object.keys(defaultTranslations).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: translations[key] || defaultTranslations[key],
+    }),
+    {},
+  );
+};

package/src/helpers/chart-interface.ts

@@ -28,11 +28,12 @@ export interface IChartAnnotationsData {
 export interface ILabelAnnotation {
     showLabel: boolean;
     text: string | string[];
+    position?: string
     fontSize?: number;
-    xOffset: number
-    yOffset: number
-    maxWidth: number
-    lineHeight: number
+    xOffset?: number
+    yOffset?: number
+    maxWidth?: number
+    lineHeight?: number
 }