vap-visual - npm Package Compare versions

Comparing version 0.3.8 to 0.3.9

_components/DefUtil.js

@@ -24,10 +24,17 @@ "use strict";
 }
-var COLOR_SIZE = parseInt(window.getComputedStyle(document.body).getPropertyValue('--v-colors-length').trim()) + 1;
-var RANGE = d3.range(0, COLOR_SIZE);
-var slash = function () {
-    var slashs = DEFS.selectAll('pattern.fill-slash').data(RANGE)
-        .enter()
-        .append('pattern')
+var COLOR_s = parseInt(window.getComputedStyle(document.body).getPropertyValue('--v-colors-length').trim()) + 1;
+var RANGE = d3.range(0, COLOR_s);
+var slash = function (s) {
+    if (s === void 0) { s = 6; }
+    // const p = `M ${s / 4},0 l ${s / 2},${s} M ${-s / 4},0 l ${s / 2},${s} M ${s * 3 / 4},0 l ${s / 2},${s}`;
+    var p = "M 0," + s + " l " + s + "," + -s + " M " + -s / 4 + "," + s / 4 + " l " + s / 2 + "," + -s / 2 + " M " + 3 / 4 * s + "," + 5 / 4 * s + " l " + s / 2 + "," + -s / 2;
+    // const p = `M 0,${3 / 4 * s} l ${s},${-s / 2} M 0,${s / 4} l ${s},${-s / 2} M 0,${s * 5 / 4} l ${s},${-s / 2}`;
+    // const p = `M 0,${-s / 4} l ${s},${s / 2}M 0,${s / 4} l ${s},${s / 2} M 0,${s * 3 / 4} l ${s},${s / 2}`;
+    // const p = `M 0,0 l ${s},${s} M ${-s / 4},${3 / 4 * s} l ${s / 2},${s / 2} M ${s * 3 / 4},${-s / 4} l ${s / 2},${s / 2}`;
+    // const p = `M ${-s / 4},0 l ${s / 2},${s} M ${s / 4},0 l ${s / 2},${s} M ${s * 3 / 4},0 l ${s / 2},${s}`;
+    var container = DEFS.selectAll('g.__slashes').data(['', '-hover']).enter().append('g').attr('class', '__slashes');
+    var pattern = container.selectAll('pattern').data(function (d) { return RANGE.map(function () { return d; }); }).join('pattern');
+    pattern
         .classed('fill-slash', true)
-        .attr('id', function (d) { return d < 0 ? 'fill-slash' : "fill-slash-" + d; })
+        .attr('id', function (d, i) { return "fill-slash-" + i + d; })
         .attr('patternContentUnits', 'userSpaceOnUse')
@@ -37,13 +44,12 @@ .attr('patternUnits', 'userSpaceOnUse')
         .attr('y', 0)
-        .attr('width', 24)
-        .attr('height', 24);
-    slashs.html(" \n        <rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" ></rect>\n        <line x1=\"0\" y1=\"8\" x2=\"8\" y2=\"0\" ></line>\n        <line x1=\"0\" y1=\"16\" x2=\"16\" y2=\"0\" ></line>\n        <line x1=\"0\" y1=\"24\" x2=\"24\" y2=\"0\" ></line>\n        <line x1=\"8\" y1=\"24\" x2=\"24\" y2=\"8\"  ></line>\n        <line x1=\"16\" y1=\"24\" x2=\"24\" y2=\"16\"  ></line>\n    ");
+        .attr('width', s)
+        .attr('height', s);
+    pattern.html("<rect x=\"0\" y=\"0\" width=\"" + s + "\" height=\"" + s + "\" /><path d=\"" + p + "\"></path>");
 };
 var linear = function () {
-    var linear = DEFS.selectAll('linearGradient.fill-linear')
-        .data(RANGE)
-        .enter()
-        .append('linearGradient')
+    var container = DEFS.selectAll('g.__linears').data(['', '-hover']).enter().append('g').attr('class', '__linears');
+    var gradient = container.selectAll('linearGradient').data(function (d) { return RANGE.map(function () { return d; }); }).join('linearGradient');
+    gradient
         .classed('fill-linear', true)
-        .attr('id', function (d) { return d < 0 ? 'fill-linear' : "fill-linear-" + d; })
+        .attr('id', function (d, i) { return "fill-linear-" + i + d; })
         .attr('x1', '0%')
@@ -53,25 +59,24 @@ .attr('y1', '100%')
         .attr('y2', '0%');
-    linear.html("<stop offset=\"0%\" class=\"linear-start\"></stop><stop offset=\"100%\" class=\"linear-stop\"></stop>");
+    gradient.html("<stop offset=\"0%\" class=\"linear-start\"></stop><stop offset=\"100%\" class=\"linear-stop\"></stop>");
 };
 var hlinear = function () {
-    var linear = DEFS.selectAll('linearGradient.fill-hlinear')
-        .data(RANGE)
-        .enter()
-        .append('linearGradient')
+    var container = DEFS.selectAll('g.__hlinears').data(['', '-hover']).enter().append('g').attr('class', '__hlinears');
+    var gradient = container.selectAll('linearGradient').data(function (d) { return RANGE.map(function () { return d; }); }).join('linearGradient');
+    gradient
         .classed('fill-hlinear', true)
-        .attr('id', function (d) { return d < 0 ? 'fill-hlinear' : "fill-hlinear-" + d; })
+        .attr('id', function (d, i) { return "fill-hlinear-" + i + d; })
         .attr('x1', '0%')
-        .attr('y1', '0%')
-        .attr('x2', '100%')
+        .attr('y1', '100%')
+        .attr('x2', '0%')
         .attr('y2', '0%');
-    linear.html("<stop offset=\"0%\" class=\"linear-start\"></stop><stop offset=\"100%\" class=\"linear-stop\"></stop>");
+    gradient.html("<stop offset=\"0%\" class=\"linear-start\"></stop><stop offset=\"100%\" class=\"linear-stop\"></stop>");
 };
 // 密级恐惧症 DensePoint
-var grain = function () {
-    var grains = DEFS.selectAll('pattern.fill-grain')
-        .data(RANGE)
-        .enter()
-        .append('pattern')
+var grain = function (s) {
+    if (s === void 0) { s = 4; }
+    var container = DEFS.selectAll('g.__grains').data(['', '-hover']).enter().append('g').attr('class', '__grains');
+    var pattern = container.selectAll('pattern').data(function (d) { return RANGE.map(function () { return d; }); }).join('pattern');
+    pattern
         .classed('fill-grain', true)
-        .attr('id', function (d) { return d < 0 ? 'fill-grain' : "fill-grain-" + d; })
+        .attr('id', function (d, i) { return "fill-grain-" + i + d; })
         .attr('patternContentUnits', 'userSpaceOnUse')
@@ -81,14 +86,20 @@ .attr('patternUnits', 'userSpaceOnUse')
         .attr('y', 0)
-        .attr('width', 4)
-        .attr('height', 4);
-    grains.html("<rect x=\"0\" y=\"0\" width=\"4\" height=\"4\" /><path d=\"M1 3h1v1H1V3zm2-2h1v1H3V1z\" />");
+        .attr('width', s)
+        .attr('height', s);
+    pattern.html("<rect x=\"0\" y=\"0\" width=\"" + s + "\" height=\"" + s + "\" /><path d=\"M1 3h1v1H1V3zm2-2h1v1H3V1z\" />");
 };
 //grid 网格
-var grid = function () {
-    var grids = DEFS.selectAll('pattern.fill-grid')
-        .data(RANGE)
-        .enter()
-        .append('pattern')
+var grid = function (s) {
+    if (s === void 0) { s = 5; }
+    var path = d3.path();
+    path.moveTo(0, s / 2);
+    path.lineTo(s, s / 2);
+    path.moveTo(s / 2, 0);
+    path.lineTo(s / 2, s);
+    var p = path.toString();
+    var container = DEFS.selectAll('g.__grids').data(['', '-hover']).enter().append('g').attr('class', '__grids');
+    var pattern = container.selectAll('pattern').data(function (d) { return RANGE.map(function () { return d; }); }).join('pattern');
+    pattern
         .classed('fill-grid', true)
-        .attr('id', function (d) { return d < 0 ? 'fill-grid' : "fill-grid-" + d; })
+        .attr('id', function (d, i) { return "fill-grid-" + i + d; })
         .attr('patternContentUnits', 'userSpaceOnUse')
@@ -98,21 +109,12 @@ .attr('patternUnits', 'userSpaceOnUse')
         .attr('y', 0)
-        .attr('width', 4)
-        .attr('height', 4);
-    grids.html("\n    <rect x=\"0\" y=\"0\" width=\"4\" height=\"4\" />\n    <line x1=\"0\" y1=\"2\" x2=\"4\" y2=\"2\" ></line>\n    <line x1=\"2\" y1=\"0\" x2=\"2\" y2=\"4\" ></line>\n    ");
+        .attr('width', s)
+        .attr('height', s);
+    pattern.html("<rect x=\"0\" y=\"0\" width=\"" + s + "\" height=\"" + s + "\" /><path d=\"" + p + "\"></path>");
 };
 slash();
 linear();
-hlinear();
 grain();
 grid();
+hlinear();
 exports.def = function (id, html) {
 };
-// <filter id="metaballs">
-// <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
-// <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -10" result="contrast"></feColorMatrix>
-// <feBlend in="SourceGraphic" in2="contrast"></feBlend>
-// </filter>
-// 1 0 0 0 0
-// 0 1 0 0 0
-// 0 0 1 0 0
-// 0 0 0 50 -10

Bars/Bar/index.d.ts

 import * as d3 from 'd3';
 import { Visual } from '../../Visual';
-import { BarOpts } from '../interface';
+import { BarOpts, BAR_TYPE } from '../interface';
 /**
@@ -12,5 +12,5 @@ * 普通 Bar 自定义支持情况
     protected __ClassName: string;
-    private barType;
-    private itemWidth;
-    private topValue;
+    protected barType: BAR_TYPE;
+    protected itemWidth: number;
+    protected topValue: boolean;
     protected init(): void;
@@ -17,0 +17,0 @@ protected events(): void;

Bars/Hours/index.d.ts

 import { Bar } from '../Bar';
 export declare class Hours extends Bar {
     init(): void;
+    protected events(): void;
     /**
@@ -5,0 +6,0 @@ * 说明  HourTrend 完全继续成 BarChart，仅改写sort 方法（使用方法与Bar完全一致）

Bars/Hours/index.js

@@ -30,2 +30,4 @@ "use strict";
 var _utils_1 = require("../../_utils");
+var _components_1 = require("../../_components");
+var Event = _components_1.EventUtil.Event, EVENT_ITEM_HOVER = _components_1.EventUtil.EVENT_ITEM_HOVER, EVENT_ITEM_UNHOVER = _components_1.EventUtil.EVENT_ITEM_UNHOVER, EVENT_ITEM_CLICK = _components_1.EventUtil.EVENT_ITEM_CLICK, EVENT_OPTION_CHANGED = _components_1.EventUtil.EVENT_OPTION_CHANGED;
 var TimeFormat = ['凌晨0点', '凌晨1点', '凌晨2点', '凌晨3点', '凌晨4点', '凌晨5点', '上午6点', '上午7点', '上午8点', '上午9点', '上午10点', '上午11点', '中午12点', '下午1点', '下午2点', '下午3点', '下午4点', '下午5点', '下午6点', '晚上7点', '晚上8点', '晚上9点', '晚上10点', '晚上11点'];
@@ -53,2 +55,68 @@ var Hours = /** @class */ (function (_super) {
     };
+    Hours.prototype.events = function () {
+        var _this = this;
+        // 提示
+        if (this.props.tip !== null) {
+            Event.on(EVENT_ITEM_HOVER + "." + this.id, function (state, d, i) {
+                var data = d.data;
+                if (typeof _this.props.tip === 'function') {
+                    _components_1.ToolTip.show(_this.props.tip(d, i));
+                    return;
+                }
+                _components_1.ToolTip.show("<div class=\"_tip\">\n                <h2><span>" + _this.state.FormatLabel(data[_this.props.labelField], data) + "</span></h2>\n                <p class=\"_item\"><span class=\"_label\">" + (_this.props.valueLabel || '') + "  :  </span><span class=\"_value\">" + _this.state.FormatValue(data[_this.props.valueField]) + "</span></p>\n            </div>");
+            });
+        }
+        // 点击事件
+        if (this.props.onClick) {
+            Event.on(EVENT_ITEM_CLICK + "." + this.id, function (state, d, i) {
+                var data = d.data;
+                if (_this.props.clickSelect) {
+                    if (data[_this.props.labelField] == _this.state.SELECTED) {
+                        _this.props.onClick(null);
+                        _this.state.SELECTED = null;
+                    }
+                    else {
+                        _this.props.onClick(data);
+                        _this.state.SELECTED = data[_this.props.labelField];
+                    }
+                    _this.ROOT.classed('_root_selected', _this.state.SELECTED ? true : false);
+                    _this.ROOT.selectAll('g._item').classed('_item_selected', false);
+                    if (_this.state.SELECTED) {
+                        _this.ROOT.select('g._item_' + i).classed('_item_selected', true);
+                    }
+                }
+                else {
+                    _this.props.onClick(data, i);
+                }
+            });
+        }
+        // porps 参数被改变
+        Event.on(EVENT_OPTION_CHANGED + "." + this.id, function (state, conf, mustUpdate) {
+            console.debug("-------------------- Bar : Event : setOption --------------------");
+            var needUpdate = false;
+            if (_utils_1.DataUtil.has(conf, 'barType') && _this.barType != conf.barType) {
+                _this.ROOT.classed("_bar_" + _this.barType, false).classed("_bar_" + conf.barType, true);
+                needUpdate = true;
+                _this.barType = conf.barType;
+                _this.ROOT.selectAll('g._item').remove();
+            }
+            if (_utils_1.DataUtil.has(conf, 'itemWidth')) {
+                needUpdate = true;
+                _this.itemWidth = conf.itemWidth;
+            }
+            if (_utils_1.DataUtil.has(conf, 'topValue') && _this.topValue != conf.topValue) {
+                needUpdate = true;
+                _this.topValue = conf.topValue;
+                _this.ROOT.selectAll('g._item').remove();
+            }
+            if (needUpdate || mustUpdate) {
+                console.warn("-------------------- Bar : Updata / setOption " + needUpdate + " " + mustUpdate + " --------------------");
+                // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
+                _this.update();
+            }
+            else {
+                console.warn('no need update');
+            }
+        });
+    };
     /**
@@ -55,0 +123,0 @@ * 说明  HourTrend 完全继续成 BarChart，仅改写sort 方法（使用方法与Bar完全一致）

package.json

@@ -1,1 +0,1 @@
-{"name":"vap-visual","version":"0.3.8","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da"}
+{"name":"vap-visual","version":"0.3.9","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da"}

No alert changes

Improved metrics

Total package byte prevSize

576774

increased by0.91%

Lines of code

13216

increased by0.55%

Worsened metrics

Number of downloads

2

decreased by-95%

No dependency changes