vap - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

layouts/charts/BarChart/MutiTop.d.ts

@@ -24,2 +24,3 @@ import D3Chart from '../D3Chart';
     maxCount: number;
+    W: number;
     itemHeight: number;
@@ -29,4 +30,6 @@ init(): void;
     sort(): void;
+    _append(enter: any): void;
     build(): void;
+    _update(group: any): void;
     update(): void;
 }

layouts/charts/BarChart/MutiTop.js

@@ -16,7 +16,8 @@ "use strict";
 var _ = require("lodash");
-var utils_1 = require("../../../utils");
 var ToolTip_1 = require("../common/ToolTip");
 var CONFIG = {
     left: 10,
-    right: 10
+    right: 10,
+    lineHeight: 12,
+    margin: 8,
 };
@@ -41,2 +42,3 @@ /**
         _this.maxCount = 5;
+        _this.W = 0;
         _this.itemHeight = 40;
@@ -59,3 +61,2 @@ return _this;
         this.DATA.map(function (item) {
-            // item.__top = 0;
             var sum = 0;
@@ -74,19 +75,17 @@ _this.labelFields.map(function (label) {
         this.itemHeight = this.HEIGHT / this.DATA.length;
+        this.W = this.WIDTH - CONFIG.left - CONFIG.right - 12;
         var _a;
     };
-    default_1.prototype.build = function () {
+    default_1.prototype._append = function (enter) {
         var _this = this;
-        this.SVG.attr('class', '_vc_muti_bar');
-        var group = this.SVG.selectAll('g._item')
-            .data(this.DATA)
-            .enter()
+        var group = enter
             .append('g')
-            .attr('class', '_item')
+            .attr('class', '_item');
+        group.attr('transform', function (d, i) { return "translate(0," + _this.HEIGHT * 1.2 + ")"; })
+            .transition()
+            .duration(this.DURATION)
             .attr('transform', function (d, i) { return "translate(0," + _this.itemHeight * i + ")"; });
-        var textHeight = 12, lineHeight = 18, margin = 8;
-        var padding = (this.itemHeight - textHeight - lineHeight - margin) / 2;
-        var W = this.WIDTH - CONFIG.left - CONFIG.right;
-        var widthScala = d3.scaleLinear().domain([this.min, this.max]).range([0.4 * W, 0.95 * W]);
+        var widthScala = d3.scaleLinear().domain([this.min, this.max]).range([0.4 * this.W, 0.95 * this.W]);
         var _loop_1 = function (i) {
-            group.append('rect')
+            var item = group.append('rect')
                 .attr('class', "_compontent _compontent_" + i)
@@ -103,3 +102,7 @@ .attr('x', function (d) {
             })
-                .attr('y', padding + margin + textHeight)
+                .attr('y', this_1.itemHeight / 2 + CONFIG.margin / 2)
+                .attr('width', 0)
+                .attr('height', CONFIG.lineHeight);
+            item.transition()
+                .duration(this_1.DURATION)
                 .attr('width', function (d) {
@@ -109,5 +112,4 @@ var sum = d['__sum'];
                 return w * d[_this.labelFields[i]] / sum;
-            })
-                .attr('height', lineHeight)
-                .on('mouseover', function (d) {
+            });
+            item.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                    ");
@@ -117,3 +119,9 @@ }).on('mouseout', function (d) {
             });
+            if (this_1.props.onClick) {
+                item.on('click', function (d) {
+                    _this.props.onClick(d, _this.labelFields[i]);
+                });
+            }
         };
+        var this_1 = this;
         for (var i in this.labelFields) {
@@ -126,11 +134,65 @@ _loop_1(i);
             .attr('x', 0)
-            .attr('y', padding + textHeight);
+            .attr('y', this.itemHeight / 2 - CONFIG.margin / 2);
         group.append('text')
             .attr('class', '_value')
-            .text(function (d) { return utils_1.Format.formatUSD(d['__sum']); })
+            .text(function (d) { return _this.FORMAT(d['__sum']); })
             .attr('x', function (d) { return widthScala(d['__sum']); })
-            .attr('y', padding + textHeight);
+            .attr('y', this.itemHeight / 2 - CONFIG.margin / 2);
     };
+    default_1.prototype.build = function () {
+        var _this = this;
+        this.SVG.attr('class', '_vc_muti_bar');
+        var enter = this.SVG.selectAll('g._item')
+            .data(this.DATA, function (d) { return d[_this.props.groupLabel]; })
+            .enter();
+        this._append(enter);
+        // var legend  = this.SVG.append('g.legend')
+        //     .selectAll('rect._legend')
+        //     .data(this.props.labelFields)
+        //     .enter()
+        //     .append('rect')
+        //     .attr('class','_legend');
+    };
+    default_1.prototype._update = function (group) {
+        var _this = this;
+        group.transition().duration(this.DURATION)
+            .attr('transform', function (d, i) { return "translate(0," + _this.itemHeight * i + ")"; });
+        var widthScala = d3.scaleLinear().domain([this.min, this.max]).range([0.4 * this.W, 0.95 * this.W]);
+        var _loop_2 = function (i) {
+            group.select("rect._compontent_" + i)
+                .attr('x', function (d) {
+                var sum = d['__sum'];
+                var w = widthScala(sum);
+                var p = 0;
+                // @ts-ignore
+                for (var j = 0; j < i; j++) {
+                    p += d[_this.labelFields[j]];
+                }
+                return w * p / sum;
+            })
+                .attr('width', function (d) {
+                var sum = d['__sum'];
+                var w = widthScala(sum);
+                return w * d[_this.labelFields[i]] / sum;
+            });
+        };
+        for (var i in this.labelFields) {
+            _loop_2(i);
+        }
+        group.select('text._value')
+            .attr('class', '_value')
+            .text(function (d) { return _this.FORMAT(d['__sum']); })
+            .attr('x', function (d) { return widthScala(d['__sum']); });
+    };
     default_1.prototype.update = function () {
-        console.log(this.DATA);
+        var _this = this;
+        var group = this.SVG.selectAll('g._item')
+            .data(this.DATA, function (d) { return d[_this.props.groupLabel]; });
+        var enter = group.enter();
+        this._append(enter);
+        this._update(group);
+        //@ts-ignore
+        group.exit().transition().duration(this.DURATION)
+            .attr('transform', function (d, i) { return "translate(20," + -_this.itemHeight * 2 + ")"; })
+            .remove();
     };
@@ -137,0 +199,0 @@ return default_1;

layouts/charts/BarChart/Top2.d.ts

@@ -23,3 +23,2 @@ import D3Chart from '../D3Chart';
     itemHeight: number;
-    format: any;
     formatTransition: any;
@@ -26,0 +25,0 @@ widthScale: any;

layouts/charts/BarChart/Top2.js

@@ -39,3 +39,2 @@ "use strict";
         _this.itemHeight = 40;
-        _this.format = null;
         _this.formatTransition = null;
@@ -49,3 +48,2 @@ _this.widthScale = null;
             this.maxCount = this.props.maxCount;
-        this.format = common_1.Format.buildFormat(this.props.format);
         this.formatTransition = common_1.Format.buildTransition(this.props.format);
@@ -112,9 +110,7 @@ };
             .attr('class', '_value')
-            .text(function (d) { return _this.format(d[_this.props.valueField]); })
+            .text(function (d) { return _this.FORMAT(d[_this.props.valueField]); })
             .attr('x', 20 + this.W)
             .attr('y', this.itemHeight / 2 - 8);
-        var format = this.format;
         group.on('mouseover', function (d) {
-            console.log(d);
-            common_1.ToolTip.show("<h2>" + d[_this.props.labelField] + " : <small class=\"vapfont\">" + format(d[_this.props.valueField]) + "</small></h2>");
+            common_1.ToolTip.show("<h2>" + d[_this.props.labelField] + " : <small class=\"vapfont\">" + _this.FORMAT(d[_this.props.valueField]) + "</small></h2>");
         }).on('mouseout', function (d) {
@@ -158,3 +154,3 @@ common_1.ToolTip.hide();
         group.select('._value')
-            .text(function (d) { return _this.format(d[_this.props.valueField]); });
+            .text(function (d) { return _this.FORMAT(d[_this.props.valueField]); });
         // 改变中条颜色
@@ -161,0 +157,0 @@ group.select('._content')

layouts/charts/common/DefUtil.d.ts

 export default abstract class name {
+    /**
+     * 生成一个唯一ID
+    */
     static genId: () => string;
