vap-visual - npm Package Compare versions

Comparing version 0.3.13 to 0.3.14

_components/DefUtil.js

@@ -27,3 +27,2 @@ "use strict";
         var COLOR_s = parseInt(window.getComputedStyle(document.body).getPropertyValue('--v-colors-length').trim()) + 1;
-        console.log(COLOR_s);
         var RANGE = d3.range(0, COLOR_s);
@@ -30,0 +29,0 @@ var slash = function (s) {

_components/Legend/_LedendDrawer.js

@@ -6,2 +6,4 @@ "use strict";
 var Event_1 = require("../Event");
+var FIXED = 12;
+var MARGIN = 6;
 var LegendDrawer = /** @class */ (function () {
@@ -59,31 +61,36 @@ function LegendDrawer(visual, legend) {
         var _a = this.props, width = _a.width, inner = _a.inner, cols = _a.cols;
-        var HEIGHT = this.props.mode == 'simple' ? 24 : 40;
+        var HEIGHT = this.props.mode == 'simple' ? 24 : 42;
+        var PADDING = 3;
         var layout = _utils_1.DataUtil.merge({}, state.LAYOUT);
         var ui = { x: 0, y: 0, w: 0, h: 0 };
         var WIDTH = width * cols;
+        var SPLIT_H = state.WIDTH - layout.x - layout.w;
+        var SPLIT_V = state.HEIGHT - layout.y - layout.h;
         switch (this.props.postion) {
             case 'l':
             case 'lt':
-                ui.x = layout.x == 0 ? 12 : layout.x;
-                ui.y = layout.y == 0 ? 12 : layout.y;
+                ui.x = layout.x == 0 ? FIXED : layout.x;
+                ui.y = (layout.y == 0 ? FIXED : layout.y) - PADDING;
                 ui.w = WIDTH;
                 ui.h = layout.h;
-                layout.x = layout.x + WIDTH - inner;
-                layout.w = layout.w - WIDTH + inner;
+                layout.x = layout.x + WIDTH - inner - SPLIT_H;
+                layout.w = layout.w - WIDTH + inner + SPLIT_H;
                 break;
             case 'r':
             case 'rt':
-                ui.x = layout.x + layout.w - WIDTH;
-                ui.y = layout.y == 0 ? 12 : layout.y;
+                ui.x = layout.x + layout.w - WIDTH + SPLIT_H / 2;
+                ;
+                ui.y = (layout.y == 0 ? FIXED : layout.y) - PADDING;
                 ui.w = WIDTH;
                 ui.h = layout.h;
-                layout.w = layout.w - WIDTH + inner;
+                layout.w = layout.w - WIDTH + inner - SPLIT_H / 2;
+                ;
                 break;
             case 't':
-                ui.x = layout.x == 0 ? 12 : layout.x;
-                ui.y = layout.y == 0 ? 12 : layout.y;
                 ui.w = layout.w;
                 ui.h = HEIGHT;
-                layout.y = layout.y + HEIGHT + ui.y - inner;
-                layout.h = layout.h - HEIGHT - ui.y + inner;
+                ui.x = layout.x == 0 ? FIXED : layout.x;
+                ui.y = SPLIT_V / 2 || MARGIN;
+                layout.y = HEIGHT + ui.y * 2 - inner;
+                layout.h = layout.h - HEIGHT + inner;
                 break;
@@ -93,9 +100,9 @@ case 'b':
                 ui.h = HEIGHT;
-                ui.x = layout.x == 0 ? 12 : layout.x;
-                ui.y = layout.y + layout.h - (state.HEIGHT <= (ui.y + ui.h) ? 12 : 0);
-                layout.h = layout.h - ui.h;
+                ui.x = layout.x == 0 ? FIXED : layout.x;
+                ui.y = state.HEIGHT - HEIGHT;
+                layout.h = layout.h - ui.h + SPLIT_V + inner;
                 break;
             case 'lb':
-                ui.x = layout.x == 0 ? 12 : layout.x;
-                ui.y = layout.y + layout.h - ui.h - (state.HEIGHT <= (ui.y + ui.h) ? 12 : 0);
+                ui.x = layout.x == 0 ? FIXED : layout.x;
+                ui.y = layout.y + layout.h - HEIGHT + SPLIT_V / 2;
                 ui.w = WIDTH;
@@ -107,7 +114,8 @@ ui.h = -ui.h;
             case 'rb':
-                ui.x = layout.x + layout.w - WIDTH;
-                ui.y = layout.y + layout.h - ui.h - (state.HEIGHT <= (ui.y + ui.h) ? 12 : 0);
+                ui.x = layout.x + layout.w - WIDTH + SPLIT_H / 2;
+                // ui.y = layout.y + layout.h - ui.h - (state.HEIGHT <= (ui.y + ui.h) ? 12 : 0);
+                ui.y = layout.y + layout.h - HEIGHT + SPLIT_V / 2;
                 ui.w = WIDTH;
                 ui.h = -layout.h;
-                layout.w = layout.w - WIDTH + inner;
+                layout.w = layout.w - WIDTH + inner - SPLIT_H / 2;
                 break;
@@ -114,0 +122,0 @@ }

_components/Legend/ItemDrawers/PercentDrawer.js

@@ -5,4 +5,5 @@ "use strict";
 var PathUtil_1 = require("../../PathUtil");
-var HEIGHT = 40;
-var MIN_WIDTH = 120;
+var HEIGHT = 42;
+var REALLY = 36;
+var PADDING_TOP = (HEIGHT - REALLY) / 2;
 var getStart = function (legend, layout, rows, cols, width, i) {
@@ -16,16 +17,16 @@ var postion = legend.postion, inner = legend.inner;
         case 'lt':
-            return (cidx - cols) * width + " ," + ridx * HEIGHT;
+            return (cidx - cols) * width + " ," + (ridx * HEIGHT + PADDING_TOP);
         case 'r':
         case 'rt':
-            return inner + (cidx + cols) * width + " ," + ridx * HEIGHT;
+            return inner + (cidx + cols) * width + " ," + (ridx * HEIGHT + PADDING_TOP);
         case 't':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + "," + HEIGHT * (ridx - rows - 1);
+            return diff + cidx * width + "," + (HEIGHT * (ridx - rows - 1) + PADDING_TOP);
         case 'b':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + "," + HEIGHT * (ridx + 1);
+            return diff + cidx * width + "," + (HEIGHT * (ridx + 1) + PADDING_TOP);
         case 'lb':
-            return -inner - (cols - cidx) * width + "," + (ridx - rows) * HEIGHT;
+            return -inner - (cols - cidx) * width + "," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP);
         case 'rb':
-            return inner + inner + (cidx + cols) * width + "," + (ridx - rows) * HEIGHT;
+            return inner + inner + (cidx + cols) * width + "," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP);
         default:
@@ -42,16 +43,16 @@ return '0,0';
         case 'lt':
-            return width * cidx + " ," + ridx * HEIGHT + " ";
+            return width * cidx + " ," + (ridx * HEIGHT + PADDING_TOP) + " ";
         case 'r':
         case 'rt':
-            return width * cidx + " ," + ridx * HEIGHT + " ";
+            return width * cidx + " ," + (ridx * HEIGHT + PADDING_TOP) + " ";
         case 't':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + ", " + HEIGHT * ridx;
+            return diff + cidx * width + ", " + (HEIGHT * ridx + PADDING_TOP);
         case 'b':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + ", " + HEIGHT * (ridx - rows);
+            return diff + cidx * width + ", " + (HEIGHT * (ridx - rows + 1) + PADDING_TOP);
         case 'lb':
-            return width * cidx + " ," + (ridx - rows) * HEIGHT + " ";
+            return width * cidx + " ," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP) + " ";
         case 'rb':
-            return width * cidx + "  ," + (ridx - rows) * HEIGHT + " ";
+            return width * cidx + "  ," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP) + " ";
         default:
@@ -105,3 +106,3 @@ return '0,0';
         .attr('width', itemWidth - 4)
-        .attr('height', HEIGHT - 4);
+        .attr('height', REALLY);
     enter.append('path')
@@ -108,0 +109,0 @@ .attr('class', '_legend_check')

_components/Legend/ItemDrawers/SimpleDrawer.js

@@ -6,3 +6,4 @@ "use strict";
 var HEIGHT = 24;
-var MIN_WIDTH = 80;
+var REALLY = 18;
+var PADDING_TOP = (HEIGHT - REALLY) / 2;
 var getStart = function (legend, layout, rows, cols, width, i) {
@@ -16,16 +17,16 @@ var postion = legend.postion, inner = legend.inner;
         case 'lt':
-            return (cidx - cols) * width + " ," + ridx * HEIGHT;
+            return (cidx - cols) * width + " ," + (ridx * HEIGHT + PADDING_TOP);
         case 'r':
         case 'rt':
-            return inner + (cidx + cols) * width + " ," + ridx * HEIGHT;
+            return inner + (cidx + cols) * width + " ," + (ridx * HEIGHT + PADDING_TOP);
         case 't':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + "," + HEIGHT * (ridx - rows - 1);
+            return diff + cidx * width + "," + (HEIGHT * (ridx - rows - 1) + PADDING_TOP);
         case 'b':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + "," + HEIGHT * (ridx + 1);
+            return diff + cidx * width + "," + (HEIGHT * (ridx + 1) + PADDING_TOP);
         case 'lb':
-            return -inner - (cols - cidx) * width + "," + (ridx - rows) * HEIGHT;
+            return -inner - (cols - cidx) * width + "," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP);
         case 'rb':
-            return inner + inner + (cidx + cols) * width + "," + (ridx - rows) * HEIGHT;
+            return inner + inner + (cidx + cols) * width + "," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP);
         default:
