Enable scriptable element chart options (#9012)

chartjs · May 1, 2021 · 49e7eda · 49e7eda
1 parent ea7b8cb
commit 49e7eda
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 11 deletions.
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -604,7 +604,7 @@ export interface DatasetControllerChartComponent extends ChartComponent {
   };
 }
 
-export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptions, PluginChartOptions<ChartType> {
+export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptions<ChartType>, PluginChartOptions<ChartType> {
 
   scale: ScaleOptionsByType;
   scales: {
@@ -641,7 +641,7 @@ export interface Defaults extends CoreChartOptions<ChartType>, ElementChartOptio
 export type Overrides = {
   [key in ChartType]:
     CoreChartOptions<key> &
-    ElementChartOptions &
+    ElementChartOptions<key> &
     PluginChartOptions<key> &
     DatasetChartOptions<ChartType> &
     ScaleChartOptions<key> &
@@ -1887,16 +1887,17 @@ export const BarElement: ChartComponent & {
   new (cfg: AnyObject): BarElement;
 };
 
-export interface ElementOptionsByType {
-  arc: ArcOptions & ArcHoverOptions;
-  bar: BarOptions & BarHoverOptions;
-  line: LineOptions & LineHoverOptions;
-  point: PointOptions & PointHoverOptions;
-}
-export interface ElementChartOptions {
-  elements: Partial<ElementOptionsByType>;
+export interface ElementOptionsByType<TType extends ChartType> {
+  arc: ScriptableAndArrayOptions<ArcOptions & ArcHoverOptions, ScriptableContext<TType>>;
+  bar: ScriptableAndArrayOptions<BarOptions & BarHoverOptions, ScriptableContext<TType>>;
+  line: ScriptableAndArrayOptions<LineOptions & LineHoverOptions, ScriptableContext<TType>>;
+  point: ScriptableAndArrayOptions<PointOptions & PointHoverOptions, ScriptableContext<TType>>;
 }
 
+export type ElementChartOptions<TType extends ChartType = ChartType> = {
+  elements: ElementOptionsByType<TType>
+};
+
 export class BasePlatform {
   /**
    * Called at chart construction time, returns a context2d instance implementing
@@ -3321,7 +3322,7 @@ export type ScaleChartOptions<TType extends ChartType = ChartType> = {
 
 export type ChartOptions<TType extends ChartType = ChartType> = DeepPartial<
   CoreChartOptions<TType> &
-  ElementChartOptions &
+  ElementChartOptions<TType> &
   PluginChartOptions<TType> &
   DatasetChartOptions<TType> &
   ScaleChartOptions<TType> &

diff --git a/types/tests/elements/scriptable_element_options.ts b/types/tests/elements/scriptable_element_options.ts
@@ -0,0 +1,49 @@
+import { Chart } from '../../index.esm';
+
+const chart = new Chart('id', {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: []
+  },
+  options: {
+    elements: {
+      line: {
+        borderWidth: () => 2,
+      },
+      point: {
+        pointStyle: (ctx) => 'star',
+      }
+    }
+  }
+});
+
+const chart2 = new Chart('id', {
+  type: 'bar',
+  data: {
+    labels: [],
+    datasets: []
+  },
+  options: {
+    elements: {
+      bar: {
+        borderWidth: (ctx) => 2,
+      }
+    }
+  }
+});
+
+const chart3 = new Chart('id', {
+  type: 'doughnut',
+  data: {
+    labels: [],
+    datasets: []
+  },
+  options: {
+    elements: {
+      arc: {
+        borderWidth: (ctx) => 3,
+      }
+    }
+  }
+});