vap-visual - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

_Common/index.d.ts

 export { default as Visual } from './Visual';
-export { LegendDrawer } from './Legends/_Legend';
-export { default as Legend } from './Legends';
 export { default as ToolTip } from './ToolTip';
@@ -5,0 +3,0 @@ export { default as PathUtil } from './PathUtil';

_Common/index.js

@@ -5,6 +5,2 @@ "use strict";
 Object.defineProperty(exports, "Visual", { enumerable: true, get: function () { return Visual_1.default; } });
-var _Legend_1 = require("./Legends/_Legend");
-Object.defineProperty(exports, "LegendDrawer", { enumerable: true, get: function () { return _Legend_1.LegendDrawer; } });
-var Legends_1 = require("./Legends");
-Object.defineProperty(exports, "Legend", { enumerable: true, get: function () { return Legends_1.default; } });
 var ToolTip_1 = require("./ToolTip");
@@ -11,0 +7,0 @@ Object.defineProperty(exports, "ToolTip", { enumerable: true, get: function () { return ToolTip_1.default; } });

_Common/Legends/index.d.ts

@@ -1,8 +0,8 @@
-import { Layout, Legend } from '../../interface';
-import { LegendDrawer } from './_Legend';
-declare const _default: {
-    getSupport(legend: Legend): Legend;
-    getDrawer(legend: Legend, layout: Layout, container: d3.Selection<any, any, any, any>, onSelectChange: any, labelFormat: any, valueFormat: any, duration: number, valueField: string | string[], valueLabel: string | string[]): LegendDrawer;
-    convertLegendLayout(legend: Legend, ui: Layout): [Layout, Layout];
-};
-export default _default;
+/**
+ * 新版本的 Legend
+*/
+import * as d3 from 'd3';
+import { VisualOpts, LEGEND_MODE } from '../../interface';
+import { LegendDrawer } from './Types/_Drawer';
+export { LegendDrawer };
+export declare const getDrawer: (container: d3.Selection<any, any, any, any>, mode: LEGEND_MODE, visual: VisualOpts, onChange: Function, labelFormat: Function, valueFormat: Function, duration: number) => LegendDrawer;

_Common/Legends/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDrawer = exports.LegendDrawer = void 0;
 var _ = require("lodash");
-var LegendNothing_1 = require("./LegendNothing");
-var LegendSimple_1 = require("./LegendSimple");
-var LegendPercent_1 = require("./LegendPercent");
-exports.default = new /** @class */ (function () {
-    function class_1() {
+var _Drawer_1 = require("./Types/_Drawer");
+Object.defineProperty(exports, "LegendDrawer", { enumerable: true, get: function () { return _Drawer_1.LegendDrawer; } });
+var LabelLegend_1 = require("./Types/LabelLegend");
+var ValueLegend_1 = require("./Types/ValueLegend");
+var LabelsLegend_1 = require("./Types/LabelsLegend");
+var LabelFixedLegend_1 = require("./Types/LabelFixedLegend");
+var NoneLegend_1 = require("./Types/NoneLegend");
+var NONE = new NoneLegend_1.default(null, null, null, null, null, 0);
+exports.getDrawer = function (container, mode, visual, onChange, labelFormat, valueFormat, duration) {
+    if (mode == 'none' || !_.has(visual, 'legend') || visual.legend.postion == 'n') {
+        return NONE;
     }
-    class_1.prototype.getSupport = function (legend) {
-        if (legend == null || legend == undefined) {
-            return legend;
-        }
-        if (legend.postion == 'n') {
-            return legend;
-        }
-        var conf = Object.assign({}, legend);
-        conf.mode = conf.mode ? conf.mode : 'simple';
-        conf.width = conf.width ? conf.width : (conf.mode == 'simple' ? 120 : 200);
-        conf.height = conf.height ? conf.height : (conf.mode == 'simple' ? 32 : 48);
-        conf.inner = _.has(conf, 'inner') ? conf.inner : 12;
-        conf.cols = conf.cols || 1;
-        return conf;
-    };
-    class_1.prototype.getDrawer = function (legend, layout, container, onSelectChange, labelFormat, valueFormat, duration, valueField, valueLabel) {
-        if (!_.has(legend, 'postion') || legend.postion == 'n') {
-            return new LegendNothing_1.LegendNothing(legend, layout, container, onSelectChange, labelFormat, valueFormat, duration, valueField, valueLabel);
-        }
-        if (legend.mode == 'percent') {
-            return new LegendPercent_1.LegendPercent(legend, layout, container, onSelectChange, labelFormat, valueFormat, duration, valueField, valueLabel);
-        }
-        return new LegendSimple_1.LegendSimple(legend, layout, container, onSelectChange, labelFormat, valueFormat, duration, valueField, valueLabel);
-    };
-    class_1.prototype.convertLegendLayout = function (legend, ui) {
-        if (!_.has(legend, 'postion') || legend.postion == 'n') {
-            return [{ x: 0, y: 0, w: 0, h: 0 }, ui];
-        }
-        var layout = Object.assign({ x: 0, y: 0, w: 0, h: 0 }, ui);
-        var legLayout = Object.assign({}, layout);
-        switch (legend.postion) {
-            case 'l':
-                legLayout.w = legend.width;
-                layout.x = layout.x + legend.width * legend.cols - legend.inner;
-                layout.w = layout.w - legend.width * legend.cols + legend.inner;
-                break;
-            case 'r':
-                legLayout.w = legend.width;
-                legLayout.x = layout.x + layout.w - legend.width * legend.cols;
-                layout.w = layout.w - legend.width * legend.cols + legend.inner;
-                break;
-            case 't':
-                legLayout.h = legend.height * legend.cols;
-                layout.y = legend.height * legend.cols - legend.inner;
-                layout.h = layout.h - legend.height * legend.cols + legend.inner;
-                break;
-            case 'b':
-                legLayout.h = legend.height * legend.cols;
-                legLayout.y = layout.y + layout.h - legend.height * legend.cols - legend.inner;
-                layout.h = layout.h - legend.height * legend.cols + legend.inner;
-                break;
-            case 'lt':
-                legLayout.w = legend.width * legend.cols;
-                legLayout.h = legend.height;
-                legLayout.x = layout.x + legend.inner;
-                legLayout.y = layout.y;
-                break;
-            case 'lb':
-                legLayout.w = legend.width * legend.cols;
-                legLayout.h = legend.height;
-                legLayout.x = layout.x + legend.inner;
-                legLayout.y = layout.y + layout.h;
-                break;
-            case 'rt':
-                legLayout.w = legend.width * legend.cols;
-                legLayout.h = legend.height;
-                legLayout.x = layout.x + layout.w - legend.inner - legend.width * legend.cols;
-                legLayout.y = layout.y;
-                break;
-            case 'rb':
-                legLayout.w = legend.width * legend.cols;
-                legLayout.h = legend.height;
-                legLayout.x = layout.x + layout.w - legend.inner - legend.width * legend.cols;
-                legLayout.y = layout.y + layout.h;
-                break;
-        }
-        return [legLayout, layout];
-    };
-    return class_1;
-}());
+    switch (mode) {
+        case 'label':
+            return new LabelLegend_1.default(container, visual, onChange, labelFormat, valueFormat, duration);
+        case 'label-fixed':
+            return new LabelFixedLegend_1.default(container, visual, onChange, labelFormat, valueFormat, duration);
+        case 'label-values':
+            return new LabelsLegend_1.default(container, visual, onChange, labelFormat, valueFormat, duration);
+        case 'value':
+            return new ValueLegend_1.default(container, visual, onChange, labelFormat, valueFormat, duration);
+        default:
+            return NONE;
+    }
+};

_Common/PathUtil.d.ts

@@ -42,3 +42,7 @@ declare const _default: {
     point(): string;
+    /**
+     * 纵向箭头
+    */
+    geoLineArrow(height: any): string;
 };
 export default _default;

_Common/PathUtil.js

@@ -208,3 +208,16 @@ "use strict";
     };
+    /**
+     * 纵向箭头
+    */
+    class_1.prototype.geoLineArrow = function (height) {
+        var path = d3.path();
+        // path.moveTo(0, 0);
+        // path.lineTo(width, 0);
+        path.moveTo(height * 0.382, height);
+        path.lineTo(height * 0.7, 0);
+        path.moveTo(height * 0.382, -height);
+        path.closePath();
+        return path.toString();
+    };
     return class_1;
 }());

_Common/Visual.d.ts

 import * as d3 from 'd3';
 import { VisualOpts, Layout, VISUAL_EVENT, Grid, LEGEND_MODE } from '../interface';
