From dee35106d1897aa5ea40d9ca38b48d9befba854e Mon Sep 17 00:00:00 2001 From: Jordan Date: Mon, 2 Dec 2019 10:55:20 -0800 Subject: [PATCH] [chart.js] Add DoughnutModel interface (#40537) * [chart.js] Add DoughnutModel interface * [chart.js] Update Model interface to contain properties used with the doughnut chart. --- types/chart.js/chart.js-tests.ts | 96 ++++++++++++++++++++++++++++++++ types/chart.js/index.d.ts | 24 ++++++++ 2 files changed, 120 insertions(+) diff --git a/types/chart.js/chart.js-tests.ts b/types/chart.js/chart.js-tests.ts index 0a462fcb7f..aa0f0fab9c 100644 --- a/types/chart.js/chart.js-tests.ts +++ b/types/chart.js/chart.js-tests.ts @@ -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); +} diff --git a/types/chart.js/index.d.ts b/types/chart.js/index.d.ts index ab164dab80..19d5f57524 100644 --- a/types/chart.js/index.d.ts +++ b/types/chart.js/index.d.ts @@ -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;