@oliasoft-open-source/charts-library 2.14.1 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "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,5 +1,8 @@
 # Charts Library Release Notes
 
+## 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))
 

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/line-chart.jsx

@@ -29,6 +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 { defaultTranslations } from './constants/default-translations';
+import { getTranslations } from './utils/get-translations/get-translations';
 
 ChartJS.register(
   LinearScale,
@@ -53,7 +55,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 },
@@ -76,7 +79,7 @@ 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.
@@ -132,6 +135,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/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],
+    }),
+    {},
+  );
+};