vap - npm Package Compare versions

Comparing version 1.4.4 to 1.4.5

layouts/admin/TableLayout/index.js

@@ -58,4 +58,3 @@ "use strict";
         _this.reflush = function () {
-            _this.query = {};
-            _this.onQuery({});
+            _.extend(_this.query, { start_: 0 });
         };
@@ -69,5 +68,2 @@ var param = {
     }
-    // componentDidMount() {
-    //     console.log('aabbbcc');
-    // }
     TableLayout.prototype.onQuery = function (param) {
@@ -74,0 +70,0 @@ _.extend(this.query, param, { start_: 0 });

layouts/charts/BarChart/index.d.ts

 import MutiTop from './MutiTop';
 import Top from './Top';
+import Top2 from './Top2';
 export default class  {
     static MutiTop: typeof MutiTop;
     static Top: typeof Top;
+    static Top2: typeof Top2;
 }

layouts/charts/BarChart/index.js

@@ -5,2 +5,3 @@ "use strict";
 var Top_1 = require("./Top");
+var Top2_1 = require("./Top2");
 var default_1 = /** @class */ (function () {
@@ -11,4 +12,5 @@ function default_1() {
     default_1.Top = Top_1.default;
+    default_1.Top2 = Top2_1.default;
     return default_1;
 }());
 exports.default = default_1;

layouts/charts/BarChart/MutiTop.d.ts

@@ -9,2 +9,10 @@ import D3Chart from '../D3Chart';
 }
+/**
+ * 目前支持度：
+ * resize：不支持
+ * update: 不支持
+ * tip提示: 支持
+ * click交互: 支持
+ *
+*/
 export default class  extends D3Chart<MutiChartOpts> {
@@ -19,2 +27,3 @@ labelFields: any[];
     init(): void;
+    resize(): void;
     sort(): void;
@@ -21,0 +30,0 @@ build(): void;

layouts/charts/BarChart/MutiTop.js

@@ -17,2 +17,3 @@ "use strict";
 var utils_1 = require("../../../utils");
+var ToolTip_1 = require("../common/ToolTip");
 var CONFIG = {
@@ -22,2 +23,10 @@ left: 10,
 };
+/**
+ * 目前支持度：
+ * resize：不支持
+ * update: 不支持
+ * tip提示: 支持
+ * click交互: 支持
+ *
+*/
 var default_1 = /** @class */ (function (_super) {
@@ -43,2 +52,5 @@ __extends(default_1, _super);
     };
+    default_1.prototype.resize = function () {
+        console.log('暂不支持');
+    };
     default_1.prototype.sort = function () {
@@ -96,3 +108,8 @@ var _this = this;
             })
-                .attr('height', lineHeight);
+                .attr('height', lineHeight)
+                .on('mouseover', function (d) {
+                ToolTip_1.default.show("\n                        <h2>" + d[_this.groupLabel] + "</h2>\n                        " + _this.labelFields.map(function (label, j) { return "<p class=\"" + (((j + '') == (i + '')) ? 'high' : 'common') + "\">" + _this.labelTexts[j] + ": <span class=\"vapfont\">" + d[label] + "</span></p>"; }).join('') + "\n                    ");
+            }).on('mouseout', function (d) {
+                ToolTip_1.default.hide();
+            });
         };
@@ -99,0 +116,0 @@ for (var i in this.labelFields) {

layouts/charts/common/DefUtil.d.ts

@@ -1,1 +0,4 @@
-export declare function BuildShadow(): string;
+export default abstract class name {
+    static genId: () => string;
+    static BuildShadow: () => string;
+}

layouts/charts/common/DefUtil.js

@@ -6,2 +6,3 @@ "use strict";
 // console.log(theme);
+var id = 0;
 // 阴影样式
@@ -12,6 +13,15 @@ var ShadowMatrix = {
 };
-//制作阴影
-function BuildShadow() {
-    return "<filter id=\"_ec_def_shadow\">\n        <feColorMatrix type=\"matrix\" values=\"" + ShadowMatrix[theme] + "\"></feColorMatrix>\n        <feGaussianBlur stdDeviation=\"1\" result=\"colorBlur1\"></feGaussianBlur>\n\n        <feOffset result=\"offsetBlur0\" in=\"colorBlur1\" dx=\"-2\" dy=\"-1\" />\n        <feOffset result=\"offsetBlur1\" in=\"colorBlur1\" dx=\"1\" dy=\"1\" />\n        <feOffset result=\"offsetBlur2\" in=\"colorBlur1\" dx=\"3\" dy=\"3\" />\n        <feOffset result=\"offsetBlur3\" in=\"colorBlur1\" dx=\"5\" dy=\"5\" />\n        <feMerge>\n            <feMergeNode in=\"offsetBlur0\" />\n            <feMergeNode in=\"offsetBlur1\" />\n            <feMergeNode in=\"offsetBlur2\" />\n            <feMergeNode in=\"offsetBlur3\" />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n    ";
-}
-exports.BuildShadow = BuildShadow;
+var name = /** @class */ (function () {
+    function name() {
+    }
+    name.genId = function () {
+        id++;
+        return '__vap__chart__' + id;
+    };
+    //制作阴影
+    name.BuildShadow = function () {
+        return "<filter id=\"_ec_def_shadow\">\n        <feColorMatrix type=\"matrix\" values=\"" + ShadowMatrix[theme] + "\"></feColorMatrix>\n        <feGaussianBlur stdDeviation=\"1\" result=\"colorBlur1\"></feGaussianBlur>\n\n        <feOffset result=\"offsetBlur0\" in=\"colorBlur1\" dx=\"-2\" dy=\"-1\" />\n        <feOffset result=\"offsetBlur1\" in=\"colorBlur1\" dx=\"1\" dy=\"1\" />\n        <feOffset result=\"offsetBlur2\" in=\"colorBlur1\" dx=\"3\" dy=\"3\" />\n        <feOffset result=\"offsetBlur3\" in=\"colorBlur1\" dx=\"5\" dy=\"5\" />\n        <feMerge>\n            <feMergeNode in=\"offsetBlur0\" />\n            <feMergeNode in=\"offsetBlur1\" />\n            <feMergeNode in=\"offsetBlur2\" />\n            <feMergeNode in=\"offsetBlur3\" />\n            <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n    </filter>\n    ";
+    };
+    return name;
+}());
+exports.default = name;

layouts/charts/D3Chart.d.ts

@@ -12,12 +12,30 @@ /// <reference types="react" />
     HEIGHT: number;
+    /**
+     * build 方法会在图表标签导入时自动调用，必须实现此方法
+    */
     abstract build(): any;
+    /**
+     * update 方法会在数据发生变化时自动调用，必须实现此方法
+    */
     abstract update(): any;
-    _needResize(): boolean;
+    /**
+     * resize方法会在宽高发生变化的情况下自动调用
+    */
     resize(): void;
+    /**
+     * init 方法会在build前自动调用
+    */
     init(): void;
+    /**
+     * sort方法会在 build前 或 update前 自动调用
+    */
     sort(): void;
+    _needResize(): boolean;
     componentWillMount(): void;
     componentDidMount(): void;
     componentDidUpdate(): void;
+    /**
+     * 不要实现render方法
+    */
     render(): JSX.Element;
 }

layouts/charts/D3Chart.js

@@ -15,7 +15,3 @@ "use strict";
 var d3 = require("d3");
-var id = 0;
-var genId = function () {
-    id++;
-    return '__vap__chart__' + id;
-};
+var common_1 = require("./common");
 var default_1 = /** @class */ (function (_super) {
@@ -33,2 +29,20 @@ __extends(default_1, _super);
     }
+    /**
+     * resize方法会在宽高发生变化的情况下自动调用
+    */
+    default_1.prototype.resize = function () {
+        // Resize方法由子类选择实现，如果实现了，当Windows窗口大小变化时，将会调用resize方法
+        // console.log('resize');
+    };
+    /**
+     * init 方法会在build前自动调用
+    */
+    default_1.prototype.init = function () { };
+    /**
+     * sort方法会在 build前 或 update前 自动调用
+    */
+    default_1.prototype.sort = function () {
+        this.DATA = this.props.data;
+    };
+    //是否需要resize
     default_1.prototype._needResize = function () {
@@ -44,13 +58,4 @@ var root = document.getElementById(this.id);
     };
-    default_1.prototype.resize = function () {
-        // Resize方法由子类选择实现，如果实现了，当Windows窗口大小变化时，将会调用resize方法
-        // console.log('resize');
-    };
-    default_1.prototype.init = function () {
-    };
-    default_1.prototype.sort = function () {
-        this.DATA = this.props.data;
-    };
     default_1.prototype.componentWillMount = function () {
-        this.id = genId();
+        this.id = common_1.DefUtil.genId();
     };
@@ -89,2 +94,5 @@ default_1.prototype.componentDidMount = function () {
     };
+    /**
+     * 不要实现render方法
+    */
     default_1.prototype.render = function () {
@@ -91,0 +99,0 @@ return React.createElement("div", { id: this.id, className: "vap-chart" });

layouts/charts/interface.d.ts

@@ -7,4 +7,22 @@ export interface Item {
 }
+/**
+ * 通用的表格选项
+*/
 export interface ChartOpts {
+    /**
+     * 图形内的数据，需要以数组方式传入
+    */
     data: Item[];
+    /**
+     * 数据的显示模式，默认为数字(number)，可选： 美元数字(usd)，百分数(percent)，汉字(chinese)，带两位小数的(decimal)
+    */
+    format?: 'number' | 'usd' | 'percent' | 'chinese' | 'decimal';
+    /**
+     * 鼠标移动后的提示内容，需要返回内容。
+    */
+    tip?: (d: any) => string;
+    /**
+     * 点击事件
+    */
+    onClick?: Function;
 }
@@ -11,0 +29,0 @@ export interface BarConfig {

layouts/charts/LabelChart/index.d.ts

 import D3Chart from '../D3Chart';
 import { ChartOpts } from '../interface';
 export interface LabelOpts extends ChartOpts {
-    format?: 'number' | 'usd' | 'percent' | 'chinese' | 'decimal';
-    autoRun?: boolean;
-    onClick?: Function;
     labelField: string;
     valueField: string;
+    percent?: boolean;
 }
@@ -10,0 +8,0 @@ export default class  extends D3Chart<LabelOpts> {

layouts/charts/LabelChart/index.js

@@ -16,11 +16,13 @@ "use strict";
 var D3Chart_1 = require("../D3Chart");
-var Def = require("../common/DefUtil");
-var utils_1 = require("../../../../vap/utils");
-var Formats = {
-    number: function (from, to, p) { return Math.floor(from + p * (to - from)); },
-    usd: function (from, to, p) { return utils_1.Format.formatUSD(Math.floor(from + p * (to - from))); },
-    chinese: function (from, to, p) { return utils_1.Format.formatNumber(from + p * (to - from)); },
-    decimal: function (from, to, p) { return utils_1.Format.formatDecimal(from + p * (to - from)); },
-    percent: function (from, to, p) { return utils_1.Format.formatDecimal((from + p * (to - from)) * 100) + '%'; },
-};
+var common_1 = require("../common");
+/**
+ * 目前支持度：
+ * resize：不支持
+ * update: 支持
+ * tip提示: 支持
+ * click交互: 支持
+ *
+ * 其它说明：
+ * 最多支持 6 个label,6个以上暂不支持
+*/
 // 懒得写算法，目前最多支持6个label，写死，第三个参数以宽度为准，说明：LabelChart 请尽量保证窗口是一个正方形，宽度和高度都差不多为最好
@@ -62,3 +64,2 @@ var POS = {
 };
-var SPLIT = 4;
 var default_1 = /** @class */ (function (_super) {
@@ -68,3 +69,3 @@ __extends(default_1, _super);
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.format = Formats.number;
+        _this.format = null;
         _this.group = null;
@@ -82,7 +83,4 @@ return _this;
         this.SVG.attr('class', '_vc_label');
-        this.SVG.append('defs').html(Def.BuildShadow());
-        if (_.has(this.props, 'format') && _.has(Formats, this.props.format)) {
-            this.format = Formats[this.props.format];
-        }
-        // this.SVG.datum(this.DATA);
+        this.SVG.append('defs').html(common_1.DefUtil.BuildShadow());
+        this.format = common_1.Format.buildTransition(this.props.format);
         //超过1个Label时，绘制连接线
@@ -114,3 +112,6 @@ if (this.DATA.length > 1) {
         }
-        this.group = this.SVG.selectAll('g._item').data(this.DATA, function (d) { return d[labelField]; }).enter().append('g').attr('class', '_item');
+        this.group = this.SVG.selectAll('g._item')
+            .data(this.DATA, function (d) { return d[labelField]; }).enter()
+            .append('g')
+            .attr('class', '_item');
         this.group.classed('_item_cursor', _.has(this.props, 'onClick'));
@@ -137,20 +138,45 @@ if (_.has(this.props, 'onClick')) {
         // 自动运行，从0到数据
-        if (this.props.autoRun) {
-            valueLabel.text(0)
-                .on('start', function (d) {
-                var from = 0;
-                var to = parseFloat(d[valueField]);
-                d3.select(this).attr('last', function (d) { return d[valueField]; });
-                d3.active(this).tween('text', function () {
-                    var that = d3.select(this);
-                    return function (p) {
-                        that.text(format(from, to, p));
-                    };
-                });
+        // if (this.props.autoRun) {
+        valueLabel.text(0)
+            .transition()
+            .duration(2000)
+            .on('start', function (d) {
+            var from = 0;
+            var to = parseFloat(d[valueField]);
+            d3.select(this).attr('last', function (d) { return d[valueField]; });
+            d3.active(this).tween('text', function () {
+                var that = d3.select(this);
+                return function (p) {
+                    that.text(format(from, to, p));
+                };
             });
+        });
+        // } else {
+        //     valueLabel.text((d: any, i) => { return format(d[valueField], d[valueField], 1) })
+        //         .attr('last', d => d[valueField])
+        // }
+        this.group
+            .on('mouseover', function (d) { return common_1.ToolTip.show(_this.props.tip ? _this.props.tip(d) : "<h2>" + d[labelField] + "</h2><p class=\"vapfont\">" + d[valueField] + "</p>"); })
+            .on('mouseout', function () { return common_1.ToolTip.hide(); });
+        if (this.props.percent) {
+            var arc_1 = d3.arc();
+            var outerRadius_1 = 48;
+            var sum_1 = _.sumBy(this.DATA, valueField);
+            var self_1 = this;
+            this.group.append('path')
+                .attr('class', '_percent')
+                .attr('transform', function (d, i) { return "translate(" + coord[i][0] * _this.WIDTH + "," + coord[i][1] * _this.HEIGHT + ")"; })
+                .transition()
+                .duration(1000)
+                .attrTween("d", function (d) {
+                return function (t) {
+                    return arc_1({
+                        innerRadius: 0,
+                        outerRadius: outerRadius_1,
+                        startAngle: 0,
+                        endAngle: Math.PI * 2 * t * d[valueField] / sum_1
+                    });
+                };
+            });
         }
-        else {
-            valueLabel.text(function (d, i) { return format(d[valueField], d[valueField], 1); })
-                .attr('last', function (d) { return d[valueField]; });
-        }
     };
@@ -157,0 +183,0 @@ // 更新数据

layouts/charts/MapChart/index.js

@@ -231,3 +231,4 @@ "use strict";
                     height: '100%',
-                } }));
+                } }),
+            this.props.children);
     };
@@ -234,0 +235,0 @@ return default_1;

package.json

 {
   "name": "vap",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "vap",
@@ -5,0 +5,0 @@ "main": "index.js",

utils/Ajax.js

@@ -123,3 +123,3 @@ "use strict";
     }
-    //NProgress.start();
+    NProgress.start();
     // @ts-ignore
@@ -129,3 +129,3 @@ return fetch(url, newOptions)
         .then(function (response) {
-        // NProgress.done();
+        NProgress.done();
         return response.json();
@@ -132,0 +132,0 @@ });

utils/Renders.js

@@ -20,3 +20,3 @@ "use strict";
     var fn = function (str) {
-        return React.createElement("span", { className: className }, Format_1.default.formatString(str, len, hasDot));
+        return React.createElement("span", { className: className, title: str }, Format_1.default.formatString(str, len, hasDot));
     };
@@ -23,0 +23,0 @@ return fn;

No alert changes

Improved metrics

Total package byte prevSize

293695

increased by4.05%

Number of package files

121

increased by7.08%

Lines of code

7864

increased by4.32%

No dependency changes