@@ -42,16 +43,16 @@ return '0,0';
         case 'lt':
-            return width * cidx + " ," + ridx * HEIGHT + " ";
+            return width * cidx + " ," + (ridx * HEIGHT + PADDING_TOP) + " ";
         case 'r':
         case 'rt':
-            return width * cidx + " ," + ridx * HEIGHT + " ";
+            return width * cidx + " ," + (ridx * HEIGHT + PADDING_TOP) + " ";
         case 't':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + ", " + HEIGHT * ridx;
+            return diff + cidx * width + ", " + (HEIGHT * ridx + PADDING_TOP);
         case 'b':
             diff = (layout.w + layout.x - cols * width) / 2;
-            return diff + cidx * width + ", " + HEIGHT * (ridx - rows);
+            return diff + cidx * width + ", " + (HEIGHT * (ridx - rows + 1) + PADDING_TOP);
         case 'lb':
-            return width * cidx + " ," + (ridx - rows) * HEIGHT + " ";
+            return width * cidx + " ," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP) + " ";
         case 'rb':
-            return width * cidx + "  ," + (ridx - rows) * HEIGHT + " ";
+            return width * cidx + "  ," + ((ridx - rows + 1) * HEIGHT + PADDING_TOP) + " ";
         default:
@@ -58,0 +59,0 @@ return '0,0';

