vap-visual - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

_Common/Visual.d.ts

 import * as d3 from 'd3';
 import { VisualOpts, Layout, VISUAL_EVENT, Grid, LEGEND_MODE } from '../interface';
-import { LegendDrawer } from '../_Common/Legends/_Legend';
+import { LegendDrawer } from './Legend2';
 export default abstract class<T extends VisualOpts> {
@@ -11,3 +11,2 @@ protected id: string;
     protected __legendMode: LEGEND_MODE;
-    private __LegendConf;
     protected legendDrawer: LegendDrawer;
@@ -30,3 +29,2 @@ protected WIDTH: number;
     protected LAYOUT: Layout;
-    protected LAYOUT_LEGEND: Layout;
     protected checkedField: string[];
@@ -39,7 +37,7 @@ protected selectedItem: string | number;
     constructor(selector: string, conf: T);
-    private drawGraphAndLegend;
+    private draw;
     /**
      * 当 Legend 被重新选中时
     */
-    protected onLegendSelected(checkFields: any): void;
+    protected onLegendSelected(checkFields: any, data: any): void;
     protected _tip(data: any, idx: any): void;
@@ -46,0 +44,0 @@ protected tip(enter: d3.Selection<any, any, any, any>, path?: string): void;

_Common/Visual.js

@@ -23,3 +23,3 @@ "use strict";
 var ToolTip_1 = require("../_Common/ToolTip");
-var Legends_1 = require("../_Common/Legends");
+var Legend2_1 = require("./Legend2");
 var default_1 = /** @class */ (function () {
@@ -39,4 +39,2 @@ function default_1(selector, conf) {
         this.__legendMode = 'none';
-        // 转换后的 legendconf
-        this.__LegendConf = null;
         this.legendDrawer = null;
@@ -71,3 +69,3 @@ // SVG 上层容器
         this.LAYOUT = { x: 0, y: 0, w: 0, h: 0 };
-        this.LAYOUT_LEGEND = { x: 0, y: 0, w: 0, h: 0 };
+        // protected LAYOUT_LEGEND: Layout = { x: 0, y: 0, w: 0, h: 0 };
         this.checkedField = [];
@@ -95,3 +93,3 @@ this.selectedItem = null;
             if (_this._needResize()) {
-                _this.drawGraphAndLegend();
+                _this.draw();
             }
@@ -101,37 +99,10 @@ });
     // 打包：重置 checkedField 重新layout 重新update ,重绘legend
-    default_1.prototype.drawGraphAndLegend = function () {
-        var _this = this;
-        if (this.__legendMode != 'none' && this.legendDrawer != null) {
-            if (this.__legendMode == 'label') {
-                // label 方式
-                if (_.isString(this.CONFIG.valueField)) {
-                    if (this.checkedField.length == 0) {
-                        this.checkedField = this.DATA.map(function (item) { return item[_this.CONFIG.labelField]; });
-                    }
-                    else {
-                        this.DATA = _.filter(this.DATA, function (item) { return _this.checkedField.indexOf(item[_this.CONFIG.labelField]) >= 0; });
-                    }
-                    this.legendDrawer.setData(this.SORT_DATA, this.LAYOUT_LEGEND);
-                }
-                else {
-                    if (this.checkedField.length == 0) {
-                        this.checkedField = this.DATA.map(function (item) { return item[_this.CONFIG.labelField]; });
-                    }
-                    else {
-                        this.DATA = _.filter(this.DATA, function (item) { return _this.checkedField.indexOf(item[_this.CONFIG.labelField]) >= 0; });
-                    }
-                    // console.log(this.SORT_DATA)
-                    this.legendDrawer.setData(this.SORT_DATA, this.LAYOUT_LEGEND);
-                }
-            }
-            else if (_.isArray(this.CONFIG.valueField)) {
-                // value 方式
-                this.legendDrawer.setData(this.SORT_DATA, this.LAYOUT_LEGEND);
-            }
-        }
+    default_1.prototype.draw = function () {
+        console.log('draw');
+        this.DATA = this.legendDrawer.setData(this.SORT_DATA);
         this.layout(this.DATA);
         this.update(this.DATA);
-        if (this.__legendMode != 'none' && this.legendDrawer != null) {
-            this.legendDrawer.draw();
-        }
+        // if (this.__legendMode != 'none' && this.legendDrawer != null) {
+        //     this.legendDrawer.draw();
+        // }
     };
@@ -141,6 +112,7 @@ /**
     */
-    default_1.prototype.onLegendSelected = function (checkFields) {
+    default_1.prototype.onLegendSelected = function (checkFields, data) {
         this.checkedField = checkFields.map(function (item) { return item.field; });
-        this.DATA = _.concat([], this.SORT_DATA);
-        this.drawGraphAndLegend();
+        this.DATA = data;
+        this.layout(this.DATA);
+        this.update(this.DATA);
     };
@@ -264,5 +236,3 @@ default_1.prototype._tip = function (data, idx) {
         }
-        if (this.__legendMode != 'none' && _.has(this.CONFIG, 'legend') && this.CONFIG.legend.postion != 'n') {
-            this.__LegendConf = Legends_1.default.getSupport(this.CONFIG.legend);
-        }
+        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._needResize(true);
@@ -276,7 +246,2 @@ this.SVG.attr('width', this.WIDTH).attr('height', this.HEIGHT);
         }
-        if (this.__LegendConf) {
-            this.legendDrawer = Legends_1.default.getDrawer(this.__LegendConf, this.LAYOUT_LEGEND, this.LEGEND, function (fields) { return _this.onLegendSelected(fields); }, this.FormatLabel, this.FormatValue, this.DURATION, this.CONFIG.valueField, 
-            // this.CONFIG.valueField,
-            this.__legendMode === 'value' ? (_.isArray(this.CONFIG.valueLabel) ? this.CONFIG.valueLabel : this.CONFIG.labelField) : this.CONFIG.labelField);
-        }
         this.init();
@@ -287,3 +252,2 @@ this._loaded = true;
     default_1.prototype._needResize = function (force) {
-        var _a;
         if (force === void 0) { force = false; }
@@ -297,3 +261,4 @@ var rootNode = this.CONTAINER.node();
             var grid = Object.assign({}, this.__Grid, this.CONFIG.grid);
-            _a = __read(Legends_1.default.convertLegendLayout(this.__LegendConf, { x: grid.left, y: grid.top, w: this.WIDTH - grid.left - grid.right, h: this.HEIGHT - grid.top - grid.bottom, }), 2), this.LAYOUT_LEGEND = _a[0], this.LAYOUT = _a[1];
+            this.LAYOUT = { x: grid.left, y: grid.top, w: this.WIDTH - grid.left - grid.right, h: this.HEIGHT - grid.top - grid.bottom, };
+            this.LAYOUT = this.legendDrawer.resize(this.LAYOUT);
             return true;
@@ -324,3 +289,3 @@ }
         this.DATA = _.concat([], this.SORT_DATA);
-        this.drawGraphAndLegend();
+        this.draw();
     };
@@ -340,3 +305,3 @@ /**
             this.DATA = _.concat([], this.SORT_DATA);
-            this.drawGraphAndLegend();
+            this.draw();
         }
@@ -343,0 +308,0 @@ };

Bars/HMultiBar/index.d.ts

 import { Visual } from '../../_Common';
 import { HMULTI_BAR_TYPE, HMutliBarOpts } from '../interface';
-import { Grid, LEGEND_MODE } from '../../interface';
+import { Grid } from '../../interface';
 import { Draw } from './Draw';
 export default class extends Visual<HMutliBarOpts> {
     protected __ClassName: string;
-    protected __legendMode: LEGEND_MODE;
     protected __Grid: Grid;
@@ -9,0 +8,0 @@ protected labelWidth: number;

Bars/HMultiBar/index.js

@@ -27,3 +27,2 @@ "use strict";
         _this.__ClassName = "_hmultibar";
-        _this.__legendMode = "value";
         _this.__Grid = { bottom: 0 };
@@ -30,0 +29,0 @@ _this.labelWidth = 72;

package.json

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

Pies/Pie/index.d.ts

@@ -29,3 +29,2 @@ import { Visual } from '../../_Common';
     protected sort(arr: any[]): any[];
-    protected layout(arr: any[]): void;
     protected showText(list: any, idx: any): void;
@@ -32,0 +31,0 @@ protected itemClass(d: any, i: any): string;

Pies/Pie/index.js

@@ -49,32 +49,4 @@ "use strict";
         // 由于PIE图重设LAYOUT 导致 LEGENT 设置不准，所以重新修复一下
-        if (this.CONFIG.legend && this.CONFIG.legend.postion != 'n') {
-            switch (this.CONFIG.legend.postion) {
-                case 'l':
-                case 'lt':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x + 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y + 24;
-                    break;
-                case 'r':
-                case 'rt':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x - 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y + 24;
-                    break;
-                case 'lb':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x + 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y - 24;
-                    break;
-                case 'rb':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x - 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y - 24;
-                    break;
-                case 't':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x + 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y + 12;
-                    break;
-                case 'b':
-                    this.LAYOUT_LEGEND.x = this.LAYOUT_LEGEND.x + 12;
-                    this.LAYOUT_LEGEND.y = this.LAYOUT_LEGEND.y - 12;
-                    break;
-            }
-        }
+        // if (this.CONFIG.legend && this.CONFIG.legend.postion != 'n') {
+        // }
         // PIE 图模式，默认不显示在中部，使用 TIPS
@@ -110,5 +82,2 @@ if (this.pieType == 'pie') {
     };
-    default_1.prototype.layout = function (arr) {
-        this.total = _.sumBy(arr, this.CONFIG.valueField) || 0.00000001;
-    };
     default_1.prototype.showText = function (list, idx) {
@@ -121,3 +90,3 @@ this.EXT_BOTTOM.attr('class', '_ext_bottom _ext_bottom_' + idx);
             if (data.key != '无数据') {
-                this.EXT_BOTTOM.select('text._item_percent').text(format_1.formatPercent(data._percent));
+                this.EXT_BOTTOM.select('text._item_percent').text(format_1.formatPercent(data._percent * 100));
             }
@@ -124,0 +93,0 @@ else {

Trend/DateTrend/index.d.ts

@@ -1,2 +0,2 @@
-import { AxisDrawer, LegendDrawer, Visual } from '../../_Common';
+import { AxisDrawer, Visual } from '../../_Common';
 import { DateTrendOpts, TREND_SYMBOL, STACK_MODE } from '../interface';
@@ -17,3 +17,2 @@ import { LEGEND_MODE } from '../../interface';
     protected yAxisDrawer: AxisDrawer<any>;
-    protected legendDrawer: LegendDrawer;
     private scaleField;
@@ -20,0 +19,0 @@ protected init(): void;

Trend/DateTrend/index.js

@@ -52,3 +52,2 @@ "use strict";
         _this.yAxisDrawer = null;
-        _this.legendDrawer = null;
         _this.scaleField = '';
@@ -78,4 +77,2 @@ return _this;
         }), 2), this.xAxisDrawer = _a[0], this.yAxisDrawer = _a[1];
-        // this.legendDrawer = Legend.getDrawer(this.legend, this.LAYOUT_LEGEND, this.LEGEND, (fields) => this.onSelectChanged(fields), v => v, this.FormatValue, this.DURATION);
-        // this.checkedField = this.CONFIG.valueField.map((field, idx) => ({ field, idx }))
         this.EXT_TOP.append('rect').attr('class', '_mark_coord');
@@ -82,0 +79,0 @@ this.EXT_TOP.append('line').attr('id', 'coord_h_' + this.id).attr('class', '_mark_coord_line');

No alert changes

Improved metrics

Total package byte prevSize

403066

increased by13.04%

Number of package files

155

increased by16.54%

Lines of code

9724

increased by13.06%

No dependency changes