-import { LegendDrawer } from './Legend2';
+import { LegendDrawer } from './Legends';
 export default abstract class<T extends VisualOpts> {
     protected id: string;
     protected Events: Map<VISUAL_EVENT, Function>;
-    protected CONFIG: T;
+    protected props: T;
     protected __ClassName: string;
     protected __Grid: Grid;
     protected __legendMode: LEGEND_MODE;
+    protected __ListenConfig: string[];
     protected legendDrawer: LegendDrawer;
@@ -26,3 +27,3 @@ protected WIDTH: number;
     protected FormatLabel: (v: any, o?: any) => any;
-    protected FormatValue: (val: any) => any;
+    protected FormatValue: (v: any) => any;
     protected LAYOUT: Layout;
@@ -29,0 +30,0 @@ protected checkedField: string[];

_Common/Visual.js

@@ -23,3 +23,3 @@ "use strict";
 var ToolTip_1 = require("../_Common/ToolTip");
-var Legend2_1 = require("./Legend2");
+var Legends_1 = require("./Legends");
 var default_1 = /** @class */ (function () {
@@ -33,8 +33,8 @@ function default_1(selector, conf) {
         // 初始化参数
-        this.CONFIG = null;
+        this.props = null;
         // 内部扩展属性， 可通过  overwrite 方式重新默认
         this.__ClassName = '';
         this.__Grid = null;
-        // protected __disableLegend = false;
         this.__legendMode = 'none';
+        this.__ListenConfig = []; // 监听属性变化，调用 setOption 时使用
         this.legendDrawer = null;
@@ -66,6 +66,5 @@ // SVG 上层容器
         this.FormatLabel = function (v, o) { return v; };
-        this.FormatValue = util_1.default.buildFormat('number');
+        this.FormatValue = function (v) { return v; };
         // Layout and Cache Data
         this.LAYOUT = { x: 0, y: 0, w: 0, h: 0 };
-        // protected LAYOUT_LEGEND: Layout = { x: 0, y: 0, w: 0, h: 0 };
         this.checkedField = [];
@@ -78,3 +77,3 @@ this.selectedItem = null;
         this._loaded = false;
-        this.CONFIG = conf;
+        this.props = conf;
         // Fix bug from constructor syntax delay
@@ -86,5 +85,5 @@ window.setTimeout(function () {
             _this.initSVG(selector);
-            if (_.has(_this.CONFIG, 'data') && _this.CONFIG.data != null) {
-                var data = _.concat([], _this.CONFIG.data);
-                _.unset(_this.CONFIG, 'data');
+            if (_.has(_this.props, 'data') && _this.props.data != null) {
+                var data = _.concat([], _this.props.data);
+                _.unset(_this.props, 'data');
                 _this.setData(data);
@@ -101,3 +100,2 @@ }
     default_1.prototype.draw = function () {
-        console.log('draw');
         this.DATA = this.legendDrawer.setData(this.SORT_DATA);
@@ -118,10 +116,10 @@ this.layout(this.DATA);
         var _this = this;
-        if (_.isString(this.CONFIG.valueField)) {
-            ToolTip_1.default.show("<div class=\"_tip _tip-" + idx + "\">\n                <h2><i></i><span>" + this.FormatLabel(data[this.CONFIG.labelField], data) + "</span></h2>\n                <p class=\"_item\"><span class=\"_label\">" + (this.CONFIG.valueLabel || '') + "  :  </span><span class=\"_value\">" + this.FormatValue(data[this.CONFIG.valueField]) + "</span></p>\n            </div>");
+        if (_.isString(this.props.valueField)) {
+            ToolTip_1.default.show("<div class=\"_tip _tip-" + idx + "\">\n                <h2><i></i><span>" + this.FormatLabel(data[this.props.labelField], data) + "</span></h2>\n                <p class=\"_item\"><span class=\"_label\">" + (this.props.valueLabel || '') + "  :  </span><span class=\"_value\">" + this.FormatValue(data[this.props.valueField]) + "</span></p>\n            </div>");
         }
         else {
             var html_1 = [];
-            html_1.push("<h2><span>" + this.FormatLabel(data[this.CONFIG.labelField], data) + "</span></h2>");
-            this.CONFIG.valueField.map(function (field, i) {
-                html_1.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.CONFIG.valueLabel[i] + " : </span><span class=\"_number _value\">" + _this.FormatValue(data[field]) + "</span></p>");
+            html_1.push("<h2><span>" + this.FormatLabel(data[this.props.labelField], data) + "</span></h2>");
+            this.props.valueField.map(function (field, i) {
+                html_1.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.props.valueLabel[i] + " : </span><span class=\"_number _value\">" + _this.FormatValue(data[field]) + "</span></p>");
             });
@@ -135,3 +133,3 @@ html_1.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"_number _value\">" + this.FormatValue(data.__total) + "</span></p>");
         if (path === void 0) { path = ''; }
-        if (this.CONFIG.tip === null) {
+        if (this.props.tip === null) {
             return;
@@ -143,7 +141,7 @@ }
             var index = i;
-            if (_.isArray(self.CONFIG.valueField)) {
+            if (_.isArray(self.props.valueField)) {
                 index = parseInt(d3.select(this.parentNode).attr('series'));
             }
-            if (_.has(this.CONFIG, 'tip')) {
-                var result = self.CONFIG.tip(data, index);
+            if (_.has(this.props, 'tip')) {
+                var result = self.props.tip(data, index);
                 ToolTip_1.default.show(result);
@@ -160,3 +158,3 @@ }
         if (path === void 0) { path = ''; }
-        if (!_.has(this.CONFIG, 'onClick')) {
+        if (!_.has(this.props, 'onClick')) {
             return;
@@ -169,3 +167,3 @@ }
             var data = path ? _.get(d, path) : d;
-            var isGroup = _.isArray(self.CONFIG.valueField);
+            var isGroup = _.isArray(self.props.valueField);
             var clazz = isGroup ? '_group' : '_item';
@@ -177,16 +175,16 @@ // console.log(data)
             }
-            if (self.CONFIG.clickSelect) {
+            if (self.props.clickSelect) {
                 self.ROOT.selectAll('g.' + clazz).classed(clazz + '_selected', false);
-                if (data[self.CONFIG.labelField] == self.selectedItem) {
+                if (data[self.props.labelField] == self.selectedItem) {
                     self.selectedItem = null;
-                    self.CONFIG.onClick(null);
+                    self.props.onClick(null);
                 }
                 else {
                     self.ROOT.selectAll('g.' + clazz + '_' + idx).classed(clazz + '_selected', true);
-                    self.selectedItem = data[self.CONFIG.labelField];
-                    self.CONFIG.onClick(data, extra);
+                    self.selectedItem = data[self.props.labelField];
+                    self.props.onClick(data, extra);
                 }
             }
             else {
-                self.CONFIG.onClick(data, extra);
+                self.props.onClick(data, extra);
             }
@@ -215,31 +213,31 @@ });
         this.CONTAINER.classed('_visual', true).classed(this.__ClassName, true);
-        if (_.has(this.CONFIG, 'className'))
-            this.CONTAINER.classed(this.CONFIG.className, true).classed(this.__ClassName, true);
-        if (_.has(this.CONFIG, 'maxCount') && _.isNumber(this.CONFIG.maxCount))
-            this.MAXCOUNT = this.CONFIG.maxCount;
-        if (_.has(this.CONFIG, 'duration') && _.isNumber(this.CONFIG.duration))
-            this.DURATION = this.CONFIG.duration;
-        if (_.has(this.CONFIG, 'valueFormat'))
-            this.FormatValue = util_1.default.buildFormat(this.CONFIG.valueFormat);
-        if (_.has(this.CONFIG, 'labelFormat'))
-            this.FormatLabel = this.CONFIG.labelFormat;
+        if (_.has(this.props, 'className'))
+            this.CONTAINER.classed(this.props.className, true).classed(this.__ClassName, true);
+        if (_.has(this.props, 'maxCount') && _.isNumber(this.props.maxCount))
+            this.MAXCOUNT = this.props.maxCount;
+        if (_.has(this.props, 'duration') && _.isNumber(this.props.duration))
+            this.DURATION = this.props.duration;
+        if (_.has(this.props, 'valueFormat'))
+            this.FormatValue = util_1.default.buildFormat(this.props.valueFormat);
+        if (_.has(this.props, 'labelFormat'))
+            this.FormatLabel = this.props.labelFormat;
         this.SVG = this.CONTAINER.append('svg');
         this.DEFS = this.SVG.append('defs');
-        this.EXT_TOP = this.SVG.append('g').attr('class', this.CONFIG.onClick ? '_ext_top _root_clickable' : '_ext_top');
-        this.ROOT = this.SVG.append('g').attr('class', this.CONFIG.onClick ? '_root _root_clickable' : '_root');
+        this.EXT_TOP = this.SVG.append('g').attr('class', this.props.onClick ? '_ext_top _root_clickable' : '_ext_top');
+        this.ROOT = this.SVG.append('g').attr('class', this.props.onClick ? '_root _root_clickable' : '_root');
         this.AXIX = this.SVG.append('g').attr('class', '_axis');
-        this.LEGEND = this.SVG.append('g').attr('class', '_legend ' + (_.has(this.CONFIG.legend, 'mode') ? ' _legend_' + this.CONFIG.legend.mode : '_legend_simple'));
+        this.LEGEND = this.SVG.append('g').attr('class', '_legend ' + (_.has(this.props.legend, 'mode') ? ' _legend_' + this.props.legend.mode : '_legend_simple'));
         this.MARK = this.SVG.append('g').attr('class', '_mark');
-        this.EXT_BOTTOM = this.SVG.append('g').attr('class', this.CONFIG.onClick ? '_ext_bottom _root_clickable' : '_ext_bottom');
-        if (this.CONFIG.defs) {
-            this.DEFS.html(this.CONFIG.defs);
+        this.EXT_BOTTOM = this.SVG.append('g').attr('class', this.props.onClick ? '_ext_bottom _root_clickable' : '_ext_bottom');
+        if (this.props.defs) {
+            this.DEFS.html(this.props.defs);
         }
-        else if (this.CONFIG.fillStyle) {
-            util_1.default.def(this.DEFS, this.CONFIG.fillStyle);
+        else if (this.props.fillStyle) {
+            util_1.default.def(this.DEFS, this.props.fillStyle);
         }
-        this.legendDrawer = Legend2_1.getDrawer(this.LEGEND, this.__legendMode, this.CONFIG, function (fields, data) { return _this.onLegendSelected(fields, data); }, this.FormatLabel, this.FormatValue, this.DURATION);
+        this.legendDrawer = Legends_1.getDrawer(this.LEGEND, this.__legendMode, this.props, function (fields, data) { return _this.onLegendSelected(fields, data); }, this.FormatLabel, this.FormatValue, this.DURATION);
         this._needResize(true);
         this.SVG.attr('width', this.WIDTH).attr('height', this.HEIGHT);
-        if (_.isArray(this.CONFIG.valueField)) {
-            this.checkedField = _.concat([], this.CONFIG.valueField);
+        if (_.isArray(this.props.valueField)) {
+            this.checkedField = _.concat([], this.props.valueField);
             if (this.__legendMode === 'label') {
@@ -261,3 +259,3 @@ this.checkedField.length = 0;
             this.HEIGHT = height;
-            var grid = Object.assign({}, this.__Grid, this.CONFIG.grid);
+            var grid = Object.assign({}, this.__Grid, this.props.grid);
             this.LAYOUT = { x: grid.left, y: grid.top, w: this.WIDTH - grid.left - grid.right, h: this.HEIGHT - grid.top - grid.bottom, };
@@ -270,3 +268,3 @@ this.LAYOUT = this.legendDrawer.resize(this.LAYOUT);
     default_1.prototype.itemClass = function (d, i) {
-        return "_item _item_" + i + " " + (this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + this.CONFIG.fillStyle) : '');
+        return "_item _item_" + i + " " + (this.props.fillStyle ? ('_item_fill_style _item_fill_' + this.props.fillStyle) : '');
     };
@@ -297,3 +295,21 @@ /**
     default_1.prototype.setOption = function (conf) {
-        this.CONFIG = _.merge({}, this.CONFIG, conf);
+        var _this = this;
+        var isDiff = false;
+        _.keys(conf).map(function (key) {
+            // if(!this.__ListenConfig.includes(key)){
+            //     return
+            // }
+            if (_.isEqual(_this.props[key], conf[key])) {
+                return;
+            }
+            if (typeof _this.props[key] == 'function' && typeof conf[key] == 'function') {
+                return;
+            }
+            isDiff = true;
+            _this.props[key] = conf[key];
+        });
+        if (!isDiff) {
+            return;
+        }
+        this.props = _.merge({}, this.props, conf);
         if (this.SVG) {
@@ -300,0 +316,0 @@ this.SVG.remove();

Bars/Bar/index.d.ts

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

Bars/Bar/index.js

@@ -51,2 +51,3 @@ "use strict";
         _this.yAxisDrawer = null;
+        _this.__ListenConfig = ['barType', 'valueField', 'valueLabel', 'itemWidth', 'topValue'];
         _this.itemWidth = 20;
@@ -57,3 +58,3 @@ return _this;
         var _a;
-        var _b = this.CONFIG, itemWidth = _b.itemWidth, barType = _b.barType, xAxis = _b.xAxis, yAxis = _b.yAxis, labelField = _b.labelField, valueField = _b.valueField;
+        var _b = this.props, itemWidth = _b.itemWidth, barType = _b.barType, xAxis = _b.xAxis, yAxis = _b.yAxis, labelField = _b.labelField, valueField = _b.valueField;
         this.itemWidth = itemWidth || 20;
@@ -65,3 +66,3 @@ this.barType = barType || 'default';
     default_1.prototype.sort = function (arr) {
-        var sort = _.has(this.CONFIG, 'sort') ? this.CONFIG.sort : { order: this.CONFIG.valueField, by: 'desc' };
+        var sort = _.has(this.props, 'sort') ? this.props.sort : { order: this.props.valueField, by: 'desc' };
         return util_1.default.sort(arr, sort, this.MAXCOUNT);
@@ -96,4 +97,4 @@ };
         }
-        if (this.CONFIG.topValue) {
-            Draw_1.Draw.topValue(enter, update, barWidth, heightScale, this.DURATION, this.barType, this.CONFIG.valueField, this.FormatValue);
+        if (this.props.topValue) {
+            Draw_1.Draw.topValue(enter, update, barWidth, heightScale, this.DURATION, this.barType, this.props.valueField, this.FormatValue);
         }
@@ -103,3 +104,3 @@ };
         var _this = this;
-        var data = d3.stack().keys([this.CONFIG.valueField])(arr)[0];
+        var data = d3.stack().keys([this.props.valueField])(arr)[0];
         var band = this.xAxisDrawer.scale.bandwidth();
@@ -111,3 +112,3 @@ var width = band > this.itemWidth ? this.itemWidth : band;
         }
-        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d['data'][_this.CONFIG.labelField]; });
+        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d['data'][_this.props.labelField]; });
         items.exit().remove();
@@ -114,0 +115,0 @@ var enter = items.enter().append('g')

Bars/HBar/index.js

@@ -42,5 +42,5 @@ "use strict";
     default_1.prototype.init = function () {
-        this.barType = this.CONFIG.barType || 'default';
+        this.barType = this.props.barType || 'default';
         this.ROOT.classed('_hbar_' + this.barType, true);
-        if (this.CONFIG.scroll) {
+        if (this.props.scroll) {
             this.CONTAINER.classed('_hbar_scroll', true);
@@ -51,10 +51,10 @@ }
         var data = [];
-        if (_.has(this.CONFIG, 'sort')) {
-            data = util_1.default.sort(arr, this.CONFIG.sort, this.MAXCOUNT);
+        if (_.has(this.props, 'sort')) {
+            data = util_1.default.sort(arr, this.props.sort, this.MAXCOUNT);
         }
         else {
-            data = util_1.default.sort(arr, { order: this.CONFIG.valueField, by: 'desc' }, this.MAXCOUNT);
+            data = util_1.default.sort(arr, { order: this.props.valueField, by: 'desc' }, this.MAXCOUNT);
         }
-        this.itemHeight = this.drawer.data(this.barType, this.LAYOUT, data, this.CONFIG.valueField, this.DURATION, this.CONFIG.separate, this.CONFIG.scroll, this.CONFIG.labelWidth);
-        if (this.CONFIG.scroll) {
+        this.itemHeight = this.drawer.data(this.barType, this.LAYOUT, data, this.props.valueField, this.DURATION, this.props.separate, this.props.scroll, this.props.labelWidth);
+        if (this.props.scroll) {
             this.SVG.attr('height', this.itemHeight * data.length + this.__Grid.top + this.__Grid.bottom);
@@ -66,3 +66,3 @@ }
         var _this = this;
-        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d[_this.CONFIG.labelField]; });
+        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d[_this.props.labelField]; });
         items.exit().remove();
@@ -76,3 +76,3 @@ var enter = items.enter().append('g')
             .attr('transform', function (d, i) { return "translate(" + _this.LAYOUT.x + "," + (_this.LAYOUT.y + _this.itemHeight * i) + ")"; });
-        this.drawer.draw(enter, items, this.CONFIG.labelField, this.FormatLabel, this.CONFIG.valueField, this.FormatValue);
+        this.drawer.draw(enter, items, this.props.labelField, this.FormatLabel, this.props.valueField, this.FormatValue);
         this.tip(enter);
@@ -79,0 +79,0 @@ this.click(enter);

Bars/HMultiBar/index.js

@@ -35,6 +35,6 @@ "use strict";
     default_1.prototype.init = function () {
-        this.barType = this.CONFIG.barType || 'default';
-        this.labelWidth = this.CONFIG.labelWidth || 72;
+        this.barType = this.props.barType || 'default';
+        this.labelWidth = this.props.labelWidth || 72;
         this.ROOT.classed('_hmultibar_' + this.barType, true);
-        if (this.CONFIG.scroll) {
+        if (this.props.scroll) {
             this.CONTAINER.classed('_hbar_scroll', true);
@@ -47,3 +47,3 @@ }
             var __total = 0;
-            _this.CONFIG.valueField.map(function (field) {
+            _this.props.valueField.map(function (field) {
                 __total += item[field];
@@ -54,4 +54,4 @@ });
         });
-        if (_.has(this.CONFIG, 'sort') && this.CONFIG.sort === false) {
-            data = util_1.default.sort(arr, this.CONFIG.sort, this.MAXCOUNT);
+        if (_.has(this.props, 'sort') && this.props.sort === false) {
+            data = util_1.default.sort(arr, this.props.sort, this.MAXCOUNT);
         }
@@ -61,11 +61,11 @@ else {
         }
-        this.itemHeight = this.drawer.data(data, this.barType, this.LAYOUT, this.CONFIG.labelField, this.FormatLabel, this.labelWidth, this.CONFIG.valueField, this.FormatValue, this.CONFIG.fillStyle, this.DURATION, this.CONFIG.separate, this.CONFIG.scroll);
-        if (this.CONFIG.scroll) {
+        this.itemHeight = this.drawer.data(data, this.barType, this.LAYOUT, this.props.labelField, this.FormatLabel, this.labelWidth, this.props.valueField, this.FormatValue, this.props.fillStyle, this.DURATION, this.props.separate, this.props.scroll);
+        if (this.props.scroll) {
             this.SVG.attr('height', this.itemHeight * data.length + this.__Grid.top + this.__Grid.bottom);
         }
-        var stackedData = d3.stack().keys(this.CONFIG.valueField)(data);
+        var stackedData = d3.stack().keys(this.props.valueField)(data);
         var DATA = [];
         data.map(function (item, i) {
             item._stack = [];
-            _this.CONFIG.valueField.map(function (field, j) {
+            _this.props.valueField.map(function (field, j) {
                 item._stack.push([stackedData[j][i][0], stackedData[j][i][1], field]);
@@ -79,3 +79,3 @@ });
         var _this = this;
-        var items = this.ROOT.selectAll('g._group').data(data, function (d) { return d[_this.CONFIG.labelField]; });
+        var items = this.ROOT.selectAll('g._group').data(data, function (d) { return d[_this.props.labelField]; });
         items.exit().remove();
@@ -82,0 +82,0 @@ var enter = items.enter().append('g')

Bars/MultiBar/index.js

@@ -58,14 +58,14 @@ "use strict";
         var _a;
-        this.itemWidth = this.CONFIG.itemWidth || 20;
-        this.barType = this.CONFIG.barType || 'default';
-        this.mode = this.CONFIG.mode || 'stack';
+        this.itemWidth = this.props.itemWidth || 20;
+        this.barType = this.props.barType || 'default';
+        this.mode = this.props.mode || 'stack';
         this.drawer = DrawUtil_1.getDrawer(this.mode, this.barType);
         _a = __read(_Common_1.AxisUtil.getAxises(this.AXIX, this.LAYOUT, {
             type: 'X_BAND',
-            axis: this.CONFIG.xAxis,
-            field: this.CONFIG.labelField,
+            axis: this.props.xAxis,
+            field: this.props.labelField,
             format: this.FormatLabel,
         }, {
             type: 'Y_NUMBER',
-            axis: this.CONFIG.yAxis,
+            axis: this.props.yAxis,
             field: '__total',
@@ -93,3 +93,3 @@ format: this.FormatValue,
         this.scaleField = singleField;
-        var sort = _.has(this.CONFIG, 'sort') ? this.CONFIG.sort : { order: '__total', by: 'desc' };
+        var sort = _.has(this.props, 'sort') ? this.props.sort : { order: '__total', by: 'desc' };
         return util_1.default.sort(arr, sort, this.MAXCOUNT);
@@ -116,3 +116,3 @@ };
             var field = arrGroup.key;
-            var idx = _this.CONFIG.valueField.indexOf(field);
+            var idx = _this.props.valueField.indexOf(field);
             arrGroup.map(function (item) { return item['pos'] = { field: field, idx: idx }; });
@@ -129,3 +129,3 @@ arrGroup['idx'] = idx;
             .join("g")
-            .attr('class', function (d, i) { return "_series _series_" + d.idx + " " + (_this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + _this.CONFIG.fillStyle) : ''); })
+            .attr('class', function (d, i) { return "_series _series_" + d.idx + " " + (_this.props.fillStyle ? ('_item_fill_style _item_fill_' + _this.props.fillStyle) : ''); })
             .attr('transform', function (d, i) {
@@ -140,7 +140,7 @@ if (_this.mode == 'stack') {
         });
-        var items = this.drawer.draw(group, width, this.CONFIG.labelField, band, this.mode == 'compare' ? compareDiff : diff, heightScale, this.DURATION);
+        var items = this.drawer.draw(group, width, this.props.labelField, band, this.mode == 'compare' ? compareDiff : diff, heightScale, this.DURATION);
         // 暂不支持选中 clickSelect,后续支持
         // this.click(items,'data')
-        if (this.CONFIG.onClick) {
-            items.on('click', function (d) { return _this.CONFIG.onClick(d['data'], d.pos.field); });
+        if (this.props.onClick) {
+            items.on('click', function (d) { return _this.props.onClick(d['data'], d.pos.field); });
         }
@@ -147,0 +147,0 @@ this.tip(items, 'data');

Distribution/Percentile/index.js

@@ -74,7 +74,7 @@ "use strict";
         var _a;
-        this.graphType = this.CONFIG.type || 'stack';
-        this.symbol = this.CONFIG.symbol || 'circle';
+        this.graphType = this.props.type || 'stack';
+        this.symbol = this.props.symbol || 'circle';
         this.drawer = new Drawer_1.default(this.graphType, this.symbol);
         this.ROOT.classed('_percentile_' + this.graphType, true);
-        _a = __read(_Common_1.AxisUtil.getAxises(this.AXIX, this.LAYOUT, { type: 'X_FIX_NUMBER', axis: this.CONFIG.xAxis, field: this.CONFIG.valueField, format: this.FormatValue, }, { type: 'Y_NUMBER', axis: this.CONFIG.yAxis, default: { fixMax: false }, field: this.CONFIG.labelField, format: function (v) { return v + '%'; }, }), 2), this.xAxisDrawer = _a[0], this.yAxisDrawer = _a[1];
+        _a = __read(_Common_1.AxisUtil.getAxises(this.AXIX, this.LAYOUT, { type: 'X_FIX_NUMBER', axis: this.props.xAxis, field: this.props.valueField, format: this.FormatValue, }, { type: 'Y_NUMBER', axis: this.props.yAxis, default: { fixMax: false }, field: this.props.labelField, format: function (v) { return v + '%'; }, }), 2), this.xAxisDrawer = _a[0], this.yAxisDrawer = _a[1];
         // console.log(this.EXT_TOP)
@@ -88,3 +88,3 @@ this.EXT_TOP.append('rect').attr('class', '_mark_coord');
         var _this = this;
-        var _data = _.orderBy(arr, this.CONFIG.labelField, 'asc');
+        var _data = _.orderBy(arr, this.props.labelField, 'asc');
         var data = [];
@@ -94,17 +94,17 @@ _data.map(function (item, i) {
             if (i == 0) {
-                param._label = _this.CONFIG.valueLabel + " \u5C0F\u4E8E " + _this.FormatValue(item[_this.CONFIG.valueField]);
-                param._percent = item[_this.CONFIG.labelField];
+                param._label = _this.props.valueLabel + " \u5C0F\u4E8E " + _this.FormatValue(item[_this.props.valueField]);
+                param._percent = item[_this.props.labelField];
             }
             else {
-                param._label = _this.CONFIG.valueLabel + " \u5728 " + _this.FormatValue(_data[i - 1][_this.CONFIG.valueField]) + " - " + _this.FormatValue(item[_this.CONFIG.valueField]) + "   \u4E4B\u95F4";
-                param._percent = item[_this.CONFIG.labelField] - _data[i - 1][_this.CONFIG.labelField];
+                param._label = _this.props.valueLabel + " \u5728 " + _this.FormatValue(_data[i - 1][_this.props.valueField]) + " - " + _this.FormatValue(item[_this.props.valueField]) + "   \u4E4B\u95F4";
+                param._percent = item[_this.props.labelField] - _data[i - 1][_this.props.labelField];
             }
-            data.push(__assign(__assign(__assign({}, item), param), { _total: item[_this.CONFIG.labelField] }));
+            data.push(__assign(__assign(__assign({}, item), param), { _total: item[_this.props.labelField] }));
         });
-        if (data[data.length - 1][this.CONFIG.labelField] < 100) {
+        if (data[data.length - 1][this.props.labelField] < 100) {
             data.push((_a = {},
-                _a[this.CONFIG.labelField] = 100,
-                _a[this.CONFIG.valueField] = data[data.length - 1][this.CONFIG.valueField] * 1.1,
-                _a._label = this.CONFIG.valueLabel + " \u5927\u4E8E " + this.FormatValue(data[data.length - 1][this.CONFIG.valueField]),
-                _a._percent = 100 - _data[data.length - 1][this.CONFIG.labelField],
+                _a[this.props.labelField] = 100,
+                _a[this.props.valueField] = data[data.length - 1][this.props.valueField] * 1.1,
+                _a._label = this.props.valueLabel + " \u5927\u4E8E " + this.FormatValue(data[data.length - 1][this.props.valueField]),
+                _a._percent = 100 - _data[data.length - 1][this.props.labelField],
                 _a._total = 100,
@@ -114,4 +114,4 @@ _a));
         data.unshift((_b = {},
-            _b[this.CONFIG.labelField] = 0,
-            _b[this.CONFIG.valueField] = _data[0][this.CONFIG.valueField] * 0.5,
+            _b[this.props.labelField] = 0,
+            _b[this.props.valueField] = _data[0][this.props.valueField] * 0.5,
             _b._label = '',
@@ -123,4 +123,4 @@ _b._percent = 0,
             data.map(function (item) {
-                if (item[_this.CONFIG.labelField] > 50) {
-                    item[_this.CONFIG.labelField] = 100 - item[_this.CONFIG.labelField];
+                if (item[_this.props.labelField] > 50) {
+                    item[_this.props.labelField] = 100 - item[_this.props.labelField];
                 }
@@ -132,8 +132,8 @@ });
     default_1.prototype.layout = function (arr) {
-        this.xAxisDrawer.data(this.LAYOUT, arr, this.CONFIG.valueField);
-        this.yAxisDrawer.data(this.LAYOUT, arr, this.CONFIG.labelField);
+        this.xAxisDrawer.data(this.LAYOUT, arr, this.props.valueField);
+        this.yAxisDrawer.data(this.LAYOUT, arr, this.props.labelField);
     };
     default_1.prototype.update = function (arr) {
         var _this = this;
-        var data = d3.stack().keys([this.CONFIG.labelField])(arr);
+        var data = d3.stack().keys([this.props.labelField])(arr);
         this.xAxisDrawer.draw();
@@ -145,6 +145,6 @@ this.yAxisDrawer.draw();
             .attr('class', function (d) {
-            return "_series _series_0 " + (_this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + _this.CONFIG.fillStyle) : '');
+            return "_series _series_0 " + (_this.props.fillStyle ? ('_item_fill_style _item_fill_' + _this.props.fillStyle) : '');
         })
             .attr('transform', "translate(" + (this.LAYOUT.x + this.xAxisDrawer.margin) + "," + (this.LAYOUT.y + this.LAYOUT.h - this.yAxisDrawer.margin) + ")");
-        var symbols = this.drawer.draw(group, this.CONFIG.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, this.DURATION);
+        var symbols = this.drawer.draw(group, this.props.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, this.DURATION);
         var LEFT = this.LAYOUT.x + this.xAxisDrawer.margin;
@@ -154,3 +154,3 @@ var TOP = this.LAYOUT.y;
         this.EXT_TOP.select('rect').attr('x', 0).attr('y', 0).attr('width', this.LAYOUT.w - this.xAxisDrawer.margin).attr('height', this.LAYOUT.h - this.yAxisDrawer.margin);
-        if (this.CONFIG.tip || this.CONFIG.tip === undefined) {
+        if (this.props.tip || this.props.tip === undefined) {
             this.EXT_TOP.select('rect').on('mousemove', function () {
@@ -163,3 +163,3 @@ var _a = __read([d3.event.layerX - LEFT, d3.event.layerY - TOP], 2), x = _a[0], y = _a[1];
                 for (; idx < max; idx++) {
-                    if (value > item[idx].data[_this.CONFIG.valueField]) {
+                    if (value > item[idx].data[_this.props.valueField]) {
                         continue;
@@ -170,4 +170,4 @@ }
                 var info = item[idx].data;
-                if (_this.CONFIG.tip) {
-                    _Common_1.ToolTip.show(_this.CONFIG.tip(info));
+                if (_this.props.tip) {
+                    _Common_1.ToolTip.show(_this.props.tip(info));
                 }
@@ -178,3 +178,3 @@ else {
                     html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + info._percent + "%</span></p>");
-                    html.push("<h2><span>\u7D2F\u8BA1 : (" + _this.CONFIG.valueLabel + "\u5C0F\u4E8E " + _this.FormatValue(info[_this.CONFIG.valueField]) + ")</span></h2>");
+                    html.push("<h2><span>\u7D2F\u8BA1 : (" + _this.props.valueLabel + "\u5C0F\u4E8E " + _this.FormatValue(info[_this.props.valueField]) + ")</span></h2>");
                     html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + info._total + "%</span></p>");
@@ -184,9 +184,9 @@ var _b = __read(d3.extent([idx, 9 - idx]), 2), start = _b[0], end = _b[1];
                         start = start - 1;
-                        html.push("<h2><span>\u8303\u56F4 : (" + _this.CONFIG.valueLabel + " : " + _this.FormatValue(item[start].data[_this.CONFIG.valueField]) + "- " + _this.FormatValue(item[end].data[_this.CONFIG.valueField]) + ")</span></h2>");
+                        html.push("<h2><span>\u8303\u56F4 : (" + _this.props.valueLabel + " : " + _this.FormatValue(item[start].data[_this.props.valueField]) + "- " + _this.FormatValue(item[end].data[_this.props.valueField]) + ")</span></h2>");
                         html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + Math.ceil((100 - item[start].data._total * 2)) + "%</span></p>");
                         // console.log(start, end);
                     }
-                    // this.drawer.tip(group, this.CONFIG.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, idx, start, end, this.DATA[0]);
+                    // this.drawer.tip(group, this.props.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, idx, start, end, this.DATA[0]);
                     // console.log(idx, 9 - idx);
-                    // html.push(`<h2><span>区间 : (${this.CONFIG.valueLabel}小于 ${this.FormatValue(data[this.CONFIG.valueField])})</span></h2>`);
+                    // html.push(`<h2><span>区间 : (${this.props.valueLabel}小于 ${this.FormatValue(data[this.props.valueField])})</span></h2>`);
                     // html.push(`<p class="_item"><span class="_label">占比 : </span><span class="vapfont _value">${data._total}%</span></p>`);
@@ -220,4 +220,4 @@ _Common_1.ToolTip.show(html.join(''));
                 var data = d.data;
-                if (_this.CONFIG.tip) {
-                    _Common_1.ToolTip.show(_this.CONFIG.tip(data));
+                if (_this.props.tip) {
+                    _Common_1.ToolTip.show(_this.props.tip(data));
                 }
@@ -229,3 +229,3 @@ else {
                     html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + data._percent + "%</span></p>");
-                    html.push("<h2><span>\u7D2F\u8BA1 : (" + _this.CONFIG.valueLabel + "\u5C0F\u4E8E " + _this.FormatValue(data[_this.CONFIG.valueField]) + ")</span></h2>");
+                    html.push("<h2><span>\u7D2F\u8BA1 : (" + _this.props.valueLabel + "\u5C0F\u4E8E " + _this.FormatValue(data[_this.props.valueField]) + ")</span></h2>");
                     html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + data._total + "%</span></p>");
@@ -235,7 +235,7 @@ var _a = __read(d3.extent([idx, 9 - idx]), 2), start = _a[0], end = _a[1];
                         start = start - 1;
-                        html.push("<h2><span>\u8303\u56F4 : (" + _this.CONFIG.valueLabel + " : " + _this.FormatValue(item[start].data[_this.CONFIG.valueField]) + "- " + _this.FormatValue(item[end].data[_this.CONFIG.valueField]) + ")</span></h2>");
+                        html.push("<h2><span>\u8303\u56F4 : (" + _this.props.valueLabel + " : " + _this.FormatValue(item[start].data[_this.props.valueField]) + "- " + _this.FormatValue(item[end].data[_this.props.valueField]) + ")</span></h2>");
                         html.push("<p class=\"_item\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + Math.ceil((100 - item[start].data._total * 2)) + "%</span></p>");
                     }
                     _Common_1.ToolTip.show(html.join(''));
-                    // this.drawer.tip(group, this.CONFIG.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, idx, start, end,this.DATA[0]);
+                    // this.drawer.tip(group, this.props.valueField, this.xAxisDrawer.scale, this.yAxisDrawer.scale, idx, start, end,this.DATA[0]);
                 }
@@ -249,3 +249,3 @@ }).on('mouseout', function (d) {
         }
-        if (this.CONFIG.onClick) {
+        if (this.props.onClick) {
             symbols.on('click', function (d, idx) {
@@ -258,3 +258,3 @@ if (idx == 0) {
                 // let idx = parseInt(d3.select(d3.event.target.parentNode).attr('series'));
-                _this.CONFIG.onClick(data, _this.CONFIG.valueField[idx]);
+                _this.props.onClick(data, _this.props.valueField[idx]);
             });
@@ -265,3 +265,3 @@ // this.EXT_TOP.select('rect').on('click', (d) => {
             //     let data  = d.data;
-            //     this.CONFIG.onClick(data)
+            //     this.props.onClick(data)
             // });
@@ -268,0 +268,0 @@ }

interface.d.ts

@@ -19,3 +19,3 @@ /**
 */
-export declare type LEGEND_MODE = 'labels' | 'label-fixed' | 'label' | 'value' | 'none';
+export declare type LEGEND_MODE = 'label-values' | 'label-fixed' | 'label' | 'value' | 'none';
 export declare type Grid = {
@@ -267,3 +267,2 @@ top?: number;
     */
-    marks?: Mark[];
     /**
@@ -270,0 +269,0 @@ * 附加的方案

package.json

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

Pies/Pie/index.js

@@ -47,5 +47,5 @@ "use strict";
     default_1.prototype.init = function () {
-        this.pieType = this.CONFIG.pieType || 'default';
+        this.pieType = this.props.pieType || 'default';
         // 由于PIE图重设LAYOUT 导致 LEGENT 设置不准，所以重新修复一下
-        // if (this.CONFIG.legend && this.CONFIG.legend.postion != 'n') {
+        // if (this.props.legend && this.props.legend.postion != 'n') {
         // }
@@ -55,8 +55,8 @@ // PIE 图模式，默认不显示在中部，使用 TIPS
             this.showCenter = false;
-            this.showTip = this.CONFIG.tip === null ? false : true;
+            this.showTip = this.props.tip === null ? false : true;
             // 环形模式，默认显示在中部，不使用TIPS
         }
         else {
-            this.showCenter = _.has(this.CONFIG, 'showCenter') ? this.CONFIG.showCenter : true;
-            this.showTip = _.has(this.CONFIG, 'tip') ? true : false;
+            this.showCenter = _.has(this.props, 'showCenter') ? this.props.showCenter : true;
+            this.showTip = _.has(this.props, 'tip') ? true : false;
         }
@@ -73,5 +73,5 @@ this.ROOT.classed('pie_' + this.pieType, true);
         // 过滤掉过等于 0 的 数据
-        var list = _.filter(arr, function (d) { return d[_this.CONFIG.valueField] > 0; });
+        var list = _.filter(arr, function (d) { return d[_this.props.valueField] > 0; });
         if (list.length == 0) {
-            list.push((_a = {}, _a[this.CONFIG.labelField] = '无数据', _a[this.CONFIG.valueField] = 0.00000001, _a));
+            list.push((_a = {}, _a[this.props.labelField] = '无数据', _a[this.props.valueField] = 0.00000001, _a));
         }
@@ -81,2 +81,4 @@ if (list.length > this.MAXCOUNT) {
         }
+        this.total = _.sumBy(list, this.props.valueField);
+        this.total = this.total > 0 ? this.total : 0.01;
         list.map(function (item, i) { return item._idx = i; });
@@ -88,7 +90,8 @@ return list;
         var data = _.find(list, { _idx: idx });
+        console.log(data);
         if (data) {
-            this.EXT_BOTTOM.select('text._item_name').text(this.FormatLabel(data[this.CONFIG.labelField], data));
-            this.EXT_BOTTOM.select('text._item_count').text(this.FormatValue(data[this.CONFIG.valueField]));
+            this.EXT_BOTTOM.select('text._item_name').text(this.FormatLabel(data[this.props.labelField], data));
+            this.EXT_BOTTOM.select('text._item_count').text(this.FormatValue(data[this.props.valueField]));
             if (data.key != '无数据') {
-                this.EXT_BOTTOM.select('text._item_percent').text(format_1.formatPercent(data._percent * 100));
+                this.EXT_BOTTOM.select('text._item_percent').text(format_1.formatPercent(data[this.props.valueField] / this.total * 100));
             }
@@ -105,9 +108,9 @@ else {
     default_1.prototype.itemClass = function (d, i) {
-        return "_item _item_" + d.data._idx + " " + (this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + this.CONFIG.fillStyle) : '');
+        return "_item _item_" + d.data._idx + " " + (this.props.fillStyle ? ('_item_fill_style _item_fill_' + this.props.fillStyle) : '');
     };
     default_1.prototype.update = function (arr) {
         var _this = this;
-        var data = d3.pie().value(function (d) { return d[_this.CONFIG.valueField]; })(arr);
+        var data = d3.pie().value(function (d) { return d[_this.props.valueField]; })(arr);
         this.EXT_BOTTOM.attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")");
-        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d['data'][_this.CONFIG.labelField]; });
+        var items = this.ROOT.selectAll('g._item').data(data, function (d) { return d['data'][_this.props.labelField]; });
         items.exit().remove();
@@ -132,4 +135,4 @@ var enter = items.enter().append('g')
             }
-            if (_.has(_this.CONFIG, 'tip')) {
-                var result = _this.CONFIG.tip(d.data, _this.current);
+            if (_.has(_this.props, 'tip')) {
+                var result = _this.props.tip(d.data, _this.current);
                 _Common_1.ToolTip.show(result);
@@ -139,19 +142,19 @@ }
                 var data_1 = d.data;
-                _Common_1.ToolTip.show("<div class=\"_tip _tip-" + _this.current + "\">\n                    <h2><i></i><span>" + _this.FormatLabel(data_1[_this.CONFIG.labelField], data_1) + "</span></h2>\n                    <p class=\"_item\"><span class=\"_label\">" + (_this.CONFIG.valueLabel || '') + "  :  </span><span class=\"_value\">" + _this.FormatValue(data_1[_this.CONFIG.valueField]) + "</span></p>\n                    <p class=\"_item _item_sum\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + data_1._percent + "</span></p>\n                </div>");
+                _Common_1.ToolTip.show("<div class=\"_tip _tip-" + _this.current + "\">\n                    <h2><i></i><span>" + _this.FormatLabel(data_1[_this.props.labelField], data_1) + "</span></h2>\n                    <p class=\"_item\"><span class=\"_label\">" + (_this.props.valueLabel || '') + "  :  </span><span class=\"_value\">" + _this.FormatValue(data_1[_this.props.valueField]) + "</span></p>\n                    <p class=\"_item _item_sum\"><span class=\"_label\">\u5360\u6BD4 : </span><span class=\"vapfont _value\">" + format_1.formatPercent(data_1[_this.props.valueField] / _this.total * 100) + "</span></p>\n                </div>");
             }
         }).on('mouseout', function () { return _Common_1.ToolTip.hide(); });
-        if (this.CONFIG.onClick) {
+        if (this.props.onClick) {
             enter.on('click', function (d, i) {
-                // if (this.CONFIG.clickSelect) {
+                // if (this.props.clickSelect) {
                 // this.ROOT.selectAll('g._item').classed('_item_selected', false); 
-                // if (d.data[this.CONFIG.labelField] == this.currentSelect) {
+                // if (d.data[this.props.labelField] == this.currentSelect) {
                 //     this.currentSelect = null;
-                //     this.CONFIG.onClick(null)
+                //     this.props.onClick(null)
                 // } else {
                 //     this.ROOT.selectAll('g._item_' + i).classed('_item_selected',  true);
-                //     this.currentSelect = d.data[this.CONFIG.labelField];
-                //     this.CONFIG.onClick(d.data, i)
+                //     this.currentSelect = d.data[this.props.labelField];
+                //     this.props.onClick(d.data, i)
                 // }
                 // } else {
-                _this.CONFIG.onClick(d.data, d.data._idx);
+                _this.props.onClick(d.data, d.data._idx);
                 // }
@@ -158,0 +161,0 @@ });

Radars/Radar/index.d.ts

@@ -16,2 +16,4 @@ import { Visual } from '../../_Common';
     protected level: number;
+    protected oldData: any[];
+    protected rangeMax: number;
     init(): void;
@@ -18,0 +20,0 @@ layout(arr: any[]): void;

Radars/Radar/index.js

@@ -18,2 +18,14 @@ "use strict";
 var _Common_1 = require("../../_Common");
+var diffArr = function (arr, oldArr) {
+    var diffArr = [];
+    oldArr.map(function (old, i) {
+        arr.map(function (item, index) {
+            if (_.isEqual(old, item)) {
+                diffArr[i] = item;
+            }
+        });
+    });
+    console.log(diffArr, 'diffArr');
+};
+diffArr([1, 2], [4, 1]);
 var default_1 = /** @class */ (function (_super) {
@@ -32,2 +44,4 @@ __extends(default_1, _super);
         _this_1.level = 4;
+        _this_1.oldData = [];
+        _this_1.rangeMax = _this_1.props.max || 0;
         return _this_1;
@@ -39,7 +53,7 @@ }
         var values = [];
-        var total = this.CONFIG.valueField.length;
+        var total = this.props.valueField.length;
         var radius = _.min([this.LAYOUT.h, this.LAYOUT.w]) / 2 - 20;
         // 网轴的范围，类似坐标轴
         var rangeMin = 0;
-        var rangeMax = this.CONFIG.max || 0;
+        var rangeMax = this.props.max || 0;
         var tempRangeMax = 0;
@@ -71,10 +85,9 @@ var arc = 2 * Math.PI;
         }
-        console.log(polygons);
-        // var _radar_line = this.EXT_TOP.selectAll("g.radar_line") // UPDATE
+        // let _radar_line = this.EXT_TOP.selectAll("g.radar_line") // UPDATE
         // _radar_line.remove(); // EXIT
-        // var _radar = this.EXT_TOP.selectAll("g.radar") // UPDATE
+        // let _radar = this.EXT_TOP.selectAll("g.radar") // UPDATE
         // _radar.remove(); // EXIT
-        // var _lines = this.EXT_TOP.selectAll("g.lines") // UPDATE
+        // let _lines = this.EXT_TOP.selectAll("g.lines") // UPDATE
         // _lines.remove(); // EXIT
-        // var _lines = this.EXT_TOP.selectAll("g.texts") // UPDATE
+        // let _lines = this.EXT_TOP.selectAll("g.texts") // UPDATE
         // _lines.remove(); // EXIT
@@ -162,7 +175,7 @@ var radar_line = this.EXT_TOP.append('g')
             .text(function (d, i) {
-            return _this.CONFIG.valueLabel[i];
+            return _this.props.valueLabel[i];
         });
     };
     default_1.prototype.layout = function (arr) {
-        this.level = this.CONFIG.level || 4;
+        this.level = this.props.level || 4;
     };
@@ -178,9 +191,10 @@ default_1.prototype.sort = function (arr) {
         var _this_1 = this;
+        var newData = [];
+        var _arr = _.concat([], arr);
         var areasData = [];
         var values = [];
-        var total = this.CONFIG.valueField.length;
+        var total = this.props.valueField.length;
         var radius = _.min([this.LAYOUT.h, this.LAYOUT.w]) / 2 - 20;
         // 网轴的范围，类似坐标轴
         var rangeMin = 0;
-        var rangeMax = this.CONFIG.max || 0;
         var tempRangeMax = 0;
@@ -195,24 +209,117 @@ var arc = 2 * Math.PI;
         var tempWebs = '';
-        for (var k_1 = this.level; k_1 > 0; k_1--) {
-            var webs = '';
-            tempWebs = '';
-            var webPoints = [];
-            var r_1 = radius / this.level * k_1;
-            for (var i_1 = 0; i_1 < total; i_1++) {
-                var x_1 = r_1 * Math.sin(i_1 * onePiece), y_1 = r_1 * Math.cos(i_1 * onePiece);
-                webs += x_1 + ',' + -y_1 + ' ';
-                tempWebs += 0 + ',' + 0 + ' ';
-                webPoints.push({
-                    x: x_1,
-                    y: -y_1
+        if (!this.oldData.length || _.isEqual(_arr, this.oldData)) {
+            newData = _.difference(_arr, this.oldData);
+            this.oldData = _arr;
+        }
+        if (!_.isEqual(_arr, this.oldData)) {
+            if (_arr.length < this.oldData.length) {
+                newData = _.difference(this.oldData, _arr);
+                this.oldData = _arr;
+                this.ROOT.selectAll("._series_" + newData[0]._idx + " ").transition().duration(150).remove();
+                return;
+            }
+            else {
+                newData = _.difference(_arr, this.oldData);
+                this.oldData = _arr;
+                var areaData = {};
+                var area = '';
+                var points = [];
+                var value_1 = [];
+                this.props.valueField.map(function (item, index) {
+                    if (newData[0][item]) {
+                        value_1[index] = newData[0][item];
+                    }
+                    else {
+                        value_1[index] = 0;
+                    }
                 });
+                for (var k = 0; k < total; k++) {
+                    var r = radius * (value_1[k] - rangeMin) / (this.rangeMax - rangeMin);
+                    var x = r * Math.sin(k * onePiece);
+                    var y = r * Math.cos(k * onePiece);
+                    tempWebs += 0 + ',' + 0 + ' ';
+                    area += x + ',' + -y + ' ';
+                    points.push({
+                        x: x,
+                        y: -y
+                    });
+                }
+                areaData = {
+                    polygon: area,
+                    points: points,
+                    data: value_1
+                };
+                this.ROOT.append('g')
+                    .attr('class', function (d, i) { return "_series _series_" + newData[0]._idx + " " + (_this_1.props.fillStyle ? ('_item_fill_style _item_fill_' + _this_1.props.fillStyle) : ''); })
+                    .append('polygon')
+                    .attr('stroke-width', 2)
+                    .attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")")
+                    .attr('points', tempWebs)
+                    .transition()
+                    .duration(450)
+                    .attr('points', areaData.polygon);
+                var circles = this.ROOT.select("._series_" + newData[0]._idx)
+                    .append('g')
+                    .classed('circles', true);
+                circles.selectAll('circle')
+                    .data(areaData.points)
+                    .enter()
+                    .append('circle')
+                    .attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")")
+                    .attr('cx', function (d) {
+                    return 0;
+                })
+                    .attr('cy', function (d) {
+                    return 0;
+                })
+                    .attr('r', 0)
+                    .transition()
+                    .duration(450)
+                    .attr('cx', function (d) {
+                    return d.x;
+                })
+                    .attr('cy', function (d) {
+                    return d.y;
+                })
+                    .attr('r', 3);
+                if (this.props.tip || this.props.tip === undefined) {
+                    this.ROOT.select("._series_" + newData[0]._idx).on('mousemove', function () {
+                        if (_this_1.props.tip) {
+                            _Common_1.ToolTip.show(_this_1.props.tip(newData));
+                        }
+                        else {
+                            _this_1.ROOT.select('._series_' + newData[0]._idx)
+                                .select('g.circles')
+                                .selectAll('circle')
+                                .attr('r', 6);
+                            _this_1.ROOT.select('._series_' + newData[0]._idx)
+                                .select('polygon')
+                                .style('stroke-width', 4);
+                            var html_1 = ["<div class=\"_tip\">"];
+                            html_1.push("<h2><span>" + _this_1.FormatLabel(newData[0][_this_1.props.labelField], value_1) + "</span></h2>");
+                            _.map(_this_1.props.valueField, function (field, i) {
+                                html_1.push("<p class=\"_item current\"><span class=\"_label\">" + _this_1.props.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(value_1[i]) + "</span></p>");
+                            });
+                            if (_this_1.props.valueField.length > 1) {
+                                html_1.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(_.sum(value_1)) + "</span></p>");
+                            }
+                            _Common_1.ToolTip.show(html_1.join(''));
+                        }
+                    }).on('mouseout', function (d, index) {
+                        _this_1.ROOT.select('._series_' + newData[0]._idx)
+                            .select('g.circles')
+                            .selectAll('circle')
+                            .attr('r', 3);
+                        _this_1.ROOT.select('._series_' + newData[0]._idx)
+                            .select('polygon')
+                            .style('stroke-width', 2);
+                        _Common_1.ToolTip.hide();
+                    });
+                }
+                return;
             }
-            polygons.webs.push(webs);
-            polygons.webPoints.push(webPoints);
         }
-        // 每项指标所在的角度
-        var onePiece = arc / total;
-        arr.map(function (temp, i) {
+        _arr.map(function (temp, i) {
             values[i] = [];
-            _this_1.CONFIG.valueField.map(function (item, index) {
+            _this_1.props.valueField.map(function (item, index) {
                 if (temp[item]) {
@@ -231,9 +338,9 @@ values[i][index] = temp[item];
         });
-        if (this.CONFIG.max) {
-            if (this.CONFIG.max < tempRangeMax) {
-                rangeMax = tempRangeMax;
+        if (this.props.max) {
+            if (this.props.max < tempRangeMax) {
+                this.rangeMax = tempRangeMax;
             }
         }
         else {
-            rangeMax = tempRangeMax;
+            this.rangeMax = tempRangeMax;
         }
@@ -243,4 +350,5 @@ for (var i = 0; i < values.length; i++) {
             for (var k = 0; k < total; k++) {
-                var r = radius * (value[k] - rangeMin) / (rangeMax - rangeMin);
+                var r = radius * (value[k] - rangeMin) / (this.rangeMax - rangeMin);
                 var x = r * Math.sin(k * onePiece), y = r * Math.cos(k * onePiece);
+                tempWebs += 0 + ',' + 0 + ' ';
                 area += x + ',' + -y + ' ';
@@ -258,12 +366,12 @@ points.push({
         }
-        var items = this.ROOT.selectAll('g._series').data(arr);
+        var items = this.ROOT.selectAll('g._series').data(_arr);
         var enter = items.enter().append('g');
         items.exit().remove();
         enter.merge(items)
-            .attr('class', function (d, i) { return "_series _series_" + d._idx + " " + (_this_1.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + _this_1.CONFIG.fillStyle) : ''); })
+            .attr('class', function (d, i) { return "_series _series_" + d._idx + " " + (_this_1.props.fillStyle ? ('_item_fill_style _item_fill_' + _this_1.props.fillStyle) : ''); })
             .transition()
             .duration(this.DURATION);
         // Draw.draw(this.radarType, this.ROOT, items, areasData, this.LAYOUT, tempWebs, this.DURATION)
-        for (var i = 0; i < arr.length; i++) {
-            var _series_ = this.ROOT.select("._series_" + arr[i]._idx);
+        for (var i = 0; i < _arr.length; i++) {
+            var _series_ = this.ROOT.select("._series_" + _arr[i]._idx);
             var polygon = _series_.select("polygon");
@@ -274,6 +382,6 @@ var circles = _series_.select("g.circles");
         }
-        for (var i_2 = 0; i_2 < arr.length; i_2++) {
-            var area_1 = this.ROOT.select('._series_' + arr[i_2]._idx);
-            var areaData = areasData[i_2];
-            area_1.append('polygon')
+        for (var i = 0; i < _arr.length; i++) {
+            var area = this.ROOT.select('._series_' + _arr[i]._idx);
+            var areaData = areasData[i];
+            area.append('polygon')
                 .attr('stroke-width', 2)
@@ -286,3 +394,3 @@ .attr('transform', "translate(" + (this.LAYOUT.x + this.LAYOUT.w / 2) + "," + (this.LAYOUT.y + this.LAYOUT.h / 2) + ")")
             // 绘制雷达图区域下的点 
-            var circles = area_1.append('g')
+            var circles = area.append('g')
                 .classed('circles', true);
@@ -311,6 +419,6 @@ circles.selectAll('circle')
         }
-        if (this.CONFIG.tip || this.CONFIG.tip === undefined) {
+        if (this.props.tip || this.props.tip === undefined) {
             this.ROOT.selectAll('._series').on('mousemove', function (d, index) {
-                if (_this_1.CONFIG.tip) {
-                    _Common_1.ToolTip.show(_this_1.CONFIG.tip(arr[index], index));
+                if (_this_1.props.tip) {
+                    _Common_1.ToolTip.show(_this_1.props.tip(_arr[index], index));
                 }
@@ -325,11 +433,11 @@ else {
                         .style('stroke-width', 4);
-                    var html_1 = ["<div class=\"_tip\">"];
-                    html_1.push("<h2><span>" + _this_1.FormatLabel(arr[index][_this_1.CONFIG.labelField], arr) + "</span></h2>");
-                    _.map(_this_1.CONFIG.valueField, function (field, i) {
-                        html_1.push("<p class=\"_item current\"><span class=\"_label\">" + _this_1.CONFIG.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(values[index][i]) + "</span></p>");
+                    var html_2 = ["<div class=\"_tip\">"];
+                    html_2.push("<h2><span>" + _this_1.FormatLabel(_arr[index][_this_1.props.labelField], _arr) + "</span></h2>");
+                    _.map(_this_1.props.valueField, function (field, i) {
+                        html_2.push("<p class=\"_item current\"><span class=\"_label\">" + _this_1.props.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(values[index][i]) + "</span></p>");
                     });
-                    if (_this_1.CONFIG.valueField.length > 1) {
-                        html_1.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(_.sum(values[index])) + "</span></p>");
+                    if (_this_1.props.valueField.length > 1) {
+                        html_2.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"vapfont _value\">" + _this_1.FormatValue(_.sum(values[index])) + "</span></p>");
                     }
-                    _Common_1.ToolTip.show(html_1.join(''));
+                    _Common_1.ToolTip.show(html_2.join(''));
                 }
@@ -347,5 +455,5 @@ }).on('mouseout', function (d, index) {
         }
-        if (this.CONFIG.onClick) {
+        if (this.props.onClick) {
             this.ROOT.selectAll('._series').on('click', function (d, i) {
-                _this_1.CONFIG.onClick(arr[i], i);
+                _this_1.props.onClick(_arr[i], i);
             });
@@ -352,0 +460,0 @@ }

react/topojson.d.ts

@@ -1,6 +0,1 @@
-import { Visual } from './_Visual';
-import { SimpleMapOpts } from '../topojson/interface';
-export declare class SimpleMap extends Visual<SimpleMapOpts> {
-    componentDidUpdate(old: any): void;
-    protected build(): void;
-}
+export {};

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 });
-exports.SimpleMap = void 0;
-var _Visual_1 = require("./_Visual");
-var index_1 = require("../topojson/index");
-var _ = require("lodash");
-var SimpleMap = /** @class */ (function (_super) {
-    __extends(SimpleMap, _super);
-    function SimpleMap() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SimpleMap.prototype.componentDidUpdate = function (old) {
-        if (!_.isEqual(old.data, this.props.data)) {
-            this.setData(this.props.data);
-            return;
-        }
-        if (_.isEqualWith(old, this.props)) {
-            this.setOption(this.props);
-            return;
-        }
-    };
-    SimpleMap.prototype.build = function () {
-        this.visual = new index_1.SimpleMap("#" + this.id, this.props);
-    };
-    return SimpleMap;
-}(_Visual_1.Visual));
-exports.SimpleMap = SimpleMap;
+// 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)
+//     }
+// }

topojson/_GeoUtil.d.ts

@@ -1,10 +0,21 @@
-import { ROTATION, AREA_TRANSLATE } from './interface';
-declare class _GEOUtils {
-    MAP_CACHE_KEY: string;
-    DEFS(rotate?: boolean): "\n<filter id=\"_map_effect\">\n<feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"4\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n</filter>\n<filter id=\"_map_effect_hover\">\n    <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n    <feBlend in=\"light\" in2=\"SourceGraphic\" mode=\"screen\"></feBlend>\n</filter>\n\n<radialGradient id=\"_map_selected_point\">\n  <stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>\n\n      " | "\n<radialGradient id=\"_map_selected_point\">\n<stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>\n";
-    merge(topo: any): any;
+import { ROTATION, GeoOpts } from './interface';
+export default class {
+    ALL_AREAS: {
+        id: string;
+        name: string;
+    }[];
+    private geo;
+    private topo;
+    private props;
+    private areaTranslate;
+    private centerMap;
+    constructor(jsonData: any, conf: GeoOpts);
+    has(areaName: string): boolean;
+    DEFS(rotate?: boolean): "<filter id=\"_map_effect\">\n<feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"4\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n</filter>\n<filter id=\"_map_effect_hover\">\n    <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n    <feBlend in=\"light\" in2=\"SourceGraphic\" mode=\"screen\"></feBlend>\n</filter>\n\n<radialGradient id=\"_map_selected_point\">\n  <stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>" | "<radialGradient id=\"_map_selected_point\">\n<stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>";
+    merge(): any;
     adjust(mapId?: string, rotate?: ROTATION): [[number, number, number], [number, number]];
-    translate(tranlate: AREA_TRANSLATE, name: any, code: any): any;
+    translate(name: any, id?: any): string;
+    data(): GeoJSON.FeatureCollection<GeoJSON.GeometryObject, any>;
+    getPoint(areaName: string): [number, number];
+    getCenter(): [number, number];
 }
-export declare var GeoUtil: _GEOUtils;
-export {};

topojson/_GeoUtil.js

@@ -23,5 +23,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GeoUtil = void 0;
 var topojson_client_1 = require("topojson-client");
+var topojson_server_1 = require("topojson-server");
 var _ = require("lodash");
+var d3 = require("d3");
 // 除去地图中非常小的块状物
@@ -42,30 +43,88 @@ var simply = function (arr, removed) {
 };
-// 伪3D， 默认旋转全中国的各个省
+// 支持默认旋转全中国的各个省
 var ROTATION_MAP = {
-    'chinafull': [[-22, 5, -27], [-9.5, -2]],
-    'china': [[-22, 1, -12], [-8, 0]],
-    '42': [[2, -14, -4], [0, 0]],
+    'chinafull': [[-88, -9.7, -8.4], [10, 20]],
+    'china': [[-88, -9.7, -8.4], [0, 0]],
+    '11': [[-100, 10, -10], [0, 0]],
+    '12': [[125, 10, -12], [0, 0]],
+    '13': [[-108, 8.8, -4.5], [0, 0]],
+    '14': [[-122, 3, -14], [0, 0]],
+    '15': [[-66.6, -4.5, -7], [0, 0]],
+    '21': [[-100, -0.4, -12], [0, 0]],
+    '22': [[-200, -6, -12], [0, 0]],
+    '23': [[-129, 6, -1.2], [0, 0]],
+    '31': [[-142, 0, 8.5], [0, 0]],
+    '32': [[-163, 13, -12.5], [0, 0]],
+    '33': [[-115, 10.7, 13.3], [0, 0]],
+    '34': [[-200, 12, -2], [0, 0]],
+    '35': [[-111, 15, 15], [0, 0]],
+    '36': [[-155, -30, 4.3], [0, 0]],
+    '37': [[39.2, 6.8, -6.8], [0, 0]],
+    '41': [[-111, 11, -6.1], [0, 0]],
+    '42': [[-68.8, -23, -8.7], [0, 0]],
+    '43': [[-116, 12.4, -3.8], [0, 0]],
+    '44': [[-183, -11, 21], [0, 0]],
+    '45': [[-125, -7.4, -3], [0, 0]],
+    '46': [[-110, 14.6, 0], [0, 0]],
+    '50': [[-120, 21.4, 3.3], [0, 0]],
+    '51': [[-142, 5.9, -7.4], [0, 0]],
+    '52': [[-58, 14.6, -4.5], [0, 0]],
+    '53': [[-62.3, 14, 11.7], [0, 0]],
+    '54': [[-192, -12, 10], [0, 0]],
+    '61': [[-88, 13, -28], [0, 0]],
+    '62': [[-177, -2, 15], [0, 0]],
+    '63': [[-100, -20, 11.5], [0, 0]],
+    '64': [[-120, 5, -16], [0, 0]],
+    '65': [[-176, -30, 22], [0, 0]],
+    '71': [[-17, -30, -20], [0, 0]],
+    '81': [[-30, 2, 13], [0, 0]],
+    '82': [[-200, 4, -27], [0, 0]],
 };
-var _GEOUtils = /** @class */ (function () {
-    function _GEOUtils() {
-        this.MAP_CACHE_KEY = '__VISUAL_MAP_DATA';
+var default_1 = /** @class */ (function () {
+    function default_1(jsonData, conf) {
+        var _this = this;
+        this.ALL_AREAS = []; // 所有地区
+        this.geo = null; // geojson
+        this.topo = null; // topojson
+        this.props = null; // 地图总体对象
+        this.areaTranslate = function (name, id) { return name; }; // 地区翻译方法
+        this.centerMap = new Map(); // 地区->center
+        this.props = conf;
+        if (this.props.mapType == 'topo') {
+            this.topo = jsonData;
+            this.geo = topojson_client_1.feature(this.topo, this.topo.objects.map);
+        }
+        else {
+            this.geo = jsonData;
+            this.topo = topojson_server_1.topology({ map: jsonData });
+        }
+        if (conf.labelTranslate) {
+            this.areaTranslate = conf.labelTranslate;
+        }
+        this.geo.features.map(function (item) {
+            _this.ALL_AREAS.push({ id: item.properties.id, name: item.properties.name });
+            item.properties.cp = d3.geoCentroid(item);
+            _this.centerMap.set(item.properties.name, item.properties.cp);
+        });
     }
-    _GEOUtils.prototype.DEFS = function (rotate) {
+    default_1.prototype.has = function (areaName) {
+        return this.centerMap.has(areaName);
+    };
+    default_1.prototype.DEFS = function (rotate) {
         if (rotate === void 0) { rotate = false; }
         if (rotate) {
-            return "\n<filter id=\"_map_effect\">\n<feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"4\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n</filter>\n<filter id=\"_map_effect_hover\">\n    <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n    <feBlend in=\"light\" in2=\"SourceGraphic\" mode=\"screen\"></feBlend>\n</filter>\n\n<radialGradient id=\"_map_selected_point\">\n  <stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>\n\n      ";
+            return "<filter id=\"_map_effect\">\n<feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"4\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n</filter>\n<filter id=\"_map_effect_hover\">\n    <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"-3\" dy=\"3\" />\n    <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"2\" />\n    <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" />\n    <feBlend in=\"light\" in2=\"SourceGraphic\" mode=\"screen\"></feBlend>\n</filter>\n\n<radialGradient id=\"_map_selected_point\">\n  <stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n  <stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>";
         }
-        return "\n<radialGradient id=\"_map_selected_point\">\n<stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>\n";
+        return "<radialGradient id=\"_map_selected_point\">\n<stop offset=\"0%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"40%\" style=\"stop-color: transparent;\"/>\n<stop offset=\"100%\" class=\"_map_selected_point_color\"/>\n</radialGradient>";
     };
     // 合并Topo
-    _GEOUtils.prototype.merge = function (topo) {
-        var beMerge = _.concat([], topo.objects['map']['geometries']);
-        var bkg = topojson_client_1.merge(topo, beMerge);
+    default_1.prototype.merge = function () {
+        var beMerge = _.concat([], this.topo.objects['map']['geometries']);
+        var bkg = topojson_client_1.merge(this.topo, beMerge);
         var removed = [];
         simply(bkg.coordinates, removed);
         removed.map(function (remove) { return _.set(bkg.coordinates, remove, [[99999, 99999], [99999, 99999]]); });
-        // console.log(bkg)
         return bkg;
     };
-    _GEOUtils.prototype.adjust = function (mapId, rotate) {
+    default_1.prototype.adjust = function (mapId, rotate) {
         if (mapId === void 0) { mapId = 'chinafull'; }
@@ -75,3 +134,6 @@ if (rotate === void 0) { rotate = false; }
             if (_.isArray(rotate)) {
-                return rotate;
+                if (rotate.length == 2) {
+                    return rotate;
+                }
+                return [rotate, [0, 0]];
             }
@@ -84,10 +146,16 @@ if (_.has(ROTATION_MAP, mapId)) {
     };
-    _GEOUtils.prototype.translate = function (tranlate, name, code) {
-        if (tranlate) {
-            return (tranlate(name, code));
-        }
-        return name;
+    default_1.prototype.translate = function (name, id) {
+        return this.areaTranslate(name, id);
     };
-    return _GEOUtils;
+    default_1.prototype.data = function () {
+        return this.geo;
+    };
+    default_1.prototype.getPoint = function (areaName) {
+        return this.centerMap.get(areaName);
+    };
+    default_1.prototype.getCenter = function () {
+        return [(this.topo.bbox[0] + this.topo.bbox[2]) * 0.5, (this.topo.bbox[1] + this.topo.bbox[3]) * 0.5];
+    };
+    return default_1;
 }());
-exports.GeoUtil = new _GEOUtils();
+exports.default = default_1;

topojson/index.d.ts

 export { default as SimpleMap } from './SimpleMap';
+export { default as CombineMap } from './CombineMap';

topojson/index.js

@@ -7,1 +7,3 @@ "use strict";
 Object.defineProperty(exports, "SimpleMap", { enumerable: true, get: function () { return SimpleMap_1.default; } });
+var CombineMap_1 = require("./CombineMap");
+Object.defineProperty(exports, "CombineMap", { enumerable: true, get: function () { return CombineMap_1.default; } });

topojson/interface.d.ts

@@ -1,3 +0,3 @@
-import { VisualOpts } from '../interface';
-export interface ExtIcon {
+import { VALUE_FORMAT, Grid } from '../interface';
+export declare type ExtIcon = {
     name: string;
@@ -7,14 +7,46 @@ icon: string;
     className?: string;
-}
-export declare type ROTATION = boolean | [[number, number, number], [number, number]];
-export declare type AREA_TRANSLATE = (name: string, code: string) => string;
+};
+export declare type ROTATION = boolean | [number, number, number] | [[number, number, number], [number, number]];
+export declare type AREA_TRANSLATE = (name: string, code?: string) => string;
+export declare type MAP_TYPE = 'geo' | 'topo';
 /**
- * 说明
- * 1. 由于geojson格式是开放的，本地图仅支持普遍的标准，即在  properties 中，包括 {id,name} 属性的，如果包括 {cp} 属性，将使用cp ,不包括，将使用center 方法计算
- * 2. 经过 labelFormat 后，输出结果必须为 全地名，如果数据列就是全地名，则可以不需要传 labelFormat
- * 3. 如果想在地图上名提示上显示 简写地名， 则需要传入 labelTranslate 属性，如果不传，则显示全地名
- *
+ * 可视化通用参数
+ * 说明：某些选项可能在个别图形内不生效！请参照具体可视化组件的说明
 */
-export interface SimpleMapOpts extends VisualOpts {
+export interface GeoOpts {
     /**
+     * （内置）图形的填充样式，及特效。
+     * 说明：不是所有的图形都适用所有填充样式
+     *
+     * linear : 从下往上的纯性渐变
+     * slash  : 斜线段
+     * grain  : 像芝麻粒似的点点
+     * grid   : 风格
+    */
+    fillStyle?: 'slash' | 'hlinear' | 'linear' | 'grain' | 'grid';
+    /**
+     * 扩展DEFS,用于自定义class时的自行进行扩展
+    */
+    defs?: string;
+    /**
+     * 显示位置
+    */
+    grid?: Grid;
+    /**
+     * 图形扩展样式
+    */
+    className?: string;
+    /**
+     * 鼠标移动后的提示内容，需要返回内容。
+    */
+    tip?: (d: any, i?: number) => string;
+    /**
+     * 点击事件
+    */
+    onClick?: Function;
+    /**
+     * 点击时选择本项,默认为Fasle
+    */
+    clickSelect?: boolean;
+    /**
      * 是否缓存地图数据,默认不缓存，缓存使用 （window.localStorage.getItem('__VISUAL_MAP_DATA')）
@@ -24,7 +56,6 @@ */
     /**
-     * 地图数据类型，支持GEO(默认)
-     * 支持TOPOJSON， （暂不放开）
+     * 地图数据类型，支持GEO(默认) 和 TOPO
      *
     */
-    mapType?: 'geo' | 'topo';
+    mapType?: MAP_TYPE;
     /**
@@ -39,4 +70,5 @@ * 地图ID，可通过util地图下钻功能取到全部地图，默认为china
     /**
-     * 说明，如果LabelField
-     * code: 地区编码转
+     * 说明：如果需要在地图上显示简单，请传此方法，而不是 labelFormat
+     * name: 地区名称转,(说明：此处的名称为地图文件中的Name，即全名)
+     * code: 地区编码转,(说明：此处的编码为地图文件中的ID，并非 areaCode)
      * des: 地区简写转
@@ -48,10 +80,2 @@ * stirng=>stirng 自定义方法转
     /**
-     * 值的字段，必传，一个
-    */
-    valueField: string;
-    /**
-     * 值的字段，普通条形图只能传一个
-    */
-    valueLabel: string;
-    /**
      * 是否旋转，旋转时，使用北半球投影，固定角度，且有一定
@@ -65,2 +89,83 @@ * flase : 默认 不旋转
     rotate?: ROTATION;
+    /**
+     * 地图上额外显示的图标。后续再支持
+    */
+    extIcons?: ExtIcon[];
 }
+/**
+ * 说明
+ * 1. 由于geojson格式是开放的，本地图仅支持普遍的标准，即在  properties 中，包括 {id,name} 属性的，如果包括 {cp} 属性，将使用cp ,不包括，将使用center 方法计算
+ * 2. 经过 labelFormat 后，输出结果必须为 全地名，如果数据列就是全地名，则可以不需要传 labelFormat
+ * 3. 如果想在地图上名提示上显示 简写地名， 则需要传入 labelTranslate 属性，如果不传，则显示全地名
+ *
+*/
+export interface SimpleMapOpts extends GeoOpts {
+    /**
+     * 数据，如果初始化时就传数据，则直接显示，否则需要调用 setData 方法
+    */
+    data?: any[];
+    /**
+     * 说明：返回结果必须是地图全名，如果需要在地图上显示简写，请传 labelTranslate
+    */
+    labelFormat?: (string: any) => string;
+    /**
+     * 数据的显示模式，默认为'default':不使用转义 可选：数字(number)， 美元数字(usd)，百分数(percent)，汉字(chinese)，带两位小数的(decimal)
+     * default : 123456.78 => 123456.78
+     * number : 123456.78 => 123456
+     * usd : 123456.78 => 123,456.78
+     * percent : 0.789 => 78.90%
+     * chinese : 123456 => 12万3456
+     * decimal: 123456.789 => 123456.79
+     * size: 1024 => 12
+    */
+    valueFormat?: VALUE_FORMAT;
+    /**
+     * 地区标识字段
+    */
+    labelField?: string;
+    /**
+     * 值的字段，必传，一个
+    */
+    valueField?: string;
+    /**
+     * 值的字段，普通条形图只能传一个
+    */
+    valueLabel?: string;
+}
+/**
+ * 地图上的线条
+ * */
+export declare type MAP_LINE = {
+    sourceField: string;
+    targetField: string;
+    labelFormat?: (string: any) => string;
+    valueField: string;
+    valueLabel: string;
+    valueFormat?: VALUE_FORMAT;
+    onClick?: Function;
+    tip?: (d: any) => string;
+    lineType?: 'fly';
+};
+/**
+ * 说明
+ * 1. 由于geojson格式是开放的，本地图仅支持普遍的标准，即在  properties 中，包括 {id,name} 属性的，如果包括 {cp} 属性，将使用cp ,不包括，将使用center 方法计算
+ * 2. 经过 labelFormat 后，输出结果必须为 全地名，如果数据列就是全地名，则可以不需要传 labelFormat
+ * 3. 如果想在地图上名提示上显示 简写地名， 则需要传入 labelTranslate 属性，如果不传，则显示全地名
+ *
+*/
+export interface CombineMapOpts extends SimpleMapOpts {
+    /**
+     * 连线配置
+    */
+    lineConf?: MAP_LINE;
+    /**
+     * 连线数据
+    */
+    lineData?: any[];
+    plotConf?: [];
+    plotData?: [];
+    pieConf?: [];
+    pieData?: [];
+    barConf?: [];
+    barData?: [];
+}

topojson/SimpleMap/index.d.ts

@@ -1,31 +0,18 @@
-import { Visual } from '../../_Common';
+import GeoVisual from '../GeoVisual';
 import { SimpleMapOpts } from '../interface';
-import { LEGEND_MODE } from '../../interface';
-export default class extends Visual<SimpleMapOpts> {
-    protected __legendMode: LEGEND_MODE;
+export default class<T extends SimpleMapOpts> extends GeoVisual<T> {
     protected __ClassName: string;
-    protected __Grid: {
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
-    };
-    private rotate;
-    private mapType;
-    private projection;
-    private projectionBkg;
-    private initClassName;
+    protected _data_load: boolean;
     private GROUP;
-    private geo;
-    private topo;
-    private builded;
-    /**
-     * reOption 重新定义参数
-    */
-    protected pathToUrl(mapPath: string): string;
-    private Wait;
-    init(): Promise<void>;
-    buildMap(): void;
+    protected labelField: string;
+    protected labelFormat: (v: any) => any;
+    protected valueField: any;
+    protected valueLabel: string;
+    protected valueFormat: (V: any) => any;
+    protected DATA: any[];
+    init(): void;
+    resize(): void;
     sort(arr: any[]): any[];
-    update(arr: []): void;
+    setOption(conf: any): void;
+    update(arr: any[]): void;
 }

topojson/SimpleMap/index.js

@@ -26,63 +26,8 @@ "use strict";
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var d3 = require("d3");
 var _ = require("lodash");
+var GeoVisual_1 = require("../GeoVisual");
 var _Common_1 = require("../../_Common");
-var topojson_client_1 = require("topojson-client");
-var topojson_server_1 = require("topojson-server");
-var _GeoUtil_1 = require("../_GeoUtil");
 var util_1 = require("../../util");
-var storage = window.localStorage;
 var default_1 = /** @class */ (function (_super) {
@@ -92,221 +37,154 @@ __extends(default_1, _super);
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.__legendMode = "none";
         _this.__ClassName = "_map";
-        _this.__Grid = { top: 0, left: 0, right: 0, bottom: 0 };
-        _this.rotate = false;
-        _this.mapType = 'geo';
-        _this.projection = null;
-        _this.projectionBkg = null;
-        _this.initClassName = '_item';
+        _this._data_load = false;
         _this.GROUP = null;
-        _this.geo = null;
-        _this.topo = null;
-        _this.builded = false;
-        _this.Wait = [];
+        _this.labelField = 'name';
+        _this.labelFormat = function (v) { return v; };
+        _this.valueField = null;
+        _this.valueLabel = '数量';
+        _this.valueFormat = function (V) { return V; };
+        _this.DATA = [];
         return _this;
     }
-    // resize() {
-    //     if (this._loaded) {
-    //         this.buildMap();
-    //     }
-    // }
-    /**
-     * reOption 重新定义参数
-    */
-    // reOption() {
-    //     this.builded = false;
-    //     this.selected = '';
-    //     super.reOption();
-    // }
-    // 用于二次封装（将传入的MapPath 转换为可请求的 URL）
-    default_1.prototype.pathToUrl = function (mapPath) {
-        return mapPath;
-    };
     default_1.prototype.init = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var url, data, dataLoaded;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.initClassName = this.CONFIG.fillStyle ? "_item _item_fill_style _item_fill_" + this.CONFIG.fillStyle : '_item';
-                        url = this.pathToUrl(this.CONFIG.mapPath);
-                        data = null;
-                        dataLoaded = false;
-                        if (this.CONFIG.mapCache && storage.getItem(url)) {
-                            try {
-                                data = JSON.parse(storage.getItem(url));
-                                dataLoaded = true;
-                            }
-                            catch (e) { }
-                        }
-                        return [4 /*yield*/, d3.json(url)];
-                    case 1:
-                        data = _a.sent();
-                        if (this.CONFIG.mapCache) {
-                            storage.setItem(url, JSON.stringify(data));
-                        }
-                        this.rotate = this.CONFIG.rotate === true || _.isArray(this.CONFIG.rotate);
-                        this.DEFS.html(this.DEFS.html() + _GeoUtil_1.GeoUtil.DEFS(this.rotate));
-                        if (this.mapType == 'geo') {
-                            this.geo = data;
-                            this.topo = topojson_server_1.topology({ map: data });
-                        }
-                        else {
-                            this.topo = data;
-                            this.geo = topojson_client_1.feature(this.topo, this.topo.objects.map);
-                        }
-                        // console.log(this.geo)
-                        this.ROOT.classed('_root_cursor', _.has(this.CONFIG, 'onClick') || _.has(this.CONFIG, 'onSelect'));
-                        this.SVG.classed('_map_rotated', this.rotate);
-                        this.ROOT.classed('_map_show_name', this.CONFIG.showName);
-                        // this.AREAMAP.clear();
-                        this.geo.features.map(function (item) {
-                            item.properties.cp = d3.geoCentroid(item);
-                            // this.AREAMAP.set(item.properties.name, item.properties.id);
-                        });
-                        this.buildMap();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    default_1.prototype.buildMap = function () {
         var _this = this;
-        var center = [(this.topo.bbox[0] + this.topo.bbox[2]) * 0.5, (this.topo.bbox[1] + this.topo.bbox[3]) * 0.5];
-        if (this.rotate) {
-            var mapId = this.pathToUrl(this.CONFIG.mapPath);
-            if (_.endsWith(mapId, '.json')) {
-                mapId = mapId.split('/').pop().split('.')[0];
-            }
-            var adjust = _GeoUtil_1.GeoUtil.adjust(mapId, this.CONFIG.rotate);
-            var _a = __read(adjust, 2), rotation = _a[0], centerAdjust_1 = _a[1];
-            this.projection = d3.geoNaturalEarth1().rotate(rotation).fitSize([this.LAYOUT.w, this.LAYOUT.h], this.geo);
-            this.projectionBkg = d3.geoNaturalEarth1().rotate(rotation).fitSize([this.LAYOUT.w, this.LAYOUT.h], this.geo);
-            this.projection.scale(this.projection.scale() * 0.9)
-                .center(this.projection.center().map(function (loc, i) { return (loc + centerAdjust_1[i]); }));
-            this.projectionBkg.scale(this.projectionBkg.scale() * 0.9)
-                .center(this.projectionBkg.center().map(function (loc, i) { return (loc + centerAdjust_1[i]); }));
-            var bkgtranslate = this.projectionBkg.translate();
-            this.projectionBkg.translate([bkgtranslate[0] - 2, bkgtranslate[1] + 2]);
+        this.labelField = this.props.labelField || 'name';
+        if (_.has(this.props, 'labelField')) {
+            this.labelField = this.props.labelField;
         }
-        else {
-            this.projection = d3.geoMercator().center(center).translate([this.LAYOUT.w / 2, this.LAYOUT.h / 2]).fitSize([this.LAYOUT.w, this.LAYOUT.h], this.geo);
-            this.projection.scale(this.projection.scale() * 0.9);
-            this.projectionBkg = this.projection;
+        if (_.has(this.props, 'labelFormat')) {
+            this.labelFormat = this.props.labelFormat;
         }
-        if (!this.builded) {
-            var areas = this.ROOT.selectAll('g._item').data(this.geo.features);
-            this.GROUP = areas.enter()
-                .append('g')
-                .attr('class', function (d, i) { return _this.initClassName; })
-                .attr('id', function (d) { return 'area-' + d.properties.id; });
-            var path = d3.geoPath().projection(this.projection);
-            this.GROUP.append('path').attr('d', path);
-            var pathbkg = d3.geoPath().projection(this.projectionBkg);
-            this.EXT_TOP.append('path').datum(_GeoUtil_1.GeoUtil.merge(this.topo)).attr('d', pathbkg);
-            this.GROUP.append('text')
-                .attr('x', function (d) {
-                // console.log(d)
-                var point = _this.projection(d.properties.cp);
-                return point[0];
-            })
-                .attr('y', function (d) {
-                var point = _this.projection(d.properties.cp);
-                return point[1];
-            })
-                .text(function (d) { return _GeoUtil_1.GeoUtil.translate(_this.CONFIG.labelTranslate, d.properties.name, d.properties.id); });
-            this.builded = true;
-            this.GROUP.on('mouseover', function (d, i) {
+        if (_.has(this.props, 'valueField')) {
+            this.valueField = this.props.valueField;
+        }
+        if (_.has(this.props, 'valueLabel')) {
+            this.valueLabel = this.props.valueLabel;
+        }
+        if (_.has(this.props, 'valueFormat')) {
+            this.valueFormat = util_1.default.buildFormat(this.props.valueFormat);
+        }
+        this.ROOT.classed('_root_cursor', _.has(this.props, 'onClick') || _.has(this.props, 'onSelect'));
+        this.ROOT.classed('_map_show_name', this.props.showName);
+        var areas = this.ROOT.selectAll('g._item').data(this.GEO.data().features);
+        this.GROUP = areas.enter()
+            .append('g')
+            .attr('class', function (d, i) { return _this.initClassName + ' _item_9'; })
+            .attr('id', function (d) { return 'area-' + d.properties.id; });
+        var path = d3.geoPath().projection(this.projection);
+        this.GROUP.append('path').attr('d', path);
+        var pathbkg = d3.geoPath().projection(this.projectionBkg);
+        this.EXT_TOP.append('path').datum(this.GEO.merge()).attr('d', pathbkg);
+        this.GROUP.append('text')
+            .attr('x', function (d) { return _this.projection(d.properties.cp)[0]; })
+            .attr('y', function (d) { return _this.projection(d.properties.cp)[1]; })
+            .text(function (d) { return _this.GEO.translate(d.properties.name, d.properties.id); });
+        this.GROUP.on('mouseover', function (d, i) {
+            var _a;
+            if (_this.props.tip === null) {
+                return;
+            }
+            var _b = d.properties, id = _b.id, name = _b.name;
+            if (!_this._data_load) {
+                return;
+            }
+            if (!_.has(_this.props, 'labelField') || !_.has(_this.props, 'valueField')) {
+                return;
+            }
+            var data = _.find(_this.DATA, { __name: name });
+            if (data == undefined) {
+                data = (_a = {}, _a[_this.labelField] = name, _a[_this.valueField] = 0, _a.__id = id, _a.__name = name, _a);
+            }
+            if (_this.props.tip) {
+                _Common_1.ToolTip.show(__assign(__assign({}, data), { __id: id, __name: name }));
+            }
+            else {
+                _Common_1.ToolTip.show("<div class=\"_tip\">\n                <h2><i></i><span>" + _this.GEO.translate(name, id) + "</span></h2>\n                <p class=\"_item\"><span class=\"_label\">" + _this.valueLabel + "  :  </span><span class=\"_value\">" + _this.valueFormat(data[_this.props.valueField]) + "</span></p>\n            </div>");
+            }
+        });
+        this.GROUP.on('mouseout', function () { return _Common_1.ToolTip.hide(); });
+        if (this.props.onClick) {
+            this.GROUP.on('click', function (d, i) {
                 var _a;
-                if (_this.CONFIG.tip === null) {
-                    return;
-                }
                 var _b = d.properties, id = _b.id, name = _b.name;
-                // @ts-ignore
-                var data = _.find(_this.SORT_DATA, { __name: d.properties.name });
-                if (!data) {
-                    data = (_a = {}, _a[_this.CONFIG.labelField] = name, _a.__name = d.properties.name, _a[_this.CONFIG.valueField] = 0, _a);
+                var data = _.find(_this.DATA, { __name: name });
+                if (data == undefined) {
+                    data = (_a = {}, _a[_this.labelField] = name, _a[_this.valueField] = 0, _a.__id = id, _a.__name = name, _a);
                 }
-                if (_this.CONFIG.tip) {
-                    _Common_1.ToolTip.show(_this.CONFIG.tip(data, d.properties.name));
+                if (_this.props.clickSelect) {
+                    _this.EXT_BOTTOM.select('circle').remove();
+                    _this.GROUP.classed('_item_selected', false);
+                    if (_this.selectedItem == name) {
+                        _this.props.onClick(null, null);
+                        _this.selectedItem = '';
+                        return;
+                    }
+                    else {
+                        _this.GROUP.filter('#area-' + id).classed('_item_selected', true);
+                        _this.selectedItem = name;
+                        _this.EXT_BOTTOM.append('circle')
+                            .attr('class', '_map_selected_point')
+                            .attr('cx', _this.projection(d.properties.cp)[0])
+                            .attr('cy', _this.projection(d.properties.cp)[1])
+                            .attr('r', 10)
+                            .append('animate')
+                            .attr('attributeName', 'r')
+                            .attr('attributeType', 'xml')
+                            .attr('form', 10)
+                            .attr('to', 25)
+                            .attr('begin', '0s')
+                            .attr('dur', '1s')
+                            .attr('repeatCount', 'indefinite');
+                    }
                 }
-                else {
-                    _this._tip(data, 0);
-                }
+                _this.props.onClick(data, name);
             });
-            this.GROUP.on('mouseout', function () { return _Common_1.ToolTip.hide(); });
-            if (this.CONFIG.onClick) {
-                this.GROUP.on('click', function (d, i) {
-                    var _a;
-                    var _b = d.properties, id = _b.id, name = _b.name;
-                    // console.log(id, name)
-                    // @ts-ignore
-                    var data = _.find(_this.SORT_DATA, { __name: name });
-                    if (!data) {
-                        data = (_a = {}, _a[_this.CONFIG.labelField] = name, _a.__name = d.properties.name, _a[_this.CONFIG.valueField] = 0, _a);
-                    }
-                    // console.log(data)
-                    if (_this.CONFIG.clickSelect) {
-                        _this.EXT_BOTTOM.select('circle').remove();
-                        _this.GROUP.classed('_item_selected', false);
-                        if (_this.selectedItem == name) {
-                            _this.CONFIG.onClick(null, null);
-                            _this.selectedItem = '';
-                            return;
-                        }
-                        else {
-                            _this.GROUP.filter('#area-' + id).classed('_item_selected', true);
-                            _this.selectedItem = name;
-                            _this.EXT_BOTTOM.append('circle')
-                                .attr('class', '_map_selected_point')
-                                .attr('cx', _this.projection(d.properties.cp)[0])
-                                .attr('cy', _this.projection(d.properties.cp)[1])
-                                .attr('r', 10)
-                                .append('animate')
-                                .attr('attributeName', 'r')
-                                .attr('attributeType', 'xml')
-                                .attr('form', 10)
-                                .attr('to', 25)
-                                .attr('begin', '0s')
-                                .attr('dur', '1s')
-                                .attr('repeatCount', 'indefinite');
-                        }
-                    }
-                    _this.CONFIG.onClick(data, name);
-                });
-            }
-            while (this.Wait.length > 0) {
-                var fn = this.Wait.pop();
-                fn.call(this);
-            }
         }
-        else {
-            var path = d3.geoPath().projection(this.projection);
-            this.GROUP.select('path').attr('d', path);
-            this.GROUP.select('text')
-                .attr('x', function (d) {
-                var point = _this.projection(d.properties.cp);
-                return point[0];
-            })
-                .attr('y', function (d) {
-                var point = _this.projection(d.properties.cp);
-                return point[1];
-            })
-                .text(function (d) { return d.properties.name; });
-            var pathbkg = d3.geoPath().projection(this.projectionBkg);
-            this.EXT_TOP.select('path').attr('d', pathbkg);
+        if (_.has(this.props, 'data') && this.props.data != null) {
+            var data = _.concat([], this.props.data);
+            _.unset(this.props, 'data');
+            this.setData(data);
         }
     };
+    default_1.prototype.resize = function () {
+        var _this = this;
+        var path = d3.geoPath().projection(this.projection);
+        var pathbkg = d3.geoPath().projection(this.projectionBkg);
+        this.GROUP.select('path').attr('d', path);
+        this.EXT_TOP.select('path').attr('d', pathbkg);
+        this.SVG.attr('width', this.LAYOUT.w).attr('height', this.LAYOUT.h);
+        this.GROUP.select('text')
+            .attr('x', function (d) {
+            var point = _this.projection(d.properties.cp);
+            return point[0];
+        })
+            .attr('y', function (d) {
+            var point = _this.projection(d.properties.cp);
+            return point[1];
+        })
+            .text(function (d) { return d.properties.name; });
+        // this.update(this.DATA)
+    };
     default_1.prototype.sort = function (arr) {
         var _this = this;
-        return arr.map(function (item) { return (__assign(__assign({}, item), { __name: _this.FormatLabel(item[_this.CONFIG.labelField]) })); });
+        this.DATA = arr;
+        this.DATA.map(function (item) {
+            var name = _this.labelFormat(item[_this.labelField]);
+            var info = _.find(_this.GEO.ALL_AREAS, { name: name });
+            item.__name = name;
+            if (info) {
+                item.__id = info.id + '';
+            }
+        });
+        return this.DATA;
     };
+    default_1.prototype.setOption = function (conf) {
+        _super.prototype.setOption.call(this, conf);
+        if (this.DATA.length) {
+            this.update(this.DATA);
+        }
+    };
     default_1.prototype.update = function (arr) {
         var _this = this;
-        if (!this.builded) {
-            // 由于先加载地图资源产生的延时，在此进行回调
-            this.Wait.push(function () { return _this.update(arr); });
-            return;
-        }
-        var extent = util_1.default.extent(arr, function (item) { return item[_this.CONFIG.valueField]; });
+        var extent = util_1.default.extent(arr, function (item) { return item[_this.props.valueField]; });
         var scaleClass = d3.scaleQuantile().domain(extent).range(['_item_0', '_item_0', '_item_1', '_item_2', '_item_4', '_item_5', '_item_6']);
@@ -318,3 +196,3 @@ this.GROUP.attr('class', function (d) {
             if (data) {
-                clazz.push(scaleClass(data[_this.CONFIG.valueField]));
+                clazz.push(scaleClass(data[_this.props.valueField]));
             }
@@ -326,5 +204,6 @@ else {
         });
+        this._data_load = true;
     };
     return default_1;
-}(_Common_1.Visual));
+}(GeoVisual_1.default));
 exports.default = default_1;

Trend/DateTrend/index.js

@@ -57,18 +57,18 @@ "use strict";
         var _a;
-        this.dateFormat = this.CONFIG.dateFormat || '%Y-%m-%d';
-        // if (!_.has(this.CONFIG, 'labelFormat')) {
+        this.dateFormat = this.props.dateFormat || '%Y-%m-%d';
+        // if (!_.has(this.props, 'labelFormat')) {
         //     let formater = Utils.getDateFormat('%m-%d');
         //     this.FormatLabel = (m, d) => formater(d._day);
         // }
-        this.symbol = this.CONFIG.symbol || 'none';
-        this.mode = this.CONFIG.mode || 'stack';
+        this.symbol = this.props.symbol || 'none';
+        this.mode = this.props.mode || 'stack';
         this.drawer = DrawUtil_1.getDrawer(this.mode, this.symbol);
         _a = __read(_Common_1.AxisUtil.getAxises(this.AXIX, this.LAYOUT, {
             type: 'X_DATE',
-            axis: this.CONFIG.xAxis,
-            field: this.CONFIG.labelField,
+            axis: this.props.xAxis,
+            field: this.props.labelField,
             format: this.FormatLabel,
         }, {
             type: 'Y_NUMBER',
-            axis: this.CONFIG.yAxis,
+            axis: this.props.yAxis,
             field: '__total',
@@ -89,3 +89,3 @@ format: this.FormatValue,
         // (data: any[], labelField: string, valueField: string | string[], field = '_day', format: string = '%Y-%m-%d', start?: string | Date, end?: string | Date)
-        var _data = util_1.default.fillDayData(arr, this.CONFIG.labelField, this.CONFIG.valueField, '_day', this.dateFormat, this.CONFIG.start, this.CONFIG.end);
+        var _data = util_1.default.fillDayData(arr, this.props.labelField, this.props.valueField, '_day', this.dateFormat, this.props.start, this.props.end);
         // console.log(_data)
@@ -136,3 +136,3 @@ var singleMax = 0;
             var field = arrGroup.key;
-            var idx = _this.CONFIG.valueField.indexOf(field);
+            var idx = _this.props.valueField.indexOf(field);
             arrGroup.map(function (item) { return item['pos'] = { field: field, idx: idx }; });
@@ -144,3 +144,3 @@ arrGroup['idx'] = idx;
             .join("g")
-            .attr('class', function (d) { return "_series _series_" + d.idx + " " + (_this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + _this.CONFIG.fillStyle) : ''); })
+            .attr('class', function (d) { return "_series _series_" + d.idx + " " + (_this.props.fillStyle ? ('_item_fill_style _item_fill_' + _this.props.fillStyle) : ''); })
             .attr('transform', "translate(" + (this.LAYOUT.x + this.xAxisDrawer.margin) + "," + (this.LAYOUT.y + this.LAYOUT.h - this.yAxisDrawer.margin) + ")");
@@ -152,3 +152,3 @@ var symbols = this.drawer.draw(group, unit, heightScale, this.DURATION);
         this.EXT_TOP.select('rect').attr('x', 0).attr('y', 0).attr('width', this.LAYOUT.w - this.xAxisDrawer.margin).attr('height', this.LAYOUT.h - this.yAxisDrawer.margin);
-        if (this.CONFIG.tip || this.CONFIG.tip === undefined) {
+        if (this.props.tip || this.props.tip === undefined) {
             this.EXT_TOP.select('rect').on('mousemove', function () {
@@ -160,12 +160,12 @@ var _a = __read([d3.event.layerX - LEFT, d3.event.layerY - TOP], 2), x = _a[0], y = _a[1];
                 _this.ROOT.selectAll('._symbol_' + idx).classed('_symbol_active', true);
-                if (_this.CONFIG.tip) {
-                    _Common_1.ToolTip.show(_this.CONFIG.tip(data, idx));
+                if (_this.props.tip) {
+                    _Common_1.ToolTip.show(_this.props.tip(data, idx));
                 }
                 else {
                     var html_1 = ["<div class=\"_tip\">"];
-                    html_1.push("<h2><span>" + _this.FormatLabel(data[_this.CONFIG.labelField], data) + "</span></h2>");
-                    _.map(_this.CONFIG.valueField, function (field, i) {
-                        html_1.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.CONFIG.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this.FormatValue(data[field]) + "</span></p>");
+                    html_1.push("<h2><span>" + _this.FormatLabel(data[_this.props.labelField], data) + "</span></h2>");
+                    _.map(_this.props.valueField, function (field, i) {
+                        html_1.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.props.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this.FormatValue(data[field]) + "</span></p>");
                     });
-                    if (_this.CONFIG.valueField.length > 1) {
+                    if (_this.props.valueField.length > 1) {
                         html_1.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"vapfont _value\">" + _this.FormatValue(data.__total) + "</span></p>");
@@ -199,10 +199,10 @@ }
                     var data = d.data;
-                    if (_this.CONFIG.tip) {
-                        _Common_1.ToolTip.show(_this.CONFIG.tip(data, idx));
+                    if (_this.props.tip) {
+                        _Common_1.ToolTip.show(_this.props.tip(data, idx));
                     }
                     else {
                         var html_2 = ["<div class=\"_tip\">"];
-                        html_2.push("<h2><span>" + _this.FormatLabel(data[_this.CONFIG.labelField], data) + "</span></h2>");
-                        _.map(_this.CONFIG.valueField, function (field, i) {
-                            html_2.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.CONFIG.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this.FormatValue(data[field]) + "</span></p>");
+                        html_2.push("<h2><span>" + _this.FormatLabel(data[_this.props.labelField], data) + "</span></h2>");
+                        _.map(_this.props.valueField, function (field, i) {
+                            html_2.push("<p class=\"_item " + (idx == i ? 'current' : '') + "\"><span class=\"_label\">" + _this.props.valueLabel[i] + " : </span><span class=\"vapfont _value\">" + _this.FormatValue(data[field]) + "</span></p>");
                         });
@@ -220,7 +220,7 @@ html_2.push("<p class=\"_item _item_sum\"><span class=\"_label\">\u5171\u8BA1 : </span><span class=\"vapfont _value\">" + _this.FormatValue(data.__total) + "</span></p>");
         }
-        if (this.CONFIG.onClick) {
+        if (this.props.onClick) {
             if (symbols != null) {
                 symbols.on('click', function (d, i) {
                     var idx = parseInt(d3.select(d3.event.target.parentNode).attr('series'));
-                    _this.CONFIG.onClick(d.data, _this.CONFIG.valueField[idx]);
+                    _this.props.onClick(d.data, _this.props.valueField[idx]);
                 });
@@ -232,3 +232,3 @@ }
                 var data = listArr[0][idx].data;
-                _this.CONFIG.onClick(data, idx);
+                _this.props.onClick(data, idx);
             });
@@ -235,0 +235,0 @@ }

Trend/Histogram/index.js

@@ -50,11 +50,11 @@ "use strict";
         var _a;
-        this.barType = this.CONFIG.barType || 'default';
+        this.barType = this.props.barType || 'default';
         _a = __read(_Common_1.AxisUtil.getAxises(this.AXIX, this.LAYOUT, {
             type: 'X_BAND',
-            axis: this.CONFIG.xAxis,
-            field: this.CONFIG.labelField,
+            axis: this.props.xAxis,
+            field: this.props.labelField,
             format: this.FormatLabel
         }, {
             type: this.barType == 'percent' ? 'Y_FILL_PERCENT' : 'Y_NUMBER',
-            axis: this.CONFIG.yAxis,
+            axis: this.props.yAxis,
             field: '__total',
@@ -68,5 +68,5 @@ format: this.FormatValue,
         var _data = _.concat([], arr);
-        if (this.CONFIG.fillDate) {
-            var _a = __read(d3.extent(_data, function (item) { return item[_this.CONFIG.labelField]; }), 2), start = _a[0], end = _a[1];
-            _data = util_1.default.fillDayData(arr, this.CONFIG.labelField, this.CONFIG.valueField, 'YYYY-MM-DD', start, end);
+        if (this.props.fillDate) {
+            var _a = __read(d3.extent(_data, function (item) { return item[_this.props.labelField]; }), 2), start = _a[0], end = _a[1];
+            _data = util_1.default.fillDayData(arr, this.props.labelField, this.props.valueField, 'YYYY-MM-DD', start, end);
         }
@@ -93,3 +93,3 @@ return _data.map(function (item) {
             var field = arrGroup.key;
-            var idx = _this.CONFIG.valueField.indexOf(field);
+            var idx = _this.props.valueField.indexOf(field);
             arrGroup.map(function (item) { return item['pos'] = { field: field, idx: idx }; });
@@ -111,7 +111,7 @@ arrGroup['idx'] = idx;
             .join("g")
-            .attr('class', function (d, i) { return "_series _series_" + d.idx + " " + (_this.CONFIG.fillStyle ? ('_item_fill_style _item_fill_' + _this.CONFIG.fillStyle) : ''); })
+            .attr('class', function (d, i) { return "_series _series_" + d.idx + " " + (_this.props.fillStyle ? ('_item_fill_style _item_fill_' + _this.props.fillStyle) : ''); })
             .attr('transform', function (d, i) {
             return "translate(" + (_this.LAYOUT.x + _this.xAxisDrawer.margin) + "," + (_this.LAYOUT.y + _this.LAYOUT.h - _this.yAxisDrawer.margin) + ")";
         });
-        var items = Drawer_1.Drawer.draw(this.barType, group, band, this.CONFIG.labelField, heightScale, this.DURATION);
+        var items = Drawer_1.Drawer.draw(this.barType, group, band, this.props.labelField, heightScale, this.DURATION);
         var self = this;
@@ -122,3 +122,3 @@ this.tip(items, 'data');
             // let idx = d3.select(d3.event.target.parentNode).attr('series');
-            self.CONFIG.onClick(d['data'], d['pos'].field);
+            self.props.onClick(d['data'], d['pos'].field);
         });
@@ -125,0 +125,0 @@ this.xAxisDrawer.draw();

Trend/Hours/index.js

@@ -64,3 +64,3 @@ "use strict";
             var _a;
-            var item = _.find(arr, function (el) { return el[_this.CONFIG.labelField] == i; });
+            var item = _.find(arr, function (el) { return el[_this.props.labelField] == i; });
             if (item) {
@@ -70,3 +70,3 @@ data.push(__assign(__assign({}, item), { _idx: i, _label: TimeFormat[i] }));
             else {
-                data.push((_a = { _idx: i, _label: TimeFormat[i] }, _a[_this.CONFIG.labelField] = i, _a[_this.CONFIG.valueField] = 0, _a));
+                data.push((_a = { _idx: i, _label: TimeFormat[i] }, _a[_this.props.labelField] = i, _a[_this.props.valueField] = 0, _a));
             }
@@ -73,0 +73,0 @@ });

util/index.js

@@ -14,3 +14,3 @@ "use strict";
     grid: { top: 12, left: 12, right: 12, bottom: 12, },
-    tip: { delay: 222, duration: 111 }
+    tip: { delay: 300, duration: 300 }
     // axis: { width: 80, arrow: false, },
@@ -17,0 +17,0 @@ // legend: { width: 200, height: 40, cols: 1 },

No alert changes

Worsened metrics

Total package byte prevSize

372237

decreased by-7.01%

Number of package files

151

decreased by-2.58%

Lines of code

9064

decreased by-5.85%

No dependency changes