_components/Legend/LabelLegend.js

@@ -87,3 +87,2 @@ "use strict";
                 state.legend.CHECKED_IDX.splice(idx, 1);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
             }
@@ -93,5 +92,10 @@ else {
                 state.legend.CHECKED_IDX.push(i);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i);
             }
             Event_1.Event.call(Event_1.EVENT_LEGEND_SELECTED + "." + _this.visual.id, d, i);
+            window.setTimeout(function () {
+                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
+                if (idx < 0) {
+                    window.setTimeout(function () { return Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i); }, 5);
+                }
+            }, 5);
         });
@@ -98,0 +102,0 @@ enter.on('mouseover', function (d, i) {

_components/Legend/SeriresLegend.js

@@ -109,3 +109,3 @@ "use strict";
                 state.legend.CHECKED_IDX.splice(idxI, 1);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
+                // Event.call(`${EVENT_LEGEND_UNHOVER}.${this.visual.id}`, d, i)
             }
@@ -116,5 +116,11 @@ else {
                 state.legend.CHECKED_IDX.sort(d3.ascending);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i);
+                // Event.call(`${EVENT_LEGEND_HOVER}.${this.visual.id}`, d, i);
             }
             Event_1.Event.call(Event_1.EVENT_LEGEND_SELECTED + "." + _this.visual.id, d, i);
+            window.setTimeout(function () {
+                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
+                if (idx < 0) {
+                    window.setTimeout(function () { return Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i); }, 5);
+                }
+            }, 5);
         });
@@ -121,0 +127,0 @@ enter.on('mouseover', function (d, i) {

_components/Legend/ValueLegend.js

@@ -79,3 +79,2 @@ "use strict";
         }
-        var valueLabel = props.valueLabel;
         var enter = DrawUtil_1.drawLegend(this.container, this.layout, this.props, state);
@@ -91,3 +90,2 @@ enter.on('click', function (d, i) {
                 state.legend.CHECKED_IDX.splice(idx, 1);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
             }
@@ -97,5 +95,10 @@ else {
                 state.legend.CHECKED_IDX.push(i);
-                Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i);
             }
             Event_1.Event.call(Event_1.EVENT_LEGEND_SELECTED + "." + _this.visual.id, d, i);
+            window.setTimeout(function () {
+                Event_1.Event.call(Event_1.EVENT_LEGEND_UNHOVER + "." + _this.visual.id, d, i);
+                if (idx < 0) {
+                    window.setTimeout(function () { return Event_1.Event.call(Event_1.EVENT_LEGEND_HOVER + "." + _this.visual.id, d, i); }, 5);
+                }
+            }, 5);
         });