@@ -3,0 +6,0 @@ static BuildShadow: () => string;

layouts/charts/common/DefUtil.js

@@ -15,2 +15,5 @@ "use strict";
     }
+    /**
+     * 生成一个唯一ID
+    */
     name.genId = function () {
@@ -29,3 +32,3 @@ id++;
         // objectBoundingBox
-        return "<pattern id=\"_vc_bar_top2_image0\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"4\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_0.png\"  x=\"0\" y=\"0\" width=\"38\" height=\"8\"/>\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image1\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"4\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_1.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image2\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"4\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_2.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image3\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"4\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_3.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>";
+        return "<pattern id=\"_vc_bar_top2_image0\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"0\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_0.png\"  x=\"0\" y=\"0\" width=\"38\" height=\"8\"/>\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image1\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"0\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_1.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image2\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"0\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_2.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>\n                <pattern id=\"_vc_bar_top2_image3\" patternUnits=\"userSpaceOnUse\" width=\"38\" height=\"8\" x=\"0\" y=\"0\">\n                    <image xlink:href=\"/images/charts/_vc_top_bar_3.png\" x=\"0\" y=\"0\" width=\"38\" height=\"8\" />\n                </pattern>";
     };
@@ -32,0 +35,0 @@ return name;

layouts/charts/D3Chart.d.ts

