@antv/g2 - npm Package Compare versions

Comparing version 3.0.4-beta.4 to 3.0.4

CHANGELOG.md

@@ -0,1 +1,33 @@
+#### 3.0.4 (2018-01-26)
+
+##### New Features
+
+* chore(dev): keep G2.Global.Version same as pkg.version
+* chore(dev): provide ES5 version for npm pkg
+* feat(highlight): active shape support highlight
+* feat(scale): update cat ticks calculate
+* feat(shape): add image shape for point
+* feat(shape): add path shape for point
+* feat(stack): support stack reverse order
+* perf(shape): caching path calculating for point path shape
+
+##### Bug Fixes
+
+* fix(attr): do not throw when color mapping value is NaN
+* fix(axis): title config not working
+* fix(chart): clear timer after chart instance destroyed
+* fix(chart): download image supports Firefox, etc.
+* fix(event): event triggering in point geom
+* fix(event): modifying shapes in events not working
+* fix(facet): duplicated axes rendering
+* fix(legend): error when `cat` scale with empty data
+* fix(legend): event is not triggered due to lacking of viewId
+* fix(legend): extra legend generated in heatmap rendering
+* fix(legend): html legend checked status error
+* fix(legend): title config not working
+* fix(scale): scale sync not working
+* fix(select): getSelectedCfg is not a function
+* fix(shape): fixed register shape error
+* fix(tooltip): tooltip change event emitted only when content changes
+
 #### 3.0.3 (2017-12-25)
@@ -2,0 +34,0 @@

