vap-visual - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

_Common/Visual.d.ts

@@ -11,3 +11,2 @@ import * as d3 from 'd3';
     protected __legendMode: LEGEND_MODE;
-    protected __ListenConfig: string[];
     protected legendDrawer: LegendDrawer;
@@ -14,0 +13,0 @@ protected WIDTH: number;

_Common/Visual.js

@@ -37,3 +37,2 @@ "use strict";
         this.__legendMode = 'none';
-        this.__ListenConfig = []; // 监听属性变化，调用 setOption 时使用
         this.legendDrawer = null;
@@ -285,5 +284,2 @@ // SVG 上层容器
         _.keys(conf).map(function (key) {
-            // if(!this.__ListenConfig.includes(key)){
-            //     return
-            // }
             if (_.isEqual(_this.props[key], conf[key])) {
@@ -290,0 +286,0 @@ return;

Bars/Bar/index.d.ts

@@ -15,3 +15,2 @@ import * as d3 from 'd3';
     protected yAxisDrawer: AxisDrawer<d3.ScaleLinear<number, number>>;
-    protected __ListenConfig: string[];
     protected itemWidth: number;
@@ -18,0 +17,0 @@ protected init(): void;

Bars/Bar/index.js

@@ -51,3 +51,2 @@ "use strict";
         _this.yAxisDrawer = null;
-        _this.__ListenConfig = ['barType', 'valueField', 'valueLabel', 'itemWidth', 'topValue'];
         _this.itemWidth = 20;
@@ -54,0 +53,0 @@ return _this;

package.json

 {
   "name": "vap-visual",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "vap-visual - A Visual FrameWork base on  d3 & lodash",
@@ -5,0 +5,0 @@ "main": "index.js",

Radars/interface.d.ts

 import { VisualOpts } from '../interface';
-export declare type RADAR_TYPE = 'default' | 'circle' | 'polygon';
-export declare type AREA_TYPE = 'default' | 'spot';
+export declare type RADAR_TYPE = 'default' | 'circle' | 'polygon' | 'polygon-edge';
+export declare type AREA_TYPE = 'default' | 'edge';
 export interface RadarOpts extends VisualOpts {
@@ -5,0 +5,0 @@ radarType?: RADAR_TYPE;

Radars/Radar/Draw.d.ts

 import * as d3 from 'd3';
-import { AREA_TYPE } from '../interface';
+import { RADAR_TYPE } from '../interface';
 /**
@@ -8,6 +8,6 @@ * 普通PIE 图的支持
     private default;
-    private spot;
-    draw(type: AREA_TYPE, group: d3.Selection<any, any, any, any>, tempWebs: any, DURATION: number): void;
+    private polygon;
+    draw(type: RADAR_TYPE, radar_line: d3.Selection<any, any, any, any>, level: any, radius: any, total: any, opacity: any): void;
 }
 export declare let Draw: Drawer;
 export {};

Radars/Radar/Draw.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Draw = void 0;
+var _ = require("lodash");
 var d3 = require("d3");
@@ -11,54 +12,62 @@ /**
     }
-    Drawer.prototype.default = function (group, tempWebs, DURATION) {
-        group.selectAll('polygon')
-            .data(function (d) { return d.polygon; })
-            .join('polygon')
-            .attr('points', function (d) { return (d3.select(this).attr('points')) || tempWebs; })
-            .transition()
-            .duration(DURATION)
-            .attr('points', function (d, i) { return d; })
-            .attr('stroke-width', 2);
-        group.selectAll('circle')
-            .data(function (d) { return d.points; })
-            .join('circle')
-            .style('display', function (d) { return d.showed === false ? 'none' : 'block'; })
+    Drawer.prototype.default = function (radar_line, level, radius, total, opacity) {
+        var levelArr = new Array(level);
+        var index = _.add(0, level);
+        for (var i = 0; i < level; i++) {
+            levelArr[i] = radius / 4 * index;
+            index--;
+        }
+        var radar = radar_line.append('g')
+            .classed('radar', true);
+        radar.selectAll('circle')
+            .data(levelArr)
+            .enter()
+            .append('circle')
             .attr('cx', function (d) { return (d3.select(this).attr('cx')) || 0; })
             .attr('cy', function (d) { return (d3.select(this).attr('cy')) || 0; })
-            .attr('r', function (d) { return (d3.select(this).attr('r')) || 0; })
-            .transition()
-            .duration(DURATION)
-            .attr('cx', function (d, i) { return d.x; })
-            .attr('cy', function (d, i) { return d.y; })
-            .attr('r', 3);
+            .attr('r', function (d) { return d; })
+            .style('fill-opacity', opacity || 1);
+        // .attr('points', tempWebs)
+        // .transition() 
+        // .duration(this.DURATION)
     };
-    Drawer.prototype.spot = function (group, tempWebs, DURATION) {
-        group.selectAll('polygon')
-            .data(function (d) { return d.polygon; })
-            .join('polygon')
-            .attr('points', function (d) { return (d3.select(this).attr('points')) || tempWebs; })
-            .transition()
-            .duration(DURATION)
-            .attr('points', function (d, i) { return d; })
-            .attr('stroke-width', 2);
-        group.selectAll('circle')
-            .data(function (d) { return d.points; })
-            .join('circle')
-            .style('display', function (d) { return d.showed === false ? 'none' : 'block'; })
-            .attr('cx', function (d) { return (d3.select(this).attr('cx')) || 0; })
-            .attr('cy', function (d) { return (d3.select(this).attr('cy')) || 0; })
-            .attr('r', function (d) { return (d3.select(this).attr('r')) || 0; })
-            .transition()
-            .duration(DURATION)
-            .attr('cx', function (d, i) { return d.x; })
-            .attr('cy', function (d, i) { return d.y; })
-            .attr('r', 3);
+    Drawer.prototype.polygon = function (radar_line, level, radius, total, opacity) {
+        var polygons = {
+            webs: [],
+            webPoints: [],
+        };
+        var tempWebs = '';
+        var arc = 2 * Math.PI;
+        // 每项指标所在的角度
+        var onePiece = arc / total;
+        for (var k = level; k > 0; k--) {
+            var webs = '';
+            tempWebs = '';
+            var webPoints = [];
+            var r = radius / level * k;
+            for (var i = 0; i < total; i++) {
+                var x = r * Math.sin(i * onePiece), y = r * Math.cos(i * onePiece);
+                webs += x + ',' + -y + ' ';
+            }
+            polygons.webs.push(webs);
+        }
+        var radar = radar_line.append('g')
+            .classed('radar', true);
+        radar.selectAll('polygon')
+            .data(polygons.webs)
+            .enter()
+            .append('polygon')
+            .attr('points', function (d) { return d; })
+            .style('fill-opacity', opacity || 1);
     };
-    Drawer.prototype.draw = function (type, group, tempWebs, DURATION) {
+    Drawer.prototype.draw = function (type, radar_line, level, radius, total, opacity) {
         switch (type) {
-            case 'default':
-                this.default(group, tempWebs, DURATION);
-            case 'spot':
-                this.spot(group, tempWebs, DURATION);
+            case 'circle':
+                return this.default(radar_line, level, radius, total, opacity);
+            case 'polygon':
+                return this.polygon(radar_line, level, radius, total, opacity);
+            case 'polygon-edge':
+                return this.polygon(radar_line, level, radius, total, opacity);
             default:
-                this.default(group, tempWebs, DURATION);
+                return this.default(radar_line, level, radius, total, opacity);
         }
@@ -65,0 +74,0 @@ };

Radars/Radar/index.js

@@ -28,5 +28,5 @@ "use strict";
 var _ = require("lodash");
+var d3 = require("d3");
 var _Common_1 = require("../../_Common");
 var Draw_1 = require("./Draw");
-var RadarDraw_1 = require("./RadarDraw");
 var default_1 = /** @class */ (function (_super) {
@@ -86,2 +86,13 @@ __extends(default_1, _super);
         }
+        var areaPoints = [];
+        webPoints[0].map(function (item, i) {
+            areaPoints[i] = {};
+            if (i == webPoints[0].length - 1) {
+                areaPoints[i].x = (webPoints[0][i].x + webPoints[0][0].x) / 2;
+                areaPoints[i].y = (webPoints[0][i].y + webPoints[0][0].y) / 2;
+                return;
+            }
+            areaPoints[i].x = (webPoints[0][i].x + webPoints[0][i + 1].x) / 2;
+            areaPoints[i].y = (webPoints[0][i].y + webPoints[0][i + 1].y) / 2;
+        });
         this.EXT_TOP.select('g.radar_line').remove();
@@ -91,3 +102,3 @@ var radar_line = this.EXT_TOP.append('g')
             .attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")");
-        RadarDraw_1.RDraw.draw(this.radarType, radar_line, this.level, this.radius, this.FieldSize, this.props.radarOpacity);
+        Draw_1.Draw.draw(this.radarType, radar_line, this.level, this.radius, this.FieldSize, this.props.radarOpacity);
         var lines = radar_line.append('g').classed('lines', true);
@@ -103,2 +114,9 @@ lines.selectAll('line')
             .style('opacity', this.props.radarOpacity || 1);
+        var textPoints = [];
+        if (this.props.radarType == 'polygon-edge') {
+            textPoints = areaPoints;
+        }
+        else {
+            textPoints = webPoints[0];
+        }
         // 绘制文字标签
@@ -108,3 +126,3 @@ var texts = radar_line.append('g')
         texts.selectAll('text')
-            .data(webPoints[0])
+            .data(textPoints)
             .enter()
@@ -149,3 +167,3 @@ .append('text')
             }
-            return d.y;
+            return d.y + 5;
         })
@@ -198,10 +216,32 @@ .text(function (d, i) { return _this.props.valueLabel[i]; });
         }
+        if (this.props.radarType == 'polygon-edge') {
+            if (this.props.valueField.length < 5) {
+                this.rangeMax += this.rangeMax;
+            }
+            else {
+                this.rangeMax += this.rangeMax / 3;
+            }
+        }
         for (var i = 0; i < this.values.length; i++) {
-            var value = this.values[i], area = '', points = [];
+            var value = this.values[i];
+            var area = '';
+            var edgeArea = '';
+            var points = [];
+            var edgePoints = [];
             for (var k = 0; k < this.FieldSize; k++) {
                 var r = this.radius * (value[k] - rangeMin) / (this.rangeMax - rangeMin);
-                var x = r * Math.sin(k * onePiece), y = r * Math.cos(k * onePiece);
+                var x = r * Math.sin(k * onePiece);
+                var y = r * Math.cos(k * onePiece);
+                var edgeX = r * Math.sin((k + 0.5) * onePiece);
+                var edgeY = r * Math.cos((k + 0.5) * onePiece);
                 this.tempWebs += 0 + ',' + 0 + ' ';
-                area += x + ',' + -y + ' ';
-                points.push(__assign({ x: x, y: -y }, value[k] === false ? { showed: false } : null));
+                switch (this.props.radarType) {
+                    case 'polygon-edge':
+                        area += edgeX + ',' + -edgeY + ' ';
+                        points.push(__assign({ x: edgeX, y: -edgeY }, value[k] === false ? { showed: false } : null));
+                        break;
+                    default:
+                        area += x + ',' + -y + ' ';
+                        points.push(__assign({ x: x, y: -y }, value[k] === false ? { showed: false } : null));
+                }
             }
@@ -218,5 +258,6 @@ this.areasData.push({
     default_1.prototype.update = function (arr) {
+        var _this = this;
         // 网轴的范围，类似坐标轴
         // 每项指标所在的角度
-        var _this = this;
+        var that = this;
         this.sort(arr);
@@ -228,3 +269,22 @@ var group = this.ROOT.selectAll("g._series")
             .attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")");
-        Draw_1.Draw.draw(this.areaType, group, this.tempWebs, this.DURATION);
+        group.selectAll('polygon')
+            .data(function (d) { return d.polygon; })
+            .join('polygon')
+            .attr('points', function (d) { return (d3.select(this).attr('points')) || that.tempWebs; })
+            .transition()
+            .duration(this.DURATION)
+            .attr('points', function (d, i) { return d; })
+            .attr('stroke-width', 2);
+        group.selectAll('circle')
+            .data(function (d) { return d.points; })
+            .join('circle')
+            .style('display', function (d) { return d.showed === false ? 'none' : 'block'; })
+            .attr('cx', function (d) { return (d3.select(this).attr('cx')) || 0; })
+            .attr('cy', function (d) { return (d3.select(this).attr('cy')) || 0; })
+            .attr('r', function (d) { return (d3.select(this).attr('r')) || 0; })
+            .transition()
+            .duration(this.DURATION)
+            .attr('cx', function (d, i) { return d.x; })
+            .attr('cy', function (d, i) { return d.y; })
+            .attr('r', 3);
         if (this.props.tip || this.props.tip === undefined) {
@@ -231,0 +291,0 @@ this.ROOT.selectAll('._series').on('mousemove', function (d, index) {

react/topojson.d.ts

@@ -1,1 +0,8 @@
-export {};
+import { GEOVisualReact } from './_VisualOfGeo';
+import { SimpleMapOpts, CombineMapOpts } from '../topojson/interface';
+export declare class SimpleMap extends GEOVisualReact<SimpleMapOpts> {
+    protected build(): void;
+}
+export declare class CombineMap extends GEOVisualReact<CombineMapOpts> {
+    protected build(): void;
+}

react/topojson.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-// export class SimpleMap extends GeoVisual<SimpleMapOpts> {
-//     componentDidUpdate(old) {
-//         // if (!_.isEqual(old.data, this.props.data)) {
-//         //     this.setData(this.props.data);
-//         //     return;
-//         // }
-//         // if (_.isEqualWith(old, this.props)) {
-//         //     this.setOption(this.props);
-//         //     return;
-//         // }
-//     }
-//     protected build() {
-//         this.visual = new _SimpleMap(`#${this.id}`, this.props)
-//     }
-// }
+exports.CombineMap = exports.SimpleMap = void 0;
+var _VisualOfGeo_1 = require("./_VisualOfGeo");
+var index_1 = require("../topojson/index");
+var SimpleMap = /** @class */ (function (_super) {
+    __extends(SimpleMap, _super);
+    function SimpleMap() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SimpleMap.prototype.build = function () {
+        this.visual = new index_1.SimpleMap("#" + this.id, this.props);
+    };
+    return SimpleMap;
+}(_VisualOfGeo_1.GEOVisualReact));
+exports.SimpleMap = SimpleMap;
+var CombineMap = /** @class */ (function (_super) {
+    __extends(CombineMap, _super);
+    function CombineMap() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CombineMap.prototype.build = function () {
+        this.visual = new index_1.CombineMap("#" + this.id, this.props);
+    };
+    return CombineMap;
+}(_VisualOfGeo_1.GEOVisualReact));
+exports.CombineMap = CombineMap;

topojson/CombineMap/_Lines.d.ts

 import * as d3 from 'd3';
-import { MAP_LINE } from '../interface';
+import { CombineMapOpts } from '../interface';
 import GeoUtil from '../_GeoUtil';
@@ -9,7 +9,8 @@ export default class {
     private GEO;
+    private speed;
     private labelFormat;
     private valueFormat;
-    constructor(svg: d3.Selection<any, any, any, any>, conf: MAP_LINE, projection: any, geo: GeoUtil);
+    constructor(conf: CombineMapOpts, svg: d3.Selection<any, any, any, any>, projection: any, geo: GeoUtil);
     setData(arr: any): void;
     resize(projection: any): void;
 }

topojson/CombineMap/_Lines.js

@@ -9,3 +9,3 @@ "use strict";
 var default_1 = /** @class */ (function () {
-    function default_1(svg, conf, projection, geo) {
+    function default_1(conf, svg, projection, geo) {
         this.SVG = null;
@@ -15,2 +15,3 @@ this.props = null;
         this.GEO = null;
+        this.speed = 3000;
         this.labelFormat = function (v) { return v; };
@@ -22,9 +23,15 @@ this.valueFormat = function (v) { return v; };
         this.projection = projection;
-        if (this.props.onClick) {
+        if (this.props.lineConf.onClick) {
             this.SVG.classed('lines-clickable', true);
         }
-        if (this.props.labelFormat) {
+        if (this.props.lineConf.labelFormat) {
+            this.labelFormat = this.props.lineConf.labelFormat;
+        }
+        else if (this.props.labelFormat) {
             this.labelFormat = this.props.labelFormat;
         }
-        if (this.props.valueField) {
+        if (this.props.lineConf.valueField) {
+            this.valueFormat = util_1.default.buildFormat(this.props.lineConf.valueFormat);
+        }
+        else if (this.props.valueFormat) {
             this.valueFormat = util_1.default.buildFormat(this.props.valueFormat);
@@ -36,10 +43,12 @@ }
         var _this = this;
+        console.log(arr);
+        var _a = this.props.lineConf, sourceField = _a.sourceField, targetField = _a.targetField;
         var data = _.filter(arr, function (item) {
-            var source = _this.labelFormat(item[_this.props.sourceField]);
-            var target = _this.labelFormat(item[_this.props.targetField]);
-            return _this.GEO.has(source) && _this.GEO.has(target) && item[_this.props.sourceField] != item[_this.props.targetField];
+            var source = _this.labelFormat(item[sourceField]);
+            var target = _this.labelFormat(item[targetField]);
+            return _this.GEO.has(source) && _this.GEO.has(target) && item[sourceField] != item[targetField];
         });
         // console.log(data)
         var lines = this.SVG.selectAll('g.group-lines')
-            .data(data, function (item) { return item[_this.props.sourceField] + "-" + item[_this.props.targetField]; });
+            .data(data, function (item) { return item[sourceField] + "-" + item[targetField]; });
         lines.exit().remove();
@@ -49,4 +58,5 @@ var enter = lines.enter().append('g').attr('class', 'group-lines');
         enter.append('path').attr('d', function (d) {
-            var source = _this.GEO.getPoint(d[_this.props.sourceField]);
-            var target = _this.GEO.getPoint(d[_this.props.targetField]);
+            var source = _this.GEO.getPoint(_this.labelFormat(d[sourceField]));
+            var target = _this.GEO.getPoint(_this.labelFormat(d[targetField]));
+            // console.log(d);
             if (source && target) {
@@ -66,3 +76,3 @@ var from = _this.projection(source);
             .attr('class', 'line')
-            .attr('id', function (item) { return item[_this.props.sourceField] + "-" + item[_this.props.targetField]; });
+            .attr('id', function (item) { return item[sourceField] + "-" + item[targetField]; });
         var movement = enter.append('circle')
@@ -85,3 +95,3 @@ .attr('class', 'movement')
             .attr('begin', '0s')
-            .attr('dur', function (d) { return (2.5 + _.random(0.99)) + 's'; })
+            .attr('dur', function (d) { return (_this.speed / 1000 + _.random(0.99)) + 's'; })
             // .attr('keyPoints', '0;0.2;0.8;1')
@@ -93,5 +103,5 @@ // .attr('keyTimes', '0;0.33;0.66;1')
             .append('mpath')
-            .attr('xlink:href', function (item) { return "#" + item[_this.props.sourceField] + "-" + item[_this.props.targetField]; });
+            .attr('xlink:href', function (item) { return "#" + item[sourceField] + "-" + item[targetField]; });
         enter.on('mouseover', function (d) {
-            _Common_1.ToolTip.show("<h2>" + _this.GEO.translate(_this.labelFormat(d[_this.props.sourceField])) + " -> " + _this.GEO.translate(_this.labelFormat(d[_this.props.targetField])) + "</h2>\n            <p class=\"_item\"><span class=\"_label\">" + _this.props.valueLabel + "</span> : <span class=\"_value\">" + _this.valueFormat(d[_this.props.valueField]) + "</span> </p>");
+            _Common_1.ToolTip.show("<h2>" + _this.GEO.translate(_this.labelFormat(d[sourceField])) + " -> " + _this.GEO.translate(_this.labelFormat(d[targetField])) + "</h2>\n            <p class=\"_item\"><span class=\"_label\">" + _this.props.lineConf.valueLabel + "</span> : <span class=\"_value\">" + _this.valueFormat(d[_this.props.lineConf.valueField]) + "</span> </p>");
         });
@@ -98,0 +108,0 @@ enter.on('mouseout', function () { return _Common_1.ToolTip.hide(); });

topojson/CombineMap/index.d.ts

@@ -6,2 +6,4 @@ import SimpleMap from '../SimpleMap';
     init(): void;
+    __need_rebuild: string[];
+    setOption(conf: any): void;
     updateLine(): void;
@@ -8,0 +10,0 @@ updatePie(): void;

topojson/CombineMap/index.js

@@ -19,2 +19,3 @@ "use strict";
 var SimpleMap_1 = require("../SimpleMap");
+var util_1 = require("../../util");
 // const validate = function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
@@ -43,14 +44,52 @@ //     // 保存原来的方法
         _this.lines = null;
+        _this.__need_rebuild = ['fillStyle', 'mapPath', 'showName', 'rotate'];
         return _this;
     }
     default_1.prototype.init = function () {
+        console.log('combine map init ');
         _super.prototype.init.call(this);
         if (_.has(this.props, 'lineConf')) {
             var lineContainer = this.EXT_BOTTOM.append('g').attr('class', 'lines');
-            this.lines = new _Lines_1.default(lineContainer, this.props.lineConf, this.projection, this.GEO);
+            this.lines = new _Lines_1.default(this.props, lineContainer, this.projection, this.GEO);
             this.updateLine();
         }
     };
+    default_1.prototype.setOption = function (conf) {
+        var _this = this;
+        console.log('statrt set');
+        var needRebuid = false;
+        this.__need_rebuild.map(function (key) {
+            if (_.isEqual(_this.props[key], conf[key])) {
+                return;
+            }
+            needRebuid = true;
+        });
+        if (needRebuid) {
+            if (this.SVG) {
+                this.SVG.remove();
+                this._loaded = false;
+            }
+            this.props = _.extend(this.props, conf);
+            this.initSVG();
+            this.setProjection();
+            this.initMap();
+            return;
+        }
+        console.log('statrt set2');
+        if (util_1.default.isEqArray(this.props.data, conf.data)) {
+            console.log('statrt set5');
+            this.props = _.extend(this.props, conf);
+            this.update(this.sort(conf.data));
+        }
+        console.log('statrt set3');
+        if (util_1.default.isEqArray(this.props.lineData, conf.lineData)) {
+            console.log('statrt set4');
+            console.log(conf.lineData);
+            this.props = _.extend(this.props, conf);
+            this.updateLine();
+        }
+    };
     default_1.prototype.updateLine = function () {
         if (this.lines != null) {
+            console.log('fdsaf');
             this.lines.setData(this.props.lineData);
@@ -57,0 +96,0 @@ }

topojson/GeoVisual.d.ts

@@ -10,4 +10,4 @@ import * as d3 from 'd3';
     protected GEO: GeoUtil;
-    private _loaded;
-    private _geo_ready;
+    protected _loaded: boolean;
+    protected _geo_ready: boolean;
     private zoom;
@@ -35,6 +35,6 @@ protected props: T;
     mapdata(mapId: any): Promise<void>;
-    private setProjection;
+    protected setProjection(): void;
     initMap(): Promise<void>;
-    private initSVG;
-    private _needResize;
+    protected initSVG(selector?: string): void;
+    protected _needResize(force?: boolean): boolean;
     protected itemClass(d: any, i: any): string;
@@ -41,0 +41,0 @@ /**

topojson/GeoVisual.js

@@ -283,3 +283,9 @@ "use strict";
         var isDiff = false;
+        var isDiffData = false;
+        console.log('Set Options');
         _.keys(conf).map(function (key) {
+            // if (key == 'data') {
+            //     isDiffData = true;
+            //     return;
+            // }
             if (_.isEqual(_this.props[key], conf[key])) {
@@ -294,3 +300,7 @@ return;
         });
+        console.log('Diff Result ', isDiff);
         if (!isDiff) {
+            // if (isDiffData) {
+            //     this.setData(conf.data)
+            // }
             return;
@@ -305,7 +315,2 @@ }
         this.initMap();
-        // if (this.ORGIN_DATA) {
-        //     this.SORT_DATA = this.sort(this.ORGIN_DATA);
-        //     this.DATA = _.concat([], this.SORT_DATA);
-        //     this.drawGraphAndLegend();
-        // }
     };
@@ -312,0 +317,0 @@ /**

topojson/interface.d.ts

@@ -25,3 +25,3 @@ import { VALUE_FORMAT, Grid } from '../interface';
     */
-    fillStyle?: 'slash' | 'hlinear' | 'linear' | 'grain' | 'grid';
+    fillStyle?: 'slash' | 'hlinear' | 'linear' | 'grain' | 'grid' | string;
     /**
@@ -143,2 +143,3 @@ * 扩展DEFS,用于自定义class时的自行进行扩展
     tip?: (d: any) => string;
+    speed?: number;
     lineType?: 'fly';
@@ -145,0 +146,0 @@ };

util/index.d.ts

@@ -22,3 +22,4 @@ import { GLOBAL_CONFIG } from '../interface';
     def: (container: any, type: string) => void;
+    isEqArray: (arr1: any[], arr2: any[], field?: string) => boolean;
 };
 export default _default;

util/index.js

@@ -30,2 +30,29 @@ "use strict";
     def: function (container, type) { return defs_1.default.def(container, type); },
+    isEqArray: function (arr1, arr2, field) {
+        if (arr1 == null && arr2 == null) {
+            return false;
+        }
+        if (arr1 == null || arr2 == null) {
+            return true;
+        }
+        if (arr1.length != arr2.length) {
+            return true;
+        }
+        var size = arr1.length;
+        if (field) {
+            for (var i = 0; i < size; i++) {
+                if (!_.isEqual(arr1[i], arr2[i])) {
+                    return false;
+                }
+            }
+        }
+        else {
+            for (var i = 0; i < size; i++) {
+                if (arr1[i][field] != arr2[i][field]) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
 };

No alert changes

Improved metrics

Total package byte prevSize

382566

increased by2.27%

Lines of code

9348

increased by2.59%

No dependency changes