mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 06:47:03 +00:00
Remove chartjs in favor of chart.js (#22442)
This commit is contained in:
Andy
@@ -1,393 +0,0 @@
|
||||
|
||||
|
||||
var canvas = <HTMLCanvasElement>document.getElementById('example-chart');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
Chart.defaults.global = {
|
||||
animation: true,
|
||||
animationSteps: 60,
|
||||
animationEasing: "easeOutQuart",
|
||||
showScale: true,
|
||||
scaleOverride: false,
|
||||
scaleSteps: null,
|
||||
scaleStepWidth: null,
|
||||
scaleStartValue: null,
|
||||
scaleLineColor: "rgba(0,0,0,.1)",
|
||||
scaleLineWidth: 1,
|
||||
scaleShowLabels: true,
|
||||
scaleLabel: "<%=value%>",
|
||||
scaleIntegersOnly: true,
|
||||
scaleBeginAtZero: false,
|
||||
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
scaleFontSize: 12,
|
||||
scaleFontStyle: "normal",
|
||||
scaleFontColor: "#666",
|
||||
responsive: false,
|
||||
maintainAspectRatio: true,
|
||||
showTooltips: true,
|
||||
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
|
||||
tooltipFillColor: "rgba(0,0,0,0.8)",
|
||||
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
tooltipFontSize: 14,
|
||||
tooltipFontStyle: "normal",
|
||||
tooltipFontColor: "#fff",
|
||||
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
tooltipTitleFontSize: 14,
|
||||
tooltipTitleFontStyle: "bold",
|
||||
tooltipTitleFontColor: "#fff",
|
||||
tooltipYPadding: 6,
|
||||
tooltipXPadding: 6,
|
||||
tooltipCaretSize: 8,
|
||||
tooltipCornerRadius: 6,
|
||||
tooltipXOffset: 10,
|
||||
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
|
||||
multiTooltipTemplate: "<%= value %>",
|
||||
onAnimationProgress: function () { },
|
||||
onAnimationComplete: function () { }
|
||||
}
|
||||
|
||||
var lineData: LinearChartData = {
|
||||
labels: ['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Accepted',
|
||||
type: 'bar',
|
||||
fillColor: 'rgba(220,220,220,0.2)',
|
||||
strokeColor: 'rgba(220,220,220,1)',
|
||||
pointColor: 'rgba(220,220,220,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
borderColor: "#9b0391",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'Quarantined',
|
||||
fillColor: 'rgba(151,187,205,0.2)',
|
||||
strokeColor: 'rgba(151,187,205,1)',
|
||||
pointColor: 'rgba(151,187,205,1)',
|
||||
pointStrokeColor: '#fff',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(151,187,205,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
yAxisID: 'quarantined'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myLineChart = new Chart(ctx).Line(lineData, {
|
||||
scaleShowGridLines: true,
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
scaleGridLineWidth: 1,
|
||||
bezierCurve: true,
|
||||
bezierCurveTension: 0.4,
|
||||
pointDot: true,
|
||||
pointDotRadius: 4,
|
||||
pointDotStrokeWidth: 1,
|
||||
pointHitDetectionRadius: 20,
|
||||
datasetStroke: true,
|
||||
datasetStrokeWidth: 2,
|
||||
datasetFill: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
position: "left",
|
||||
"id": "users"
|
||||
}, {
|
||||
position: "right",
|
||||
"id": "ratio",
|
||||
ticks: {
|
||||
min: -13
|
||||
}
|
||||
}]
|
||||
},
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myLineChartLegend: string = myLineChart.generateLegend();
|
||||
var myLineChartImage: string = myLineChart.toBase64Image();
|
||||
myLineChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
|
||||
myLineChart.clear();
|
||||
myLineChart.removeData();
|
||||
myLineChart.resize();
|
||||
myLineChart.update();
|
||||
myLineChart.stop();
|
||||
myLineChart.destroy();
|
||||
|
||||
var barData: LinearChartData = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.5)",
|
||||
strokeColor: "rgba(220,220,220,0.8)",
|
||||
highlightFill: "rgba(220,220,220,0.75)",
|
||||
highlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.5)",
|
||||
strokeColor: "rgba(151,187,205,0.8)",
|
||||
highlightFill: "rgba(151,187,205,0.75)",
|
||||
highlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myBarChart = new Chart(ctx).Bar(barData, {
|
||||
scaleBeginAtZero: true,
|
||||
scaleShowGridLines: true,
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
scaleGridLineWidth: 1,
|
||||
barShowStroke: true,
|
||||
barStrokeWidth: 2,
|
||||
barValueSpacing: 5,
|
||||
barDatasetSpacing: 1,
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
},
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myBarChartLegend: string = myBarChart.generateLegend();
|
||||
var myBarChartImage: string = myBarChart.toBase64Image();
|
||||
myBarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
|
||||
myBarChart.clear();
|
||||
myBarChart.removeData();
|
||||
myBarChart.resize();
|
||||
myBarChart.update();
|
||||
myBarChart.stop();
|
||||
myBarChart.destroy();
|
||||
|
||||
var radarData: LinearChartData = {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(220,220,220,0.2)",
|
||||
strokeColor: "rgba(220,220,220,1)",
|
||||
pointColor: "rgba(220,220,220,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(151,187,205,0.2)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myRadarChart = new Chart(ctx).Radar(radarData, {
|
||||
scaleShowLine: true,
|
||||
angleShowLineOut: true,
|
||||
scaleShowLabels: false,
|
||||
scaleBeginAtZero: true,
|
||||
angleLineColor: "rgba(0,0,0,.1)",
|
||||
angleLineWidth: 1,
|
||||
pointLabelFontFamily: "'Arial'",
|
||||
pointLabelFontStyle: "normal",
|
||||
pointLabelFontSize: 10,
|
||||
pointLabelFontColor: "#666",
|
||||
pointDot: true,
|
||||
pointDotRadius: 3,
|
||||
pointDotStrokeWidth: 1,
|
||||
pointHitDetectionRadius: 20,
|
||||
datasetStroke: true,
|
||||
datasetStrokeWidth: 2,
|
||||
datasetFill: true,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myRadarChartLegend: string = myRadarChart.generateLegend();
|
||||
var myRadarChartImage: string = myRadarChart.toBase64Image();
|
||||
myRadarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
|
||||
myRadarChart.clear();
|
||||
myRadarChart.removeData();
|
||||
myRadarChart.resize();
|
||||
myRadarChart.update();
|
||||
myRadarChart.stop();
|
||||
myRadarChart.destroy();
|
||||
|
||||
var polarAreaData: CircularChartData[] = [
|
||||
{
|
||||
value: 300,
|
||||
color: "#F7464A",
|
||||
highlight: "#FF5A5E",
|
||||
label: "Red"
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "Green"
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "Yellow"
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
color: "#949FB1",
|
||||
highlight: "#A8B3C5",
|
||||
label: "Grey"
|
||||
},
|
||||
{
|
||||
value: 120,
|
||||
color: "#4D5360",
|
||||
highlight: "#616774",
|
||||
label: "Dark Grey"
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData, {
|
||||
scaleShowLabelBackdrop: true,
|
||||
scaleBackdropColor: "rgba(255,255,255,0.75)",
|
||||
scaleBeginAtZero: true,
|
||||
scaleBackdropPaddingY: 2,
|
||||
scaleBackdropPaddingX: 2,
|
||||
scaleShowLine: true,
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 2,
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myPolarAreaChartLegend: string = myPolarAreaChart.generateLegend();
|
||||
var myPolarAreaChartImage: string = myPolarAreaChart.toBase64Image();
|
||||
myPolarAreaChart.addData({
|
||||
value: 120,
|
||||
color: "#4D5360",
|
||||
highlight: "#616774",
|
||||
label: "Dark Grey"
|
||||
}, 0);
|
||||
myPolarAreaChart.clear();
|
||||
myPolarAreaChart.removeData(0);
|
||||
myPolarAreaChart.resize();
|
||||
myPolarAreaChart.update();
|
||||
myPolarAreaChart.stop();
|
||||
myPolarAreaChart.destroy();
|
||||
|
||||
var pieData: CircularChartData[] = [
|
||||
{
|
||||
value: 300,
|
||||
color: "#F7464A",
|
||||
highlight: "#FF5A5E",
|
||||
label: "Red"
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "Green"
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "Yellow"
|
||||
}
|
||||
];
|
||||
|
||||
// For a pie chart
|
||||
var myPieChart = new Chart(ctx).Pie(pieData, {
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 2,
|
||||
percentageInnerCutout: 0,
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myPieChartLegend: string = myPieChart.generateLegend();
|
||||
var myPieChartImage: string = myPieChart.toBase64Image();
|
||||
myPieChart.addData({
|
||||
value: 120,
|
||||
color: "#4D5360",
|
||||
highlight: "#616774",
|
||||
label: "Dark Grey"
|
||||
}, 0);
|
||||
myPieChart.clear();
|
||||
myPieChart.removeData(0);
|
||||
myPieChart.resize();
|
||||
myPieChart.update();
|
||||
myPieChart.stop();
|
||||
myPieChart.destroy();
|
||||
|
||||
// And for a doughnut chart
|
||||
var myDoughnutChart = new Chart(ctx).Doughnut(pieData, {
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 2,
|
||||
percentageInnerCutout: 50,
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
|
||||
});
|
||||
|
||||
var myDoughnutChartLegend: string = myDoughnutChart.generateLegend();
|
||||
var myDoughnutChartImage: string = myDoughnutChart.toBase64Image();
|
||||
myPieChart.addData({
|
||||
value: 120,
|
||||
color: "#4D5360",
|
||||
highlight: "#616774",
|
||||
label: "Dark Grey"
|
||||
}, 0);
|
||||
myDoughnutChart.clear();
|
||||
myDoughnutChart.removeData(0);
|
||||
myDoughnutChart.resize();
|
||||
myDoughnutChart.update();
|
||||
myDoughnutChart.stop();
|
||||
myDoughnutChart.destroy();
|
||||
|
||||
// Test using charts with overrides of a subset of global options
|
||||
var partialOpts: ChartSettings = {
|
||||
showTooltips: true,
|
||||
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
|
||||
tooltipFillColor: "rgba(0,0,0,0.8)",
|
||||
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
tooltipFontSize: 14,
|
||||
tooltipFontStyle: "normal",
|
||||
tooltipFontColor: "#fff",
|
||||
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
|
||||
tooltipTitleFontSize: 14,
|
||||
tooltipTitleFontStyle: "bold",
|
||||
tooltipTitleFontColor: "#fff",
|
||||
tooltipYPadding: 6,
|
||||
tooltipXPadding: 6,
|
||||
tooltipCaretSize: 8,
|
||||
tooltipCornerRadius: 6,
|
||||
tooltipXOffset: 10,
|
||||
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"
|
||||
};
|
||||
|
||||
var my2ndLineChart = new Chart(ctx).Line(lineData, partialOpts);
|
||||
var my2ndBarChart = new Chart(ctx).Bar(barData, partialOpts);
|
||||
var my2ndRadarChart = new Chart(ctx).Radar(radarData, partialOpts);
|
||||
var my2ndPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData, partialOpts);
|
||||
var my2ndPieChart = new Chart(ctx).Pie(pieData, partialOpts);
|
||||
var my2ndDoughnutChart = new Chart(ctx).Doughnut(pieData, partialOpts);
|
||||
Vendored
-255
@@ -1,255 +0,0 @@
|
||||
// Type definitions for Chart.js
|
||||
// Project: https://github.com/nnnick/Chart.js
|
||||
// Definitions by: Steve Fenton <https://github.com/Steve-Fenton>
|
||||
// Alessio Fanelli <https://github.com/FanaHOVA>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
interface ChartDataSet {
|
||||
label: string;
|
||||
fillColor: string;
|
||||
strokeColor: string;
|
||||
type?: string;
|
||||
yAxisID?: string;
|
||||
xAxisID?: string;
|
||||
|
||||
borderColor?: string;
|
||||
/* Line, Radar */
|
||||
pointColor?: string;
|
||||
pointStrokeColor?: string;
|
||||
pointHighlightFill?: string;
|
||||
pointHighlightStroke?: string;
|
||||
|
||||
/* Bar */
|
||||
highlightFill?: string;
|
||||
highlightStroke?: string;
|
||||
backgroundColorHover?: string;
|
||||
|
||||
data: number[];
|
||||
}
|
||||
|
||||
interface LinearChartData {
|
||||
labels: string[];
|
||||
datasets: ChartDataSet[];
|
||||
}
|
||||
|
||||
interface CircularChartData {
|
||||
value: number;
|
||||
color?: string;
|
||||
highlight?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
interface ChartSettings {
|
||||
animation?: boolean;
|
||||
animationSteps?: number;
|
||||
animationEasing?: string;
|
||||
showScale?: boolean;
|
||||
scaleOverride?: boolean;
|
||||
scaleSteps?: number;
|
||||
scaleStepWidth?: number;
|
||||
scaleStartValue?: number;
|
||||
scaleLineColor?: string;
|
||||
scaleLineWidth?: number;
|
||||
scaleShowLabels?: boolean;
|
||||
scaleLabel?: string;
|
||||
scaleIntegersOnly?: boolean;
|
||||
scaleBeginAtZero?: boolean;
|
||||
scaleFontFamily?: string;
|
||||
scaleFontSize?: number;
|
||||
scaleFontStyle?: string;
|
||||
scaleFontColor?: string;
|
||||
responsive?: boolean;
|
||||
maintainAspectRatio?: boolean;
|
||||
showTooltips?: boolean;
|
||||
tooltipEvents?: string[];
|
||||
tooltipFillColor?: string;
|
||||
tooltipFontFamily?: string;
|
||||
tooltipFontSize?: number;
|
||||
tooltipFontStyle?: string;
|
||||
tooltipFontColor?: string;
|
||||
tooltipTitleFontFamily?: string;
|
||||
tooltipTitleFontSize?: number;
|
||||
tooltipTitleFontStyle?: string;
|
||||
tooltipTitleFontColor?: string;
|
||||
tooltipYPadding?: number;
|
||||
tooltipXPadding?: number;
|
||||
tooltipCaretSize?: number;
|
||||
tooltipCornerRadius?: number;
|
||||
tooltipXOffset?: number;
|
||||
tooltipTemplate?: string;
|
||||
multiTooltipTemplate?: string;
|
||||
onAnimationProgress?: () => any;
|
||||
onAnimationComplete?: () => any;
|
||||
}
|
||||
|
||||
interface ChartOptions extends ChartSettings {
|
||||
scaleShowGridLines?: boolean;
|
||||
scaleGridLineColor?: string;
|
||||
scaleGridLineWidth?: number;
|
||||
scaleShowHorizontalLines?: boolean;
|
||||
scaleShowVerticalLines?: boolean;
|
||||
legendTemplate?: string;
|
||||
tooltips?: ChartTooltips;
|
||||
legend?: ChartLegend;
|
||||
scales?: ChartScales;
|
||||
title?: ChartTitle;
|
||||
}
|
||||
|
||||
interface ChartTooltips {
|
||||
mode?: string;
|
||||
intersect?: boolean;
|
||||
}
|
||||
|
||||
interface ChartLegend {
|
||||
display?: boolean;
|
||||
position?: string;
|
||||
}
|
||||
|
||||
interface ChartScales {
|
||||
xAxes?: Array<ChartScalesOptions>;
|
||||
yAxes?: Array<ChartScalesOptions>;
|
||||
}
|
||||
|
||||
interface ChartScalesOptions {
|
||||
stacked?: boolean;
|
||||
position?: string;
|
||||
id?: string;
|
||||
ticks?: ScaleTicksOptions;
|
||||
}
|
||||
|
||||
interface ScaleTicksOptions {
|
||||
min?: number;
|
||||
max?: number;
|
||||
maxTicksLimit?: number;
|
||||
suggestedMin?: number;
|
||||
suggestedMax?: number;
|
||||
stepSize?: number;
|
||||
}
|
||||
|
||||
interface ChartTitle {
|
||||
display?: boolean;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
interface PointsAtEvent {
|
||||
value: number;
|
||||
label: string;
|
||||
datasetLabel: string;
|
||||
strokeColor: string;
|
||||
fillColor: string;
|
||||
highlightFill: string;
|
||||
highlightStroke: string;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface ChartInstance {
|
||||
clear: () => void;
|
||||
stop: () => void;
|
||||
resize: () => void;
|
||||
destroy: () => void;
|
||||
toBase64Image: () => string;
|
||||
generateLegend: () => string;
|
||||
}
|
||||
|
||||
interface LinearInstance extends ChartInstance {
|
||||
getPointsAtEvent: (event: Event) => PointsAtEvent[];
|
||||
update: () => void;
|
||||
addData: (valuesArray: number[], label: string) => void;
|
||||
removeData: (index?: number) => void;
|
||||
}
|
||||
|
||||
interface CircularInstance extends ChartInstance {
|
||||
getSegmentsAtEvent: (event: Event) => {}[];
|
||||
update: () => void;
|
||||
addData: (valuesArray: CircularChartData, index?: number) => void;
|
||||
removeData: (index: number) => void;
|
||||
segments: Array<CircularChartData>;
|
||||
}
|
||||
|
||||
interface LineChartOptions extends ChartOptions {
|
||||
bezierCurve?: boolean;
|
||||
bezierCurveTension?: number;
|
||||
pointDot?: boolean;
|
||||
pointDotRadius?: number;
|
||||
pointDotStrokeWidth?: number;
|
||||
pointHitDetectionRadius?: number;
|
||||
datasetStroke?: boolean;
|
||||
datasetStrokeWidth?: number;
|
||||
datasetFill?: boolean;
|
||||
}
|
||||
|
||||
interface BarChartOptions extends ChartOptions {
|
||||
scaleBeginAtZero?: boolean;
|
||||
barShowStroke?: boolean;
|
||||
barStrokeWidth?: number;
|
||||
barValueSpacing?: number;
|
||||
barDatasetSpacing?: number;
|
||||
}
|
||||
|
||||
interface RadarChartOptions extends ChartSettings {
|
||||
scaleShowLine?: boolean;
|
||||
angleShowLineOut?: boolean;
|
||||
scaleShowLabels?: boolean;
|
||||
scaleBeginAtZero?: boolean;
|
||||
angleLineColor?: string;
|
||||
angleLineWidth?: number;
|
||||
pointLabelFontFamily?: string;
|
||||
pointLabelFontStyle?: string;
|
||||
pointLabelFontSize?: number;
|
||||
pointLabelFontColor?: string;
|
||||
pointDot?: boolean;
|
||||
pointDotRadius?: number;
|
||||
pointDotStrokeWidth?: number;
|
||||
pointHitDetectionRadius?: number;
|
||||
datasetStroke?: boolean;
|
||||
datasetStrokeWidth?: number;
|
||||
datasetFill?: boolean;
|
||||
legendTemplate?: string;
|
||||
}
|
||||
|
||||
interface PolarAreaChartOptions extends ChartSettings {
|
||||
scaleShowLabelBackdrop?: boolean;
|
||||
scaleBackdropColor?: string;
|
||||
scaleBeginAtZero?: boolean;
|
||||
scaleBackdropPaddingY?: number;
|
||||
scaleBackdropPaddingX?: number;
|
||||
scaleShowLine?: boolean;
|
||||
segmentShowStroke?: boolean;
|
||||
segmentStrokeColor?: string;
|
||||
segmentStrokeWidth?: number;
|
||||
animationSteps?: number;
|
||||
animationEasing?: string;
|
||||
animateRotate?: boolean;
|
||||
animateScale?: boolean;
|
||||
legendTemplate?: string;
|
||||
}
|
||||
|
||||
interface PieChartOptions extends ChartSettings {
|
||||
segmentShowStroke?: boolean;
|
||||
segmentStrokeColor?: string;
|
||||
segmentStrokeWidth?: number;
|
||||
percentageInnerCutout?: number;
|
||||
animationSteps?: number;
|
||||
animationEasing?: string;
|
||||
animateRotate?: boolean;
|
||||
animateScale?: boolean;
|
||||
legendTemplate?: string;
|
||||
}
|
||||
|
||||
interface Chart {
|
||||
Line(data: LinearChartData, options?: LineChartOptions): LinearInstance;
|
||||
Bar(data: LinearChartData, options?: BarChartOptions): LinearInstance;
|
||||
Radar(data: LinearChartData, options?: RadarChartOptions): LinearInstance;
|
||||
|
||||
PolarArea(data: CircularChartData[], options?: PolarAreaChartOptions): CircularInstance;
|
||||
Pie(data: CircularChartData[], options?: PieChartOptions): CircularInstance;
|
||||
Doughnut(data: CircularChartData[], options?: PieChartOptions): CircularInstance;
|
||||
}
|
||||
|
||||
declare var Chart: {
|
||||
new (context: CanvasRenderingContext2D): Chart;
|
||||
defaults: {
|
||||
global: ChartSettings;
|
||||
}
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"chartjs-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"adjacent-overload-signatures": false,
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": false,
|
||||
"ban-types": false,
|
||||
"callable-types": false,
|
||||
"comment-format": false,
|
||||
"dt-header": false,
|
||||
"eofline": false,
|
||||
"export-just-namespace": false,
|
||||
"import-spacing": false,
|
||||
"interface-name": false,
|
||||
"interface-over-type-literal": false,
|
||||
"jsdoc-format": false,
|
||||
"max-line-length": false,
|
||||
"member-access": false,
|
||||
"new-parens": false,
|
||||
"no-any-union": false,
|
||||
"no-boolean-literal-compare": false,
|
||||
"no-conditional-assignment": false,
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-construct": false,
|
||||
"no-declare-current-package": false,
|
||||
"no-duplicate-imports": false,
|
||||
"no-duplicate-variable": false,
|
||||
"no-empty-interface": false,
|
||||
"no-for-in-array": false,
|
||||
"no-inferrable-types": false,
|
||||
"no-internal-module": false,
|
||||
"no-irregular-whitespace": false,
|
||||
"no-mergeable-namespace": false,
|
||||
"no-misused-new": false,
|
||||
"no-namespace": false,
|
||||
"no-object-literal-type-assertion": false,
|
||||
"no-padding": false,
|
||||
"no-redundant-jsdoc": false,
|
||||
"no-redundant-jsdoc-2": false,
|
||||
"no-redundant-undefined": false,
|
||||
"no-reference-import": false,
|
||||
"no-relative-import-in-test": false,
|
||||
"no-self-import": false,
|
||||
"no-single-declare-module": false,
|
||||
"no-string-throw": false,
|
||||
"no-unnecessary-callback-wrapper": false,
|
||||
"no-unnecessary-class": false,
|
||||
"no-unnecessary-generics": false,
|
||||
"no-unnecessary-qualifier": false,
|
||||
"no-unnecessary-type-assertion": false,
|
||||
"no-useless-files": false,
|
||||
"no-var-keyword": false,
|
||||
"no-var-requires": false,
|
||||
"no-void-expression": false,
|
||||
"no-trailing-whitespace": false,
|
||||
"object-literal-key-quotes": false,
|
||||
"object-literal-shorthand": false,
|
||||
"one-line": false,
|
||||
"one-variable-per-declaration": false,
|
||||
"only-arrow-functions": false,
|
||||
"prefer-conditional-expression": false,
|
||||
"prefer-const": false,
|
||||
"prefer-declare-function": false,
|
||||
"prefer-for-of": false,
|
||||
"prefer-method-signature": false,
|
||||
"prefer-template": false,
|
||||
"radix": false,
|
||||
"semicolon": false,
|
||||
"space-before-function-paren": false,
|
||||
"space-within-parens": false,
|
||||
"strict-export-declare-modifiers": false,
|
||||
"trim-file": false,
|
||||
"triple-equals": false,
|
||||
"typedef-whitespace": false,
|
||||
"unified-signatures": false,
|
||||
"void-return": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user