vap-visual - npm Package Compare versions

Comparing version 0.3.12 to 0.3.13

_components/Axis/_AxisDrawer.js

@@ -61,3 +61,3 @@ "use strict";
                 _a = __read(_AxisConfig_1.getDefaultOption(_this.visual, _this.option), 2), _this.xAxis = _a[0], _this.yAxis = _a[1];
-                _this.init(_this.visual.props, state, true);
+                _this.init(_this.visual.props, state);
                 _this.resize(visual.props, visual.state);
@@ -64,0 +64,0 @@ _this.draw(_this.visual.props, state);

_components/Axis/XBandDrawer.d.ts

@@ -11,5 +11,5 @@ import * as d3 from 'd3';
     */
-    init(props: VisualOpts, state: VisualState, reConfig?: boolean): void;
+    init(props: VisualOpts, state: VisualState): void;
     resize(props: VisualOpts, state: VisualState): void;
     draw(props: VisualOpts, state: VisualState): void;
 }

_components/Axis/XBandDrawer.js

@@ -48,12 +48,19 @@ "use strict";
     */
-    XBandDrawer.prototype.init = function (props, state, reConfig) {
-        if (reConfig === void 0) { reConfig = false; }
+    XBandDrawer.prototype.init = function (props, state) {
         this.margin = _utils_1.DataUtil.has(this.yAxis, 'width') ? this.yAxis.width : 0;
         this.scale = d3.scaleBand();
         state.xAxis = { margin: this.margin, scale: this.scale };
-        if (!this.xAxis.show || reConfig)
-            return;
-        var x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
-        x.append('path').attr('class', '_domain');
-        this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+        var x = this.container.select('g._axis_x');
+        if (this.xAxis.show) {
+            if (x.size() == 0) {
+                x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
+                x.append('path').attr('class', '_domain');
+                this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+            }
+        }
+        else {
+            if (x.size() > 0) {
+                x.remove();
+            }
+        }
     };
@@ -60,0 +67,0 @@ XBandDrawer.prototype.resize = function (props, state) {

_components/Axis/XDateDrawer.d.ts

@@ -11,5 +11,5 @@ import * as d3 from 'd3';
     */
-    init(props: VisualOpts, state: VisualState, reConfig?: boolean): void;
+    init(props: VisualOpts, state: VisualState): void;
     resize(props: VisualOpts, state: VisualState): void;
     draw(props: VisualOpts, state: VisualState): void;
 }

_components/Axis/XDateDrawer.js

@@ -48,12 +48,19 @@ "use strict";
     */
-    XDateDrawer.prototype.init = function (props, state, reConfig) {
-        if (reConfig === void 0) { reConfig = false; }
+    XDateDrawer.prototype.init = function (props, state) {
         this.margin = _utils_1.DataUtil.has(this.yAxis, 'width') ? this.yAxis.width : 0;
         this.scale = d3.scaleLinear();
         state.xAxis = { margin: this.margin, scale: this.scale };
-        if (!this.xAxis.show || reConfig)
-            return;
-        var x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
-        x.append('path').attr('class', '_domain');
-        this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+        var x = this.container.select('g._axis_x');
+        if (this.xAxis.show) {
+            if (x.size() == 0) {
+                x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
+                x.append('path').attr('class', '_domain');
+                this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+            }
+        }
+        else {
+            if (x.size() > 0) {
+                x.remove();
+            }
+        }
     };
@@ -60,0 +67,0 @@ XDateDrawer.prototype.resize = function (props, state) {

_components/Axis/XFixNumberDrawer.d.ts

@@ -11,5 +11,5 @@ import * as d3 from 'd3';
     */
-    init(props: VisualOpts, state: VisualState, reConfig?: boolean): void;
+    init(props: VisualOpts, state: VisualState): void;
     resize(props: VisualOpts, state: VisualState): void;
     draw(props: VisualOpts, state: VisualState): void;
 }

_components/Axis/XFixNumberDrawer.js

@@ -48,12 +48,19 @@ "use strict";
     */
-    XFixNumberDrawer.prototype.init = function (props, state, reConfig) {
-        if (reConfig === void 0) { reConfig = false; }
+    XFixNumberDrawer.prototype.init = function (props, state) {
         this.margin = _utils_1.DataUtil.has(this.yAxis, 'width') ? this.yAxis.width : 0;
         this.scale = d3.scaleLinear();
         state.xAxis = { margin: this.margin, scale: this.scale };
-        if (!this.xAxis.show || reConfig)
-            return;
-        var x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
-        x.append('path').attr('class', '_domain');
-        this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+        var x = this.container.select('g._axis_x');
+        if (this.xAxis.show) {
+            if (x.size() == 0) {
+                x = this.container.append('g').attr('class', "_axis_group _axis_x _axis_" + this.xAxis.mode + " " + (this.xAxis.className || ''));
+                x.append('path').attr('class', '_domain');
+                this.xAxis.label && x.append('text').attr('class', '_axis_label').text(this.xAxis.label);
+            }
+        }
+        else {
+            if (x.size() > 0) {
+                x.remove();
+            }
+        }
     };
@@ -60,0 +67,0 @@ XFixNumberDrawer.prototype.resize = function (props, state) {

_components/Axis/YBandDrawer.js

@@ -53,7 +53,15 @@ "use strict";
         state.yAxis = { margin: this.margin, scale: this.scale };
-        if (!this.yAxis.show || reConfig)
-            return;
-        var y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
-        y.append('path').attr('class', '_domain');
-        this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+        var y = this.container.select('g._axis_y');
+        if (this.yAxis.show) {
+            if (y.size() == 0) {
+                y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
+                y.append('path').attr('class', '_domain');
+                this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+            }
+        }
+        else {
+            if (y.size() > 0) {
+                y.remove();
+            }
+        }
     };
@@ -60,0 +68,0 @@ YBandDrawer.prototype.resize = function (props, state) {

_components/Axis/YNumberDrawer.d.ts

@@ -8,3 +8,3 @@ import * as d3 from 'd3';
 export declare class YNumberDrawer extends AxisDrawer<d3.ScaleLinear<number, number>> {
-    init(props: VisualOpts, state: VisualState, reConfig?: boolean): void;
+    init(props: VisualOpts, state: VisualState): void;
     resize(props: VisualOpts, state: VisualState): void;
@@ -11,0 +11,0 @@ private getMax;

_components/Axis/YNumberDrawer.js

@@ -45,19 +45,19 @@ "use strict";
     }
-    YNumberDrawer.prototype.init = function (props, state, reConfig) {
-        if (reConfig === void 0) { reConfig = false; }
+    YNumberDrawer.prototype.init = function (props, state) {
         this.margin = _utils_1.DataUtil.has(this.xAxis, 'width') ? this.xAxis.width : 0;
         this.scale = d3.scaleLinear();
         state.yAxis = { margin: this.margin, scale: this.scale };
-        // if (props.valueField instanceof Array) {
-        //     Event.on(`${EVENT_LEGEND_SELECTED}.${this.visual.id}`, (state) => {
-        //         console.debug(`-------------------- YNumberDrawer : Event : Resize --------------------`);
-        //         this.resize(this.visual.props, state)
-        //         this.draw(this.visual.props, state)
-        //     });
-        // }
-        if (!this.yAxis.show || reConfig)
-            return;
-        var y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
-        y.append('path').attr('class', '_domain');
-        this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+        var y = this.container.select('g._axis_y');
+        if (this.yAxis.show) {
+            if (y.size() == 0) {
+                y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
+                y.append('path').attr('class', '_domain');
+                this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+            }
+        }
+        else {
+            if (y.size() > 0) {
+                y.remove();
+            }
+        }
     };
@@ -64,0 +64,0 @@ YNumberDrawer.prototype.resize = function (props, state) {

_components/Axis/YPercentDrawer.js

@@ -52,14 +52,15 @@ "use strict";
         state.yAxis = { margin: this.margin, scale: this.scale };
-        // if (props.valueField instanceof Array) {
-        //     Event.on(`${EVENT_LEGEND_SELECTED}.${this.visual.id}`, (state) => {
-        //         console.debug(`-------------------- YPercentDrawer : Event : Resize --------------------`);
-        //         this.resize(this.visual.props, state)
-        //         this.draw(this.visual.props, state)
-        //     });
-        // }
-        if (!this.yAxis.show || reConfig)
-            return;
-        var y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
-        y.append('path').attr('class', '_domain');
-        this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+        var y = this.container.select('g._axis_y');
+        if (this.yAxis.show) {
+            if (y.size() == 0) {
+                y = this.container.append("g").attr("class", "_axis_group _axis_y _axis_" + this.yAxis.mode + " " + (this.yAxis.className || ''));
+                y.append('path').attr('class', '_domain');
+                this.yAxis.label && y.append('text').attr('class', '_axis_label').text(this.yAxis.label);
+            }
+        }
+        else {
+            if (y.size() > 0) {
+                y.remove();
+            }
+        }
     };
@@ -66,0 +67,0 @@ YPercentDrawer.prototype.resize = function (props, state) {

_components/DefUtil.js

@@ -27,2 +27,3 @@ "use strict";
         var COLOR_s = parseInt(window.getComputedStyle(document.body).getPropertyValue('--v-colors-length').trim()) + 1;
+        console.log(COLOR_s);
         var RANGE = d3.range(0, COLOR_s);
@@ -29,0 +30,0 @@ var slash = function (s) {

_components/Event.js

@@ -129,3 +129,2 @@ "use strict";
         var context = null;
-        // console.error(evt)
         if (evt.name) {
@@ -132,0 +131,0 @@ var evtId = evt.name.split(".")[0];

_components/LegendUtil.d.ts

@@ -5,7 +5,13 @@ import { Legend } from '../interface';
     SERIRES = 1,
-    VALUE = 2
+    VALUE = 2,
+    CUSTOM = 3
 }
 /**
  * 创建图例
+ * @param visual Visual实例化对象
+ * @param type 图例类型
+ * @param def 图例默认值
+ * @param calback 一个回调函数（仅当类型为 custom 自定义时有效）
+ *
 */
-export declare const CreateLegend: (visual: any, type: LEGEND_TYPE, def?: Legend) => void;
+export declare const CreateLegend: (visual: any, type: LEGEND_TYPE, def?: Legend, callback?: (visual: any, conf: any) => void) => void;

_components/LegendUtil.js

@@ -21,7 +21,13 @@ "use strict";
     LEGEND_TYPE[LEGEND_TYPE["VALUE"] = 2] = "VALUE";
+    LEGEND_TYPE[LEGEND_TYPE["CUSTOM"] = 3] = "CUSTOM";
 })(LEGEND_TYPE = exports.LEGEND_TYPE || (exports.LEGEND_TYPE = {}));
 /**
  * 创建图例
+ * @param visual Visual实例化对象
+ * @param type 图例类型
+ * @param def 图例默认值
+ * @param calback 一个回调函数（仅当类型为 custom 自定义时有效）
+ *
 */
-exports.CreateLegend = function (visual, type, def) {
+exports.CreateLegend = function (visual, type, def, callback) {
     console.debug('-------------------- Legend : Create Legend --------------------');
@@ -31,28 +37,2 @@ var props = visual.props;
     var conf = _utils_1.DataUtil.merge({}, LEGEND_DEFAULT, def, props.legend);
-    //     postion: 'l' | 't' | 'r' | 'b' | 'lt' | 'rt' | 'lb' | 'rb' | 'n',
-    //     /**
-    //      * 模式： 
-    //      * simple     : 简单模式  - 默认
-    //      * percent    : 下划百分比模式
-    //     */
-    //     mode?: 'simple' | 'percent';
-    //     /**
-    //      * 每
-    //     */
-    //     width?: number,         // 默认： 120（simple） / 160（percent）
-    //     // height?: number,        // 默认： 24（simple） / 40（percent）
-    //     /**
-    //      * 图例与图形的交汇宽度(左、右) 或高度(上、下)
-    //      * 
-    //     */
-    //     inner?: number,
-    //     /**
-    //      * 每行显示的个数
-    //      * 列数 t / b 时 默认为 0 (只有t/b模式可以传0，其它模式默认为1，传0为效)
-    //      * 其它：默认为 1
-    //      * 
-    //      * 当为 0 时，将会通过宽度和图例个数进行计算
-    //     */
-    //     cols?: number | 0,
-    // }
     // console.log(conf)
@@ -91,3 +71,8 @@ if (LEGEND_SHOW.has(conf.postion)) {
             break;
+        case LEGEND_TYPE.CUSTOM:
+            if (callback) {
+                callback(visual, conf);
+            }
+            break;
     }
 };

_utils/DataUtil.js

@@ -203,3 +203,6 @@ "use strict";
     keys.map(function (key) {
-        if (typeof target[key] != 'object' || target[key] instanceof Array) {
+        if (target[key] === null) {
+            source[key] = null;
+        }
+        else if (typeof target[key] != 'object' || target[key] instanceof Array) {
             source[key] = target[key];
@@ -206,0 +209,0 @@ }

_utils/DateUtil.d.ts

 export declare const getDateFormat: (format: string) => (date: Date) => string;
-export declare const getDateParser: (format: string) => (datestr: string) => (Date | null);
+export declare const getDateParser: (format: string) => (datestr: string) => Date;
 /**
@@ -4,0 +4,0 @@ * 将一组数据，

_utils/DateUtil.js

@@ -167,4 +167,4 @@ "use strict";
     if (format === void 0) { format = '%Y-%m-%d'; }
-    var _start = start instanceof Date ? start : parseDate(start);
-    var _end = end ? (end instanceof Date ? end : parseDate(end)) : extentMonth(start)[1];
+    var _start = start instanceof Date ? start : parseDate(start, format);
+    var _end = end ? (end instanceof Date ? end : parseDate(end, format)) : extentMonth(start)[1];
     var result = [];
@@ -238,3 +238,9 @@ var formater = exports.getDateFormat(format);
     if (format === void 0) { format = '%Y-%m-%d'; }
+    if (start == undefined && end == undefined) {
+        if (data == null || data.length == 0) {
+            return [];
+        }
+    }
     // 默认数据
+    // console.log(data, labelField, field)
     var DEF = {};
@@ -297,3 +303,2 @@ if (valueField instanceof Array) {
     if (format === void 0) { format = '%Y-%m-01'; }
-    // console.log(arr)
     // 1 start , end
@@ -306,5 +311,6 @@ var _d = __read(d3.extent(data, function (item) { return item[labelField]; }), 2), dataStart = _d[0], dataEnd = _d[1];
     // console.log(_start, _end)
+    var parser = exports.getDateParser(format);
     // 2 map
     var monthMap = new Map();
-    var _f = __read([new Date(_start), new Date(_end)], 2), monthStart = _f[0], monthEnd = _f[1];
+    var _f = __read([parser(_start), parser(_end)], 2), monthStart = _f[0], monthEnd = _f[1];
     monthStart.setMilliseconds(0);
@@ -311,0 +317,0 @@ monthStart.setSeconds(0);

Bars/Bar/index.js

@@ -110,4 +110,6 @@ "use strict";
                 _utils_1.console.warn("-------------------- Bar : Updata / setOption " + needUpdate + " " + mustUpdate + " --------------------");
-                // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
             }
@@ -114,0 +116,0 @@ else {

Bars/HBar/index.js

@@ -117,3 +117,6 @@ "use strict";
                 console.warn("-------------------- Bar : Updata / setOption " + needUpdate + " " + mustUpdate + " --------------------");
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
             }
@@ -120,0 +123,0 @@ });

Bars/HMultiBar/index.js

@@ -130,3 +130,6 @@ "use strict";
                 console.warn("-------------------- HMutliBar : Updata / setOption " + needUpdate + " " + mustUpdate + " --------------------");
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
             }
@@ -133,0 +136,0 @@ });

Bars/Hours/index.js

@@ -113,3 +113,6 @@ "use strict";
                 // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
             }
@@ -116,0 +119,0 @@ else {

Bars/MultiBar/index.js

@@ -136,3 +136,7 @@ "use strict";
             if (needUpdate || mustUpdate) {
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -139,0 +143,0 @@ });

Distribution/CrossHeatMap/index.js

@@ -86,3 +86,7 @@ "use strict";
                 // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -89,0 +93,0 @@ });

Distribution/HeatMap/index.js

@@ -74,3 +74,7 @@ "use strict";
                 // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -77,0 +81,0 @@ });

Distribution/Percentile/index.js

@@ -158,3 +158,7 @@ "use strict";
             if (needUpdate || mustUpdate) {
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -161,0 +165,0 @@ });

interface.d.ts

@@ -206,3 +206,3 @@ /**
     */
-    labelFormat?: (string: any) => string;
+    labelFormat?: (text: string, data?: any) => string;
     /**
@@ -209,0 +209,0 @@ * 值的字段，如果是多个，请传数组

package.json

@@ -1,1 +0,1 @@
-{"name":"vap-visual","version":"0.3.12","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da"}
+{"name":"vap-visual","version":"0.3.13","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da","dependencies":{"d3":"^5.16.0"}}

Pies/Pie/Draw.js

@@ -260,3 +260,2 @@ "use strict";
             var nextRadius = (nextEnd - nextStart) * ratio;
-            // console.error([currentStart, currentEnd, nextStart, nextEnd, currentRadius, nextRadius, ratio])
             return function (t) {
@@ -263,0 +262,0 @@ return arc({

Pies/Pie/index.js

@@ -185,3 +185,6 @@ "use strict";
             if (needUpdate || mustUpdate) {
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
             }
@@ -188,0 +191,0 @@ });

Radars/Radar/index.js

@@ -128,3 +128,7 @@ "use strict";
                 // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -131,0 +135,0 @@ else {

react/Bar.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { BarOpts } from '../Bars/interface';
-export declare abstract class Bar extends React.PureComponent<BarOpts> {
+export declare class Bar extends React.PureComponent<BarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Bar.js

@@ -19,3 +19,2 @@ "use strict";
 var Bar_1 = require("../Bars/Bar");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Bar = /** @class */ (function (_super) {
     };
-    Bar.prototype.shouldComponentUpdate = function () {
+    Bar.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/CombineMap.d.ts

 import * as React from 'react';
 import { CombineMapOpts } from '../topojson/interface';
-export declare abstract class CombineMap extends React.PureComponent<CombineMapOpts> {
+export declare class CombineMap extends React.PureComponent<CombineMapOpts> {
     private id;
@@ -12,3 +12,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -15,0 +15,0 @@ * If you register a event on it , the call function would be processed.

react/CombineMap.js

@@ -19,3 +19,2 @@ "use strict";
 var CombineMap_1 = require("../topojson/CombineMap");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var CombineMap = /** @class */ (function (_super) {
     };
-    CombineMap.prototype.shouldComponentUpdate = function () {
+    CombineMap.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/CrossHeatMap.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { CrossHeatMapOpts } from '../Distribution/interface';
-export declare abstract class CrossHeatMap extends React.PureComponent<CrossHeatMapOpts> {
+export declare class CrossHeatMap extends React.PureComponent<CrossHeatMapOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/CrossHeatMap.js

@@ -19,3 +19,2 @@ "use strict";
 var CrossHeatMap_1 = require("../Distribution/CrossHeatMap");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var CrossHeatMap = /** @class */ (function (_super) {
     };
-    CrossHeatMap.prototype.shouldComponentUpdate = function () {
+    CrossHeatMap.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/DateTrend.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { DateTrendOpts } from '../Trend/interface';
-export declare abstract class DateTrend extends React.PureComponent<DateTrendOpts> {
+export declare class DateTrend extends React.PureComponent<DateTrendOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/DateTrend.js

@@ -19,3 +19,2 @@ "use strict";
 var DateTrend_1 = require("../Trend/DateTrend");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var DateTrend = /** @class */ (function (_super) {
     };
-    DateTrend.prototype.shouldComponentUpdate = function () {
+    DateTrend.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/HBar.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { HBarOpts } from '../Bars/interface';
-export declare abstract class HBar extends React.PureComponent<HBarOpts> {
+export declare class HBar extends React.PureComponent<HBarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/HBar.js

@@ -19,3 +19,2 @@ "use strict";
 var HBar_1 = require("../Bars/HBar");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var HBar = /** @class */ (function (_super) {
     };
-    HBar.prototype.shouldComponentUpdate = function () {
+    HBar.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/HeatMap.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { HeatMapOpts } from '../Distribution/interface';
-export declare abstract class HeatMap extends React.PureComponent<HeatMapOpts> {
+export declare class HeatMap extends React.PureComponent<HeatMapOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/HeatMap.js

@@ -19,3 +19,2 @@ "use strict";
 var HeatMap_1 = require("../Distribution/HeatMap");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var HeatMap = /** @class */ (function (_super) {
     };
-    HeatMap.prototype.shouldComponentUpdate = function () {
+    HeatMap.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/Histogram.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { HistogramOpts } from '../Trend/interface';
-export declare abstract class Histogram extends React.PureComponent<HistogramOpts> {
+export declare class Histogram extends React.PureComponent<HistogramOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Histogram.js

@@ -19,3 +19,2 @@ "use strict";
 var Histogram_1 = require("../Trend/Histogram");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Histogram = /** @class */ (function (_super) {
     };
-    Histogram.prototype.shouldComponentUpdate = function () {
+    Histogram.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/HMultiBar.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { HMutliBarOpts } from '../Bars/interface';
-export declare abstract class HMultiBar extends React.PureComponent<HMutliBarOpts> {
+export declare class HMultiBar extends React.PureComponent<HMutliBarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/HMultiBar.js

@@ -19,3 +19,2 @@ "use strict";
 var HMultiBar_1 = require("../Bars/HMultiBar");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var HMultiBar = /** @class */ (function (_super) {
     };
-    HMultiBar.prototype.shouldComponentUpdate = function () {
+    HMultiBar.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/Hours.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { BarOpts } from '../Bars/interface';
-export declare abstract class Hours extends React.PureComponent<BarOpts> {
+export declare class Hours extends React.PureComponent<BarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Hours.js

@@ -19,3 +19,2 @@ "use strict";
 var Hours_1 = require("../Bars/Hours");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Hours = /** @class */ (function (_super) {
     };
-    Hours.prototype.shouldComponentUpdate = function () {
+    Hours.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/MultiBar.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { MutliBarOpts } from '../Bars/interface';
-export declare abstract class MultiBar extends React.PureComponent<MutliBarOpts> {
+export declare class MultiBar extends React.PureComponent<MutliBarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/MultiBar.js

@@ -19,3 +19,2 @@ "use strict";
 var MultiBar_1 = require("../Bars/MultiBar");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var MultiBar = /** @class */ (function (_super) {
     };
-    MultiBar.prototype.shouldComponentUpdate = function () {
+    MultiBar.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/Percentile.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { PercentileOpts } from '../Distribution/interface';
-export declare abstract class Percentile extends React.PureComponent<PercentileOpts> {
+export declare class Percentile extends React.PureComponent<PercentileOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Percentile.js

@@ -19,3 +19,2 @@ "use strict";
 var Percentile_1 = require("../Distribution/Percentile");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Percentile = /** @class */ (function (_super) {
     };
-    Percentile.prototype.shouldComponentUpdate = function () {
+    Percentile.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/Pie.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { PieOpts } from '../Pies/interface';
-export declare abstract class Pie extends React.PureComponent<PieOpts> {
+export declare class Pie extends React.PureComponent<PieOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Pie.js

@@ -19,3 +19,2 @@ "use strict";
 var Pie_1 = require("../Pies/Pie");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Pie = /** @class */ (function (_super) {
     };
-    Pie.prototype.shouldComponentUpdate = function () {
+    Pie.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/Radar.d.ts

 import * as React from 'react';
 import { VISUAL_EVENT } from '../interface';
 import { RadarOpts } from '../Radars/interface';
-export declare abstract class Radar extends React.PureComponent<RadarOpts> {
+export declare class Radar extends React.PureComponent<RadarOpts> {
     private id;
@@ -13,3 +13,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -16,0 +16,0 @@ * If you register a event on it , the call function would be processed.

react/Radar.js

@@ -19,3 +19,2 @@ "use strict";
 var Radar_1 = require("../Radars/Radar");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var Radar = /** @class */ (function (_super) {
     };
-    Radar.prototype.shouldComponentUpdate = function () {
+    Radar.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

react/SimpleMap.d.ts

 import * as React from 'react';
 import { SimpleMapOpts } from '../topojson/interface';
-export declare abstract class SimpleMap extends React.PureComponent<SimpleMapOpts> {
+export declare class SimpleMap extends React.PureComponent<SimpleMapOpts> {
     private id;
@@ -12,3 +12,3 @@ private graph;
     componentDidMount(): void;
-    shouldComponentUpdate(): boolean;
+    shouldComponentUpdate(props: any): boolean;
     /**
@@ -15,0 +15,0 @@ * If you register a event on it , the call function would be processed.

react/SimpleMap.js

@@ -19,3 +19,2 @@ "use strict";
 var SimpleMap_1 = require("../topojson/SimpleMap");
-;
 var _utils_1 = require("../_utils");
@@ -42,5 +41,5 @@ var SimpleMap = /** @class */ (function (_super) {
     };
-    SimpleMap.prototype.shouldComponentUpdate = function () {
+    SimpleMap.prototype.shouldComponentUpdate = function (props) {
         if (this.state.loaded) {
-            this.graph.setOption(this.props);
+            this.graph.setOption(props);
         }
@@ -47,0 +46,0 @@ return false;

topojson/GeoVisual.js

@@ -147,2 +147,3 @@ "use strict";
             var data, mapId;
+            var _this = this;
             return __generator(this, function (_a) {
@@ -172,8 +173,10 @@ switch (_a.label) {
                         // 初始化 SVG
-                        this.beforeBuild();
-                        this.build();
-                        this.afterBuild();
-                        if (this.props.data) {
-                            this.setData(this.props.data);
-                        }
+                        window.setTimeout(function () {
+                            _this.beforeBuild();
+                            _this.build();
+                            _this.afterBuild();
+                            if (_this.props.data) {
+                                _this.setData(_this.props.data);
+                            }
+                        }, 5);
                         return [2 /*return*/];
@@ -307,2 +310,3 @@ }
         console.debug('-------------------- build --------------------');
+        this.CONTAINER.classed('_visual', true).classed(this.__ClassName, true);
         var div = this.CONTAINER.node();
@@ -336,3 +340,3 @@ var WIDTH = Math.floor(div.offsetWidth);
         };
-        this.CONTAINER.classed(this.__ClassName, true);
+        // this.CONTAINER.classed(this.__ClassName, true);
         if (_utils_1.DataUtil.has(this.props, 'className'))
@@ -339,0 +343,0 @@ this.CONTAINER.classed(this.props.className, true).classed(this.__ClassName, true);

topojson/interface.d.ts

@@ -60,3 +60,3 @@ import { VALUE_FORMAT } from '../interface';
     */
-    fillStyle?: 'slash' | 'hlinear' | 'linear' | 'grain' | 'grid' | 'thickness' | string;
+    fillStyle?: 'slash' | 'hlinear' | 'linear' | 'grain' | 'grid' | 'thickness';
     /**
@@ -130,3 +130,3 @@ * 图形扩展样式
     */
-    labelFormat?: (string: any) => string;
+    labelFormat?: (text: string, data?: any) => string;
     /**
@@ -133,0 +133,0 @@ * 说明：如果需要在地图上显示简单，请传此方法，而不是 labelFormat

topojson/SimpleMap/index.js

@@ -46,2 +46,3 @@ "use strict";
         this.ROOT.classed('_root_cursor', _utils_1.DataUtil.has(this.props, 'onClick') || _utils_1.DataUtil.has(this.props, 'onSelect'));
+        console.error(this.props.tip);
         if (this.props.tip !== null) {
@@ -48,0 +49,0 @@ this.GROUP.on('mouseover', function (d, i) {

Trend/Histogram/index.js

@@ -127,3 +127,7 @@ "use strict";
             if (needUpdate || mustUpdate) {
-                _this.update();
+                var items = _this.update();
+                if (items) {
+                    _this.addEvent(items);
+                }
+                ;
             }
@@ -130,0 +134,0 @@ });

Visual.d.ts

@@ -39,4 +39,4 @@ import * as d3 from 'd3';
     protected resize(): void;
-    private addEvent;
+    protected addEvent(enter: d3.Selection<any, any, any, any>): void;
     on(event_type: string, callback: Function): void;
 }

Visual.js

@@ -77,3 +77,2 @@ "use strict";
         this.props = _utils_1.DataUtil.merge({}, conf);
-        // console.error(this.props);
         window.setTimeout(function () {
@@ -145,3 +144,2 @@ _this.beforeBuild();
         var _this = this;
-        // console.error(conf)
         _utils_1.console.debug('-------------------- setOption --------------------');
@@ -148,0 +146,0 @@ if (this.CONTAINER.size() <= 0) {

No alert changes

Improved metrics

Total package byte prevSize

579985

increased by0.24%

Number of package files

215

increased by0.94%

Lines of code

13284

increased by0.42%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedd3@^5.16.0

• + Addedcommander@2.20.3(transitive)

• + Addedd3@5.16.0(transitive)

• + Addedd3-array@1.2.4(transitive)

• + Addedd3-axis@1.0.12(transitive)

• + Addedd3-brush@1.1.6(transitive)

• + Addedd3-chord@1.0.6(transitive)

• + Addedd3-collection@1.0.7(transitive)

• + Addedd3-color@1.4.1(transitive)

• + Addedd3-contour@1.3.2(transitive)

• + Addedd3-dispatch@1.0.6(transitive)

• + Addedd3-drag@1.2.5(transitive)

• + Addedd3-dsv@1.2.0(transitive)

• + Addedd3-ease@1.0.7(transitive)

• + Addedd3-fetch@1.2.0(transitive)

• + Addedd3-force@1.2.1(transitive)

• + Addedd3-format@1.4.5(transitive)

• + Addedd3-geo@1.12.1(transitive)

• + Addedd3-hierarchy@1.1.9(transitive)

• + Addedd3-interpolate@1.4.0(transitive)

• + Addedd3-path@1.0.9(transitive)

• + Addedd3-polygon@1.0.6(transitive)

• + Addedd3-quadtree@1.0.7(transitive)

• + Addedd3-random@1.1.2(transitive)

• + Addedd3-scale@2.2.2(transitive)

• + Addedd3-scale-chromatic@1.5.0(transitive)

• + Addedd3-selection@1.4.2(transitive)

• + Addedd3-shape@1.3.7(transitive)

• + Addedd3-time@1.1.0(transitive)

• + Addedd3-time-format@2.3.0(transitive)

• + Addedd3-timer@1.0.10(transitive)

• + Addedd3-transition@1.3.2(transitive)

• + Addedd3-voronoi@1.1.4(transitive)

• + Addedd3-zoom@1.8.3(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedrw@1.3.3(transitive)

• + Addedsafer-buffer@2.1.2(transitive)