@antv/g2 - npm Package Compare versions

Comparing version 3.0.5-beta.6 to 3.0.5-beta.7

lib/chart/controller/legend.js

@@ -12,4 +12,2 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 var FIELD_ORIGIN = '_origin';
-var MARGIN = 24;
-var MARGIN_LEGEND = 24;
 var MARKER_SIZE = 4.5;
@@ -62,2 +60,3 @@ var requireAnimationFrameFn = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
     var legends = this.legends;
+    this.backRange = null;
     Util.each(legends, function (legendItems) {
@@ -71,2 +70,14 @@ Util.each(legendItems, function (legend) {
 
+  // 获取坐标轴等背景元素占的范围，防止遮挡坐标轴
+
+
+  LegendController.prototype.getBackRange = function getBackRange() {
+    var backRange = this.backRange;
+    if (!backRange) {
+      backRange = this.chart.get('backPlot').getBBox();
+      this.backRange = backRange;
+    }
+    return backRange;
+  };
+
   LegendController.prototype._isFieldInView = function _isFieldInView(field, value, view) {
@@ -281,6 +292,10 @@ var flag = false;
     var plotRange = self.plotRange;
+    var backRange = self.getBackRange(); // 背景占得范围
     var offsetX = legend.get('offsetX') || 0;
     var offsetY = legend.get('offsetY') || 0;
-    var offset = Util.isNil(legend.get('offset')) ? MARGIN : legend.get('offset');
+    // const offset = Util.isNil(legend.get('offset')) ? MARGIN : legend.get('offset');
     var legendHeight = legend.getHeight();
+    var legendWidth = legend.getWidth();
+    var borderMargin = Global.legend.margin;
+    var innerMargin = Global.legend.legendMargin;
 
@@ -293,15 +308,14 @@ var x = 0;
       height = plotRange.br.y;
-      x = position === 'left' ? offset : plotRange.br.x + offset;
+      x = position === 'left' ? backRange.minX - legendWidth - borderMargin[3] : backRange.maxX + borderMargin[1];
       y = height - legendHeight;
 
       if (pre) {
-        y = pre.get('y') - legendHeight - MARGIN_LEGEND;
+        y = pre.get('y') - legendHeight - innerMargin;
       }
     } else {
       x = (width - region.totalWidth) / 2;
-      y = position === 'top' ? offset : plotRange.bl.y + offset;
-
+      y = position === 'top' ? backRange.minY - legendHeight - borderMargin[0] : backRange.maxY + borderMargin[2];
       if (pre) {
         var preWidth = pre.getWidth();
-        x = pre.get('x') + preWidth + MARGIN_LEGEND;
+        x = pre.get('x') + preWidth + innerMargin;
       }
@@ -308,0 +322,0 @@ }

lib/component/tooltip/index.js

@@ -491,2 +491,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
       if (crosshairsRectShape) {
+        // 绘制矩形辅助框，只在直角坐标系下生效
         var isTransposed = this.get('isTransposed');
@@ -508,10 +509,16 @@ var items = this.get('items');
         } else {
-          offset = firstItem.size / 2 + firstItem.size / 4 || 10;
-          crosshairsRectShape.attr(dim, startDim - offset);
+          if (Util.isArray(firstItem.point[dim]) && !firstItem.size) {
+            // 直方图
+            var width = firstItem.point[dim][1] - firstItem.point[dim][0];
+            crosshairsRectShape.attr(dim, firstItem.point[dim][0]);
+            crosshairsRectShape.attr(attr, width);
+          } else {
+            offset = 3 * firstItem.size / 4;
+            crosshairsRectShape.attr(dim, startDim - offset);
 
-          if (items.length === 1) {
-            crosshairsRectShape.attr(attr, firstItem.size + firstItem.size / 2);
-          } else {
-            var _lastItem = items[items.length - 1];
-            crosshairsRectShape.attr(attr, Math.abs(_lastItem[dim] - firstItem[dim]) + 2 * offset);
+            if (items.length === 1) {
+              crosshairsRectShape.attr(attr, 3 * firstItem.size / 2);
+            } else {
+              crosshairsRectShape.attr(attr, Math.abs(lastItem[dim] - firstItem[dim]) + 2 * offset);
+            }
           }
@@ -518,0 +525,0 @@ }

lib/geom/label/geom-labels.js

@@ -150,3 +150,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
         var obj = self.getLabelPoint(label, point, subIdx);
-        if (obj) {
+        // 文本为 null, undefined, 空字符串时不显示
+        // 但是文本为 0 时，需要显示
+        if (obj && !Util.isNil(obj.text) && obj.text !== '') {
           obj = Util.mix({}, origin, obj); // 为了格式化输出
@@ -153,0 +155,0 @@ var align = void 0;

lib/geom/mixin/tooltip.js

@@ -17,2 +17,18 @@ /**
 var TooltipMixin = {
+  _getIntervalSize: function _getIntervalSize(obj) {
+    var size = null;
+    var type = this.get('type');
+    var coord = this.get('coord');
+    if (coord.isRect && (type === 'interval' || type === 'schema')) {
+      size = this.getSize(obj[FIELD_ORIGIN]); // 如果字段发生了映射，宽度计算就会报错
+
+      var dim = coord.isTransposed ? 'y' : 'x';
+      if (Util.isArray(obj[dim])) {
+        var width = Math.abs(obj[dim][1] - obj[dim][0]);
+        size = size < width ? null : size; // 直方图计算错误
+      }
+    }
+
+    return size;
+  },
   _snapEqual: function _snapEqual(v1, v2, scale) {
@@ -385,5 +401,3 @@ var equals = void 0;
         };
-        if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          item.size = self.getSize(point[FIELD_ORIGIN]); // 如果字段发生了映射，宽度计算就会报错
-        }
+        item.size = self._getIntervalSize(point);
 
@@ -412,5 +426,4 @@ items.push(Util.mix({}, item, cfg));
         }, cfg);
-        if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          itemCfg.size = self.getSize(point[FIELD_ORIGIN]);
-        }
+
+        itemCfg.size = self._getIntervalSize(point);
         items.push(itemCfg);
@@ -417,0 +430,0 @@ } else {

lib/theme/default.js

@@ -374,3 +374,5 @@ var _html, _tooltip;
       unCheckColor: '#bfbfbf'
-    }
+    },
+    margin: [0, 20, 24, 5], // 图例跟四个边的坐标轴、绘图区域的间距
+    legendMargin: 24 // 图例之间的间距
   },
@@ -377,0 +379,0 @@ tooltip: (_tooltip = {

package.json

 {
   "name": "@antv/g2",
-  "version": "3.0.5-beta.6",
+  "version": "3.0.5-beta.7",
   "description": "the Grammar of Graphics in Javascript",
@@ -5,0 +5,0 @@ "main": "build/g2.js",

src/chart/controller/legend.js

@@ -7,4 +7,2 @@ const Util = require('../../util');
 const FIELD_ORIGIN = '_origin';
-const MARGIN = 24;
-const MARGIN_LEGEND = 24;
 const MARKER_SIZE = 4.5;
@@ -56,2 +54,3 @@ const requireAnimationFrameFn = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
     const legends = this.legends;
+    this.backRange = null;
     Util.each(legends, legendItems => {
@@ -65,2 +64,12 @@ Util.each(legendItems, legend => {
 
+  // 获取坐标轴等背景元素占的范围，防止遮挡坐标轴
+  getBackRange() {
+    let backRange = this.backRange;
+    if (!backRange) {
+      backRange = this.chart.get('backPlot').getBBox();
+      this.backRange = backRange;
+    }
+    return backRange;
+  }
+
   _isFieldInView(field, value, view) {
@@ -269,6 +278,10 @@ let flag = false;
     const plotRange = self.plotRange;
+    const backRange = self.getBackRange(); // 背景占得范围
     const offsetX = legend.get('offsetX') || 0;
     const offsetY = legend.get('offsetY') || 0;
-    const offset = Util.isNil(legend.get('offset')) ? MARGIN : legend.get('offset');
+    // const offset = Util.isNil(legend.get('offset')) ? MARGIN : legend.get('offset');
     const legendHeight = legend.getHeight();
+    const legendWidth = legend.getWidth();
+    const borderMargin = Global.legend.margin;
+    const innerMargin = Global.legend.legendMargin;
 
@@ -280,15 +293,14 @@ let x = 0;
       height = plotRange.br.y;
-      x = position === 'left' ? offset : plotRange.br.x + offset;
+      x = position === 'left' ? backRange.minX - legendWidth - borderMargin[3] : backRange.maxX + borderMargin[1];
       y = height - legendHeight;
 
       if (pre) {
-        y = pre.get('y') - legendHeight - MARGIN_LEGEND;
+        y = pre.get('y') - legendHeight - innerMargin;
       }
     } else {
       x = (width - region.totalWidth) / 2;
-      y = (position === 'top') ? offset : (plotRange.bl.y + offset);
-
+      y = (position === 'top') ? backRange.minY - legendHeight - borderMargin[0] : backRange.maxY + borderMargin[2];
       if (pre) {
         const preWidth = pre.getWidth();
-        x = pre.get('x') + preWidth + MARGIN_LEGEND;
+        x = pre.get('x') + preWidth + innerMargin;
       }
@@ -295,0 +307,0 @@ }

src/component/tooltip/index.js

@@ -473,3 +473,3 @@ /**
 
-      if (crosshairsRectShape) {
+      if (crosshairsRectShape) { // 绘制矩形辅助框，只在直角坐标系下生效
         const isTransposed = this.get('isTransposed');
@@ -490,10 +490,15 @@ const items = this.get('items');
         } else {
-          offset = (firstItem.size / 2 + firstItem.size / 4) || 10;
-          crosshairsRectShape.attr(dim, startDim - offset);
+          if (Util.isArray(firstItem.point[dim]) && !firstItem.size) { // 直方图
+            const width = firstItem.point[dim][1] - firstItem.point[dim][0];
+            crosshairsRectShape.attr(dim, firstItem.point[dim][0]);
+            crosshairsRectShape.attr(attr, width);
+          } else {
+            offset = (3 * firstItem.size) / 4;
+            crosshairsRectShape.attr(dim, startDim - offset);
 
-          if (items.length === 1) {
-            crosshairsRectShape.attr(attr, firstItem.size + firstItem.size / 2);
-          } else {
-            const lastItem = items[items.length - 1];
-            crosshairsRectShape.attr(attr, Math.abs(lastItem[dim] - firstItem[dim]) + 2 * offset);
+            if (items.length === 1) {
+              crosshairsRectShape.attr(attr, (3 * firstItem.size) / 2);
+            } else {
+              crosshairsRectShape.attr(attr, Math.abs(lastItem[dim] - firstItem[dim]) + 2 * offset);
+            }
           }
@@ -500,0 +505,0 @@ }

src/geom/label/geom-labels.js

@@ -126,3 +126,5 @@ const { Group } = require('@antv/g');
         let obj = self.getLabelPoint(label, point, subIdx);
-        if (obj) {
+        // 文本为 null, undefined, 空字符串时不显示
+        // 但是文本为 0 时，需要显示
+        if (obj && !Util.isNil(obj.text) && obj.text !== '') {
           obj = Util.mix({}, origin, obj); // 为了格式化输出
@@ -129,0 +131,0 @@ let align;

src/geom/mixin/tooltip.js

@@ -14,2 +14,19 @@ /**
 const TooltipMixin = {
+  _getIntervalSize(obj) {
+    let size = null;
+    const type = this.get('type');
+    const coord = this.get('coord');
+    if (coord.isRect && (type === 'interval' || type === 'schema')) {
+      size = this.getSize(obj[FIELD_ORIGIN]); // 如果字段发生了映射，宽度计算就会报错
+
+      const dim = coord.isTransposed ? 'y' : 'x';
+      if (Util.isArray(obj[dim])) {
+        const width = Math.abs(obj[dim][1] - obj[dim][0]);
+        size = size < width ? null : size; // 直方图计算错误
+      }
+    }
+
+    return size;
+  },
+
   _snapEqual(v1, v2, scale) {
@@ -381,5 +398,3 @@ let equals;
         };
-        if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          item.size = self.getSize(point[FIELD_ORIGIN]); // 如果字段发生了映射，宽度计算就会报错
-        }
+        item.size = self._getIntervalSize(point);
 
@@ -407,5 +422,4 @@ items.push(Util.mix({}, item, cfg));
         }, cfg);
-        if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          itemCfg.size = self.getSize(point[FIELD_ORIGIN]);
-        }
+
+        itemCfg.size = self._getIntervalSize(point);
         items.push(itemCfg);
@@ -412,0 +426,0 @@ } else {

src/index.d.ts

@@ -156,10 +156,10 @@ // Type definitions for g2 3.0.x
     size(type: string, colors: number[]): this;
-    size(type: string, Function): this;
+    size(type: string, func: Function): this;
     opacity(op: number): this;
     opacity(col: string): this;
-    opacity(type: string, Function): this;
+    opacity(type: string, func: Function): this;
     adjust(adj: string): this;
     adjust(adjs: any[]): this;
     label(field: string): this;
-    label(exe: string, Function): this;
+    label(exe: string, func: Function): this;
     label(exe: string,opt: {
@@ -171,5 +171,5 @@ offset?: number;
     tooltip(field: string): this;
-    tooltip(exe: string, Function): this;
+    tooltip(exe: string, func: Function): this;
     style(style: any): this;
-    style(exe: string, Function): this;
+    style(exe: string, func: Function): this;
     select(open: boolean): this;
@@ -188,7 +188,7 @@ select(opt: {
     }): this;
-    active(open: boolean);
-    animate(opt: any);
+    active(open: boolean): Geom;
+    animate(opt: any): Geom;
   }
-  
 
+
   /**
@@ -214,3 +214,3 @@ * 坐标轴标签
      */
-    formatter?(text: string, item, index: number): string;
+    formatter?(text: string, item: {}, index: number): string;
     /**
@@ -223,3 +223,3 @@ * 使用 html 渲染文本
      */
-    htmlTemplate?(text: string, item, index: number): string;
+    htmlTemplate?(text: string, item: {}, index: number): string;
   }
@@ -510,3 +510,3 @@ /**
     ) => View;
-    forceFit(boolean): this;
+    forceFit(): this;
     render: () => void;
@@ -648,3 +648,3 @@ changeSize(width: number, height: number) : this;
     getBoundingClientRect: (
-      node,
+      node: Element,
     ) => { top: number; bottom: number; left: number; right: number };
@@ -663,4 +663,4 @@ getStyle: (dom: HTMLElement, name: string) => any;
       callback: (e: any) => void,
-    );
-    requestAnimationFrame(fn: () => void);
+    ): void;
+    requestAnimationFrame(fn: () => void): void;
   }
@@ -676,3 +676,3 @@
     parsePathString(pathString: string): Array<any>;
-    parsePathArray(pathArray): any;
+    parsePathArray(pathArray: any): any;
     pathTocurve(path: Array<any>): any;
@@ -679,0 +679,0 @@ pathToAbsolute(path: Array<any>): any;

src/theme/default.js

@@ -452,3 +452,5 @@ /**
       unCheckColor: '#bfbfbf'
-    }
+    },
+    margin: [ 0, 20, 24, 5 ], // 图例跟四个边的坐标轴、绘图区域的间距
+    legendMargin: 24 // 图例之间的间距
   },
@@ -455,0 +457,0 @@ tooltip: {

No alert changes

Improved metrics

Total package byte prevSize

5627067

increased by0.12%

Lines of code

91092

increased by0.11%

No dependency changes