feat: implement passing updateMode property to chart's update method (#1043)

Author: Arantiryo

src/chart.tsx

@@ -26,6 +26,7 @@ function ChartComponent<
     options,
     plugins = [],
     fallbackContent,
+    updateMode,
     ...props
   }: ChartProps<TType, TData, TLabel>,
   ref: ForwardedRef<ChartJS<TType, TData, TLabel>>
@@ -82,9 +83,9 @@ function ChartComponent<
       destroyChart();
       setTimeout(renderChart);
     } else {
-      chartRef.current.update();
+      chartRef.current.update(updateMode);
     }
-  }, [redraw, options, data.labels, data.datasets]);
+  }, [redraw, options, data.labels, data.datasets, updateMode]);
 
   useEffect(() => {
     renderChart();

src/types.ts

@@ -6,6 +6,7 @@ import type {
   ChartOptions,
   DefaultDataPoint,
   Plugin,
+  UpdateMode,
 } from 'chart.js';
 
 export type ForwardedRef<T> =
@@ -56,6 +57,11 @@ export interface ChartProps<
    * @todo Replace with `children` prop.
    */
   fallbackContent?: ReactNode;
+  /**
+   * A mode string to indicate transition configuration should be used.
+   * @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
+   */
+  updateMode?: UpdateMode;
 }
 
 /**

test/chart.test.tsx

@@ -386,4 +386,34 @@ describe('<Chart />', () => {
     expect(prevDataset1).toBe(nextDataset1);
     expect(prevDataset2).toBe(nextDataset2);
   });
+
+  it('should pass updateMode prop to update method', () => {
+    const newData = {
+      labels: ['purple', 'pink'],
+      datasets: [{ label: 'new-colors', data: [1, 10] }],
+    };
+
+    const { rerender } = render(
+      <Chart
+        data={data}
+        options={options}
+        type='bar'
+        updateMode='active'
+        ref={ref}
+      />
+    );
+
+    rerender(
+      <Chart
+        data={newData}
+        options={options}
+        type='bar'
+        updateMode='active'
+        ref={ref}
+      />
+    );
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(update).toBeCalledWith('active');
+  });
 });