49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import Chart from 'chart.js/auto';
|
|
import { ChartConfiguration } from 'chart.js';
|
|
import React, { FunctionComponent, useEffect, useRef } from 'react';
|
|
|
|
interface ReactChartJSProps {
|
|
chartConfig: ChartConfiguration;
|
|
width?: number;
|
|
height?: number;
|
|
containerProps?: any;
|
|
canvasProps?: any;
|
|
}
|
|
|
|
interface RefForChartInstance {
|
|
chartInstance?: Chart;
|
|
}
|
|
|
|
const ReactChartJs: FunctionComponent<ReactChartJSProps> = (props: any) => {
|
|
const { chartConfig, containerProps, canvasProps } = props;
|
|
|
|
const canvasDomRef = useRef<HTMLCanvasElement>();
|
|
|
|
const chartInstanceRef = useRef<RefForChartInstance>({});
|
|
|
|
useEffect(() => {
|
|
const canvasDom = canvasDomRef.current;
|
|
const chartInstance = chartInstanceRef.current!.chartInstance;
|
|
|
|
if (chartInstance) {
|
|
chartInstance.destroy();
|
|
}
|
|
chartInstanceRef.current!.chartInstance = new Chart(canvasDom!, chartConfig!);
|
|
}, [chartConfig]);
|
|
|
|
return (
|
|
<div {...containerProps}>
|
|
<canvas
|
|
ref={(instance: any) => {
|
|
canvasDomRef.current = instance!;
|
|
}}
|
|
width={props.width || 'auto'}
|
|
height={props.height || 'auto'}
|
|
{...canvasProps}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReactChartJs;
|