Revert back to original source code

src/chart.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, forwardRef, ForwardedRef } from 'react'
+import React, { useEffect, useRef, forwardRef } from 'react'
 import { Chart as ChartJS } from 'chart.js'
 import type { ChartType, DefaultDataPoint } from 'chart.js'
 
-import type { ChartProps } from './types.js'
+import type { ForwardedRef, ChartProps, BaseChartComponent } from './types.js'
 import {
   reforwardRef,
   cloneData,
@@ -23,23 +23,22 @@ function ChartComponent<
     height = 150,
     width = 300,
     redraw = false,
-    datasetIdKey = 'label',
+    datasetIdKey,
     type,
     data,
     options,
     plugins = [],
-    fallbackContent = null,
+    fallbackContent,
     updateMode,
     ...canvasProps
-  } = props
-
-  const canvasRef = useRef<HTMLCanvasElement | null>(null)
-  const chartRef = useRef<ChartJS<TType, TData, TLabel> | null>(null)
+  } = props as ChartProps
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const chartRef = useRef<ChartJS | null>()
 
   const renderChart = () => {
     if (!canvasRef.current) return
 
-    chartRef.current = new ChartJS<TType, TData, TLabel>(canvasRef.current, {
+    chartRef.current = new ChartJS(canvasRef.current, {
       type,
       data: cloneData(data, datasetIdKey),
       options: options && { ...options },
@@ -113,4 +112,4 @@ function ChartComponent<
   )
 }
 
-export const Chart = forwardRef(ChartComponent)
+export const Chart = forwardRef(ChartComponent) as BaseChartComponent

src/typedCharts.tsx

@@ -1,3 +1,4 @@
+import React, { forwardRef } from 'react'
 import {
   Chart as ChartJS,
   LineController,
@@ -11,7 +12,11 @@ import {
 } from 'chart.js'
 import type { ChartType, ChartComponentLike } from 'chart.js'
 
-import type { ChartProps } from './types.js'
+import type {
+  ChartProps,
+  ChartJSOrUndefined,
+  TypedChartComponent,
+} from './types.js'
 import { Chart } from './chart.js'
 
 function createTypedChart<T extends ChartType>(
@@ -20,12 +25,9 @@ function createTypedChart<T extends ChartType>(
 ) {
   ChartJS.register(registerables)
 
-  return (props: ChartProps) => {
-    // TODO: Configure ESLint to ignore unused variables named `_`.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { type: _, ...rest } = props
-    return <Chart type={type} {...rest} />
-  }
+  return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>(
+    (props, ref) => <Chart {...props} ref={ref} type={type} />,
+  ) as TypedChartComponent<T>
 }
 
 export const Line = /* #__PURE__ */ createTypedChart('line', LineController)

src/types.ts

@@ -1,5 +1,6 @@
-import type { CanvasHTMLAttributes, ReactNode } from 'react'
+import type { CanvasHTMLAttributes, MutableRefObject, ReactNode } from 'react'
 import type {
+  Chart,
   ChartType,
   ChartData,
   ChartOptions,
@@ -8,6 +9,11 @@ import type {
   UpdateMode,
 } from 'chart.js'
 
+export type ForwardedRef<T> =
+  | ((instance: T | null) => void)
+  | MutableRefObject<T | null>
+  | null
+
 export interface ChartProps<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
@@ -25,6 +31,7 @@ export interface ChartProps<
   /**
    * The options object that is passed into the Chart.js chart
    * @see https://www.chartjs.org/docs/latest/general/options.html
+   * @default {}
    */
   options?: ChartOptions<TType>
   /**
@@ -39,7 +46,7 @@ export interface ChartProps<
    */
   redraw?: boolean
   /**
-   * Key name to identify dataset
+   * Key name to identificate dataset
    * @default 'label'
    */
   datasetIdKey?: string
@@ -56,3 +63,31 @@ export interface ChartProps<
    */
   updateMode?: UpdateMode
 }
+
+/**
+ * @todo Replace `undefined` with `null`
+ */
+export type ChartJSOrUndefined<
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>,
+  TLabel = unknown,
+> = Chart<TType, TData, TLabel> | undefined
+
+export type BaseChartComponent = <
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>,
+  TLabel = unknown,
+>(
+  props: ChartProps<TType, TData, TLabel> & {
+    ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>
+  },
+) => JSX.Element
+
+export type TypedChartComponent<TDefaultType extends ChartType> = <
+  TData = DefaultDataPoint<TDefaultType>,
+  TLabel = unknown,
+>(
+  props: Omit<ChartProps<TDefaultType, TData, TLabel>, 'type'> & {
+    ref?: ForwardedRef<ChartJSOrUndefined<TDefaultType, TData, TLabel>>
+  },
+) => JSX.Element

src/utils.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ForwardedRef } from 'react'
+import type { MouseEvent } from 'react'
 import type {
   ChartType,
   ChartData,
@@ -8,6 +8,10 @@ import type {
   Chart,
 } from 'chart.js'
 
+import type { ForwardedRef } from './types.js'
+
+const defaultDatasetIdKey = 'label'
+
 export function reforwardRef<T>(ref: ForwardedRef<T>, value: T) {
   if (typeof ref === 'function') {
     ref(value)
@@ -46,17 +50,16 @@ export function setDatasets<
 >(
   currentData: ChartData<TType, TData, TLabel>,
   nextDatasets: ChartDataset<TType, TData>[],
-  datasetIdKey: string,
+  datasetIdKey = defaultDatasetIdKey,
 ) {
   const addedDatasets: ChartDataset<TType, TData>[] = []
 
   currentData.datasets = nextDatasets.map(
-    (nextDataset: ChartDataset<TType, TData>): ChartDataset<TType, TData> => {
+    (nextDataset: Record<string, unknown>) => {
       // given the new set, find it's current match
       const currentDataset = currentData.datasets.find(
-        (dataset: ChartDataset<TType, TData>) =>
-          dataset[datasetIdKey as keyof ChartDataset<TType, TData>] ===
-          nextDataset[datasetIdKey as keyof ChartDataset<TType, TData>],
+        (dataset: Record<string, unknown>) =>
+          dataset[datasetIdKey] === nextDataset[datasetIdKey],
       )
 
       // There is no original to update, so simply add new one
@@ -65,7 +68,7 @@ export function setDatasets<
         !nextDataset.data ||
         addedDatasets.includes(currentDataset)
       ) {
-        return { ...nextDataset }
+        return { ...nextDataset } as ChartDataset<TType, TData>
       }
 
       addedDatasets.push(currentDataset)
@@ -81,7 +84,7 @@ export function cloneData<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
   TLabel = unknown,
->(data: ChartData<TType, TData, TLabel>, datasetIdKey: string) {
+>(data: ChartData<TType, TData, TLabel>, datasetIdKey = defaultDatasetIdKey) {
   const nextData: ChartData<TType, TData, TLabel> = {
     labels: [],
     datasets: [],