@oliasoft-open-source/charts-library 2.15.0 → 2.16.0-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.15.0",
+  "version": "2.16.0-beta-2",
   "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.15.0
-- Added translation, by provider handled([OW-11237](https://oliasoft.atlassian.net/browse/OW-11237))
+## 2.16.0
+- Added common chart area text plugin
 
 ## 2.14.1 
 - Fix save initAxesRange when dataset changed by parent component([OW-11332](https://oliasoft.atlassian.net/browse/OW-11332))

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

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

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('mustHaveAValue');
-  if (!validNumber(value)) errors.push('mustBeANumber');
+  if (isEmptyString(value)) errors.push('Must have a value');
+  if (!validNumber(value)) errors.push('Must be a number');
 
   if (type === 'min' && !isLessThanMax(value, compareTo)) {
-    errors.push('mustBeLessThanMax');
+    errors.push('Must be less than max');
   } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
-    errors.push('mustBeGreaterThanMin');
+    errors.push('Must be greater than min');
   }
 
   return errors;

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

@@ -21,7 +21,6 @@ const Controls = ({
   options,
   dispatch,
   generatedDatasets,
-  translations,
 }) => {
   const {
     enableDragPoints,
@@ -73,21 +72,18 @@ 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={translations.downloadAsPNG} placement="bottom-end">
+              <Tooltip text="Download as PNG" placement="bottom-end">
                 <Button
                   small
                   basic
@@ -106,14 +102,13 @@ const Controls = ({
                 isDragDataAllowed={dragData.enableDragData}
                 onToggleDragPoints={onToggleDragPoints}
                 onDisableDragOptions={onDisableDragOptions}
-                translations={translations}
               />
             </>
           )}
 
           {table ? (
             <Tooltip
-              text={showTable ? translations.showChart : translations.showTable}
+              text={showTable ? 'Show chart' : 'Show table'}
               placement="bottom-end"
             >
               <Button

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

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

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

@@ -4,12 +4,8 @@ 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,
-  translations: { hideLegend, showLegend },
-}) => {
-  const tooltipText = legendEnabled ? hideLegend : showLegend;
+export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
+  const tooltipText = legendEnabled ? 'Hide Legend' : 'Show Legend';
   const icon = legendEnabled ? (
     <RiListUnordered />
   ) : (

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

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

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,8 +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 { defaultTranslations } from './constants/default-translations';
-import { getTranslations } from './utils/get-translations/get-translations';
+import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
 
 ChartJS.register(
   LinearScale,
@@ -46,6 +45,7 @@ ChartJS.register(
   dataLabelsPlugin,
   annotationPlugin,
   dragDataPlugin,
+  chartAreaTextPlugin,
 );
 
 /**
@@ -55,8 +55,7 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  const { table, translations: translationsRaw } = props;
-  const translations = getTranslations(translationsRaw);
+  const { table } = props;
   const chart = getDefaultProps(props);
   const {
     data: { datasets },
@@ -79,7 +78,7 @@ const LineChart = (props) => {
   );
 
   const generatedDatasets = useMemo(() => {
-    return generateLineChartDatasets(datasets, state, options, translations);
+    return generateLineChartDatasets(datasets, state, options);
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
   // Call the custom hooks.
@@ -135,7 +134,6 @@ 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

@@ -0,0 +1,149 @@
+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;
+};
+
+/**
+ * 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.
+ */
+const drawText = (ctx, lines, lineHeight, x, y) => {
+  lines.forEach((line, index) => {
+    ctx.fillText(line, x, y - (lines.length - 1 - index) * lineHeight);
+  });
+};
+
+/**
+ * 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;
+};
+
+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,
+      maxWidth: initialMaxWidth,
+    } = 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 = '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/utils/generate-line-chart-datasets.js

@@ -15,15 +15,9 @@ 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,
-  { label },
-) => {
+export const generateLineChartDatasets = (datasets, state, options) => {
   const copyDataset = [...datasets];
   const { annotations, graph } = options;
   const {
@@ -94,7 +88,7 @@ export const generateLineChartDatasets = (
     // 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/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;

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

@@ -1,24 +0,0 @@
-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/utils/get-translations/get-translations.js

@@ -1,17 +0,0 @@
-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],
-    }),
-    {},
-  );
-};