From b779873b3f98b30e42d68d837a6533f4c4a7a882 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Tue, 12 Jan 2016 16:24:28 -0500 Subject: [PATCH 01/13] Expanding Chartist Type Definitions --- chartist/chartist-tests.ts | 19 +++++++++++++++++++ chartist/chartist.d.ts | 26 ++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 0a5072c6a..6d44922ac 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -168,3 +168,22 @@ new Chartist.Bar('.ct-chart', { seriesBarDistance: 15 }] ]); + +new Chartist.Pie('.ct-chart', { + series: [{ + value: 20, + name: 'Series 1', + className: 'my-custom-class-one', + meta: 'Meta One' + }, { + value: 10, + name: 'Series 2', + className: 'my-custom-class-two', + meta: 'Meta Two' + }, { + value: 70, + name: 'Series 3', + className: 'my-custom-class-three', + meta: 'Meta Three' + }] +}); \ No newline at end of file diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 9381aaff0..4c0e787b8 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -18,9 +18,25 @@ declare module Chartist { 1: T; } + // data formats are not well documented on all the ways they can be passed to the constructors + // this definition gives some intellisense, but does not protect the user from misuse + // TODO: come in and tidy this up and make it fit better + interface IChartistData { + labels?: Array; + series: Array | Array | Array>; + } + + interface IChartistSeriesData { + name: string; + value?: number; + data?: Array; + className?: string; + meta?: string; // I assume this could probably be a number as well? + } + interface IChartistBase { container: any; - data: Object; + data: IChartistData; defaultOptions: T; options: T; responsiveOptions: Array>; @@ -55,15 +71,15 @@ declare module Chartist { } interface IChartistPieChart extends IChartistBase { - new (target: any, data: Object, options?: IPieChartOptions, responsiveOptions?: Array>): IChartistPieChart; + new (target: any, data: IChartistData, options?: IPieChartOptions, responsiveOptions?: Array>): IChartistPieChart; } interface IChartistLineChart extends IChartistBase { - new (target: any, data: Object, options?: ILineChartOptions, responsiveOptions?: Array>): IChartistLineChart; + new (target: any, data: IChartistData, options?: ILineChartOptions, responsiveOptions?: Array>): IChartistLineChart; } interface IChartistBarChart extends IChartistBase { - new (target: any, data: Object, options?: IBarChartOptions, responsiveOptions?: Array>): IChartistBarChart; + new (target: any, data: IChartistData, options?: IBarChartOptions, responsiveOptions?: Array>): IChartistBarChart; } interface IChartOptions { @@ -163,6 +179,7 @@ declare module Chartist { height?: number | string; high?: number; low?: number; + ticks?: Array; onlyInteger?: boolean; chartPadding?: IChartPadding; seriesBarDistance?: number; @@ -217,6 +234,7 @@ declare module Chartist { lineSmooth?: boolean; low?: number; high?: number; + ticks?: Array; chartPadding?: IChartPadding; fullWidth?: boolean; reverseData?: boolean; From 9867eb1aa42f4ec603fd4bf208ff785c9fe23a28 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 11:13:35 -0500 Subject: [PATCH 02/13] Updating Chartist Axis types There are three different types of Axes for line charts that project their properties onto the axis type. I am trying to emulate that here. If you specifically declare a LineChartAxis, then you MUST attach the axis type. The library lets you play a little fast and loose with this, but because we're going for some compile-time checks, the typing file is going to enforce being specific. --- chartist/chartist-tests.ts | 231 ++++++++++++++++++++++++------------- chartist/chartist.d.ts | 43 +++++-- 2 files changed, 187 insertions(+), 87 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 6d44922ac..797dc8bd5 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -8,26 +8,26 @@ new Chartist.Line('.ct-chart', { [1, 3, 4, 5, 6] ] }, { - fullWidth: true, - chartPadding: { - right: 40 - } -}); + fullWidth: true, + chartPadding: { + right: 40 + } + }); 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], [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] + [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null] ] }, { - fullWidth: true, - chartPadding: { - right: 10 - }, - low: 0 -}); + fullWidth: true, + chartPadding: { + right: 10 + }, + low: 0 + }); new Chartist.Line('.ct-chart', { labels: ['1', '2', '3', '4', '5', '6'], @@ -47,10 +47,10 @@ var data = { series: [5, 3, 4] }; -var sum = function(a: number, b: number) { return a + b }; +var sum = (a: number, b: number) => { return a + b }; new Chartist.Pie('.ct-chart', data, { - labelInterpolationFnc: function(value: number) { + labelInterpolationFnc: (value: number) => { return Math.round(value / data.series.reduce(sum) * 100) + '%'; } }); @@ -58,26 +58,24 @@ new Chartist.Pie('.ct-chart', data, { new Chartist.Pie('.ct-chart', { series: [20, 10, 30, 40] }, { - donut: true, - donutWidth: 60, - startAngle: 270, - total: 200, - showLabel: false -}); - + donut: true, + donutWidth: 60, + startAngle: 270, + 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 -}); + donut: true, + showLabel: false + }); chart.on('draw', function(data: any) { - if(data.type === 'slice') { + if (data.type === 'slice') { // Get the total path length in order to use for dash array animation var pathLength = data.element._node.getTotalLength(); @@ -92,7 +90,7 @@ chart.on('draw', function(data: any) { id: 'anim' + data.index, dur: 1000, from: -pathLength + 'px', - to: '0px', + 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' @@ -100,7 +98,7 @@ chart.on('draw', function(data: any) { }; // 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) { + if (data.index !== 0) { animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end'; } @@ -119,8 +117,8 @@ new Chartist.Bar('.ct-chart', { labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'], series: [20, 60, 120, 200, 180, 20, 10] }, { - distributeSeries: true -}); + distributeSeries: true + }); new Chartist.Bar('.ct-chart', { labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'], @@ -132,58 +130,135 @@ new Chartist.Bar('.ct-chart', { [4, 1, 2, 1] ] }, { - // Default mobile configuration - stackBars: true, - axisX: { - labelInterpolationFnc: function(value: string) { - return value.split(/\s+/).map(function(word: string) { - return word[0]; - }).join(''); - } - }, - axisY: { - offset: 20 - } -}, [ - // Options override for media > 400px - ['screen and (min-width: 400px)', { - reverseData: true, - horizontalBars: true, + // Default mobile configuration + stackBars: true, axisX: { - labelInterpolationFnc: Chartist.noop + labelInterpolationFnc: function(value: string) { + return value.split(/\s+/).map(function(word: string) { + return word[0]; + }).join(''); + } }, axisY: { - offset: 60 + offset: 20 } - }], - // 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 - }] -]); + }, [ + // 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 + }] + ]); new Chartist.Pie('.ct-chart', { - series: [{ - value: 20, - name: 'Series 1', - className: 'my-custom-class-one', - meta: 'Meta One' + series: [{ + value: 20, + name: 'Series 1', + className: 'my-custom-class-one', + meta: 'Meta One' + }, { + value: 10, + name: 'Series 2', + className: 'my-custom-class-two', + meta: 'Meta Two' }, { - value: 10, - name: 'Series 2', - className: 'my-custom-class-two', - meta: 'Meta Two' - }, { - value: 70, - name: 'Series 3', - className: 'my-custom-class-three', - meta: 'Meta Three' - }] -}); \ No newline at end of file + value: 70, + name: 'Series 3', + className: 'my-custom-class-three', + meta: 'Meta Three' + }] +}); + +new Chartist.Bar('.bar-chart', { + labels: ['foo', 'bar', 'foobar'], + series: [ + { + data: [1], + className: 'graph-foo', + }, + { + data: [10], + className: 'graph-foo', + }, + { + data: [12], + className: 'graph-foo', + }] +  }, { + seriesBarDistance: 30, + reverseData: true, + horizontalBars: true, + height: '115px', + axisY: { + offset: 70, + showGrid: false, + }, + axisX: { + scaleMinSpace: 200 + } + }); + +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5, 6, 7, 8], + series: [ + [5, 9, 7, 8, 5, 3, 5, 4] + ] +}, { + ticks: [0, 4], + low: 0, + showArea: true, + axisY: { + showLabel: true, + showGrid: false, + ticks: [1, 4], + type: Chartist.FixedScaleAxis + } + }); + +var chart2 = new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5], + series: [ + [12, 9, 7, 8, 5] + ] +}); + +// Listening for draw events that get emitted by the Chartist chart +chart2.on('draw', (data: any) => { + // If the draw event was triggered from drawing a point on the line chart + if (data.type === 'point') { + // We are creating a new path SVG element that draws a triangle around the point coordinates + var triangle = new Chartist.Svg('path', { + d: ['M', + data.x, + data.y - 15, + 'L', + data.x - 15, + data.y + 8, + 'L', + data.x + 15, + data.y + 8, + 'z'].join(' '), + style: 'fill-opacity: 1' + }, 'ct-area'); + + // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle + data.element.replace(triangle); + } +}); diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 4c0e787b8..089e87cde 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -9,6 +9,10 @@ declare module Chartist { Bar: IChartistBarChart; Line: IChartistLineChart; + FixedScaleAxis: IFixedScaleAxisStatic; + AutoScaleAxis: IAutoScaleAxisStatic; + StepAxis: IStepAxisStatic; + Svg: any; noop: Function; } @@ -18,16 +22,24 @@ declare module Chartist { 1: T; } + // these have no other purpose than to help define the types that can be placed on + // a line chart axisX + // in the actual chartist library these are classes that project their options onto + // the parent class + interface IFixedScaleAxisStatic { } + interface IAutoScaleAxisStatic { } + interface IStepAxisStatic { } + // data formats are not well documented on all the ways they can be passed to the constructors // this definition gives some intellisense, but does not protect the user from misuse // TODO: come in and tidy this up and make it fit better interface IChartistData { - labels?: Array; - series: Array | Array | Array>; + labels?: Array | Array; + series: Array | Array | Array>; } interface IChartistSeriesData { - name: string; + name?: string; value?: number; data?: Array; className?: string; @@ -223,8 +235,8 @@ declare module Chartist { } interface ILineChartOptions extends IChartOptions { - axisX?: ILineChartXAxis; - axisY?: ILineChartYAxis; + axisX?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis; + axisY?: IChartistStepAxis | IChartistFixedScaleAxis | IChartistAutoScaleAxis; width?: number | string; height?: number | string; showLine?: boolean; @@ -237,7 +249,6 @@ declare module Chartist { ticks?: Array; chartPadding?: IChartPadding; fullWidth?: boolean; - reverseData?: boolean; classNames?: ILineChartClasses; } @@ -251,15 +262,29 @@ declare module Chartist { showLabel?: boolean; showGrid?: boolean; labelInterpolationFnc?: Function; - type?: any; } - interface ILineChartXAxis extends ILineChartAxis { + interface IChartistStepAxis extends ILineChartAxis { + type: IStepAxisStatic; + ticks?: Array | Array; + stretch?: boolean; } - interface ILineChartYAxis extends ILineChartAxis { + interface IChartistFixedScaleAxis extends ILineChartAxis { + type: IFixedScaleAxisStatic; + high?: number; + low?: number; + divisor?: number; + ticks?: Array | Array; + } + + interface IChartistAutoScaleAxis extends ILineChartAxis { + high?: number; + low?: number; scaleMinSpace?: number; onlyInteger?: boolean; + referenceValue?: number; + type: IAutoScaleAxisStatic; } // TODO: Finish documenting all of the defaults From fe08f93533910692fad602cc60c9bb39332779c1 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 14:52:05 -0500 Subject: [PATCH 03/13] Further expanding Chartist type definitions. --- chartist/chartist-tests.ts | 56 ++++++++++ chartist/chartist.d.ts | 216 +++++++++++++++++++++++++++++++++++-- 2 files changed, 263 insertions(+), 9 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 797dc8bd5..5c76754f2 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -1,5 +1,15 @@ /// +Chartist.escapingMap = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + '\'': ''', +}; + +Chartist.precision = 8; + new Chartist.Line('.ct-chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ @@ -262,3 +272,49 @@ chart2.on('draw', (data: any) => { data.element.replace(triangle); } }); + +// Create a simple bi-polar bar chart +var biPolarChart = new Chartist.Bar('.ct-chart', { + labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'], + series: [ + [1, 2, 4, 8, 6, -2, -1, -4, -6, -2] + ] +}, { + high: 10, + low: -10, + axisX: { + labelInterpolationFnc: (value: any, index: number) => { + return index % 2 === 0 ? value : null; + } + } + }); + +// Listen for draw events on the bar chart +biPolarChart.on('draw', (data: any) => { + // If this draw event is of type bar we can use the data to create additional content + if (data.type === 'bar') { + // We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value + data.group.append(new Chartist.Svg('circle', { + cx: data.x2, + cy: data.y2, + r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5 + }, 'ct-slice-pie')); + } +}); + +new Chartist.Bar('.ct-chart', { + labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + series: [ + [5, 4, 3, 7, 5, 10, 3], + [3, 2, 9, 5, 4, 6, 4] + ] +}, { + axisX: { + // On the x-axis start means top and end means bottom + position: 'start' + }, + axisY: { + // On the y-axis start means left and end means right + position: 'end' + } + }); diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 089e87cde..a510032c2 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -4,7 +4,19 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped declare module Chartist { + interface ChartistStatic { + + /** + * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number. + */ + precision: number; + + /** + * A map with characters to escape for strings to be safely used as attribute values. + */ + escapingMap: IChartistEscapeMap; + Pie: IChartistPieChart; Bar: IChartistBarChart; Line: IChartistLineChart; @@ -13,8 +25,34 @@ declare module Chartist { AutoScaleAxis: IAutoScaleAxisStatic; StepAxis: IStepAxisStatic; - Svg: any; + Svg: ChartistSvgStatic; noop: Function; + + alphaNumerate(n: number): string; + extend(target: Object, sources: Object): Object; + + replaceAll(str: string, subStr: string, newSubStr: string): string; + ensureUnit(value: number, unit: string): string; + quantity(input: string | number): Object; + + query(query: Node | string): Node; + times(length: number): Array; + sum(previous: number, current: number): number; + mapMultiply(factor: number): (num: number) => number; + mapAdd(addend: number): (num: number) => number; + serialMap(arr: Array, cb: Function): Array; + roundWithPrecision(value: number, digits?: number): number; + + getMultiValue(value: any, dimension?: any): number; // this method is not documented, but it is used in the examples + + serialize(data: Object | string | number): string; + deserialize(data: string): Object | string | number; + + createSvg(container: Node, width: string, height: string, className: string): Object; // TODO: Figure out if this is returning a ChartistSVGWrapper or an actual SVGElement + } + + interface IChartistEscapeMap { + [Key: string]: string; } interface IResponsiveOptionTuple extends Array { @@ -34,16 +72,16 @@ declare module Chartist { // this definition gives some intellisense, but does not protect the user from misuse // TODO: come in and tidy this up and make it fit better interface IChartistData { - labels?: Array | Array; - series: Array | Array | Array>; + labels?: Array | Array; + series: Array | Array | Array>; } interface IChartistSeriesData { - name?: string; - value?: number; - data?: Array; - className?: string; - meta?: string; // I assume this could probably be a number as well? + name?: string; + value?: number; + data?: Array; + className?: string; + meta?: string; // I assume this could probably be a number as well? } interface IChartistBase { @@ -287,7 +325,6 @@ declare module Chartist { type: IAutoScaleAxisStatic; } - // TODO: Finish documenting all of the defaults interface ILineChartClasses { /** * Default is 'ct-chart-line' @@ -306,6 +343,167 @@ declare module Chartist { start?: string; end?: string; } + + interface ChartistSvgStatic { + new (name: HTMLElement | string, attributes: Object, className?: string, parent?: Object, insertFirst?: boolean): IChartistSvg; + + Easing: ChartistEasingStatic; + + /** + * This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check http://www.w3.org/TR/SVG11/feature for a detailed list. + */ + isSupported(feature: string): boolean; + } + + interface IChartistSvg { + + /** + * Set attributes on the current SVG element of the wrapper you're currently working on. + */ + attr(attributes: Object | string, ns: string): Object | string; + + /** + * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily. + */ + elem(name: string, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg; + + /** + * Returns the parent Chartist.SVG wrapper object + */ + parent(): IChartistSvg; + + /** + * This method returns a Chartist.Svg wrapper around the root SVG element of the current tree. + */ + root(): IChartistSvg; + + /** + * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper. + */ + querySelector(selector: string): IChartistSvg; + + /** + * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper. + */ + querySelectorAll(selector: string): any; // this returns an svg wrapper list in the docs, need to see if that's just an array or a special list + + /** + * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM. + */ + foreignObject(content: any, attributes?: Object, className?: string, insertFirst?: boolean): IChartistSvg; + + /** + * This method adds a new text element to the current Chartist.Svg wrapper. + */ + text(t: string): IChartistSvg; + + /** + * This method will clear all child nodes of the current wrapper object. + */ + empty(): IChartistSvg; + + /** + * This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure. + */ + remove(): IChartistSvg; + + /** + * This method will replace the element with a new element that can be created outside of the current DOM. + */ + replace(): IChartistSvg; + + /** + * This method will append an element to the current element as a child. + */ + append(): IChartistSvg; + + /** + * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further. + */ + classes(): Array; + + /** + * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once. + * + * @method addClass + * @param names {string} A white space separated list of class names + */ + addClass(names: string): IChartistSvg; + + /** + * Removes one or a space separated list of classes from the current element. + * + * @method removeClass + * @param names {string} A white space separated list of class names + */ + removeClass(names: string): IChartistSvg; + + /** + * Removes all classes from the current element. + */ + removeAllClasses(): IChartistSvg; + + /** + * Get element height with fallback to svg BoundingBox or parent container dimensions + */ + height(): number; + + /** + * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. + */ + animate(animations: IChartistAnimations, guided: boolean, eventEmitter: Object): IChartistSvg; + + /** + * "Safe" way to get property value from svg BoundingBox. This is a workaround. Firefox throws an NS_ERROR_FAILURE error if getBBox() is called on an invisible node. + * THIS IS A WORKAROUND + */ + getBBoxProperty(node: SVGElement, prop: string): string; // TODO: find a good example of this and add it to the tests, it might belong to static + } + + interface IChartistAnimations { + [Key: string]: IChartistAnimationOptions; + } + + interface IChartistAnimationOptions { + dur: String | number; + from: number; + to: number; + easing?: IChartistEasingDefinition | string; + } + + interface IChartistEasingDefinition { + 0: number; + 1: number; + 2: number; + 3: number; + } + + interface ChartistEasingStatic { + easeInSine: IChartistEasingDefinition; + easeOutSine: IChartistEasingDefinition; + easeInOutSine: IChartistEasingDefinition; + easeInQuad: IChartistEasingDefinition; + easeOutQuad: IChartistEasingDefinition; + easeInOutQuad: IChartistEasingDefinition; + easeInCubic: IChartistEasingDefinition; + easeOutCubic: IChartistEasingDefinition; + easeInOutCubic: IChartistEasingDefinition; + easeInQuart: IChartistEasingDefinition; + easeOutQuart: IChartistEasingDefinition; + easeInOutQuart: IChartistEasingDefinition; + easeInQuint: IChartistEasingDefinition; + easeOutQuint: IChartistEasingDefinition; + easeInOutQuint: IChartistEasingDefinition; + easeInExpo: IChartistEasingDefinition; + easeOutExpo: IChartistEasingDefinition; + easeInOutExpo: IChartistEasingDefinition; + easeInCirc: IChartistEasingDefinition; + easeOutCirc: IChartistEasingDefinition; + easeInOutCirc: IChartistEasingDefinition; + easeInBack: IChartistEasingDefinition; + easeOutBack: IChartistEasingDefinition; + easeInOutBack: IChartistEasingDefinition; + } } declare var Chartist: Chartist.ChartistStatic; From 2e5f3e2db48a41a1578c15c2685dba7b5c424978 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 15:10:55 -0500 Subject: [PATCH 04/13] Added Interpolation definitions and tests --- chartist/chartist-tests.ts | 39 ++++++++++++++++++++++++++++++++++++++ chartist/chartist.d.ts | 27 +++++++++++++++++++++++++- 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 5c76754f2..36e5a38e1 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -318,3 +318,42 @@ new Chartist.Bar('.ct-chart', { position: 'end' } }); + +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5], + series: [[1, 2, 8, 1, 7]] +}, { + lineSmooth: Chartist.Interpolation.none({ + fillHoles: false + }) + }); + +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5], + series: [[1, 2, 8, 1, 7]] +}, { + lineSmooth: Chartist.Interpolation.simple({ + divisor: 2, + fillHoles: false + }) + }); + +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5], + series: [[1, 2, 8, 1, 7]] +}, { + lineSmooth: Chartist.Interpolation.cardinal({ + tension: 1, + fillHoles: false + }) + }); + +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5], + series: [[1, 2, 8, 1, 7]] +}, { + lineSmooth: Chartist.Interpolation.step({ + postpone: true, + fillHoles: false + }) + }); diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index a510032c2..6c18e9c96 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -26,6 +26,8 @@ declare module Chartist { StepAxis: IStepAxisStatic; Svg: ChartistSvgStatic; + Interpolation: ChartistInterpolationStatic; + noop: Function; alphaNumerate(n: number): string; @@ -281,7 +283,7 @@ declare module Chartist { showPoint?: boolean; showArea?: boolean; areaBase?: number; - lineSmooth?: boolean; + lineSmooth?: Function | boolean; low?: number; high?: number; ticks?: Array; @@ -504,6 +506,29 @@ declare module Chartist { easeOutBack: IChartistEasingDefinition; easeInOutBack: IChartistEasingDefinition; } + + interface ChartistInterpolationStatic { + + /** + * This interpolation function does not smooth the path and the result is only containing lines and no curves. + */ + none(options?: Object): Function; + + /** + * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing. + */ + simple(options?: Object): Function; + + /** + * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results. + */ + cardinal(options?: Object): Function; + + /** + * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the showPoint option is enabled. + */ + step(options?: Object): Function; + } } declare var Chartist: Chartist.ChartistStatic; From 8bf574716d401491d4b678f1d1a65f24663a3019 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 15:13:26 -0500 Subject: [PATCH 05/13] Bumping chartist version to 0.9.5 --- chartist/chartist.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 6c18e9c96..9878e9f70 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Chartist v0.9.4 +// Type definitions for Chartist v0.9.5 // Project: https://github.com/gionkunz/chartist-js // Definitions by: Matt Gibbs // Definitions: https://github.com/borisyankov/DefinitelyTyped From 21f5129d25ee0994b7bd0b68cb22ca30c983a9c8 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 15:20:43 -0500 Subject: [PATCH 06/13] Adding more tests for bar charts --- chartist/chartist-tests.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index 36e5a38e1..f62f0a2c5 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -357,3 +357,28 @@ new Chartist.Line('.ct-chart', { fillHoles: false }) }); + +var overlappingBarsData: Chartist.IChartistData = { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + series: [ + [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8], + [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4] + ] +}; + +var overlappingBarsOptions: Chartist.IBarChartOptions = { + seriesBarDistance: 10 +}; + +var overlappingBarsResponsiveOptions: Array> = [ + ['screen and (max-width: 640px)', { + seriesBarDistance: 5, + axisX: { + labelInterpolationFnc: (value: any) => { + return value[0]; + } + } + }] +]; + +new Chartist.Bar('.ct-chart', overlappingBarsData, overlappingBarsOptions, overlappingBarsResponsiveOptions); From 059319a0338d744146dc91595c63aecafc228910 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 14 Jan 2016 15:46:42 -0500 Subject: [PATCH 07/13] Defining Chartist Interpolation Options --- chartist/chartist-tests.ts | 8 ++++---- chartist/chartist.d.ts | 33 ++++++++++++++++++++++++++------- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index f62f0a2c5..f4ec32f2a 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -84,7 +84,7 @@ var chart = new Chartist.Pie('.ct-chart', { showLabel: false }); -chart.on('draw', function(data: any) { +chart.on('draw', (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(); @@ -95,7 +95,7 @@ chart.on('draw', function(data: any) { }); // Create animation definition while also assigning an ID to the animation for later sync usage - var animationDefinition: any = { + var animationDefinition: Chartist.IChartistAnimations = { 'stroke-dashoffset': { id: 'anim' + data.index, dur: 1000, @@ -143,8 +143,8 @@ new Chartist.Bar('.ct-chart', { // Default mobile configuration stackBars: true, axisX: { - labelInterpolationFnc: function(value: string) { - return value.split(/\s+/).map(function(word: string) { + labelInterpolationFnc: (value: string) => { + return value.split(/\s+/).map((word: string) => { return word[0]; }).join(''); } diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 9878e9f70..bb0042f4b 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -467,10 +467,13 @@ declare module Chartist { } interface IChartistAnimationOptions { - dur: String | number; - from: number; - to: number; + id?: string; + dur: string | number; + from: string | number; + to: string | number; easing?: IChartistEasingDefinition | string; + fill?: string; + begin?: string; } interface IChartistEasingDefinition { @@ -512,22 +515,38 @@ declare module Chartist { /** * This interpolation function does not smooth the path and the result is only containing lines and no curves. */ - none(options?: Object): Function; + none(options?: IChartistInterpolationOptions): Function; /** * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing. */ - simple(options?: Object): Function; + simple(options?: IChartistSimpleInterpolationOptions): Function; /** * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results. */ - cardinal(options?: Object): Function; + cardinal(options?: IChartistCardinalInterpolationOptions): Function; /** * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the showPoint option is enabled. */ - step(options?: Object): Function; + step(options?: IChartistStepInterpolationOptions): Function; + } + + interface IChartistInterpolationOptions { + fillHoles?: boolean; + } + + interface IChartistSimpleInterpolationOptions extends IChartistInterpolationOptions { + divisor?: number; + } + + interface IChartistCardinalInterpolationOptions extends IChartistInterpolationOptions { + tension?: number; + } + + interface IChartistStepInterpolationOptions extends IChartistInterpolationOptions { + postpone?: boolean; } } From 7edc447a5f1890b2d197ca843c5603c0fec50f0b Mon Sep 17 00:00:00 2001 From: Forrest Peterson Date: Tue, 19 Jan 2016 13:16:43 -0500 Subject: [PATCH 08/13] Change to IChartistData interface in Chartist --- chartist/chartist.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index bb0042f4b..8d63696f6 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -74,7 +74,7 @@ declare module Chartist { // this definition gives some intellisense, but does not protect the user from misuse // TODO: come in and tidy this up and make it fit better interface IChartistData { - labels?: Array | Array; + labels?: Array | Array | Array; series: Array | Array | Array>; } From f9b189a87343fb0e05f2d06d09f9cab11a44cf41 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Tue, 19 Jan 2016 15:32:11 -0500 Subject: [PATCH 09/13] Made 'type' optional to avoid problems with Chartist defaults When forced to define the type, Chartist won't default to all of the other options. So if you just want to do something like not show the grid, you'll end up having to define all of the axis options because of the strict typing that was there before. --- chartist/chartist-tests.ts | 20 ++++++++++++++++++++ chartist/chartist.d.ts | 6 +++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/chartist/chartist-tests.ts b/chartist/chartist-tests.ts index f4ec32f2a..22b10e8b0 100644 --- a/chartist/chartist-tests.ts +++ b/chartist/chartist-tests.ts @@ -242,6 +242,26 @@ new Chartist.Line('.ct-chart', { } }); +new Chartist.Line('.ct-chart', { + labels: [1, 2, 3, 4, 5, 6, 7, 8], + series: [ + [5, 9, 7, 8, 5, 3, 5, 4] + ] +}, { + ticks: [0, 4], + low: 0, + showArea: true, + axisX: { + showGrid: false + }, + axisY: { + showLabel: true, + showGrid: false, + ticks: [1, 4], + type: Chartist.FixedScaleAxis + } + }); + var chart2 = new Chartist.Line('.ct-chart', { labels: [1, 2, 3, 4, 5], series: [ diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 8d63696f6..a38aa4ce7 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -305,13 +305,13 @@ declare module Chartist { } interface IChartistStepAxis extends ILineChartAxis { - type: IStepAxisStatic; + type?: IStepAxisStatic; ticks?: Array | Array; stretch?: boolean; } interface IChartistFixedScaleAxis extends ILineChartAxis { - type: IFixedScaleAxisStatic; + type?: IFixedScaleAxisStatic; high?: number; low?: number; divisor?: number; @@ -324,7 +324,7 @@ declare module Chartist { scaleMinSpace?: number; onlyInteger?: boolean; referenceValue?: number; - type: IAutoScaleAxisStatic; + type?: IAutoScaleAxisStatic; } interface ILineChartClasses { From e58251a8d3c55dfb12276efea0a3d3eb9238737d Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Tue, 19 Jan 2016 15:42:43 -0500 Subject: [PATCH 10/13] Added an optional member for plugins Just set to Array for now until I have a better understanding of all the possibilities for plugins. --- chartist/chartist.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index a38aa4ce7..d89a0e3bb 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -100,6 +100,8 @@ declare module Chartist { supportsAnimations: boolean; resizeListener: any; + plugins?: Array; // all of these plugins seem to be functions with options, but keeping type any for now + update(data: Object, options?: T, override?: boolean): void; detatch(): void; From 4d99796247d33bc4f287b77f2a280f2cce2cf78c Mon Sep 17 00:00:00 2001 From: Forrest Peterson Date: Thu, 21 Jan 2016 15:45:33 -0500 Subject: [PATCH 11/13] Change to where plugins is --- chartist/chartist.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index d89a0e3bb..169d361db 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -51,6 +51,8 @@ declare module Chartist { deserialize(data: string): Object | string | number; createSvg(container: Node, width: string, height: string, className: string): Object; // TODO: Figure out if this is returning a ChartistSVGWrapper or an actual SVGElement + + plugins: any; } interface IChartistEscapeMap { @@ -141,6 +143,8 @@ declare module Chartist { * If true the whole data is reversed including labels, the series order as well as the whole series data arrays. */ reverseData?: boolean; + + plugins?: Array; } interface IPieChartOptions extends IChartOptions { From 8b39d26623cf1b6be70287ee43789a0e5bf26d7b Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 28 Jan 2016 14:02:33 -0500 Subject: [PATCH 12/13] Fixed Chartist.extend definition to support multiple parameters. --- chartist/chartist.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 169d361db..49e9838e3 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -31,7 +31,7 @@ declare module Chartist { noop: Function; alphaNumerate(n: number): string; - extend(target: Object, sources: Object): Object; + extend(target: Object, ...sources: Object): Object; replaceAll(str: string, subStr: string, newSubStr: string): string; ensureUnit(value: number, unit: string): string; From 9a9021d738dc906529bb3c28c77d86973f3a29f6 Mon Sep 17 00:00:00 2001 From: Matt Gibbs Date: Thu, 28 Jan 2016 14:41:48 -0500 Subject: [PATCH 13/13] Forgot the [] on Object for extend() --- chartist/chartist.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartist/chartist.d.ts b/chartist/chartist.d.ts index 49e9838e3..496b92237 100644 --- a/chartist/chartist.d.ts +++ b/chartist/chartist.d.ts @@ -31,7 +31,7 @@ declare module Chartist { noop: Function; alphaNumerate(n: number): string; - extend(target: Object, ...sources: Object): Object; + extend(target: Object, ...sources: Object[]): Object; replaceAll(str: string, subStr: string, newSubStr: string): string; ensureUnit(value: number, unit: string): string;