vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-06-28 14:20:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[chart.js] Add DoughnutModel interface (#40537)

Browse Source 
* [chart.js] Add DoughnutModel interface

* [chart.js] Update Model interface to contain properties used with the doughnut chart.
This commit is contained in:
Jordan
2019-12-02 10:55:20 -08:00
committed by Andrew Casey
parent a14c7963a0
commit dee35106d1
2 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -305,3 +305,99 @@ Chart.defaults.global.defaultFontFamily = 'Arial';
Chart.defaults.global.tooltips.backgroundColor = '#0a2c54';
Chart.defaults.global.tooltips.cornerRadius = 2;
Chart.defaults.global.tooltips.displayColors = false;
const doughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
backgroundColor: '#ff0000',
borderColor: '#000000',
borderWidth: 3,
data: [1, 3, 5]
}
]
}
});
// Testing Model properties
if (doughnutChart.getDatasetMeta(0).data.length > 0) {
const doughnutChartModel = doughnutChart.getDatasetMeta(0).data[0]._model;
console.log(doughnutChartModel.backgroundColor);
console.log(doughnutChartModel.borderAlign);
console.log(doughnutChartModel.borderColor);
console.log(doughnutChartModel.borderWidth);
console.log(doughnutChartModel.circumference);
console.log(doughnutChartModel.controlPointNextX);
console.log(doughnutChartModel.controlPointNextY);
console.log(doughnutChartModel.controlPointPreviousX);
console.log(doughnutChartModel.controlPointPreviousY);
console.log(doughnutChartModel.endAngle);
console.log(doughnutChartModel.hitRadius);
console.log(doughnutChartModel.innerRadius);
console.log(doughnutChartModel.outerRadius);
console.log(doughnutChartModel.pointStyle);
console.log(doughnutChartModel.radius);
console.log(doughnutChartModel.skip);
console.log(doughnutChartModel.startAngle);
console.log(doughnutChartModel.steppedLine);
console.log(doughnutChartModel.tension);
console.log(doughnutChartModel.x);
console.log(doughnutChartModel.y);
console.log(doughnutChartModel.base);
console.log(doughnutChartModel.head);
const doughnutChartView = doughnutChart.getDatasetMeta(0).data[0]._view;
console.log(doughnutChartView.backgroundColor);
console.log(doughnutChartView.borderAlign);
console.log(doughnutChartView.borderColor);
console.log(doughnutChartView.borderWidth);
console.log(doughnutChartView.circumference);
console.log(doughnutChartView.controlPointNextX);
console.log(doughnutChartView.controlPointNextY);
console.log(doughnutChartView.controlPointPreviousX);
console.log(doughnutChartView.controlPointPreviousY);
console.log(doughnutChartView.endAngle);
console.log(doughnutChartView.hitRadius);
console.log(doughnutChartView.innerRadius);
console.log(doughnutChartView.outerRadius);
console.log(doughnutChartView.pointStyle);
console.log(doughnutChartView.radius);
console.log(doughnutChartView.skip);
console.log(doughnutChartView.startAngle);
console.log(doughnutChartView.steppedLine);
console.log(doughnutChartView.tension);
console.log(doughnutChartView.x);
console.log(doughnutChartView.y);
console.log(doughnutChartView.base);
console.log(doughnutChartView.head);
}
// Testing DoughnutModel properties
if (doughnutChart.getDatasetMeta(0).data.length > 0) {
const doughnutChartModel = doughnutChart.getDatasetMeta(0).data[0]._model as Chart.DoughnutModel;
console.log(doughnutChartModel.backgroundColor);
console.log(doughnutChartModel.borderAlign);
console.log(doughnutChartModel.borderColor);
console.log(doughnutChartModel.borderWidth);
console.log(doughnutChartModel.circumference);
console.log(doughnutChartModel.endAngle);
console.log(doughnutChartModel.innerRadius);
console.log(doughnutChartModel.outerRadius);
console.log(doughnutChartModel.startAngle);
console.log(doughnutChartModel.x);
console.log(doughnutChartModel.y);
const doughnutChartView = doughnutChart.getDatasetMeta(0).data[0]._view as Chart.DoughnutModel;
console.log(doughnutChartView.backgroundColor);
console.log(doughnutChartView.borderAlign);
console.log(doughnutChartView.borderColor);
console.log(doughnutChartView.borderWidth);
console.log(doughnutChartView.circumference);
console.log(doughnutChartView.endAngle);
console.log(doughnutChartView.innerRadius);
console.log(doughnutChartView.outerRadius);
console.log(doughnutChartView.startAngle);
console.log(doughnutChartView.x);
console.log(doughnutChartView.y);
}

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

@@ -105,18 +105,27 @@ interface MetaData {
hidden?: boolean;
}
// NOTE: This model is generic with a bunch of optional properties to represent all types of chart models.
// Each chart type defines their own unique model structure so some of these optional properties
// might always have values depending on the chart type.
interface Model {
backgroundColor: string;
borderAlign?: Chart.BorderAlignment;
borderColor: string;
borderWidth?: number;
circumference?: number;
controlPointNextX: number;
controlPointNextY: number;
controlPointPreviousX: number;
controlPointPreviousY: number;
endAngle?: number;
hitRadius: number;
innerRadius?: number;
outerRadius?: number;
pointStyle: string;
radius: string;
skip?: boolean;
startAngle?: number;
steppedLine?: undefined;
tension: number;
x: number;
@@ -801,6 +810,21 @@ declare namespace Chart {
lazy?: boolean;
easing?: Easing;
}
// Model used with the doughnut chart
interface DoughnutModel {
backgroundColor: ChartColor;
borderAlign: BorderAlignment;
borderColor: string;
borderWidth: number;
circumference: number;
endAngle: number;
innerRadius: number;
outerRadius: number;
startAngle: number;
x: number;
y: number;
}
}
export = Chart;