@antv/g2 - npm Package Compare versions

Comparing version 3.0.0-rc5.3 to 3.0.0-rc5.4

package.json

 {
   "name": "@antv/g2",
-  "version": "3.0.0-rc5.3",
+  "version": "3.0.0-rc5.4",
   "description": "the Grammar of Graphics in Javascript",
@@ -5,0 +5,0 @@ "main": "build/g2.js",

src/chart/chart.js

@@ -67,3 +67,4 @@ /**
     const tooltipController = new Controller.Tooltip({
-      chart: this
+      chart: this,
+      options: {}
     });
@@ -167,20 +168,20 @@ this.set('tooltipController', tooltipController);
         legendController.addCustomLegend();
+      } else {
+        const geoms = this.getAllGeoms();
+        const scales = [];
+        Util.each(geoms, geom => {
+          const view = geom.get('view');
+          const attrs = geom.getAttrsForLegend();
+          Util.each(attrs, attr => {
+            const type = attr.type;
+            const scale = attr.getScale(type);
+            if (scale.type !== 'identity' && !_isScaleExist(scales, scale)) {
+              scales.push(scale);
+              const filteredValues = view.getFilteredValues(scale.field);
+              legendController.addLegend(scale, attr, geom, filteredValues);
+            }
+          });
+        });
       }
 
-      const geoms = this.getAllGeoms();
-      const scales = [];
-      Util.each(geoms, geom => {
-        const view = geom.get('view');
-        const attrs = geom.getAttrsForLegend();
-        Util.each(attrs, attr => {
-          const type = attr.type;
-          const scale = attr.getScale(type);
-          if (scale.type !== 'identity' && !_isScaleExist(scales, scale)) {
-            scales.push(scale);
-            const filteredValues = view.getFilteredValues(scale.field);
-            legendController.addLegend(scale, attr, geom, filteredValues);
-          }
-        });
-      });
-
       legendController.alignLegends();
@@ -187,0 +188,0 @@ }

src/chart/controller/event.js

@@ -13,2 +13,8 @@ /**
   const shape2Origin = shape2.get('origin');
+
+  // hotfix: if both shapes have no data，just compare shapes.
+  if (Util.isNil(shape1Origin) && Util.isNil(shape2Origin)) {
+    return Util.isEqual(shape1, shape2);
+  }
+
   return Util.isEqual(shape1Origin, shape2Origin);
@@ -15,0 +21,0 @@ }

src/chart/controller/legend.js

@@ -267,5 +267,2 @@ const Util = require('../../util');
     let y = 0;
-    if (legend.get('useHtml')) {
-      position = 'right';
-    }
 
@@ -276,2 +273,3 @@ if (position === 'left' || position === 'right') { // 垂直
       y = height - legendHeight;
+
       if (pre) {
@@ -334,3 +332,4 @@ y = pre.get('y') - legendHeight - MARGIN_LEGEND;
     const canvas = chart.get('canvas');
-    const maxLength = (position === 'right' || position === 'left') ? canvas.get('height') : canvas.get('width');
+    const plotRange = self.plotRange;
+    const maxLength = (position === 'right' || position === 'left') ? plotRange.bl.y - plotRange.tr.y : canvas.get('width');
 
@@ -353,5 +352,10 @@ Util.each(ticks, tick => {
       }
+
       const shapeObject = Shape.getShapeFactory(shapeType);
       const marker = shapeObject.getMarkerCfg(shape, cfg);
 
+      if (Util.isFunction(shape)) {
+        marker.symbol = shape;
+      }
+
       items.push({
@@ -448,21 +452,24 @@ value: name,
     const field = scale.field;
-    if (legendOptions[field] === false) { // 如果不显示此图例
+    const fieldOption = legendOptions[field];
+
+    if (fieldOption === false) { // 如果不显示此图例
       return null;
     }
 
-    let position = legendOptions.position || Global.defaultLegendPosition;
-    const fieldOption = legendOptions[field];
-    if (fieldOption && fieldOption.position) { // 如果对某个图例单独设置 position，则对 position 重新赋值
-      position = fieldOption.position;
-    }
+    if (fieldOption && fieldOption.custom) {
+      self.addCustomLegend(field);
+    } else {
+      let position = legendOptions.position || Global.defaultLegendPosition;
+      if (fieldOption && fieldOption.position) { // 如果对某个图例单独设置 position，则对 position 重新赋值
+        position = fieldOption.position;
+      }
 
-    let legend;
-    if (scale.isLinear) {
-      legend = self._addContinuousLegend(scale, attr, position);
-    } else {
-      legend = self._addCategroyLegend(scale, attr, geom, filterVals, position);
+      let legend;
+      if (scale.isLinear) {
+        legend = self._addContinuousLegend(scale, attr, position);
+      } else {
+        legend = self._addCategroyLegend(scale, attr, geom, filterVals, position);
+      }
+      self._bindHoverEvent(legend, field);
     }
-    self._bindHoverEvent(legend, field);
-
-    return legend;
   }
@@ -472,8 +479,14 @@
    * 自定义图例
+   * @param {string} field 自定义图例的数据字段名，可以为空
    */
-  addCustomLegend() {
+  addCustomLegend(field) {
     const self = this;
     const chart = self.chart;
     const container = self.container;
-    const legendOptions = self.options;
+    let legendOptions = self.options;
+
+    if (field) {
+      legendOptions = legendOptions[field];
+    }
+
     const position = legendOptions.position || Global.defaultLegendPosition;
@@ -502,3 +515,4 @@ const legends = self.legends;
     const canvas = chart.get('canvas');
-    const maxLength = (position === 'right' || position === 'left') ? canvas.get('height') : canvas.get('width');
+    const plotRange = self.plotRange;
+    const maxLength = (position === 'right' || position === 'left') ? plotRange.bl.y - plotRange.tr.y : canvas.get('width');
 
@@ -529,3 +543,5 @@ const legendCfg = Util.defaultsDeep({
         const pre = legendItems[index - 1];
-        self._alignLegend(legend, pre, region, position);
+        if (!(legend.get('useHtml') && !legend.get('autoPosition'))) {
+          self._alignLegend(legend, pre, region, position);
+        }
       });
@@ -532,0 +548,0 @@ });

src/chart/controller/scale.js

@@ -114,5 +114,5 @@ /**
     }
-    const firstObj = data[0];
+    const firstValue = Util.Array.firstValue(data, field);
 
-    if (Util.isNumber(field) || (Util.isNil(firstObj[field])) && !def) {
+    if (Util.isNumber(field) || (Util.isNil(firstValue)) && !def) {
       scale = Scale.identity({
@@ -119,0 +119,0 @@ value: field,

src/chart/controller/tooltip.js

@@ -90,2 +90,18 @@ /**
 
+  _getTriggerEvent() {
+    const options = this.options;
+    const triggerOn = options.triggerOn;
+    let eventName;
+
+    if (!triggerOn || triggerOn === 'mousemove') {
+      eventName = 'plotmove';
+    } else if (triggerOn === 'click') {
+      eventName = 'plotclick';
+    } else if (triggerOn === 'none') {
+      eventName = null;
+    }
+
+    return eventName;
+  }
+
   _getDefaultTooltipCfg() {
@@ -138,4 +154,7 @@ const self = this;
     const chart = this.chart;
-    chart.on('plotmove', Util.wrapBehavior(this, 'onMouseMove'));
-    chart.on('plotleave', Util.wrapBehavior(this, 'onMouseOut'));
+    const triggerEvent = this._getTriggerEvent();
+    if (triggerEvent) {
+      chart.on(triggerEvent, Util.wrapBehavior(this, 'onMouseMove'));
+      chart.on('plotleave', Util.wrapBehavior(this, 'onMouseOut'));
+    }
   }
@@ -145,4 +164,7 @@
     const chart = this.chart;
-    chart.off('plotmove', Util.getWrapBehavior(this, 'onMouseMove'));
-    chart.off('plotleave', Util.getWrapBehavior(this, 'onMouseOut'));
+    const triggerEvent = this._getTriggerEvent();
+    if (triggerEvent) {
+      chart.off(triggerEvent, Util.getWrapBehavior(this, 'onMouseMove'));
+      chart.off('plotleave', Util.getWrapBehavior(this, 'onMouseOut'));
+    }
   }
@@ -261,3 +283,5 @@
     self.tooltip = tooltip;
-    if (!tooltip.get('enterable')) { // 鼠标不允许进入 tooltip 容器
+
+    const triggerEvent = self._getTriggerEvent();
+    if (!tooltip.get('enterable') && triggerEvent === 'plotmove') { // 鼠标不允许进入 tooltip 容器
       const tooltipContainer = tooltip.get('container');
@@ -268,3 +292,3 @@ if (tooltipContainer) {
           const eventObj = self._normalizeEvent(e);
-          chart.emit('plotmove', eventObj);
+          chart.emit(triggerEvent, eventObj);
         };
@@ -271,0 +295,0 @@ }

src/chart/view.js

@@ -116,2 +116,6 @@ /**
 
+    if (options.tooltip === false || Util.isNull(options.tooltip)) { // 配置项方式关闭 tooltip
+      this.set('tooltipEnable', false);
+    }
+
     if (options.geoms && options.geoms.length) {
@@ -140,3 +144,18 @@ Util.each(options.geoms, function(geomOption) {
         if (geom[k]) {
-          geom[k](v);
+
+          if (Util.isObject(v) && v.field) { // 配置项传入
+            if (v === 'label') {
+              geom[k](v.field, v.callback, v.cfg);
+            } else {
+              let cfg;
+              Util.each(v, (value, key) => {
+                if (key !== 'field') {
+                  cfg = value;
+                }
+              });
+              geom[k](v.field, cfg);
+            }
+          } else {
+            geom[k](v);
+          }
         }
@@ -143,0 +162,0 @@ });

src/component/axis/base.js

@@ -84,3 +84,3 @@ /**
         textStyle,
-        offset: 40
+        offset: 48
       });
@@ -87,0 +87,0 @@ this.setSilent('title', title);

src/component/axis/circle.js

@@ -183,3 +183,3 @@ /**
     const labelsGroup = self.get('labelsGroup');
-    if (labelsGroup && ticks.length > 12) { // 小于15个文本时文本不旋转
+    if (labelsGroup && ticks.length > 12) { // 小于12个文本时文本不旋转
       const radius = self.get('radius');
@@ -186,0 +186,0 @@ const startAngle = self.get('startAngle');

src/component/guide/line.js

@@ -66,4 +66,2 @@ /**
     }
-    guideLineGroup.set('zIndex', 15); // TODO: 需要确定数值
-    guideLineGroup.name = 'guide-line';
     self.el = guideLineGroup;
@@ -77,3 +75,3 @@ }
     ];
-    group.addShape('Path', {
+    const guideLine = group.addShape('Path', {
       attrs: Util.mix({
@@ -83,2 +81,3 @@ path
     });
+    guideLine.name = 'guide-line';
   }
@@ -130,5 +129,6 @@
 
-    group.addShape('Text', {
+    const shape = group.addShape('Text', {
       attrs: cfg
     });
+    shape.name = 'guide-line-text';
   }
@@ -135,0 +135,0 @@ }

src/component/legend/category.js

@@ -8,7 +8,9 @@ /**
 const { DomUtil, Event, Group } = require('@antv/g');
+const Global = require('../../global');
+const LEGEND_STYLE = Global.legend.html;
 
 const CONTAINER_CLASS = 'g2-legend';
 const TITLE_CLASS = 'g2-legend-title';
-const LIST_CLASS = 'g2-legend-itemlist';
-const ITEM_CLASS = 'g2-legend-item';
+const LIST_CLASS = 'g2-legend-list';
+const ITEM_CLASS = 'g2-legend-list-item';
 const TEXT_CLASS = 'g2-legend-text';
@@ -148,2 +150,7 @@ const MARKER_CLASS = 'g2-legend-marker';
       useHtml: false,
+      /**
+       * useHtml 为 true 时生效，用于自动定位
+       * @type {[type]}
+       */
+      autoPosition: true,
       container: null,
@@ -156,3 +163,3 @@ /**
         '<h4 class="' + TITLE_CLASS + '"></h4>' +
-        '<ul class="' + LIST_CLASS + '" style="list-style-type:none;margin:0;padding:0;"></ul>' +
+        '<ul class="' + LIST_CLASS + '"></ul>' +
         '</div>',
@@ -163,4 +170,4 @@ /**
        */
-      _defaultItemTpl: '<li class="' + ITEM_CLASS + ' item-{index} {checked}" data-color="{originColor}" data-value="{originValue}" style="cursor: pointer;font-size: 12px;margin-bottom:5px;">' +
-        '<i class="' + MARKER_CLASS + '" style="width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;background-color:{color};vertical-align:middle"></i>' +
+      _defaultItemTpl: '<li class="' + ITEM_CLASS + ' item-{index} {checked}" data-color="{originColor}" data-value="{originValue}">' +
+        '<i class="' + MARKER_CLASS + '" style="background-color:{color};"></i>' +
         '<span class="' + TEXT_CLASS + '">{value}</span></li>',
@@ -173,7 +180,2 @@ /**
       /**
-       * 当用户使用 html 的时候，超出高度或者宽度会自动换行
-       * @type {Boolean}
-       */
-      scroll: true,
-      /**
        * 图例项是否可点击，默认为 true
@@ -328,4 +330,11 @@ * @type {Boolean}
 
-    if (titleDom && title && title.text) { // 渲染标题
-      titleDom.innerHTML = title.text;
+    DomUtil.modifyCSS(itemListDom, Util.mix({}, LEGEND_STYLE[LIST_CLASS], self.get(LIST_CLASS)));
+
+    if (titleDom) {
+      if (title && title.text) {
+        titleDom.innerHTML = title.text;
+        DomUtil.modifyCSS(titleDom, Util.mix({}, LEGEND_STYLE[TITLE_CLASS], self.get(TITLE_CLASS)));
+      } else {
+        legendWrapper.removeChild(titleDom);
+      }
     }
@@ -345,2 +354,7 @@
 
+    const position = self.get('position');
+    const itemStyle = Util.mix({}, LEGEND_STYLE[ITEM_CLASS], {
+      display: (position === 'right' || position === 'left') ? 'block' : 'inline-block'
+    }, self.get(ITEM_CLASS));
+    const markerStyle = Util.mix({}, LEGEND_STYLE[MARKER_CLASS], self.get(MARKER_CLASS));
     Util.each(items, function(item, index) {
@@ -365,4 +379,11 @@ const checked = item.checked;
       const itemDom = DomUtil.createDom(itemDiv);
+      const markerDom = findNodeByClass(itemDom, MARKER_CLASS);
+      DomUtil.modifyCSS(itemDom, itemStyle);
+      markerDom && DomUtil.modifyCSS(markerDom, markerStyle);
+
       if (!checked) {
         itemDom.style.color = unCheckedColor;
+        if (markerDom) {
+          markerDom.style.backgroundColor = unCheckedColor;
+        }
       }
@@ -478,11 +499,16 @@ itemListDom.appendChild(itemDom);
     } else {
-      if (self.get('scroll')) {
-        const width = canvas.get('width');
-        const height = canvas.get('height');
-        DomUtil.modifyCSS(legendWrapper, {
-          maxWidth: width + 'px',
-          maxHeight: height + 'px',
-          overflow: 'scroll'
-        });
+      const position = self.get('position');
+      const canvas = self.get('canvas');
+      let rangeStyle = {};
+      if (position === 'left' || position === 'right') {
+        rangeStyle = {
+          maxHeight: (self.get('maxLength') || canvas.get('height')) + 'px'
+        };
+      } else {
+        rangeStyle = {
+          maxWidth: (self.get('maxLength') || canvas.get('width')) + 'px'
+        };
       }
+
+      DomUtil.modifyCSS(legendWrapper, Util.mix({}, LEGEND_STYLE[CONTAINER_CLASS], rangeStyle, self.get(CONTAINER_CLASS)));
       outterNode.appendChild(legendWrapper);
@@ -730,4 +756,3 @@ }
         left: x + 'px',
-        top: y + 'px',
-        position: 'absolute'
+        top: y + 'px'
       });
@@ -740,3 +765,3 @@ } else {
   remove() {
-    if (this.get('useHtml')) {
+    if (this.get('useHtml')) { // 移除元素
       const legendWrapper = this.get('legendWrapper');
@@ -746,5 +771,4 @@ if (legendWrapper && legendWrapper.parentNode) {
       }
-    } else {
-      super.remove();
     }
+    super.remove(); // must be called
   }
@@ -751,0 +775,0 @@ }

src/component/tooltip/index.js

@@ -536,2 +536,6 @@ /**
 
+    if (container && !(/^\#/.test(containerTpl))) {
+      container.parentNode.removeChild(container);
+    }
+
     crossLineShapeX && crossLineShapeX.remove();
@@ -542,6 +546,2 @@ crossLineShapeY && crossLineShapeY.remove();
     super.remove();
-
-    if (container && !(/^\#/.test(containerTpl))) {
-      container.parentNode.removeChild(container);
-    }
   }
@@ -548,0 +548,0 @@ }

src/geom/base.js

@@ -705,3 +705,3 @@ /**
       itemArr.sort((obj1, obj2) => {
-        return obj1[FIELD_ORIGIN][xField] - obj2[FIELD_ORIGIN][xField];
+        return xScale.translate(obj1[FIELD_ORIGIN][xField]) - xScale.translate(obj2[FIELD_ORIGIN][xField]);
       });
@@ -708,0 +708,0 @@ });

src/geom/mixin/size.js

@@ -69,3 +69,4 @@ /**
       if (this.hasAdjust('dodge')) {
-        normalizeSize = normalizeSize / dataArray.length;
+        const dodgeCount = this._getDodgeCount(dataArray);
+        normalizeSize = normalizeSize / dodgeCount;
       }
@@ -77,2 +78,20 @@ defaultSize = normalizeSize;
   },
+  _getDodgeCount(dataArray) {
+    const adjusts = this.get('adjusts');
+    let dodgeBy;
+    let count = dataArray.length;
+    Util.each(adjusts, function(adjust) {
+      if (adjust.type === 'dodge') {
+        dodgeBy = adjust.dodgeBy;
+      }
+    });
+
+    if (dodgeBy) {
+      const mergeData = Util.Array.merge(dataArray);
+      const values = Util.Array.values(mergeData, dodgeBy);
+      count = values.length;
+    }
+
+    return count;
+  },
   getDimWidth(dimName) {
@@ -79,0 +98,0 @@ const coord = this.get('coord');

src/geom/path.js

@@ -41,10 +41,12 @@ /**
     Util.each(splitArray, function(subData, splitedIndex) {
-      cfg.splitedIndex = splitedIndex; // 传入分割片段索引 用于生成id
-      cfg.points = subData;
-      const geomShape = shapeFactory.drawShape(cfg.shape, cfg, container);
-      geomShape.setSilent('index', index + splitedIndex);
-      geomShape.setSilent('coord', self.get('coord'));
+      if (!Util.isEmpty(subData)) {
+        cfg.splitedIndex = splitedIndex; // 传入分割片段索引 用于生成id
+        cfg.points = subData;
+        const geomShape = shapeFactory.drawShape(cfg.shape, cfg, container);
+        geomShape.setSilent('index', index + splitedIndex);
+        geomShape.setSilent('coord', self.get('coord'));
 
-      if (self.get('animate') && self.get('animateCfg')) {
-        geomShape.setSilent('animateCfg', self.get('animateCfg'));
+        if (self.get('animate') && self.get('animateCfg')) {
+          geomShape.setSilent('animateCfg', self.get('animateCfg'));
+        }
       }
@@ -51,0 +53,0 @@ });

src/geom/shape/polygon.js

@@ -77,4 +77,4 @@ /**
     return {
-      lineWidth,
-      fillOpacity: opacity - 0.15
+      // lineWidth,
+      fillOpacity: opacity - 0.08
     };
@@ -81,0 +81,0 @@ },

src/geom/shape/schema.js

@@ -40,3 +40,3 @@ /**
 function getAttrs(cfg) {
-  const defaultAttrs = Global.shape.line;
+  const defaultAttrs = Global.shape.schema;
   const attrs = Util.mix({}, defaultAttrs, {
@@ -50,3 +50,3 @@ stroke: cfg.color,
 function getFillAttrs(cfg) {
-  const defaultAttrs = Global.shape.line;
+  const defaultAttrs = Global.shape.schema;
   const attrs = Util.mix({}, defaultAttrs, {
@@ -53,0 +53,0 @@ fill: cfg.color,

src/global.js

@@ -10,3 +10,3 @@ /**
 const Default = {
-  version: '3.0.0-rc5.3',
+  version: '3.0.0-rc5.4',
   trackable: true,
@@ -13,0 +13,0 @@ animate: true,

src/theme/default.js

@@ -24,2 +24,10 @@ /**
 
+// html 渲染的 legend 相关 dom 的 css 类型
+const LEGEND_CONTAINER_CLASS = 'g2-legend';
+const LEGEND_TITLE_CLASS = 'g2-legend-title';
+const LEGEND_LIST_CLASS = 'g2-legend-list';
+const LEGEND_LIST_ITEM_CLASS = 'g2-legend-list-item';
+const LEGEND_MARKER_CLASS = 'g2-legend-marker';
+
+
 const Theme = {
@@ -314,2 +322,33 @@ defaultColor: DEFAULT_COLOR, // 默认主题色
       unCheckColor: '#bfbfbf'
+    },
+    // 定义 html 渲染图例的样式
+    html: {
+      [`${LEGEND_CONTAINER_CLASS}`]: {
+        height: 'auto',
+        width: 'auto',
+        position: 'absolute',
+        overflow: 'scroll'
+      },
+      [`${LEGEND_TITLE_CLASS}`]: {
+        marginBottom: '4px'
+      },
+      [`${LEGEND_LIST_CLASS}`]: {
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0
+      },
+      [`${LEGEND_LIST_ITEM_CLASS}`]: {
+        cursor: 'pointer',
+        fontSize: '12px',
+        marginBottom: '5px',
+        marginRight: '24px'
+      },
+      [`${LEGEND_MARKER_CLASS}`]: {
+        width: '10px',
+        height: '10px',
+        borderRadius: '50%',
+        display: 'inline-block',
+        marginRight: '8px',
+        verticalAlign: 'middle'
+      }
     }
@@ -441,2 +480,7 @@ },
       fill: null
+    },
+    schema: {
+      stroke: DEFAULT_COLOR,
+      lineWidth: 1,
+      fill: null
     }
@@ -443,0 +487,0 @@ },

src/util.js

@@ -29,2 +29,3 @@ /**
   isNil: require('lodash/isNil'),
+  isNull: require('lodash/isNull'),
   isArray: require('lodash/isArray'),
@@ -31,0 +32,0 @@ isDate: require('lodash/isDate'),

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18733138

increased by0.09%

Lines of code

64949

increased by0.45%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes