@oliasoft-open-source/charts-library 2.14.0-beta-1 → 2.14.1-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.14.0-beta-1",
+  "version": "2.14.1-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,5 +1,11 @@
 # Charts Library Release Notes
 
+## 2.14.1 
+- Fix save initAxesRange when dataset changed by subComponent
+
+## 2.14.0
+- Refactored line chart, for better performance, readable and reduce not needed re-renders
+
 ## 2.13.5
 
 - Fixed reset range when subComponent update data, prevent extra re-renders when range have same deep values but different reference

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,
@@ -45,7 +44,7 @@ const AxesOptionsPopover = ({
     initializeFormState,
   );
 
-  const { errors, valid } = validateAxes(formState, translations);
+  const { errors, valid } = validateAxes(formState);
 
   const onEditValue = ({ name, value, id }) => {
     dispatch({
@@ -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

@@ -34,27 +34,27 @@ export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
 
 const isEmptyString = (value) => value === '';
 
-const createErrorMessages = (value, compareTo, type, translations) => {
+const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
-  if (isEmptyString(value)) errors.push(translations.mustHaveAValue);
-  if (!validNumber(value)) errors.push(translations.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(translations.mustBeLessThanMax);
+    errors.push('Must be less than max');
   } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
-    errors.push(translations.mustBeGreaterThanMin);
+    errors.push('Must be greater than min');
   }
 
   return errors;
 };
 
-export const validateAxes = (formState, translations) => {
+export const validateAxes = (formState) => {
   return formState.reduce(
     (acc, { id, min, max }) => {
       return produce(acc, (draft) => {
         const errors = {
-          min: createErrorMessages(min, max, 'min', translations),
-          max: createErrorMessages(max, min, 'max', translations),
+          min: createErrorMessages(min, max, 'min'),
+          max: createErrorMessages(max, min, 'max'),
         };
         draft.errors.push({
           id,

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

@@ -29,8 +29,6 @@ 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,
@@ -55,8 +53,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,11 +76,18 @@ 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.
-  useChartState({ chartRef, options, state, dispatch, persistenceId });
+  useChartState({
+    chartRef,
+    options,
+    state,
+    generatedDatasets,
+    dispatch,
+    persistenceId,
+  });
 
   const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
     useChartFunctions({
@@ -128,7 +132,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/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,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 containing translations string
  * @returns {Array} - The generated line chart datasets with applied settings and configurations.
  */
-export const generateLineChartDatasets = (
-  datasets,
-  state,
-  options,
-  translations,
-) => {
+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 || `${translations.label} ${i + 1}`,
+      label: line.label || `Label ${i + 1}`,
       data: filteredData,
       showLine: lineEnabled,
       lineTension,

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],
-    }),
-    {},
-  );
-};