Improve LegendElement and TooltipItem type definitions (#9376)

* Document LegendElement properties in TS * Pass chart type to LegendElement * Update tooltip item dataset type
chartjs · Jul 9, 2021 · ab613a3 · ab613a3
1 parent 066130b
commit ab613a3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -2120,9 +2120,14 @@ export interface LegendItem {
   textAlign?: TextAlign;
 }
 
-export interface LegendElement extends Element, LayoutItem {}
+export interface LegendElement<TType extends ChartType> extends Element, LayoutItem {
+  chart: Chart<TType>;
+  ctx: CanvasRenderingContext2D;
+  legendItems?: LegendItem[];
+  options: LegendOptions<TType>;
+}
 
-export interface LegendOptions {
+export interface LegendOptions<TType extends ChartType> {
   /**
    * Is the legend shown?
    * @default true
@@ -2159,15 +2164,15 @@ export interface LegendOptions {
   /**
    * A callback that is called when a click event is registered on a label item.
    */
-  onClick(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void;
+  onClick(this: LegendElement<TType>, e: ChartEvent, legendItem: LegendItem, legend: LegendElement<TType>): void;
   /**
    * A callback that is called when a 'mousemove' event is registered on top of a label item
    */
-  onHover(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void;
+  onHover(this: LegendElement<TType>, e: ChartEvent, legendItem: LegendItem, legend: LegendElement<TType>): void;
   /**
    * A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.
    */
-  onLeave(this: LegendElement, e: ChartEvent, legendItem: LegendItem, legend: LegendElement): void;
+  onLeave(this: LegendElement<TType>, e: ChartEvent, legendItem: LegendItem, legend: LegendElement<TType>): void;
 
   labels: {
     /**
@@ -2445,7 +2450,7 @@ export interface ScriptableTooltipContext<TType extends ChartType> {
   tooltipItems: TooltipItem<TType>[];
 }
 
-export interface TooltipOptions<TType extends ChartType> extends CoreInteractionOptions {
+export interface TooltipOptions<TType extends ChartType = ChartType> extends CoreInteractionOptions {
   /**
    * Are on-canvas tooltips enabled?
    * @default true
@@ -2469,9 +2474,9 @@ export interface TooltipOptions<TType extends ChartType> extends CoreInteraction
   /**
    * Sort tooltip items.
    */
-  itemSort: (a: TooltipItem<ChartType>, b: TooltipItem<ChartType>, data: ChartData) => number;
+  itemSort: (a: TooltipItem<TType>, b: TooltipItem<TType>, data: ChartData) => number;
 
-  filter: (e: TooltipItem<ChartType>, index: number, array: TooltipItem<ChartType>[], data: ChartData) => boolean;
+  filter: (e: TooltipItem<TType>, index: number, array: TooltipItem<TType>[], data: ChartData) => boolean;
 
   /**
    * Background color of the tooltip.
@@ -2648,7 +2653,7 @@ export interface TooltipItem<TType extends ChartType> {
   /**
    * The dataset the item comes from
    */
-  dataset: ChartDataset;
+  dataset: UnionToIntersection<ChartDataset<TType>>;
 
   /**
    * Index of the dataset the item comes from
@@ -2669,7 +2674,7 @@ export interface TooltipItem<TType extends ChartType> {
 export interface PluginOptionsByType<TType extends ChartType> {
   decimation: DecimationOptions;
   filler: FillerOptions;
-  legend: LegendOptions;
+  legend: LegendOptions<TType>;
   title: TitleOptions;
   tooltip: TooltipOptions<TType>;
 }

diff --git a/types/tests/plugins/plugin.tooltip/tooltip_dataset_type.ts b/types/tests/plugins/plugin.tooltip/tooltip_dataset_type.ts
@@ -0,0 +1,22 @@
+import { Chart } from '../../../index.esm';
+
+const chart = new Chart('id', {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      data: []
+    }]
+  },
+  options: {
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label: (item) => {
+            return `Y Axis ${item.dataset.yAxisID}`;
+          }
+        }
+      }
+    }
+  },
+});