Fix some typings issues (#9680)

* Types: Add scope to ticks.callback * Fix some typings issues
chartjs · Sep 24, 2021 · 990a289 · 990a289
1 parent 5587738
commit 990a289
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 9 deletions.
diff --git a/docs/samples/advanced/linear-gradient.md b/docs/samples/advanced/linear-gradient.md
@@ -47,7 +47,7 @@ let width, height, gradient;
 function getGradient(ctx, chartArea) {
   const chartWidth = chartArea.right - chartArea.left;
   const chartHeight = chartArea.bottom - chartArea.top;
-  if (gradient === null || width !== chartWidth || height !== chartHeight) {
+  if (!gradient || width !== chartWidth || height !== chartHeight) {
     // Create the gradient because this is either the first render
     // or the size of the chart has changed
     width = chartWidth;
@@ -79,7 +79,7 @@ const data = {
 
         if (!chartArea) {
           // This case happens on initial chart load
-          return null;
+          return;
         }
         return getGradient(ctx, chartArea);
       },

diff --git a/docs/samples/advanced/radial-gradient.md b/docs/samples/advanced/radial-gradient.md
@@ -30,7 +30,7 @@ function createRadialGradient3(context, c1, c2, c3) {
   const chartArea = context.chart.chartArea;
   if (!chartArea) {
     // This case happens on initial chart load
-    return null;
+    return;
   }
 
   const chartWidth = chartArea.right - chartArea.left;

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -34,7 +34,7 @@ export interface ScriptableLineSegmentContext {
   datasetIndex: number
 }
 
-export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnyObject) => T);
+export type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnyObject) => T | undefined);
 export type ScriptableOptions<T, TContext> = { [P in keyof T]: Scriptable<T[P], TContext> };
 export type ScriptableAndArray<T, TContext> = readonly T[] | Scriptable<T, TContext>;
 export type ScriptableAndArrayOptions<T, TContext> = { [P in keyof T]: ScriptableAndArray<T[P], TContext> };
@@ -1402,22 +1402,22 @@ export interface CoreChartOptions<TType extends ChartType> extends ParsingOption
    * base color
    * @see Defaults.color
    */
-  color: Color;
+  color: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base background color
    * @see Defaults.backgroundColor
    */
-  backgroundColor: Color;
+  backgroundColor: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base border color
    * @see Defaults.borderColor
    */
-  borderColor: Color;
+  borderColor: Scriptable<Color, ScriptableContext<TType>>;
   /**
    * base font
    * @see Defaults.font
    */
-  font: FontSpec;
+  font: Scriptable<Partial<FontSpec>, ScriptableContext<TType>>;
   /**
    * Resizes the chart canvas when its container does (important note...).
    * @default true
@@ -2805,7 +2805,7 @@ export interface TickOptions {
   /**
    * Returns the string representation of the tick value as it should be displayed on the chart. See callback.
    */
-  callback: (tickValue: number | string, index: number, ticks: Tick[]) => string | number | null | undefined;
+  callback: (this: Scale, tickValue: number | string, index: number, ticks: Tick[]) => string | number | null | undefined;
   /**
    * If true, show tick labels.
    * @default true

diff --git a/types/tests/scales/options.ts b/types/tests/scales/options.ts
@@ -26,6 +26,14 @@ const chart = new Chart('test', {
           // @ts-expect-error Type 'string' is not assignable to type 'false | "millisecond" | "second" | "minute" | "hour" | "day" | "week" | "month" | "quarter" | "year" | undefined'.
           unit: 'year'
         }
+      },
+      y: {
+        ticks: {
+          callback(tickValue) {
+            const value = this.getLabelForValue(tickValue as number);
+            return '$' + value;
+          }
+        }
       }
     }
   }

diff --git a/types/tests/scriptable_core_chart_options.ts b/types/tests/scriptable_core_chart_options.ts
@@ -0,0 +1,15 @@
+import { ChartConfiguration } from '../index.esm';
+
+const getConfig = (): ChartConfiguration<'bar'> => {
+  return {
+    type: 'bar',
+    data: {
+      datasets: []
+    },
+    options: {
+      backgroundColor: (context) => context.active ? '#fff' : undefined,
+      font: (context) => context.datasetIndex === 1 ? { size: 10 } : { size: 12, family: 'arial' }
+    }
+  };
+};
+