@@ -8,2 +8,3 @@ /// <reference types="react" />
     loaded: boolean;
+    FORMAT: (val: any) => string | number;
     DATA: any;
@@ -10,0 +11,0 @@ SVG: d3.Selection<d3.BaseType, {}, HTMLElement, any>;

layouts/charts/D3Chart.js

@@ -23,2 +23,3 @@ "use strict";
         _this.loaded = false;
+        _this.FORMAT = common_1.Format.buildFormat('number');
         _this.DATA = null;
@@ -69,2 +70,5 @@ _this.SVG = d3.select('body');
         }
+        if (_.has(this.props, 'format')) {
+            this.FORMAT = common_1.Format.buildFormat(this.props.format);
+        }
         this.init();
@@ -71,0 +75,0 @@ this.SVG = d3.select(root).append('svg')

layouts/charts/LabelChart/index.d.ts

@@ -9,3 +9,2 @@ import D3Chart from '../D3Chart';
 export default class  extends D3Chart<LabelOpts> {
-    format: any;
     formatTransition: any;
@@ -12,0 +11,0 @@ group: any;

layouts/charts/LabelChart/index.js

@@ -68,3 +68,2 @@ "use strict";
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.format = null;
         _this.formatTransition = null;
@@ -79,3 +78,2 @@ _this.group = null;
         this.formatTransition = common_1.Format.buildTransition(this.props.format);
-        this.format = common_1.Format.buildFormat(this.props.format);
     };
@@ -90,3 +88,3 @@ default_1.prototype.build = function () {
         sum += 0.01; //防止除0
-        console.log(formatTransition);
+        // console.log(formatTransition);
         this.SVG.attr('class', '_vc_label');
@@ -159,3 +157,3 @@ this.SVG.append('defs').html(common_1.DefUtil.BuildShadow());
             .on('mouseover', function (d) { return common_1.ToolTip.show(_this.props.tip ? _this.props.tip(d) :
-            "<h2>" + d[labelField] + "</h2>\n                <p class=\"vapfont\">" + _this.format(d[valueField]) + "  " + (_this.props.percent ? '(' + utils_1.Format.formatDecimal(d[valueField] / sum * 100) + '%)' : '') + "</p>\n                "); })
+            "<h2>" + d[labelField] + "</h2>\n                <p class=\"vapfont\">" + _this.FORMAT(d[valueField]) + " &nbsp;&nbsp; " + (_this.props.percent ? '(<span class="high">' + utils_1.Format.formatDecimal(d[valueField] / sum * 100) + '%</span>)' : '') + "</p>\n                "); })
             .on('mouseout', function () { return common_1.ToolTip.hide(); });
@@ -162,0 +160,0 @@ if (this.props.percent) {

layouts/display/Page/Panel.js

@@ -75,3 +75,2 @@ "use strict";
         var className = ["vap-col"];
-        console.log(this.props);
         if (_.has(this.props, 'title')) {
@@ -78,0 +77,0 @@ if (_.has(this.props, 'icon')) {

layouts/screen/CountUp/index.js

@@ -95,3 +95,3 @@ "use strict";
             .on('start', function () {
-            console.log('start');
+            // console.log('start');
             d3.active(this).tween('text', function () {
@@ -98,0 +98,0 @@ var that = d3.select(this);

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276915

increased by0.99%

Lines of code

7142

increased by0.95%

No dependency changes