Skip to content

Commit ae4098e

Browse files
committed
feat: implement passing updateMode property to chart's update method
1 parent 93f7c30 commit ae4098e

File tree

3 files changed

+38
-1
lines changed

3 files changed

+38
-1
lines changed

Diff for: src/chart.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ function ChartComponent<
2626
options,
2727
plugins = [],
2828
fallbackContent,
29+
updateMode,
2930
...props
3031
}: ChartProps<TType, TData, TLabel>,
3132
ref: ForwardedRef<ChartJS<TType, TData, TLabel>>
@@ -82,7 +83,7 @@ function ChartComponent<
8283
destroyChart();
8384
setTimeout(renderChart);
8485
} else {
85-
chartRef.current.update();
86+
chartRef.current.update(updateMode);
8687
}
8788
}, [redraw, options, data.labels, data.datasets]);
8889

Diff for: src/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {
66
ChartOptions,
77
DefaultDataPoint,
88
Plugin,
9+
UpdateMode,
910
} from 'chart.js';
1011

1112
export type ForwardedRef<T> =
@@ -56,6 +57,11 @@ export interface ChartProps<
5657
* @todo Replace with `children` prop.
5758
*/
5859
fallbackContent?: ReactNode;
60+
/**
61+
* A mode string to indicate transition configuration should be used.
62+
* @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
63+
*/
64+
updateMode?: UpdateMode;
5965
}
6066

6167
/**

Diff for: test/chart.test.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -386,4 +386,34 @@ describe('<Chart />', () => {
386386
expect(prevDataset1).toBe(nextDataset1);
387387
expect(prevDataset2).toBe(nextDataset2);
388388
});
389+
390+
it('should pass updateMode prop to update method', () => {
391+
const newData = {
392+
labels: ['purple', 'pink'],
393+
datasets: [{ label: 'new-colors', data: [1, 10] }],
394+
};
395+
396+
const { rerender } = render(
397+
<Chart
398+
data={data}
399+
options={options}
400+
type='bar'
401+
updateMode='active'
402+
ref={ref}
403+
/>
404+
);
405+
406+
rerender(
407+
<Chart
408+
data={newData}
409+
options={options}
410+
type='bar'
411+
updateMode='active'
412+
ref={ref}
413+
/>
414+
);
415+
416+
expect(update).toHaveBeenCalledTimes(1);
417+
expect(update).toBeCalledWith('active');
418+
});
389419
});

0 commit comments

Comments
 (0)