Commit 96d2714

authored

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

1 parent 93f7c30 commit 96d2714Copy full SHA for 96d2714

File tree

+39

-2

lines changed

+39

-2

lines changed

Lines changed: 3 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ function ChartComponent<`
`26`	`26`	`options,`
`27`	`27`	`plugins = [],`
`28`	`28`	`fallbackContent,`
	`29`	`+ updateMode,`
`29`	`30`	`...props`
`30`	`31`	`}: ChartProps<TType, TData, TLabel>,`
`31`	`32`	`ref: ForwardedRef<ChartJS<TType, TData, TLabel>>`
`@@ -82,9 +83,9 @@ function ChartComponent<`
`82`	`83`	`destroyChart();`
`83`	`84`	`setTimeout(renderChart);`
`84`	`85`	`} else {`
`85`		`- chartRef.current.update();`
	`86`	`+ chartRef.current.update(updateMode);`
`86`	`87`	`}`
`87`		`- }, [redraw, options, data.labels, data.datasets]);`
	`88`	`+ }, [redraw, options, data.labels, data.datasets,updateMode]);`
`88`	`89`
`89`	`90`	`useEffect(() => {`
`90`	`91`	`renderChart();`

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import type {`
`6`	`6`	`ChartOptions,`
`7`	`7`	`DefaultDataPoint,`
`8`	`8`	`Plugin,`
	`9`	`+ UpdateMode,`
`9`	`10`	`} from 'chart.js';`
`10`	`11`
`11`	`12`	`export type ForwardedRef<T> =`
`@@ -56,6 +57,11 @@ export interface ChartProps<`
`56`	`57`	* @todo Replace with `children` prop.
`57`	`58`	`*/`
`58`	`59`	`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;`
`59`	`65`	`}`
`60`	`66`
`61`	`67`	`/**`

Lines changed: 30 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -386,4 +386,34 @@ describe('<Chart />', () => {`
`386`	`386`	`expect(prevDataset1).toBe(nextDataset1);`
`387`	`387`	`expect(prevDataset2).toBe(nextDataset2);`
`388`	`388`	`});`
	`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`	`+ });`
`389`	`419`	`});`

Comments

(0)