vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[chart.js] add scriptable dataset options (#37703)

Browse Source 
* [chart.js] add scriptable ChartDataSets options to existing props

* [chart.js] add missing scriptable ChartDataSets options

* [chart.js] removed consecutive blank line and trailing whitespace

* [chart.js] add indexable borderSkipped and fixed hoverBorderWidth type

* [chart.js] add test for scriptable option
This commit is contained in:
Tobias Krahn 2019-08-22 17:30:52 +02:00 committed by Sheetal Nandi
parent bfad66b0ea
commit e8451e11e1
2 changed files with 54 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
types/chart.js/chart.js-tests.ts
View File

@ -1,11 +1,11 @@
import { Chart, ChartData, Point } from 'chart.js';
import { Chart, ChartData, Point, ChartColor } from 'chart.js';
// alternative:
// import chartjs = require('chart.js');
// => chartjs.Chart
const plugin = {
afterDraw: (chartInstance: Chart, easing: Chart.Easing, options?: any) => {},
afterDraw: (chartInstance: Chart, easing: Chart.Easing, options?: any) => { },
};
const ctx = new CanvasRenderingContext2D();
@ -180,3 +180,24 @@ if (radialChart.aspectRatio !== null) {
console.log(radialChart.aspectRatio * 2);
}
console.log(radialChart.options === radialChart.config.options);
const chartWithScriptedOptions = new Chart(new CanvasRenderingContext2D(), {
type: "bar",
data: {
labels: ["a", "b", "c", "d", "e"],
datasets: [{
label: "test",
data: [1, 3, 5, 4, 2],
backgroundColor: ({ dataset, dataIndex }): ChartColor => {
if (dataset === undefined || dataset.data === undefined || dataIndex === undefined) {
return "black";
}
const value = dataset.data[dataIndex];
if (typeof value !== "number") {
return "black";
}
return value > 3 ? "red" : "green";
}
}],
}
});

48
types/chart.js/index.d.ts vendored
View File

@ -135,6 +135,8 @@ declare namespace Chart {
type TextAlignment = 'left' | 'center' | 'right';
type BorderAlignment = 'center' | 'inner';
interface ChartArea {
top: number;
right: number;
@ -522,34 +524,46 @@ declare namespace Chart {
type ChartColor = string | CanvasGradient | CanvasPattern | string[];
type Scriptable<T> = (ctx: {
chart?: Chart;
dataIndex?: number;
dataset?: ChartDataSets
datasetIndex?: number;
}) => T;
interface ChartDataSets {
cubicInterpolationMode?: 'default' | 'monotone';
backgroundColor?: ChartColor | ChartColor[];
borderWidth?: number | number[];
borderColor?: ChartColor | ChartColor[];
backgroundColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
borderAlign?: BorderAlignment | BorderAlignment[] | Scriptable<BorderAlignment>;
borderWidth?: number | number[] | Scriptable<number>;
borderColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
borderCapStyle?: 'butt' | 'round' | 'square';
borderDash?: number[];
borderDashOffset?: number;
borderJoinStyle?: 'bevel' | 'round' | 'miter';
borderSkipped?: PositionType;
borderSkipped?: PositionType | PositionType[] | Scriptable<PositionType>;
data?: Array<number | null | undefined> | ChartPoint[];
fill?: boolean | number | string;
hoverBackgroundColor?: ChartColor | ChartColor[];
hoverBorderColor?: ChartColor | ChartColor[];
hoverBorderWidth?: number | number[];
hitRadius?: number | number[] | Scriptable<number>;
hoverBackgroundColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
hoverBorderColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
hoverBorderWidth?: number | number[] | Scriptable<number>;
label?: string;
lineTension?: number;
steppedLine?: 'before' | 'after' | 'middle' | boolean;
pointBorderColor?: ChartColor | ChartColor[];
pointBackgroundColor?: ChartColor | ChartColor[];
pointBorderWidth?: number | number[];
pointRadius?: number | number[];
pointHoverRadius?: number | number[];
pointHitRadius?: number | number[];
pointHoverBackgroundColor?: ChartColor | ChartColor[];
pointHoverBorderColor?: ChartColor | ChartColor[];
pointHoverBorderWidth?: number | number[];
pointStyle?: PointStyle | HTMLImageElement | HTMLCanvasElement | Array<PointStyle | HTMLImageElement | HTMLCanvasElement>;
pointBorderColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
pointBackgroundColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
pointBorderWidth?: number | number[] | Scriptable<number>;
pointRadius?: number | number[] | Scriptable<number>;
pointRotation?: number | number[] | Scriptable<number>;
pointHoverRadius?: number | number[] | Scriptable<number>;
pointHitRadius?: number | number[] | Scriptable<number>;
pointHoverBackgroundColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
pointHoverBorderColor?: ChartColor | ChartColor[] | Scriptable<ChartColor>;
pointHoverBorderWidth?: number | number[] | Scriptable<number>;
pointStyle?: PointStyle | HTMLImageElement | HTMLCanvasElement | Array<PointStyle | HTMLImageElement | HTMLCanvasElement> | Scriptable<PointStyle | HTMLImageElement | HTMLCanvasElement>;
radius?: number | number[] | Scriptable<number>;
rotation?: number | number[] | Scriptable<number>;
xAxisID?: string;
yAxisID?: string;
type?: ChartType | string;