package.json

 {
   "name": "@antv/g2",
-  "version": "3.0.4-beta.4",
+  "version": "3.0.4",
   "description": "the Grammar of Graphics in Javascript",
   "main": "build/g2.js",
   "browser": "build/g2.js",
-  "module": "index.js",
+  "module": "lib/index.js",
   "homepage": "https://github.com/antvis/g2",
@@ -24,2 +24,3 @@ "repository": {
     "@antv/data-set": "~0.8.0",
+    "babel-cli": "~6.26.0",
     "babel-core": "~6.26.0",
@@ -56,2 +57,3 @@ "babel-eslint": "~8.0.3",
     "build": "webpack",
+    "build-lib": "babel src --out-dir lib",
     "ci": "npm run lint && npm run test",
@@ -69,3 +71,3 @@ "compress": "uglifyjs -c -m -o dist/g2.min.js -- build/g2.js",
     "mkdir-dist": "node ./bin/mkdir-dist.js",
-    "prepublishOnly": "npm run dist",
+    "prepublishOnly": "npm run build-lib && npm run dist",
     "screenshot": "node ./bin/screenshot.js",
@@ -88,3 +90,3 @@ "test": "torch --compile --renderer --recursive ./test/unit",
   "dependencies": {
-    "@antv/g": "~2.0.4",
+    "@antv/g": "^2.0.5-beta.3",
     "fecha": "~2.3.2",
@@ -91,0 +93,0 @@ "gl-matrix": "~2.4.0",

src/chart/chart.js

@@ -557,5 +557,9 @@ /**
     const link = document.createElement('a');
-    link.download = (name || 'chart') + '.png';
-    link.href = dataURL.replace('image/png', 'image/octet-stream');
-    link.click();
+    link.addEventListener('click', function() {
+      link.download = (name || 'chart') + '.png';
+      link.href = dataURL.replace('image/png', 'image/octet-stream');
+    });
+    const e = document.createEvent('MouseEvents');
+    e.initEvent('click', false, false);
+    link.dispatchEvent(e);
     return dataURL;
@@ -562,0 +566,0 @@ }

src/chart/controller/legend.js

@@ -384,2 +384,3 @@ const Util = require('../../util');
     const legendCfg = Util.deepMix({}, Global.legend[position], legendOptions[field] || legendOptions, {
+      viewId: chart.get('_id'),
       maxLength,
@@ -386,0 +387,0 @@ items

src/chart/view.js

@@ -77,3 +77,4 @@ /**
       tooltipEnable: true, // 是否展示 tooltip
-      animate: true
+      animate: true,
+      visible: true
     };
@@ -422,5 +423,8 @@ }
   getXScale() {
-    const geoms = this.get('geoms').filter(function(geom) {
+    const geoms = this.get('geoms');
+    // 如果进行过滤，那么 geom 默认隐藏时会出现不一致
+    // 默认隐藏时坐标轴不绘制，但是调用了 geom.show() 后，则图形显示了，坐标轴依然不见
+    /* .filter(function(geom) {
       return geom.get('visible');
-    });
+    }); */
     let xScale = null;
@@ -434,5 +438,6 @@ if (!Util.isEmpty(geoms)) {
   getYScales() {
-    const geoms = this.get('geoms').filter(function(geom) {
+    const geoms = this.get('geoms');
+    /* .filter(function(geom) {
       return geom.get('visible');
-    });
+    }); */
     const rst = [];
@@ -946,5 +951,9 @@
     }
+    // 如果 view 隐藏了，隐藏所有的图形和坐标轴
+    if (!this.get('visible')) {
+      this.changeVisible(false, true); // 隐藏所有的图形，但是不绘制
+    }
   }
 
-  changeVisible(visible) {
+  changeVisible(visible, stopDraw) {
     const geoms = this.get('geoms');
@@ -958,5 +967,6 @@ Util.each(geoms, function(geom) {
     this.get('guideController') && this.get('guideController').changeVisible(visible);
-    const canvas = this.get('canvas');
-
-    canvas.draw();
+    if (!stopDraw) {
+      const canvas = this.get('canvas');
+      canvas.draw();
+    }
   }
@@ -963,0 +973,0 @@

src/component/legend/base.js

@@ -44,3 +44,5 @@ /**
   _beforeRenderUI() {
-    this.set('itemsGroup', this.addGroup());
+    const group = this.addGroup();
+    group.set('viewId', this.get('viewId'));
+    this.set('itemsGroup', group);
   }
@@ -47,0 +49,0 @@

src/component/legend/category.js

@@ -420,7 +420,7 @@ /**
         }
-        // update checked status
-        clickedItem.checked = (mode === 'single') ? true : !(clickedItem.checked);
         const domClass = parentDom.className;
         const originColor = parentDom.getAttribute('data-color');
         if (mode === 'single') { // 单选模式
+          // update checked status
+          clickedItem.checked = true;
           // 其他图例项全部置灰
@@ -457,2 +457,4 @@ Util.each(childNodes, child => {
           }
+          // 在判断最后一个图例后再更新checked状态，防止点击最后一个图例item时图例样式没有变化但是checked状态改变了 fix #422
+          clickedItem.checked = !clickedItem.checked;
           if (clickedItemChecked) {
@@ -605,2 +607,3 @@ if (markerDom) {
     });
+    itemGroup.set('viewId', itemsGroup.get('viewId'));
 
@@ -607,0 +610,0 @@ const textStyle = this.get('textStyle');

src/geom/base.js

@@ -31,3 +31,4 @@ /**
 function parseAdjusts(adjusts) {
-  if (Util.isString(adjusts)) {
+  // 如果是字符串或者对象转换成数组
+  if (Util.isString(adjusts) || Util.isPlainObject(adjusts)) {
     adjusts = [ adjusts ];
@@ -123,4 +124,8 @@ }
       },
+      // 样式配置项
       styleOptions: null,
+      // 选中时的配置项
       selectedOptions: null,
+      // active 时的配置项
+      activedOptions: null,
       /**
@@ -131,2 +136,3 @@ * 某些类存在默认的adjust，不能更改 adjust
       hasDefaultAdjust: false,
+      // 数据调整类型
       adjusts: null,
@@ -168,3 +174,4 @@ /**
        */
-      animateCfg: null
+      animateCfg: null,
+      visible: true
     };
@@ -358,6 +365,15 @@ }
    * @param  {Boolean} enable 是否允许激活开关
+   * @param {Object} cfg 激活的配置项
    * @return {Geom}    返回 geom 自身
    */
-  active(enable) {
-    this.set('allowActive', enable);
+  active(enable, cfg) {
+    if (enable === false) {
+      this.set('allowActive', false);
+    } else if (Util.isObject(enable)) {
+      this.set('allowActive', true);
+      this.set('activedOptions', enable);
+    } else {
+      this.set('allowActive', true);
+      this.set('activedOptions', cfg);
+    }
     return this;
@@ -440,3 +456,4 @@ }
       shapeContainer = container.addGroup({
-        viewId
+        viewId,
+        visible: self.get('visible')
       });
@@ -657,3 +674,4 @@ self.set('shapeContainer', shapeContainer);
         }
-        if (!coord.isTransposed) {
+        // 不进行 transpose 时，用户又没有设置这个参数时，默认从上向下
+        if (!coord.isTransposed && Util.isNil(adjustCfg.reverseOrder)) {
           adjustCfg.reverseOrder = true;
@@ -764,3 +782,4 @@ }
       geom: self,
-      geomType: type
+      geomType: type,
+      visible: self.get('visible')
     });
@@ -767,0 +786,0 @@ labelContainer.showLabels(points);

src/geom/mixin/active.js

@@ -36,3 +36,15 @@ /**
 
+function getOriginAttrs(activeCfg, shape) {
+  const originAttrs = {};
+  Util.each(activeCfg, function(v, k) {
+    let originValue = shape.__attrs[k];
+    if (Util.isArray(originValue)) {
+      originValue = Util.cloneDeep(originValue);// 缓存原来的属性，由于 __attrs.matrix 是数组，所以此处需要深度复制
+    }
+    originAttrs[k] = originValue;
+  });
+  return originAttrs;
+}
 
+
 const ActiveMixin = {
@@ -59,3 +71,3 @@ _isAllowActive() {
     const shapeContainer = self.get('shapeContainer');
-    if (shape && !shape.get('animating') && shapeContainer.contain(shape) && self._isAllowActive()) {
+    if (shape && shapeContainer.contain(shape) && self._isAllowActive()) { // shape.get('animating')
       self.setShapesActived(shape);
@@ -89,2 +101,3 @@ }
     const self = this;
+    const activedOptions = self.get('activedOptions') || {};
     const shapeData = shape.get('origin');
@@ -100,3 +113,13 @@ let shapeName = shapeData.shape || self.getDefaultValue('shape');
     const activeCfg = shapeFactory.getActiveCfg(shapeName, shapeCfg);
-    Util.mix(shape.__attrs, activeCfg);
+    if (activedOptions.style) {
+      Util.mix(activeCfg, activedOptions.style);
+    }
+    const originAttrs = getOriginAttrs(activeCfg, shape);
+    shape.setSilent('_originAttrs', originAttrs);
+    if (activedOptions.animate) {
+      shape.animate(activeCfg, 300);
+    } else {
+      // Util.mix(shape.__attrs, activeCfg);
+      shape.attr(activeCfg);
+    }
     shape.setZIndex(1); // 提前
@@ -106,36 +129,36 @@ },
     const self = this;
-    let isStop = false; // 判断 shape 是否正在动画
     if (!Util.isArray(shapes)) {
       shapes = [ shapes ];
     }
-
-    const preShapes = self.get('preShapes'); // 获取上次被激活的 shapes
+    const preShapes = self.get('activeShapes'); // 获取上次被激活的 shapes
     if (!isChange(preShapes, shapes)) {
       return;
     }
-    if (preShapes) {
-      self.clearActivedShapes(); // 先清除激活元素
-    }
     const view = self.get('view');
     const canvas = view.get('canvas');
     const shapeContainer = self.get('shapeContainer');
-    Util.each(shapes, shape => {
-      if (shape.get('animating')) {
-        isStop = true;
-        return false;
+    const activedOptions = self.get('activedOptions');
+    if (activedOptions && activedOptions.highlight) {
+      // 上次的动画未完成，所以要停止掉动画
+      Util.each(shapes, shape => {
+        if (shape.get('animating')) {
+          shape.stopAnimate();
+        }
+      });
+      self.highlightShapes(shapes);
+    } else {
+      if (preShapes) {
+        self.clearActivedShapes(); // 先清除激活元素
       }
-      if (!shape.get('_originAttrs')) {
-        shape.set('_originAttrs', Util.cloneDeep(shape.__attrs)); // 缓存原来的属性，由于 __attrs.matrix 是数组，所以此处需要深度复制
-      }
-      if (shape.get('visible') && !shape.get('selected')) {
-        self._setActiveShape(shape);
-      }
-    });
 
-    if (isStop) {
-      return;
+      Util.each(shapes, shape => {
+        if (shape.get('animating')) {
+          shape.stopAnimate();
+        }
+        if (shape.get('visible') && !shape.get('selected')) {
+          self._setActiveShape(shape);
+        }
+      });
     }
-
     self.set('activeShapes', shapes);
-    self.set('preShapes', shapes);
     shapeContainer.sort();
@@ -147,2 +170,4 @@ canvas.draw();
     const shapeContainer = self.get('shapeContainer');
+    const activedOptions = self.get('activedOptions');
+    const activeAnimate = activedOptions && activedOptions.animate;
     if (shapeContainer && !shapeContainer.get('destroyed')) {
@@ -153,3 +178,8 @@ const activeShapes = self.get('activeShapes');
           const originAttrs = activeShape.get('_originAttrs');
-          activeShape.__attrs = Util.cloneDeep(originAttrs);
+          if (activeAnimate) {
+            activeShape.stopAnimate();
+            activeShape.animate(originAttrs, 300);
+          } else {
+            activeShape.attr(originAttrs);
+          }
           activeShape.setZIndex(0);
@@ -166,3 +196,8 @@ activeShape.set('_originAttrs', null);
             if (originAttrs) {
-              shape.__attrs = Util.cloneDeep(originAttrs);
+              if (activeAnimate) {
+                shape.stopAnimate();
+                shape.animate(originAttrs, 300);
+              } else {
+                shape.attr(originAttrs);
+              }
               shape.setZIndex(0);
@@ -181,3 +216,2 @@ shape.set('_originAttrs', null);
       self.set('activeShapes', null);
-      self.set('preShapes', null);
       self.set('preHighlightShapes', null);
@@ -226,7 +260,6 @@ }
 
-    const preHighlightShapes = self.get('preHighlightShapes'); // 获取上次被激活的 shapes
+    const preHighlightShapes = self.get('activeShapes'); // 获取上次被激活的 shapes
     if (!isChange(preHighlightShapes, highlightShapes)) {
       return;
     }
-
     if (preHighlightShapes) {
@@ -237,19 +270,26 @@ self.clearActivedShapes();
     const shapes = self.getShapes();
+    const activedOptions = self.get('activedOptions');
+    const activeAnimate = activedOptions && activedOptions.animate;
+    const activeStyle = activedOptions && activedOptions.style;
 
     Util.each(shapes, shape => {
-      if (!shape.get('_originAttrs')) {
-        shape.set('_originAttrs', Util.cloneDeep(shape.__attrs)); // 缓存原来的属性
-      }
+      const changeAttrs = {};
+      shape.stopAnimate();
       if (Util.indexOf(highlightShapes, shape) !== -1) {
-        shape.__attrs = Util.mix({}, shape.get('_originAttrs'), highlightCfg);
+        Util.mix(changeAttrs, activeStyle, highlightCfg);
+        // shape.__attrs = Util.mix({}, shape.get('_originAttrs'), highlightCfg);
         shape.setZIndex(1); // 提前
       } else {
-        Util.mix(shape.__attrs, {
-          fill: '#fff',
-          fillOpacity: 0.3,
-          strokeOpacity: 0.3,
-          stroke: '#fff'
+        Util.mix(changeAttrs, {
+          fillOpacity: 0.3
         });
         shape.setZIndex(0);
       }
+      const originAttrs = getOriginAttrs(changeAttrs, shape);
+      shape.setSilent('_originAttrs', originAttrs);
+      if (activeAnimate) {
+        shape.animate(changeAttrs, 300);
+      } else {
+        shape.attr(changeAttrs);
+      }
     });
@@ -256,0 +296,0 @@ self.set('preHighlightShapes', highlightShapes);

src/geom/mixin/select.js

@@ -5,3 +5,5 @@ /**
  */
+
 const Util = require('../../util');
+const FIELD_ORIGIN = '_origin';
 
@@ -139,2 +141,19 @@ function isSameShape(shape1, shape2) {
   },
+  /**
+   * 设置记录对应的图形选中
+   * @param {Object} record 选中的记录
+   * @chainable
+   * @return {Geom} 返回当前的 Geometry
+   */
+  setSelected(record) {
+    const self = this;
+    const shapes = self.getShapes();
+    Util.each(shapes, shape => {
+      const origin = shape.get('origin');
+      if (origin && origin[FIELD_ORIGIN] === record) {
+        self.setShapeSelected(shape);
+      }
+    });
+    return this;
+  },
   _getSelectedShapes() {
@@ -141,0 +160,0 @@ const self = this;

src/geom/shape/point.js

@@ -108,3 +108,2 @@ /**
       stroke: color,
-      strokeStyle: color,
       strokeOpacity: 1,
@@ -111,0 +110,0 @@ lineWidth: 1

src/index.d.ts

@@ -0,1 +1,6 @@
+// Type definitions for g2 3.0.x
+// Project: https://github.com/antvis/g2
+
+// Last module patch version validated against: 3.0.4
+
 export = G2;
@@ -7,2 +12,5 @@ export as namespace G2;
   const version: string;
+  const Animate: Animate;
+  const Util: Util;
+  const Shape: Shape;
 
@@ -26,30 +34,90 @@ class Global {
     connectNulls: boolean;
+    colors: string[]; // 更改默认的颜色 --不推荐
   }
 
   /**
-   * 图标背景对象
+   * base Style interface [绘图属性]
    */
-  interface ChartBackground {
-    fill: string; // 图表背景色
-    fillOpacity: number; // 图表背景透明度
-    stroke: string; // 图表边框颜色
-    strokeOpacity: number; // 图表边框透明度
-    opacity: number; // 图表整体透明度
-    lineWidth: number; // 图表边框粗度
-    radius: number; // 图表圆角大小
+  namespace Styles {
+    interface common {
+      fill?: string; // 设置用于填充绘画的颜色、渐变或模式；
+      stroke?: string | number; //  设置用于笔触的颜色、渐变或模式；
+      shadowColor?: string; // 设置用于阴影的颜色；
+      shadowBlur?: string | number; // 设置用于阴影的模糊级别；
+      shadowOffsetX?: string | number; // 设置阴影距形状的水平距离；
+      shadowOffsetY?: string | number; //  设置阴影距形状的垂直距离；
+      opacity?: string | number; // 设置绘图的当前 alpha 或透明值；
+      globalCompositeOperation?: string; // 设置新图像如何绘制到已有的图像上。
+    }
+    interface text extends common {
+      font?: string;
+      // 文本对齐方向，可取值为
+      textAlign?: 'center' | 'end' | 'left' | 'right' | 'start';
+      // 文本粗细
+      rotate?: number;
+      // 文本基准线，可取 top middle bottom，默认为middle
+      textBaseline?: 'top' | 'middle' | 'bottom';
+      fontStyle?: 'normal' | 'italic' | 'oblique';
+      fontVariant?: 'normal' | 'small-caps';
+      fontWeight?: string | number;
+      fontSize?: string | number;
+      fontFamily?: string;
+    }
+    interface line extends common {
+      strokeOpacity?: string | number;
+      lineDash?: number[]; // 虚线的设置
+      lineCap?: string;
+      lineJoin?: string;
+      lineWidth?: string | number;
+      miterLimit?: string | number;
+      startArrow?: boolean;
+      endArrow?: boolean;
+      arrowAngle?: number;
+      arrowRadius?: number;
+    }
+
+    interface tickLine extends line{
+      length?: number; // 刻度线的长度，可以为负值（表示反方向渲染）
+    }
+
+    interface background extends common {
+      fillOpacity?: number; // 图表背景透明度
+      strokeOpacity?: number; // 图表边框透明度
+      lineWidth?: number; // 图表边框粗度
+      radius?: number; // 图表圆角大小
+    }
+
+    interface path extends common {
+      fillOpacity?: number; // 图表背景透明度
+      strokeOpacity?: number; // 图表边框透明度
+    }
   }
 
   /**
+   * base type
+   */
+  type EventParams = {
+    x?: number;
+    y?: number;
+    target?: HTMLCanvasElement;
+    toElement?: HTMLElement;
+    shape?: Shape;
+    views?: View[];
+    data?: any;
+    geom?: any;
+  }
+
+  /**
    * 图标接收的参数
    */
-  interface ChartProp {
+  interface ChartProps {
     container: string | HTMLDivElement;
-    width: number;
+    width?: number;
     height: number;
     padding?:
       | {
-          top: number;
-          right: number;
-          bottom: number;
-          left: number;
+          top?: number;
+          right?: number;
+          bottom?: number;
+          left?: number;
         }
@@ -59,4 +127,4 @@ | number
       | [string, string];
-    background?: ChartBackground;
-    plotBackground?: ChartBackground;
+    background?: Styles.background;
+    plotBackground?: Styles.background;
     forceFit?: boolean;
@@ -74,3 +142,3 @@ animate?: boolean;
     //坐标系转置，将 x 或者 y 的起始、结束值倒置。
-    reflect(xy?: 'x' | 'y' | 'xy'): Coordinate;
+    reflect(xy?: 'x' | 'y' ): Coordinate;
     //将坐标系 x 轴和 y 轴转置。
@@ -80,27 +148,62 @@ transpose(): Coordinate;
 
+  interface Geom {
+    position(pos: string): this;
+    position(pos: string[]): this;
+    color(col: string): this;
+    color(type: string, colors: string[]): this;
+    color(type: string, fun: Function): this;
+    shape(shape: string): this;
+    shape(type: string, colors: string[]): this;
+    shape(type: string, fun: Function): this;
+    size(size: number): this;
+    size(col: string): this;
+    size(type: string, colors: number[]): this;
+    size(type: string, Function): this;
+    opacity(op: number): this;
+    opacity(col: string): this;
+    opacity(type: string, Function): this;
+    adjust(adj: string): this;
+    adjust(adjs: any[]): this;
+    label(field: string): this;
+    label(exe: string, Function): this;
+    label(exe: string,opt: {
+      offset?: number;
+      textStyle?: Styles.text;
+    }): this;
+    tooltip(open: boolean): this;
+    tooltip(field: string): this;
+    tooltip(exe: string, Function): this;
+    style(style: any): this;
+    style(exe: string, Function): this;
+    select(open: boolean): this;
+    select(opt: {
+      mode: 'single' | 'multiple', // 选中模式，单选、多选
+      style: {}, // 选中后 shape 的样式
+      cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
+      animate: true | false // 选中是否执行动画，默认执行动画
+    }): this;
+    select(open: boolean, opt: {
+      mode: 'single' | 'multiple', // 选中模式，单选、多选
+      style: {}, // 选中后 shape 的样式
+      cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
+      animate: true | false // 选中是否执行动画，默认执行动画
+    }): this;
+    active(open: boolean);
+    animate(opt: any);
+  }
+  
+
   /**
    * 坐标轴标签
    */
-  interface AxisChartLabel {
+  interface AxisLabel {
     // 数值，设置坐标轴文本 label 距离坐标轴线的距离
-    offset: number;
+    offset?: number;
     // 设置文本的显示样式，还可以是个回调函数，
     // 回调函数的参数为该坐标轴对应字段的数值
-    textStyle: (
-      text: string,
-    ) => void | {
-      // 文本对齐方向，可取值为
-      textAlign: 'start' | 'middle' | 'end';
-      // 文本的颜色
-      fill: string;
-      // 文本大小
-      fontSize: number;
-      fontWeight: string;
-      // 文本粗细
-      rotate: number;
-      // 文本基准线，可取 top middle bottom，默认为middle
-      textBaseline: 'top' | 'middle' | 'bottom';
-    };
+    textStyle?: ((
+      text?: string,
+    ) => Styles.text) | Styles.text;
     // 文本是否需要自动旋转，默认为 true
-    autoRotate: boolean;
+    autoRotate?: boolean;
     /**
@@ -113,3 +216,3 @@ * 用于格式化坐标轴上显示的文本信息的回调函数
      */
-    formatter(text: string, item, index: number): string;
+    formatter?(text: string, item, index: number): string;
     /**
@@ -122,3 +225,3 @@ * 使用 html 渲染文本
      */
-    htmlTemplate(text: string, item, index: number): string;
+    htmlTemplate?(text: string, item, index: number): string;
   }
@@ -128,22 +231,9 @@ /**
    */
-  interface AxisChartTile {
-    autoRotate: boolean; // 是否需要自动旋转，默认为 true
-    offset: number; // 数值，设置坐标轴标题距离坐标轴线的距离
+  interface AxisTile {
+    autoRotate?: boolean; // 是否需要自动旋转，默认为 true
+    offset?: number; // 数值，设置坐标轴标题距离坐标轴线的距离
     // 设置标题的文本样式
-    textStyle: {
-      // 文本对齐方向，可取值为： start middle end
-      textAlign: 'start' | 'middle' | 'end';
-      // 文本的颜色
-      fill: string;
-      // 文本大小
-      fontSize: string;
-      // 文本粗细
-      fontWeight: string | number;
-      // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
-      rotate: number;
-      // 文本基准线，可取 top middle bottom，默认为middle
-      textBaseline: 'top' | 'middle' | 'bottom';
-    };
+    textStyle?: Styles.text;
     // 标题的显示位置（相对于坐标轴线），可取值为 start center end
-    position: 'start' | 'center' | 'end';
+    position?: 'start' | 'center' | 'end';
   }
@@ -161,16 +251,3 @@
     layout?: 'vertica' | 'horizontal';
-    title?: {
-      // 文本对齐方向，可取值为： start middle end
-      textAlign: 'start' | 'middle' | 'end';
-      // 文本的颜色
-      fill: string;
-      // 文本大小
-      fontSize: string;
-      // 文本粗细
-      fontWeight: string | number;
-      // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
-      rotate: number;
-      // 文本基准线，可取 top middle bottom，默认为middle
-      textBaseline: 'top' | 'middle' | 'bottom';
-    };
+    title?: Styles.text;
     offsetX?: number;
@@ -186,19 +263,6 @@ offsetY?: number;
     };
-    allowAllCanceled: number;
-    itemFormatter: (value: string) => string;
+    allowAllCanceled?: number;
+    itemFormatter?: (value: string) => string;
     marker?: string | Function;
-    textStyle?: {
-      // 文本对齐方向，可取值为： start middle end
-      textAlign: 'start' | 'middle' | 'end';
-      // 文本的颜色
-      fill: string;
-      // 文本大小
-      fontSize: string;
-      // 文本粗细
-      fontWeight: string | number;
-      // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
-      rotate: number;
-      // 文本基准线，可取 top middle bottom，默认为middle
-      textBaseline: 'top' | 'middle' | 'bottom';
-    };
+    textStyle?: Styles.text;
     clickable?: boolean;
@@ -212,8 +276,8 @@ hoverable?: boolean;
     containerTpl?: string;
-    itemTpl: string;
-    slidable: boolean;
-    width: number;
-    height: number;
-    custom: number;
-    items: Array<{
+    itemTpl?: string;
+    slidable?: boolean;
+    width?: number;
+    height?: number;
+    custom?: number;
+    items?: Array<{
       value: string; // 图例项的文本内容
@@ -226,17 +290,9 @@ fill: string; // 该图例项 marker 的填充颜色
   interface TooltipConfig {
-    triggerOn: 'mousemove' | 'click' | 'none';
-    showTitle: boolean;
-    title: string;
-    crosshairs: {
+    triggerOn?: 'mousemove' | 'click' | 'none';
+    showTitle?: boolean;
+    title?: string;
+    crosshairs?: {
       // rect 表示矩形框，x 表示水平辅助线，y 表示垂直辅助线，cross 表示十字辅助线
-      type: 'rect' | 'x' | 'y' | 'cross';
-      style: {
-        // 图形样式
-        fill: { string }; // 填充的颜色
-        stroke: { string }; // 边框的颜色
-        strokeOpacity: { number }; // 边框颜色的透明度，数值为 0 - 1 范围
-        fillOpacity: { number }; // 填充的颜色透明度，数值为 0 - 1 范围
-        lineWidth: { number }; // 边框的粗细
-        lineDash: { number } | { array }; // 线的虚线样式
-      };
+      type?: 'rect' | 'x' | 'y' | 'cross';
+      style?: Styles.background | Styles.line;
     };
@@ -260,3 +316,3 @@ offset?: number;
   class ChartGuide {
-    line: (
+    line(
       option: {
@@ -268,7 +324,3 @@ top?: boolean; // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
         end?: any | Function | Array<string | number>;
-        lineStyle?: {
-          stroke?: string; // 线的颜色
-          lineDash?: [number, number, number]; // 虚线的设置
-          lineWidth?: number; // 线的宽度
-        }; // 图形样式配置
+        lineStyle?: Styles.line; // 图形样式配置
         text?: {
@@ -289,7 +341,7 @@ // 文本的显示位置
       },
-    ) => void;
-    text: (
+    ) : void;
+    text(
       option: {
         // 指定 guide 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
-        top?: { boolean };
+        top?: boolean;
         // 文本的起始位置，值为原始数据值，支持 callback
@@ -299,16 +351,8 @@ position?: any | Function | Array<string | number>;
         content?: string;
-        style?: {
-          // 文本的颜色
-          fill?: string;
-          // 文本大小
-          fontSize?: string;
-          // 文本粗细
-          fontWeight?: string | number;
-          rotate?: number;
-        }; // 文本的图形样式属性
+        style?: G2.Styles.text; // 文本的图形样式属性
         offsetX?: number; // x 方向的偏移量
         offsetY?: number; // y 方向偏移量
       },
-    ) => void;
-    image: (
+    ): void;
+    image(
       option: {
@@ -330,4 +374,4 @@ // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
       },
-    ) => void;
-    region: (
+    ): void;
+    region(
       option: {
@@ -350,4 +394,4 @@ // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
       },
-    ) => void;
-    html: (
+    ): void;
+    html(
       option: {
@@ -364,3 +408,3 @@ // html的起始位置，值为原始数据值，支持 callback
       },
-    ) => void;
+    ): void;
 
@@ -374,38 +418,5 @@ arc: (
         end?: any | Function | Array<string | number>;
+        style?: object;
       },
     ) => void;
-    facet: (
-      option: {
-        fileds: Array<String>;
-        showTitle: boolean; // 显示标题
-        autoSetAxis: boolean; // 自动设置坐标轴的文本，避免重复和遮挡
-        padding: string; // 每个 view 之间的间距
-        /**
-         * 创建每个分面中的视图
-         * @param  {object} view  视图对象
-         * @param  {object} facet
-         * @return {null}
-         */
-        eachView: any;
-        // 列标题
-        colTitle: {
-          offsetY: number;
-          style: {
-            fontSize: number;
-            textAlign: 'center' | 'left' | 'right';
-            fill: string;
-          };
-        };
-        // 行标题
-        rowTitle: {
-          offsetX: number;
-          style: {
-            fontSize: number;
-            textAlign: 'center' | 'left' | 'right';
-            fill: string;
-            rotate: number;
-          };
-        };
-      },
-    ) => void;
   }
@@ -415,67 +426,33 @@
     position?: 'top' | 'bottom' | 'left' | 'right';
-    line?: {
-      // 坐标轴线的颜色
-      stroke?: string;
-      // 坐标轴线的透明度，数值范围为 0 - 1
-      strokeOpacity?: number;
-      /*设置虚线的样式
-        * 如 [2, 3]第一个用来表示实线的像素，
-        * 第二个用来表示空白的像素。
-        * 如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值
-        */
-      lineDash?: [number, number];
-      lineWidth?: number;
-    } | null;
-    label?: AxisChartLabel;
-    title?: AxisChartTile;
-    tickLine?: {
-      // 刻度线宽
-      lineWidth: number;
-      // 刻度线的颜色
-      stroke: string;
-      // 刻度线颜色的透明度
-      strokeOpacity: number;
-      // 刻度线的长度，可以为负值（表示反方向渲染）
-      length: number;
-    };
+    line?: Styles.line;
+    label?: AxisLabel;
+    title?: AxisTile;
+    tickLine?: Styles.tickLine | null;
     subTickCount?: number;
-    subTickLine?: {
-      // 次刻度线宽
-      lineWidth: number;
-      // 次刻度线颜色
-      stroke: string;
-      // 次刻度线颜色的透明度
-      strokeOpacity: number;
-      // 次刻度线的长度，可以为负值（表示反方向渲染）
-      length: number;
-    };
-    grid?: {
-      // 声明网格顶点从两个刻度中间开始，默认从刻度点开始
-      align?: 'center';
-      // 声明网格的类型，line 表示线，polygon 表示矩形框
-      type?: 'line' | 'polygon';
-      // 当网格类型 type 为 line 时，使用 lineStyle 设置样式
-      lineStyle?: {
-        // 网格线的颜色
-        stroke?: string;
-        // 网格线的粗细
-        lineWidth?: number;
-        // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
-        lineDash?: [number, number];
-      };
-      // 当网格类型 type 为 polygon 时，使用 alternateColor 为网格设置交替的颜色
-      // 指定一个值则先渲染奇数层，两个值则交替渲染
-      alternateColor?: string | [string, string];
-      // 是否隐藏第一条网格线，默认为 false
-      hideFirstLine: boolean;
-      // 是否隐藏最后一条网格线，默认为 false
-      hideLastLine: boolean;
-    };
+    subTickLine?: Styles.tickLine | null;
+    grid?: AxisGrid | null;
   }
+  type AxisGrid  = {
+    // 声明网格顶点从两个刻度中间开始，默认从刻度点开始
+    align?: 'center';
+    // 声明网格的类型，line 表示线，polygon 表示矩形框
+    type?: 'line' | 'polygon';
+    // 当网格类型 type 为 line 时，使用 lineStyle 设置样式
+    lineStyle?: Styles.line;
+    // 当网格类型 type 为 polygon 时，使用 alternateColor 为网格设置交替的颜色
+    // 指定一个值则先渲染奇数层，两个值则交替渲染
+    alternateColor?: string | [string, string];
+    // 是否隐藏第一条网格线，默认为 false
+    hideFirstLine?: boolean;
+    // 是否隐藏最后一条网格线，默认为 false
+    hideLastLine?: boolean;
+  };
 
+
+
   class BashView {
     source(data: any): this;
     source(data: any, scaleConfig: any): this;
-    getXScale: () => number;
-    getYScales: () => number;
+    getXScale<T>(): T;
+    getYScales<T>(): T[];
     getXY: () => {
@@ -511,11 +488,19 @@ x: number; // 画布上的横坐标
     destroy: () => void;
-    line: () => any;
-    path: () => any;
-    area: () => any;
-    point: () => any;
-    interval: () => any;
-    polygon: () => any;
-    schema: () => any;
-    edge: () => any;
-    heatmap: () => any;
+    line: () => Geom;
+    path: () => Geom;
+    area: () => Geom;
+    point: () => Geom;
+    interval: () => Geom;
+    polygon: () => Geom;
+    schema: () => Geom;
+    edge: () => Geom;
+    heatmap: () => Geom;
+    pointStack: () => Geom;
+    pointJitter: () => Geom;
+    pointDodge: () => Geom;
+    intervalStack: () => Geom;
+    intervalDodge: () => Geom;
+    intervalSymmetric: () => Geom;
+    areaStack:() => Geom;
+    schemaDodge: () => Geom;
   }
@@ -531,36 +516,114 @@
     legend(field: string, option: boolean): this;
-    legend(field: string, legendConfig: ChartAxisConfig): this;
+    legend(field: string, legendConfig: LegendConfig): this;
     tooltip(tooltipConfig: TooltipConfig): this;
+    tooltip(tooltipConfig: boolean): this;
     view: (
-      option: {
-        start: { x: number; y: number };
-        end: { x: number; y: number };
-        padding: number;
-        animate: boolean;
+      option?: {
+        start?: { x: number; y: number };
+        end?: { x: number; y: number };
+        padding?: number;
+        animate?: boolean;
       },
     ) => View;
-    forceFit: () => void;
+    forceFit(boolean): this;
     render: () => void;
-    changeSize: (width: number, height: number) => void;
-    changeWidth: (width: number) => void;
-    getSnapRecords: (ponit: { x: number; y: number }) => Array<number>;
-    getAllGeoms: () => Array<any>;
-    toDataURL: () => string;
+    changeSize(width: number, height: number) : this;
+    changeWidth(width: number): this;
+    changeHeight(height: number): this;
+    getSnapRecords(ponit: { x: number; y: number }): Array<number>;
+    getAllGeoms(): Array<any>;
+    toDataURL(): string;
     downloadImage: (name: string) => string;
     showTooltip: (ponit: { x: number; y: number }) => any;
-    hideTooltip: (ponit: { x: number; y: number }) => any;
+    hideTooltip: () => any;
     on: (eventNane: string, event: any) => any;
+    facet(
+      type: 'rect' | 'list' | 'tree' | 'mirror' | 'matrix',
+      option: {
+        fileds?: Array<String>;
+        showTitle?: boolean; // 显示标题
+        autoSetAxis?: boolean; // 自动设置坐标轴的文本，避免重复和遮挡
+        padding?: number; // 每个 view 之间的间距
+        /**
+         * 创建每个分面中的视图
+         * @param  {object} view  视图对象
+         * @param  {object} facet
+         * @return {null}
+         */
+        eachView?: any;
+        // 列标题
+        colTitle?: {
+          offsetY?: number;
+          style?: G2.Styles.text;
+        } | null;
+        // 行标题
+        rowTitle?: {
+          offsetX?: number;
+          style?: G2.Styles.text;
+        } | null;
+      },
+    ): void;
   }
 
-  class Scale {
-    type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow';
-    formatter: (value: string) => string;
-    range: [number, number];
-    alias: string;
-    tickCount: number;
-    ticks: Array<any>;
+  /**
+   * config interface
+   */
+  class Scale<T> {
+    type?: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow';
+    formatter?: (value: T) => string;
+    range?: [number, number];
+    alias?: string | number;
+    tickCount?: number;
+    ticks?: Array<any>;
+    scale?(value: T): number;
+    invert?(n: number): T;
+    getTicks?(): any[];
+    getText?(value: any): string;
   }
 
-  class Shape {
-    registerShape: (
+  class ScaleLinear extends Scale<number> {
+    nice?: boolean;
+    min?: number;
+    max?: number;
+    tickInterval?: number; // 用于指定坐标轴各个标度点的间距，是原始数据之间的间距差值，tickCount 和 tickInterval 不可以同时声明。
+  }
+
+  class ScaleCat<T> extends Scale<T> {
+    range?: [number, number];
+    values?: T[];
+  }
+
+  class ScaleLog extends Scale<number> {
+    nice?: boolean;
+    min?: number;
+    max?: number;
+    base?: number;
+    tickInterval?: number;
+  }
+
+  class ScalePow extends Scale<number> {
+    nice?: boolean;
+    min?: number;
+    max?: number;
+    exponent?: number;
+    tickInterval?: number;
+  }
+
+  class ScaleTime extends Scale<(number | string)> {
+    nice?: boolean;
+    min?: number | string;
+    max?: number | string;
+    mask?: string;
+    tickInterval?: number;
+  }
+
+  class scaleTimeCat extends Scale<(number | string)> {
+    nice?: boolean;
+    mask?: string;
+    values?: number[] | string[];
+  }
+
+  interface Shape {
+    getLinearValue?(percent: any): any;
+    registerShape?: (
       chartType: string,
@@ -579,3 +642,4 @@ shapeName: string,
 
-  class Animate {
+
+  interface Animate {
     registerAnimation(
@@ -585,5 +649,17 @@ animationType: string,
       animationFun: any,
-    );
+    ): void;
   }
 
+  type lodashFn = any;
+
+  interface Util {
+    each: lodashFn;
+    map: lodashFn;
+    isObject: lodashFn;
+    isNumber: lodashFn;
+    isString: lodashFn;
+    isFunction: lodashFn;
+    [other:string]: lodashFn;
+  }
+
   class DomUtil {
@@ -590,0 +666,0 @@ getBoundingClientRect: (

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5006267

increased by14.86%

Number of package files

263

increased by87.86%

Lines of code

83872

increased by31.7%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

30

increased by3.45%

Dependency changes

• + Added@antv/g@2.1.0(transitive)

• - Removed@antv/g@2.0.6(transitive)

• Updated@antv/g@^2.0.5-beta.3