diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts new file mode 100644 index 000000000..2374b6228 --- /dev/null +++ b/chartjs/chart-tests.ts @@ -0,0 +1,343 @@ +/// + +var canvas = 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', + 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, 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] + } + ] +}; + +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, + legendTemplate: "" +}); + +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, + legendTemplate: "" +}); + +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: "" +}); + +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: "" +}); + +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: "" +}); + +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: "" +}); + +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(); diff --git a/chartjs/chart.d.ts b/chartjs/chart.d.ts new file mode 100644 index 000000000..7364c6525 --- /dev/null +++ b/chartjs/chart.d.ts @@ -0,0 +1,205 @@ +// Type definitions for Chart.js +// Project: https://github.com/nnnick/Chart.js +// Definitions by: Steve Fenton +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +interface ChartDataSet { + label: string; + fillColor: string; + strokeColor: string; + + /* Line, Radar */ + pointColor?: string; + pointStrokeColor?: string; + pointHighlightFill?: string; + pointHighlightStroke?: string; + + /* Bar */ + highlightFill?: string; + highlightStroke?: 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 { + scaleShowGridLines?: boolean; + scaleGridLineColor?: string; + scaleGridLineWidth?: number; + legendTemplate?: 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: () => void; +} + +interface CircularInstance extends ChartInstance { + getSegmentsAtEvent: (event: Event) => {}[]; + update: () => void; + addData: (valuesArray: CircularChartData[], index: number) => void; + removeData: (index: number) => void; +} + +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 { + 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 { + 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 { + 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; + } +};