diff --git a/src/types.ts b/src/types.ts index ee662d787..7618283df 100644 --- a/src/types.ts +++ b/src/types.ts @@ -17,15 +17,17 @@ import type { export interface Props< TType extends ChartType = ChartType, TData = DefaultDataPoint, - TLabel = unknown, - TOtherType extends TType = TType + TLabel = unknown > extends CanvasHTMLAttributes { type: TType; + /** + * @todo Remove function variant. + */ data: - | ChartData - | ((canvas: HTMLCanvasElement) => ChartData); - options?: ChartOptions; - plugins?: Plugin[]; + | ChartData + | ((canvas: HTMLCanvasElement) => ChartData); + options?: ChartOptions; + plugins?: Plugin[]; redraw?: boolean; /** * @todo Replace with `children` prop. @@ -66,10 +68,9 @@ export type TypedChartComponent< : < TType extends ChartType = ChartType, TData = DefaultDataPoint, - TLabel = unknown, - TOtherType extends TType = TType + TLabel = unknown >( - props: Props & { + props: Props & { ref?: ForwardedRef>; } ) => JSX.Element; diff --git a/stories/Chart.data.ts b/stories/Chart.data.ts index 4b6eb8b9d..43e1cccfc 100644 --- a/stories/Chart.data.ts +++ b/stories/Chart.data.ts @@ -5,7 +5,7 @@ export const multiTypeData = { labels: months, datasets: [ { - type: 'line', + type: 'line' as const, label: 'Dataset 1', borderColor: colorRed, borderWidth: 2, @@ -15,7 +15,7 @@ export const multiTypeData = { ), }, { - type: 'bar', + type: 'bar' as const, label: 'Dataset 2', backgroundColor: colorGreen, data: Array.from({ length: 7 }, () => @@ -25,7 +25,7 @@ export const multiTypeData = { borderWidth: 2, }, { - type: 'bar', + type: 'bar' as const, label: 'Dataset 3', backgroundColor: colorBlue, data: Array.from({ length: 7 }, () => diff --git a/test/chart.test-d.tsx b/test/chart.test-d.tsx index 5daf34895..f92bafedc 100644 --- a/test/chart.test-d.tsx +++ b/test/chart.test-d.tsx @@ -2,6 +2,7 @@ import { expectError } from 'tsd'; import React from 'react'; import { Plugin } from 'chart.js'; import Chart, { Scatter, Doughnut } from '../src'; +import { multiTypeData } from '../stories/Chart.data'; const data = { datasets: [], @@ -13,6 +14,7 @@ const data = { []} />; []} />; +; expectError([]} />); expectError([]} />);