From 50320784e82e46a4db18125165ecf9d2d9cecc9d Mon Sep 17 00:00:00 2001 From: Morgan Benton Date: Tue, 26 Sep 2017 14:26:12 -0400 Subject: [PATCH] Updating existing @types/d3kit definition to new version: 3.1.2 ==> 3.2 (#19952) * update @types/d3kit to 3.2 * update @types/d3kit to 3.2 --- types/d3kit/d3kit-tests.ts | 344 ++++++++++++++++++++++++++++++++----- types/d3kit/index.d.ts | 78 +++++++-- types/d3kit/tsconfig.json | 2 +- types/d3kit/tslint.json | 1 + 4 files changed, 367 insertions(+), 58 deletions(-) create mode 100644 types/d3kit/tslint.json diff --git a/types/d3kit/d3kit-tests.ts b/types/d3kit/d3kit-tests.ts index e1a92d41b9..ec3b2de1ce 100644 --- a/types/d3kit/d3kit-tests.ts +++ b/types/d3kit/d3kit-tests.ts @@ -1,14 +1,196 @@ +function test_base() { + let tb: d3kit.Base; + let another: d3kit.Base; + let options: d3kit.ChartOptions; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let defopts: d3kit.ChartOptions; + let w: number; + let h: number; + let d: [number, number]; + let p: number; + + // create examples of margins, offsets, options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + tb = new d3kit.Base(); // empty + tb = new d3kit.Base(options); // with options + another = new d3kit.Base(); + + /** + * Test static function + */ + defopts = d3kit.Base.getDefaultOptions(); // without options + defopts = d3kit.Base.getDefaultOptions(options); // with options + + /** + * Test getters + */ + w = tb.width(); + h = tb.height(); + d = tb.dimension(); + p = tb.pixelRatio(); + margins = tb.margin(); + offsets = tb.offset(); + + /** + * Test setters + */ + tb.width(w); + tb.height(h); + tb.dimension(d); + tb.margin(margins); + tb.offset(offsets); + tb.pixelRatio(window.devicePixelRatio); + tb.copyDimension(another); + + /** + * Test events + */ + tb.dimension(d).updateDimensionNow(); +} + +function test_abstract_plate() { + let el: Element; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let plate: d3kit.AbstractPlate; + let options: d3kit.ChartOptions; + let sel: d3.Selection; + + // create a div, append to body, return Node as type Element + el = document.body.appendChild(document.createElement('div')) as Element; + + // create example of options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + plate = new d3kit.AbstractPlate(el); // without options + plate = new d3kit.AbstractPlate(el, options); // with options + + /** + * Test functions + */ + el = plate.getNode(); + sel = plate.getSelection(); +} + +function test_canvas_plate() { + let el: Element; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let plate: d3kit.CanvasPlate; + let options: d3kit.ChartOptions; + let sel: d3.Selection; + let context: CanvasRenderingContext2D; + + // create example of options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + plate = new d3kit.CanvasPlate(); // without options + plate = new d3kit.CanvasPlate(options); // with options + + /** + * Test functions + */ + el = plate.getNode(); + sel = plate.getSelection(); + plate = plate.clear(); + context = plate.getContext2d(); +} + +function test_div_plate() { + let el: Element; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let plate: d3kit.DivPlate; + let options: d3kit.ChartOptions; + let sel: d3.Selection; + + // create example of options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + plate = new d3kit.DivPlate(); // without options + plate = new d3kit.DivPlate(options); // with options + + /** + * Test functions + */ + el = plate.getNode(); + sel = plate.getSelection(); +} + +function test_svg_plate() { + let el: Element; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let plate: d3kit.SvgPlate; + let options: d3kit.ChartOptions; + let sel: d3.Selection; + let rootg: d3.Selection; + let layers: d3kit.LayerOrganizer; + + // create example of options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + plate = new d3kit.SvgPlate(); // without options + plate = new d3kit.SvgPlate(options); // with options + + /** + * Test properties + */ + rootg = plate.rootG; + layers = plate.layers; + + /** + * Test functions + */ + el = plate.getNode(); + sel = plate.getSelection(); +} + function test_abstract_chart() { - let el: Element, - chart: d3kit.AbstractChart, - options: d3kit.ChartOptions, - margins: d3kit.ChartMargin, - offsets: [number, number], - defopts: d3kit.ChartOptions, - fitopts: d3kit.FitOptions, - watchop: d3kit.WatchOptions, - events: string[], - w: number, h:number, d: [number, number], a: any, b: boolean; + let el: Element; + let chart: d3kit.AbstractChart; + let another: d3kit.AbstractChart; + let options: d3kit.ChartOptions; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let defopts: d3kit.ChartOptions; + let fitopts: d3kit.FitOptions; + let watchop: d3kit.WatchOptions; + let events: string[]; + let w: number; + let h: number; + let d: [number, number]; + let a: any; + let b: boolean; + let p: number; + let plate: d3kit.AbstractPlate; // create a div, append to body, return Node as type Element el = document.body.appendChild(document.createElement('div')) as Element; @@ -17,8 +199,9 @@ function test_abstract_chart() { margins = { top: 20, right: 20, bottom: 20, left: 20}; offsets = [0.5, 0.5]; options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; - fitopts = { mode: 'basic', width: '90%', ratio: 4/3 }; + fitopts = { mode: 'basic', width: '90%', ratio: 4 / 3 }; watchop = { mode: 'window', target: null, interval: 500 }; + plate = new d3kit.AbstractPlate(el); /** * Test constructor @@ -27,6 +210,7 @@ function test_abstract_chart() { chart = new d3kit.AbstractChart('div#chart'); // with selector chart = new d3kit.AbstractChart(el, options); // with element+options chart = new d3kit.AbstractChart('div#chart', options); // with selector+options + another = new d3kit.AbstractChart(el); /** * Test static functions @@ -42,6 +226,7 @@ function test_abstract_chart() { w = chart.width(); h = chart.height(); d = chart.dimension(); + p = chart.pixelRatio(); a = chart.data(); margins = chart.margin(); offsets = chart.offset(); @@ -58,6 +243,8 @@ function test_abstract_chart() { chart.margin(margins); chart.offset(offsets); chart.options(options); + chart.pixelRatio(window.devicePixelRatio); + chart.copyDimension(another); /** * Test booleans @@ -65,28 +252,37 @@ function test_abstract_chart() { b = chart.hasData(); b = chart.hasNonZeroArea(); + /** + * Test plate functions + */ + plate = chart.addPlate('a-plate', plate, true); // with doNotAppend + chart = chart.addPlate('a-plate', plate); // without doNotAppend + chart = chart.removePlate('a-plate'); + /** * Test events */ chart.dimension(d).updateDimensionNow(); chart.setupDispatcher(['click', 'mouseover']); chart.fit(fitopts); // without watch options - chart.fit(fitopts, watchop); // with watch options + chart.fit(fitopts, true); // with boolean for watch options + chart.fit(fitopts, watchop); // with explicit watch options chart.stopFitWatcher(); chart.on('mouseover', () => { chart.stopFitWatcher(); }); chart.off('mouseover'); chart.destroy(); } -function test_svgchart() { - let el: Element, - chart: d3kit.SvgChart, - options: d3kit.ChartOptions, - margins: d3kit.ChartMargin, - offsets: [number, number], - svg: d3.Selection, - rootg: d3.Selection, - layers: d3kit.LayerOrganizer; +function test_svg_chart() { + let el: Element; + let chart: d3kit.SvgChart; + let options: d3kit.ChartOptions; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let svg: d3.Selection; + let rootg: d3.Selection; + let layers: d3kit.LayerOrganizer; + let plate: d3kit.SvgPlate; // create a div, append to body, return Node as type Element el = document.body.appendChild(document.createElement('div')) as Element; @@ -104,21 +300,30 @@ function test_svgchart() { chart = new d3kit.SvgChart(el, options); // with element+options chart = new d3kit.SvgChart('div#chart', options); // with selector+options + /** + * Test plate functions + */ + plate = new d3kit.SvgPlate(); + plate = chart.addPlate('a-plate', plate, true); // with doNotAppend + chart = chart.addPlate('a-plate', plate); // without doNotAppend + chart = chart.removePlate('a-plate'); + /** * Test properties */ svg = chart.svg; rootg = chart.rootG; layers = chart.layers; + plate = chart.plate; } -function test_canvaschart() { - let el: Element, - chart: d3kit.CanvasChart, - options: d3kit.ChartOptions, - margins: d3kit.ChartMargin, - offsets: [number, number], - context: CanvasRenderingContext2D; +function test_canvas_chart() { + let el: Element; + let chart: d3kit.CanvasChart; + let options: d3kit.ChartOptions; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let context: CanvasRenderingContext2D; // create a div, append to body, return Node as type Element el = document.body.appendChild(document.createElement('div')) as Element; @@ -144,11 +349,63 @@ function test_canvaschart() { chart.clear(); } +function test_hybrid_chart() { + let el: Element; + let chart: d3kit.HybridChart; + let options: d3kit.ChartOptions; + let margins: d3kit.ChartMargin; + let offsets: [number, number]; + let svg: d3.Selection; + let rootg: d3.Selection; + let layers: d3kit.LayerOrganizer; + let plate: d3kit.SvgPlate; + let context: CanvasRenderingContext2D; + + // create a div, append to body, return Node as type Element + el = document.body.appendChild(document.createElement('div')) as Element; + + // create examples of margins, offsets, options, fit options, watch options + margins = { top: 20, right: 20, bottom: 20, left: 20}; + offsets = [0.5, 0.5]; + options = { initialWidth: 400, initialHeight: 300, margin: margins, offset: offsets }; + + /** + * Test constructor + */ + chart = new d3kit.HybridChart(el); // with element + chart = new d3kit.HybridChart('div#chart'); // with selector + chart = new d3kit.HybridChart(el, options); // with element+options + chart = new d3kit.HybridChart('div#chart', options); // with selector+options + + /** + * Test plate functions + */ + plate = new d3kit.SvgPlate(); + plate = chart.addPlate('a-plate', plate, true); // with doNotAppend + chart = chart.addPlate('a-plate', plate); // without doNotAppend + chart = chart.removePlate('a-plate'); + + /** + * Test SVG properties + */ + svg = chart.svg; + rootg = chart.rootG; + layers = chart.layers; + plate = chart.plate; + + /** + * Test canvas chart functions + */ + context = chart.getContext2d(); + options = d3kit.CanvasChart.getDefaultOptions(); + chart.clear(); +} + function test_layer_organizer() { - let selection: d3.Selection, - layer: d3.Selection, - layers: d3kit.LayerOrganizer, - hasXAxis: boolean; + let selection: d3.Selection; + let layer: d3.Selection; + let layers: d3kit.LayerOrganizer; + let hasXAxis: boolean; selection = d3.select('svg'); @@ -163,8 +420,8 @@ function test_layer_organizer() { */ layers.create('graph'); layers.create(['graph', 'highlight']); - layers.create({'graph': [{'axes':['x-axis', 'y-axis']}, {'labels':['x-label', 'y-label', 'title']}]}); - layers.create([{'axes':['x-axis', 'y-axis']}, {'labels':['x-label', 'y-label', 'title']}]); + layers.create({graph: [{axes: ['x-axis', 'y-axis']}, {labels: ['x-label', 'y-label', 'title']}]}); + layers.create([{axes: ['x-axis', 'y-axis']}, {labels: ['x-label', 'y-label', 'title']}]); /** * Test other layer organizer functions @@ -174,13 +431,18 @@ function test_layer_organizer() { } function test_helper() { - let simple1: Object = { "one": 1 }, - simple2: Object = { "two": 2 }, - complex: Object = { "fruit": ["apple", "pear", "grape"], "prez": { "fn": "Barack", "ln": "Obama" } }, - merged1: Object, merged2: Object, - anObject: Object = {"this": "isanobject"}, isObj: boolean, - aFuncxn = () => "this is a function", isFunc: boolean, - kebabed: string, dbouncd: any, throtld: any; + const simple1: {} = { one: 1 }; + const simple2: {} = { two: 2 }; + const complex: {} = { fruit: ["apple", "pear", "grape"], prez: { fn: "Barack", ln: "Obama" } }; + const anObject: {} = { this: "isanobject"}; + let merged1: {}; + let merged2: {}; + let isObj: boolean; + let aFuncxn = () => "this is a function"; + let isFunc: boolean; + let kebabed: string; + let dbouncd: any; + let throtld: any; dbouncd = d3kit.helper.debounce(aFuncxn, 300); merged1 = d3kit.helper.extend(simple1, simple2); diff --git a/types/d3kit/index.d.ts b/types/d3kit/index.d.ts index 8d0d468a3c..c374a59501 100644 --- a/types/d3kit/index.d.ts +++ b/types/d3kit/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for d3Kit v3.1.2 +// Type definitions for d3Kit 3.2 // Project: https://github.com/twitter/d3kit // Definitions by: Morgan Benton // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -7,37 +7,73 @@ export as namespace d3kit; -export class AbstractChart { - container: Element; - constructor(selector: string|Element, options?: ChartOptions); - static getDefaultOptions(): ChartOptions; - static getCustomEventNames(): string[]; - setupDispatcher(customEventNames?: string[]): void; - getCustomEventNames(): string[]; - getInnerWidth(): number; - getInnerHeight(): number; +export class Base { + constructor(options?: ChartOptions); + static getDefaultOptions(options?: ChartOptions): ChartOptions; + copyDimension(another: Base): this; width(value: number): this; width(): number; height(value: number): this; height(): number; dimension(dimensions: [number, number]): this; dimension(): [number, number]; - data(data: any): this; - data(): any; margin(margins: ChartMargin): this; margin(): ChartMargin; offset(offset: [number, number]): this; offset(): [number, number]; + pixelRatio(value: number): this; + pixelRatio(): number; + updateDimensionNow(): this; +} + +export class AbstractPlate extends Base { + constructor(selector: string|Element, options?: ChartOptions); + static getDefaultOptions(options?: ChartOptions): ChartOptions; + getNode(): Element; + getSelection(): d3.Selection; +} + +export class CanvasPlate extends AbstractPlate { + constructor(options?: ChartOptions); + static getDefaultOptions(options?: ChartOptions): ChartOptions; + getContext2d(): CanvasRenderingContext2D; + clear(): this; +} + +export class DivPlate extends AbstractPlate { + constructor(options?: ChartOptions); + static getDefaultOptions(options?: ChartOptions): ChartOptions; +} + +export class SvgPlate extends AbstractPlate { + rootG: d3.Selection; + layers: LayerOrganizer; + constructor(options?: ChartOptions); + static getDefaultOptions(options?: ChartOptions): ChartOptions; +} + +export class AbstractChart extends Base { + constructor(selector: string|Element, options?: ChartOptions); + static getCustomEventNames(): string[]; + addPlate(name: string, plate: AbstractPlate, doNotAppend: boolean): AbstractPlate; + addPlate(name: string, plate: AbstractPlate): this; + removePlate(name: string): this; + setupDispatcher(customEventNames?: string[]): this; + getCustomEventNames(): string[]; + getInnerWidth(): number; + getInnerHeight(): number; + data(data: any): this; + data(): any; options(options: ChartOptions): this; options(): ChartOptions; - updateDimensionNow(): this; hasData(): boolean; hasNonZeroArea(): boolean; - fit(fitOptions: FitOptions, watchOptions?: WatchOptions): this; + fit(fitOptions?: FitOptions, watchOptions?: boolean|WatchOptions): this; stopFitWatcher(): this; on(name: string, listener: () => void): this; off(name: string): this; - destroy(): void; + dispatchAs(name: string, ...args: any[]): (...args: any[]) => void; + destroy(): this; } export interface ChartMargin { @@ -68,7 +104,7 @@ export interface FitOptions { // from https://github.com/kristw/slimfit export interface WatchOptions { mode?: string; - target?: any; // lazy + target?: Element|[number, number]|{width: number, height: number}|null; interval?: number; } @@ -76,6 +112,7 @@ export class SvgChart extends AbstractChart { svg: d3.Selection; rootG: d3.Selection; layers: LayerOrganizer; + plate: SvgPlate; constructor(selector: string|Element, options?: ChartOptions); } @@ -86,6 +123,15 @@ export class CanvasChart extends AbstractChart { clear(): this; } +export class HybridChart extends CanvasChart { + svg: d3.Selection; + rootG: d3.Selection; + layers: LayerOrganizer; + plate: SvgPlate; + constructor(selector: string|Element, options?: ChartOptions); + static getDefaultOptions(): ChartOptions; +} + export class LayerOrganizer { constructor(container: d3.Selection, defaultTag?: string); create(layerNames: string|string[]|LayerConfig|LayerConfig[]): d3.Selection|Array>; diff --git a/types/d3kit/tsconfig.json b/types/d3kit/tsconfig.json index dac05091a5..e1c744e180 100644 --- a/types/d3kit/tsconfig.json +++ b/types/d3kit/tsconfig.json @@ -7,7 +7,7 @@ ], "noImplicitAny": true, "noImplicitThis": true, - "strictNullChecks": false, + "strictNullChecks": true, "baseUrl": "../", "typeRoots": [ "../" diff --git a/types/d3kit/tslint.json b/types/d3kit/tslint.json new file mode 100644 index 0000000000..2750cc0197 --- /dev/null +++ b/types/d3kit/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } \ No newline at end of file