@@ -102,0 +105,0 @@ enter.on('mouseover', function (d, i) {

_utils/GlobalUtil.js

@@ -8,3 +8,2 @@ "use strict";
     prefix: '',
-    className: '',
     duration: 666,
@@ -11,0 +10,0 @@ maxcount: 10,

interface.d.ts

 /**
+ * @private
+ * 图形展示
  * 展示空间
@@ -11,25 +13,45 @@ */
 /**
- * | 图例类型 | 显示标题 | 显示值 | 图例 |
- * |---|---|---|
- * | none | - | - | |
- * | label | label labelFormat | value valueFormat | Pie |
- * | label-fixed | label labelFormat | value valueFormat | FixedPie |
- * | labels | label labelFomat | value[] valueLabels[] | Radar |
- * | value | valueLabel[] | value[] | MultiBar HMulitBar Histrogarm DateTrend |
+ * 图形离容器的边距
 */
 export declare type Grid = {
+    /**
+     * 上边距
+     */
     top?: number;
+    /**
+     * 左边距
+     */
     left?: number;
+    /**
+     * 右边距
+     */
     right?: number;
+    /**
+     * 下边距
+     */
     bottom?: number;
 };
+/**
+ * 所有图形全局默认设置
+*/
 export declare type GLOBAL_CONFIG = {
     /**
-     *
+     * 前缀，用于自定义产品
     */
     prefix?: string;
-    className?: string;
+    /**
+     * 过渡时间
+    */
     duration?: number;
+    /**
+     * 最大数量
+    */
     maxcount?: number;
+    /**
+     * 边距设置
+    */
     grid?: Grid;
+    /**
+     * 提示设置
+    */
     tip?: {
@@ -41,4 +63,29 @@ delay?: number;
 };
+/**
+ * @private
+ * x/y 轴的文字显示模式
+ *
+ * common  :  普通
+ * inside  :  显示在内部（Y轴不支持）
+ * rotate  :  旋转一定角度
+ * coord   :  显示刻度线（X轴不支持）
+*/
 export declare type AXIS_MODE = 'common' | 'inside' | 'rotate' | 'coord';
+/**
+ * 数据格式化的形式，通过对 (valueField) 进行格式化
+ *
+ * default :  不处理                       比如  1234567.890 => 1234567.890
+ * number  :  格式化为整数（舍弃小数点）     比如  1234567.890 => 1234567
+ * usd     :  以3位一逗号的格式             比如  1234567.890 => 1,234,567.890
+ * percent :  将会加一个百分                比如  0.3456 => 34.56%
+ * decimal :  保留两位小数                  比如  1234567.890 => 1234567.89
+ * size    :  格式化为容量 单位为byte        比如  1234567.890 => 1.18MB
+ *
+ * 也可以自定义方法，返回一个 string 类型
+*/
 export declare type VALUE_FORMAT = 'default' | 'number' | 'usd' | 'percent' | 'chinese' | 'decimal' | 'size' | ((string: any) => string);
+/**
+ * 图形构造过程中的事件
+ * 用于扩展，说明：暂未开放
+*/
 export declare type VISUAL_EVENT = 'init' | 'beforeRender' | 'afterRender' | 'beforeUpdate' | 'afterUpdate' | 'beforeDestory' | 'resize';
@@ -97,9 +144,3 @@ /**
 /**
- *
- * Mark 标记。
- * 标记最高、最低、平均水平、中位数水平。
- *
- *
- * line: 标记线
- *
+ * 图例的配置
 */
@@ -152,17 +193,18 @@ export interface Legend {
 }
+/**
+ * 数据排序，说明：
+ * 一般情况下，会默认使用 valueField/desc 的方式进行排序，每种图形具体默认排序方式不同。
+ * 如果不希望对数据进行排序，可以使用 sort: false
+*/
 export interface Sort {
+    /**
+     * 排序的字段
+    */
     order: string;
+    /**
+     * asc : 正序
+     * desc : 倒序 (默认)
+    */
     by?: 'asc' | 'desc';
 }
-export interface Text {
-    x: number;
-    y: number;
-    className?: string;
-    text: string;
-}
-export interface TipConfig {
-    width: number;
-    labelWidth: number;
-    fn: Function;
-}
 /**
@@ -312,2 +354,3 @@ * 可视化通用参数
 /**
+ * @private
  * 图表的状态
@@ -341,2 +384,6 @@ */
 }
+/**
+ * @private
+ *
+*/
 declare type LegendItem = {
@@ -343,0 +390,0 @@ field: string;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

582495

increased by0.43%

Lines of code

13352

increased by0.51%

No dependency changes