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

@@ -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<d3.BaseType, any, d3.BaseType, any>;
+
+    // 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<d3.BaseType, any, d3.BaseType, any>;
+    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<d3.BaseType, any, d3.BaseType, any>;
+
+    // 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<d3.BaseType, any, d3.BaseType, any>;
+    let rootg: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    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<d3.BaseType, any, d3.BaseType, any>,
-        rootg: d3.Selection<d3.BaseType, any, d3.BaseType, any>,
-        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<d3.BaseType, any, d3.BaseType, any>;
+    let rootg: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    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 = <d3kit.SvgPlate> 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<d3.BaseType, any, d3.BaseType, any>;
+    let rootg: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    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 = <d3kit.SvgPlate> 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<d3.BaseType, any, d3.BaseType, any>,
-        layer: d3.Selection<d3.BaseType, any, d3.BaseType, any>,
-        layers: d3kit.LayerOrganizer,
-        hasXAxis: boolean;
+    let selection: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    let layer: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    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);

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 <https://github.com/morphatic>
 // 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<d3.BaseType, any, d3.BaseType, any>;
+}
+
+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<d3.BaseType, any, d3.BaseType, any>;
+    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<d3.BaseType, any, d3.BaseType, any>;
     rootG: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
     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<d3.BaseType, any, d3.BaseType, any>;
+    rootG: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
+    layers: LayerOrganizer;
+    plate: SvgPlate;
+    constructor(selector: string|Element, options?: ChartOptions);
+    static getDefaultOptions(): ChartOptions;
+}
+
 export class LayerOrganizer {
     constructor(container: d3.Selection<d3.BaseType, any, d3.BaseType, any>, defaultTag?: string);
     create(layerNames: string|string[]|LayerConfig|LayerConfig[]): d3.Selection<d3.BaseType, any, d3.BaseType, any>|Array<d3.Selection<d3.BaseType, any, d3.BaseType, any>>;

types/d3kit/tsconfig.json

@@ -7,7 +7,7 @@
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"

types/d3kit/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }