From 079fd7bc358ba4ab8436a28e44eefd96ee8e1d16 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 11:23:30 -0400 Subject: [PATCH 01/11] Adding stub of chartist.d.ts --- chartist/chartist.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 chartist/chartist.d.ts diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts new file mode 100644 index 0000000000..0123c13c01 --- /dev/null +++ b/chartist/chartist.d.ts @@ -0,0 +1,8 @@ +// Type definitions for Chartist v0.9.4 +// Project: https://github.com/gionkunz/chartist-js +// Definitions by: Matt Gibbs +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +declare module Chartist { + +} \ No newline at end of file From d02cd58fb1317ab8db3e630711fb9f4ab37d782b Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:01:35 -0400 Subject: [PATCH 02/11] Filling in some content. --- chartist/chartist.d.ts | 214 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 212 insertions(+), 2 deletions(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 0123c13c01..45ae8595de 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -1,8 +1,218 @@ -// Type definitions for Chartist v0.9.4 +// Type definitions for Chartist v0.9.4 // Project: https://github.com/gionkunz/chartist-js // Definitions by: Matt Gibbs // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module Chartist { + interface ChartistStatic { + Pie(target: any, data: any, options?: IPieChartOptions, responsiveOptions?: Array>): any; + Bar(target: any, data: any, options?: IBarChartOptions, responsiveOptions?: Array>): any; + Line(target: any, data: any, options?: ILineChartOptions, responsiveOptions?: Array>): any; + } -} \ No newline at end of file + interface IResponsiveOptionTuple extends Array { + 0: string; + 1: T; + } + + interface IChartOptions { + /** + * If true the whole data is reversed including labels, the series order as well as the whole series data arrays. + */ + reverseData?: boolean; + } + + interface IPieChartOptions extends IChartOptions { + /** + * Specify a fixed width for the chart as a string (i.e. '100px' or '50%') + */ + width?: number | string; + + /** + * Specify a fixed height for the chart as a string (i.e. '100px' or '50%') + */ + height?: number | string; + + /** + * Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5} + */ + chartPadding?: IChartPadding | number; + + /** + * Override the class names that are used to generate the SVG structure of the chart + */ + classNames?: IPieChartClasses; + + /** + * The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise. + */ + startAngle?: number; + + /** + * An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts. + */ + total?: number; + + /** + * If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices. + */ + donut?: boolean; + + /** + * Specify the donut stroke width, currently done in javascript for convenience. + */ + donutWidth?: number; + + /** + * Specify if a label should be shown or not + */ + showLabel?: boolean; + + /** + * Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center. + */ + labelOffset?: number; + + /** + * This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option. + */ + labelPosition?: string; + + /** + * An interpolation function for the label value + */ + labelInterpolationFnc?: Function; + + /** + * Label direction can be 'neutral', 'explode' or 'implode'. Default is 'neutral'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center. + */ + labelDirection?: string; + } + + interface IChartPadding { + top?: number; + right?: number; + bottom?: number; + left?: number; + } + + interface IPieChartClasses { + chartPie?: string; + chartDonut?: string; + series?: string; + slicePie?: string; + sliceDonut?: string; + label?: string; + } + + interface IBarChartOptions extends IChartOptions { + axisX?: IBarChartAxis; + axisY?: IBarChartAxis; + width?: number | string; + height?: number | string; + high?: number; + low?: number; + onlyInteger?: boolean; + chartPadding?: IChartPadding; + seriesBarDistance?: number; + + /** + * If set to true this property will cause the series bars to be stacked and form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect. + */ + stackBars?: boolean; + + horizontalBars?: boolean; + distributeSeries?: boolean; + } + + interface IBarChartAxis { + offset?: number; + position?: string; + labelOffset?: { + x?: number; + y?: number; + }, + showLabel?: boolean; + showGrid?: boolean; + labelInterpolationFnc?: Function; + scaleMinSpace: number; + onlyInteger: boolean; + } + + interface IBarChartClasses { + chart?: string; + horizontalBars?: string; + label?: string; + labelGroup?: string; + series?: string; + bar?: string; + grid?: string; + gridGroup?: string; + vertical?: string; + horizontal?: string; + start?: string; + end?: string; + } + + interface ILineChartOptions extends IChartOptions { + axisX?: ILineChartXAxis; + axisY?: ILineChartYAxis; + width?: number | string; + height?: number | string; + showLine?: boolean; + showPoint?: boolean; + showArea?: boolean; + areaBase?: number; + lineSmooth?: boolean; + low?: number; + high?: number; + chartPadding?: IChartPadding; + fullWidth?: boolean; + reverseData?: boolean; + classNames?: ILineChartClasses; + } + + interface ILineChartAxis { + offset?: number; + position?: string; + labelOffset?: { + x?: number; + y?: number; + }; + showLabel?: boolean; + showGrid?: boolean; + labelInterpolationFnc?: Function; + type?: any; + } + + interface ILineChartXAxis extends ILineChartAxis { + } + + interface ILineChartYAxis extends ILineChartAxis { + scaleMinSpace?: number; + onlyInteger?: boolean; + + } + + // TODO: Finish documenting all of the defaults + interface ILineChartClasses { + /** + * Default is 'ct-chart-line' + */ + chart?: string; + label?: string; + labelGroup?: string; + series?: string; + line?: string; + point?: string; + area?: string; + grid?: string; + gridGroup?: string; + vertical?: string; + horizontal?: string; + start?: string; + end?: string; + } +} + +declare var Chartist: Chartist.ChartistStatic; From b5491028b27e82265932891581f6bebf346b8526 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:01:50 -0400 Subject: [PATCH 03/11] Adding some examples from chartists' site for testing. --- chartist/chartist-tests.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 chartist/chartist-tests.ts diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts new file mode 100644 index 0000000000..cc3b8a6926 --- /dev/null +++ b/chartist/chartist-tests.ts @@ -0,0 +1,30 @@ +/// + +new Chartist.Line('.ct-chart', { + labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], + series: [ + [12, 9, 7, 8, 5], + [2, 1, 3.5, 7, 3], + [1, 3, 4, 5, 6] + ] +}, { + fullWidth: true, + chartPadding: { + right: 40 + } +}); + +var chart = new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], + series: [ + [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], + [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null], + [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null] + ] +}, { + fullWidth: true, + chartPadding: { + right: 10 + }, + low: 0 +}); From 7f02343898ed329f347283e4b9b0f51aa07ee575 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:28:29 -0400 Subject: [PATCH 04/11] More Test data Had to add some explicit typing to some of the example functions just to get the test to complete successfully. Maybe that shouldn't be a concern in the test files? --- chartist/chartist-tests.ts | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index cc3b8a6926..513ee255dd 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -28,3 +28,41 @@ var chart = new Chartist.Line('.ct-chart', { }, low: 0 }); + +new Chartist.Line('.ct-chart', { + labels: ['1', '2', '3', '4', '5', '6'], + series: [ + { + name: 'Fibonacci sequence', + data: [1, 2, 3, 5, 8, 13] + }, + { + name: 'Golden section', + data: [1, 1.618, 2.618, 4.236, 6.854, 11.09] + } + ] +}); + + + +var data = { + series: [5, 3, 4] +}; + +var sum = function(a: number, b: number) { return a + b }; + +new Chartist.Pie('.ct-chart', data, { + labelInterpolationFnc: function(value: number) { + return Math.round(value / data.series.reduce(sum) * 100) + '%'; + } +}); + +new Chartist.Pie('.ct-chart', { + series: [20, 10, 30, 40] +}, { + donut: true, + donutWidth: 60, + startAngle: 270, + total: 200, + showLabel: false +}); From c113a72c509cc2e5a6f79235f28ef8fb62a98e51 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:28:41 -0400 Subject: [PATCH 05/11] Messed up the "new" part in the typing file. --- chartist/chartist.d.ts | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 45ae8595de..290354ebb7 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -5,9 +5,9 @@ declare module Chartist { interface ChartistStatic { - Pie(target: any, data: any, options?: IPieChartOptions, responsiveOptions?: Array>): any; - Bar(target: any, data: any, options?: IBarChartOptions, responsiveOptions?: Array>): any; - Line(target: any, data: any, options?: ILineChartOptions, responsiveOptions?: Array>): any; + Pie: IChartistPieChart; + Bar: IChartistBarChart; + Line: IChartistLineChart; } interface IResponsiveOptionTuple extends Array { @@ -15,6 +15,30 @@ declare module Chartist { 1: T; } + interface IChartistBase { + container: any; + data: any; + defaultOptions: T; + options: T; + responsiveOptions: Array>; + eventEmitter: any; + supportsForeignObject: boolean; + supportsAnimations: boolean; + resizeListener: any; + } + + interface IChartistPieChart extends IChartistBase { + new (target: any, data: any, options?: IPieChartOptions, responsiveOptions?: Array>): IChartistPieChart; + } + + interface IChartistLineChart extends IChartistBase { + new (target: any, data: any, options?: ILineChartOptions, responsiveOptions?: Array>): IChartistLineChart; + } + + interface IChartistBarChart extends IChartistBase { + new (target: any, data: any, options?: IBarChartOptions, responsiveOptions?: Array>): IChartistBarChart; + } + interface IChartOptions { /** * If true the whole data is reversed including labels, the series order as well as the whole series data arrays. From 9dc1ff729ff73418f5b4ff941d25b246bea2ebc7 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:47:40 -0400 Subject: [PATCH 06/11] Trying to improve coverage in tests. Still lots of implicit any catching me. Having to be explicit in the test. --- chartist/chartist-tests.ts | 54 +++++++++++++++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 513ee255dd..db4fbfbfcb 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -14,7 +14,7 @@ new Chartist.Line('.ct-chart', { } }); -var chart = new Chartist.Line('.ct-chart', { +var lineChart = new Chartist.Line('.ct-chart', { labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], series: [ [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9], @@ -43,8 +43,6 @@ new Chartist.Line('.ct-chart', { ] }); - - var data = { series: [5, 3, 4] }; @@ -66,3 +64,53 @@ new Chartist.Pie('.ct-chart', { total: 200, showLabel: false }); + + +// Animation Donut example + +var chart = new Chartist.Pie('.ct-chart', { + series: [10, 20, 50, 20, 5, 50, 15], + labels: [1, 2, 3, 4, 5, 6, 7] +}, { + donut: true, + showLabel: false +}); + +chart.on('draw', function(data: any) { + if(data.type === 'slice') { + // Get the total path length in order to use for dash array animation + var pathLength = data.element._node.getTotalLength(); + + // Set a dasharray that matches the path length as prerequisite to animate dashoffset + data.element.attr({ + 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px' + }); + + // Create animation definition while also assigning an ID to the animation for later sync usage + var animationDefinition: any = { + 'stroke-dashoffset': { + id: 'anim' + data.index, + dur: 1000, + from: -pathLength + 'px', + to: '0px', + easing: Chartist.Svg.Easing.easeOutQuint, + // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible) + fill: 'freeze' + } + }; + + // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation + if(data.index !== 0) { + animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end'; + } + + // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us + data.element.attr({ + 'stroke-dashoffset': -pathLength + 'px' + }); + + // We can't use guided mode as the animations need to rely on setting begin manually + // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate + data.element.animate(animationDefinition, false); + } +}); From fca8506505ea64f31c750c52b0525fe717464041 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:48:02 -0400 Subject: [PATCH 07/11] Adding in the four methods for Chartist.Base --- chartist/chartist.d.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 290354ebb7..7c2971e57d 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -8,6 +8,8 @@ declare module Chartist { Pie: IChartistPieChart; Bar: IChartistBarChart; Line: IChartistLineChart; + + Svg: any; } interface IResponsiveOptionTuple extends Array { @@ -21,10 +23,27 @@ declare module Chartist { defaultOptions: T; options: T; responsiveOptions: Array>; + + // this most likely doesn't need to be exposed to the user eventEmitter: any; + supportsForeignObject: boolean; supportsAnimations: boolean; resizeListener: any; + + update(data: any, options?: T, override?: boolean): void; + detatch(): void; + on(event: string, handler: Function): IChartistBase; + + /** + * Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered. + * + * @method off + * @param event {string} Name of the event for which a handler should be removed + * @param handler {Function} The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list. + * @returns {IChartistBase} + */ + off(event: string, handler?: Function): IChartistBase; } interface IChartistPieChart extends IChartistBase { From 9e607119abe91d47b284ee520cc1cd31cd631a37 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:53:42 -0400 Subject: [PATCH 08/11] Restricting typing of data to Object This should at least stop primitives until I can figure out the structure of each type of data. --- chartist/chartist.d.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 7c2971e57d..d55f876802 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -19,7 +19,7 @@ declare module Chartist { interface IChartistBase { container: any; - data: any; + data: Object; defaultOptions: T; options: T; responsiveOptions: Array>; @@ -31,8 +31,16 @@ declare module Chartist { supportsAnimations: boolean; resizeListener: any; - update(data: any, options?: T, override?: boolean): void; + update(data: Object, options?: T, override?: boolean): void; detatch(): void; + + /** + * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop. + * + * @method on + * @param event {string} Name of the event. Check the examples for supported events. + * @param handler {Function} The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details. + */ on(event: string, handler: Function): IChartistBase; /** @@ -41,21 +49,20 @@ declare module Chartist { * @method off * @param event {string} Name of the event for which a handler should be removed * @param handler {Function} The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list. - * @returns {IChartistBase} */ off(event: string, handler?: Function): IChartistBase; } interface IChartistPieChart extends IChartistBase { - new (target: any, data: any, options?: IPieChartOptions, responsiveOptions?: Array>): IChartistPieChart; + new (target: any, data: Object, options?: IPieChartOptions, responsiveOptions?: Array>): IChartistPieChart; } interface IChartistLineChart extends IChartistBase { - new (target: any, data: any, options?: ILineChartOptions, responsiveOptions?: Array>): IChartistLineChart; + new (target: any, data: Object, options?: ILineChartOptions, responsiveOptions?: Array>): IChartistLineChart; } interface IChartistBarChart extends IChartistBase { - new (target: any, data: any, options?: IBarChartOptions, responsiveOptions?: Array>): IChartistBarChart; + new (target: any, data: Object, options?: IBarChartOptions, responsiveOptions?: Array>): IChartistBarChart; } interface IChartOptions { From 9aa926ee0eebdfd2f9323e241348f293c19605f9 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 17:54:54 -0400 Subject: [PATCH 09/11] More Test coverage --- chartist/chartist-tests.ts | 54 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index db4fbfbfcb..b069aedde7 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -114,3 +114,57 @@ chart.on('draw', function(data: any) { data.element.animate(animationDefinition, false); } }); + +new Chartist.Bar('.ct-chart', { + labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'], + series: [20, 60, 120, 200, 180, 20, 10] +}, { + distributeSeries: true +}); + +new Chartist.Bar('.ct-chart', { + labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'], + series: [ + [5, 4, 3, 7], + [3, 2, 9, 5], + [1, 5, 8, 4], + [2, 3, 4, 6], + [4, 1, 2, 1] + ] +}, { + // Default mobile configuration + stackBars: true, + axisX: { + labelInterpolationFnc: function(value) { + return value.split(/\s+/).map(function(word) { + return word[0]; + }).join(''); + } + }, + axisY: { + offset: 20 + } +}, [ + // Options override for media > 400px + ['screen and (min-width: 400px)', { + reverseData: true, + horizontalBars: true, + axisX: { + labelInterpolationFnc: Chartist.noop + }, + axisY: { + offset: 60 + } + }], + // Options override for media > 800px + ['screen and (min-width: 800px)', { + stackBars: false, + seriesBarDistance: 10 + }], + // Options override for media > 1000px + ['screen and (min-width: 1000px)', { + reverseData: false, + horizontalBars: false, + seriesBarDistance: 15 + }] +]); From 4046880565c6dd9e26f809eea619851e01d40792 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 18:02:22 -0400 Subject: [PATCH 10/11] More explicit typing for test case examples. --- chartist/chartist-tests.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index b069aedde7..0a5072c6a6 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -135,8 +135,8 @@ new Chartist.Bar('.ct-chart', { // Default mobile configuration stackBars: true, axisX: { - labelInterpolationFnc: function(value) { - return value.split(/\s+/).map(function(word) { + labelInterpolationFnc: function(value: string) { + return value.split(/\s+/).map(function(word: string) { return word[0]; }).join(''); } From dbadd9b96d1fad4dd9960fb4cceb85c9464e0c4e Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Fri, 25 Sep 2015 18:02:47 -0400 Subject: [PATCH 11/11] Fixed accidental missing optional markers Also added the noop function to the Static Chartist --- chartist/chartist.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index d55f876802..a4419eb4d2 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -10,6 +10,7 @@ declare module Chartist { Line: IChartistLineChart; Svg: any; + noop: Function; } interface IResponsiveOptionTuple extends Array { @@ -185,8 +186,8 @@ declare module Chartist { showLabel?: boolean; showGrid?: boolean; labelInterpolationFnc?: Function; - scaleMinSpace: number; - onlyInteger: boolean; + scaleMinSpace?: number; + onlyInteger?: boolean; } interface IBarChartClasses { @@ -241,7 +242,6 @@ declare module Chartist { interface ILineChartYAxis extends ILineChartAxis { scaleMinSpace?: number; onlyInteger?: boolean; - } // TODO: Finish documenting all of the defaults