@antv/g2 - npm Package Compare versions

Comparing version 3.0.5-beta.1 to 3.0.5-beta.2

lib/animate/index.js

@@ -109,3 +109,3 @@ /**
         tempShape.name = name;
-        if (coord) {
+        if (coord && name !== 'label') {
           var tempShapeMatrix = tempShape.getMatrix();
@@ -112,0 +112,0 @@ var finalMatrix = mat3.multiply([], tempShapeMatrix, coord.matrix);

lib/chart/controller/coord.js

@@ -71,2 +71,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     if (type === 'theta') {
+      // definition of theta coord
       C = Coord.Polar;
@@ -73,0 +74,0 @@

lib/chart/controller/event.js

@@ -95,3 +95,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
   EventController.prototype._triggerShapeEvent = function _triggerShapeEvent(shape, eventName, eventObj) {
-    if (shape && shape.name) {
+    if (shape && shape.name && !shape.get('destroyed')) {
       var view = this.view;
@@ -125,2 +125,7 @@ if (view.isShapeInView(shape)) {
     var currentShape = self.currentShape;
+    // 如果图形被销毁，则设置当前 shape 为空
+    if (currentShape && currentShape.get('destroyed')) {
+      currentShape = null;
+      self.currentShape = null;
+    }
     var shape = self._getShape(ev.x, ev.y);
@@ -127,0 +132,0 @@ var eventObj = self._getShapeEventObj(ev);

lib/geom/heatmap.js

@@ -131,2 +131,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     ctx.clearRect(0, 0, circleCanvas.width, circleCanvas.height);
+    // ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
     ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
@@ -143,3 +144,4 @@ ctx.shadowBlur = blur;
   Heatmap.prototype._drawGrayScaleBlurredCircle = function _drawGrayScaleBlurredCircle(x, y, r, alpha, ctx) {
-    var circleCanvas = this.get(GRAY_SCALE_BLURRED_CANVAS);
+    var self = this;
+    var circleCanvas = self.get(GRAY_SCALE_BLURRED_CANVAS);
     ctx.globalAlpha = alpha;
@@ -215,3 +217,3 @@ ctx.drawImage(circleCanvas, x - r, y - r);
       var alpha = scale.scale(obj[ORIGIN_FIELD][valueField]);
-      self._drawGrayScaleBlurredCircle(cfg.x, cfg.y, size.radius, alpha, ctx);
+      self._drawGrayScaleBlurredCircle(cfg.x, cfg.y, size.radius + size.blur, alpha, ctx);
     }
@@ -218,0 +220,0 @@

lib/geom/index.js

@@ -5,2 +5,3 @@
 Geom.PointJitter = Geom.Point.Jitter;
+Geom.PointStack = Geom.Point.Stack;
 Geom.Path = require('./path');
@@ -7,0 +8,0 @@ Geom.Line = require('./line');

lib/geom/mixin/split.js

@@ -7,2 +7,3 @@ /**
 var Util = require('../../util');
+var Global = require('../../global');
 
@@ -19,9 +20,16 @@ module.exports = {
       yValue = obj._origin ? obj._origin[yDim] : obj[yDim];
-      if (Util.isArray(yValue) && Util.isNil(yValue[0]) || Util.isNil(yValue)) {
-        if (tmp.length) {
-          arr.push(tmp);
-          tmp = [];
+      if (Global.connectNulls) {
+        // 如果忽视 Null 直接连接节点，则将 value = null 的数据过滤掉
+        if (!Util.isNil(yValue)) {
+          tmp.push(obj);
         }
       } else {
-        tmp.push(obj);
+        if (Util.isArray(yValue) && Util.isNil(yValue[0]) || Util.isNil(yValue)) {
+          if (tmp.length) {
+            arr.push(tmp);
+            tmp = [];
+          }
+        } else {
+          tmp.push(obj);
+        }
       }
@@ -28,0 +36,0 @@ });

lib/geom/mixin/tooltip.js

@@ -411,3 +411,3 @@ /**
         if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          itemCfg.size = self.getSize();
+          itemCfg.size = self.getSize(point[FIELD_ORIGIN]);
         }
@@ -414,0 +414,0 @@ items.push(itemCfg);

lib/geom/point.js

@@ -80,4 +80,24 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+var PointStack = function (_Point2) {
+  _inherits(PointStack, _Point2);
+
+  function PointStack() {
+    _classCallCheck(this, PointStack);
+
+    return _possibleConstructorReturn(this, _Point2.apply(this, arguments));
+  }
+
+  PointStack.prototype.getDefaultCfg = function getDefaultCfg() {
+    var cfg = _Point2.prototype.getDefaultCfg.call(this);
+    cfg.hasDefaultAdjust = true;
+    cfg.adjusts = [{ type: 'stack' }];
+    return cfg;
+  };
+
+  return PointStack;
+}(Point);
+
 Point.Jitter = PointJitter;
+Point.Stack = PointStack;
 
 module.exports = Point;

lib/geom/shape/interval.js

@@ -11,2 +11,3 @@ /**
 var PathUtil = require('../util/path');
+var GPathUtil = require('@antv/g').PathUtil;
 var Global = require('../../global');
@@ -174,3 +175,3 @@
   } else {
-    path.push(['M', points[0].x, points[0].y], ['L', points[1].x, points[1].y], ['L', points[2].x, points[2].y], ['Z']);
+    path.push(['M', points[0].x, points[0].y], ['L', points[1].x, points[1].y], ['L', points[2].x, points[2].y], ['L', points[2].x, points[2].y], ['Z']);
   }
@@ -405,2 +406,237 @@
 });
+
+// 水波图
+/**
+ * 用贝塞尔曲线模拟正弦波
+ * Using Bezier curves to fit sine wave.
+ * There is 4 control points for each curve of wave,
+ * which is at 1/4 wave length of the sine wave.
+ *
+ * The control points for a wave from (a) to (d) are a-b-c-d:
+ *          c *----* d
+ *     b *
+ *       |
+ * ... a * ..................
+ *
+ * whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
+ *
+ * @param {number} x          x position of the left-most point (a)
+ * @param {number} stage      0-3, stating which part of the wave it is
+ * @param {number} waveLength wave length of the sine wave
+ * @param {number} amplitude  wave amplitude
+ * @return {Array} 正弦片段曲线
+ */
+function getWaterWavePositions(x, stage, waveLength, amplitude) {
+  if (stage === 0) {
+    return [[x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2], [x + 1 / 2 * waveLength / Math.PI, amplitude], [x + waveLength / 4, amplitude]];
+  } else if (stage === 1) {
+    return [[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2), amplitude], [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1), amplitude / 2], [x + waveLength / 4, 0]];
+  } else if (stage === 2) {
+    return [[x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2], [x + 1 / 2 * waveLength / Math.PI, -amplitude], [x + waveLength / 4, -amplitude]];
+  }
+  return [[x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2), -amplitude], [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1), -amplitude / 2], [x + waveLength / 4, 0]];
+}
+/**
+ * 获取水波路径
+ * @param  {number} radius          半径
+ * @param  {number} waterLevel      水位
+ * @param  {number} waveLength      波长
+ * @param  {number} phase           相位
+ * @param  {number} amplitude       震幅
+ * @param  {number} cx              圆心x
+ * @param  {number} cy              圆心y
+ * @return {Array}  path            路径
+ * @reference http://gitlab.alipay-inc.com/datavis/g6/blob/1.2.0/src/graph/utils/path.js#L135
+ */
+function getWaterWavePath(radius, waterLevel, waveLength, phase, amplitude, cx, cy) {
+  var curves = Math.ceil(2 * radius / waveLength * 4) * 2;
+  var path = [];
+
+  // map phase to [-Math.PI * 2, 0]
+  while (phase < -Math.PI * 2) {
+    phase += Math.PI * 2;
+  }
+  while (phase > 0) {
+    phase -= Math.PI * 2;
+  }
+  phase = phase / Math.PI / 2 * waveLength;
+
+  var left = cx - radius + phase - radius * 2;
+  /**
+   * top-left corner as start point
+   *
+   * draws this point
+   *  |
+   * \|/
+   *  ~~~~~~~~
+   *  |      |
+   *  +------+
+   */
+  path.push(['M', left, waterLevel]);
+
+  /**
+   * top wave
+   *
+   * ~~~~~~~~ <- draws this sine wave
+   * |      |
+   * +------+
+   */
+  var waveRight = 0;
+  for (var c = 0; c < curves; ++c) {
+    var stage = c % 4;
+    var pos = getWaterWavePositions(c * waveLength / 4, stage, waveLength, amplitude);
+    path.push(['C', pos[0][0] + left, -pos[0][1] + waterLevel, pos[1][0] + left, -pos[1][1] + waterLevel, pos[2][0] + left, -pos[2][1] + waterLevel]);
+
+    if (c === curves - 1) {
+      waveRight = pos[2][0];
+    }
+  }
+
+  /**
+   * top-right corner
+   *
+   *                       ~~~~~~~~
+   * 3. draws this line -> |      | <- 1. draws this line
+   *                       +------+
+   *                          ^
+   *                          |
+   *                  2. draws this line
+   */
+  path.push(['L', waveRight + left, cy + radius]);
+  path.push(['L', left, cy + radius]);
+  path.push(['L', left, waterLevel]);
+  return path;
+}
+
+/**
+ * 添加水波
+ * @param {number} x           中心x
+ * @param {number} y           中心y
+ * @param {number} level       水位等级 0～1
+ * @param {number} waveCount   水波数
+ * @param {number} colors      色值
+ * @param {number} group       图组
+ * @param {number} clip        用于剪切的图形
+ * @param {number} radius      绘制图形的高度
+ */
+function addWaterWave(x, y, level, waveCount, colors, group, clip, radius) {
+  var bbox = clip.getBBox();
+  var width = bbox.maxX - bbox.minX;
+  var height = bbox.maxY - bbox.minY;
+  var duration = 5000;
+  var delayDiff = 300;
+  for (var i = 0; i < waveCount; i++) {
+    var wave = group.addShape('path', {
+      attrs: {
+        path: getWaterWavePath(radius, bbox.minY + height * level, width / 4, 0, width / 64, x, y),
+        fill: colors[i],
+        clip: clip
+      }
+    });
+    wave.animate({
+      transform: [['t', width / 2, 0]],
+      repeat: true
+    }, duration - i * delayDiff);
+  }
+}
+
+Shape.registerShape('interval', 'liquid-fill-gauge', {
+  draw: function draw(cfg, container) {
+    var self = this;
+    var cy = 0.5;
+    var sumX = 0;
+    var minX = Infinity;
+    Util.each(cfg.points, function (p) {
+      if (p.x < minX) {
+        minX = p.x;
+      }
+      sumX += p.x;
+    });
+    var cx = sumX / cfg.points.length;
+    var cp = self.parsePoint({ x: cx, y: cy });
+    var minP = self.parsePoint({ x: minX, y: 0.5 });
+    var xWidth = cp.x - minP.x;
+    var radius = Math.min(xWidth, minP.y);
+    var attrs = getFillAttrs(cfg);
+    var clipCircle = container.addShape('circle', {
+      attrs: {
+        x: cp.x,
+        y: cp.y,
+        r: radius
+      }
+    });
+    addWaterWave(cp.x, cp.y, cfg.y / (2 * cp.y), 1, [attrs.fill], container, clipCircle, radius * 4);
+    return container.addShape('circle', {
+      attrs: Util.mix(getLineAttrs(cfg), {
+        x: cp.x,
+        y: cp.y,
+        r: radius + radius / 8
+      })
+    });
+  }
+});
+
+var pathMetaCache = {};
+Shape.registerShape('interval', 'liquid-fill-path', {
+  draw: function draw(cfg, container) {
+    var self = this;
+    var attrs = Util.mix({}, getFillAttrs(cfg));
+    var path = cfg.shape[1];
+
+    var cy = 0.5;
+    var sumX = 0;
+    var minX = Infinity;
+    Util.each(cfg.points, function (p) {
+      if (p.x < minX) {
+        minX = p.x;
+      }
+      sumX += p.x;
+    });
+    var cx = sumX / cfg.points.length;
+    var cp = self.parsePoint({ x: cx, y: cy });
+    var minP = self.parsePoint({ x: minX, y: 0.5 });
+    var xWidth = cp.x - minP.x;
+    var radius = Math.min(xWidth, minP.y);
+
+    var pathMeta = void 0;
+    if (pathMetaCache[path]) {
+      pathMeta = pathMetaCache[path];
+    } else {
+      var segments = GPathUtil.parsePathString(path);
+      pathMetaCache[path] = pathMeta = {
+        segments: segments
+      };
+    }
+    var transform = [];
+    if (attrs.rotate) {
+      transform.push(['r', attrs.rotate / 180 * Math.PI]);
+      delete attrs.rotate;
+    }
+    var shape = container.addShape('path', {
+      attrs: Util.mix(attrs, {
+        fillOpacity: 0,
+        path: pathMeta.segments
+      })
+    });
+    var bbox = Util.cloneDeep(shape.getBBox());
+    var rangeX = bbox.maxX - bbox.minX;
+    var rangeY = bbox.maxY - bbox.minY;
+    var range = Math.max(rangeX, rangeY);
+    var scale = radius * 2 / range;
+    shape.transform(transform.concat([['s', scale, scale]]));
+    var dw = scale * rangeX / 2; // (bbox.maxX - bbox.minX) / 2;
+    var dh = scale * rangeY / 2; // (bbox.maxY - bbox.minY) / 2;
+    shape.transform([['t', cp.x - dw, cp.y - dh]]);
+    addWaterWave(cp.x, cp.y, cfg.y / (2 * cp.y), 1, [attrs.fill], container, shape, minP.y * 4);
+
+    var keyShape = container.addShape('path', {
+      attrs: Util.mix(getLineAttrs(cfg), {
+        path: pathMeta.segments
+      })
+    });
+    keyShape.transform(transform.concat([['s', scale, scale], ['t', cp.x - dw, cp.y - dh]]));
+    return keyShape;
+  }
+});
+
 module.exports = Interval;

lib/geom/shape/point.js

@@ -256,8 +256,2 @@ /**
     var attrs = Util.mix({}, getLineAttrs(cfg), getFillAttrs(cfg));
-    // const unifiedPathArray = getUnifiedPath(cfg.shape[1], cfg);
-    // return container.addShape('path', {
-    //   attrs: Util.mix(attrs, {
-    //     path: unifiedPathArray
-    //   })
-    // });
     var path = cfg.shape[1];
@@ -264,0 +258,0 @@ var size = cfg.size || 10;

lib/util.js

@@ -45,2 +45,3 @@ /**
   pick: require('lodash/pick'),
+  reduce: require('lodash/reduce'),
   replace: require('lodash/replace'),
@@ -47,0 +48,0 @@ round: require('lodash/round'),

package.json

 {
   "name": "@antv/g2",
-  "version": "3.0.5-beta.1",
+  "version": "3.0.5-beta.2",
   "description": "the Grammar of Graphics in Javascript",
@@ -49,3 +49,3 @@ "main": "build/g2.js",
     "shelljs": "~0.7.8",
-    "string-replace-loader": "^1.3.0",
+    "string-replace-loader": "~1.3.0",
     "torchjs": "~1.0.4",
@@ -88,3 +88,3 @@ "uglify-js": "~3.1.10",
   "dependencies": {
-    "@antv/g": "^2.0.5-beta.3",
+    "@antv/g": "~2.0.5",
     "fecha": "~2.3.2",
@@ -91,0 +91,0 @@ "gl-matrix": "~2.4.0",

src/animate/index.js

@@ -99,3 +99,3 @@ /**
         tempShape.name = name;
-        if (coord) {
+        if (coord && name !== 'label') {
           const tempShapeMatrix = tempShape.getMatrix();
@@ -102,0 +102,0 @@ const finalMatrix = mat3.multiply([], tempShapeMatrix, coord.matrix);

src/chart/controller/coord.js

@@ -64,3 +64,3 @@ /**
 
-    if (type === 'theta') {
+    if (type === 'theta') { // definition of theta coord
       C = Coord.Polar;
@@ -67,0 +67,0 @@

src/chart/controller/event.js

@@ -91,3 +91,3 @@ /**
   _triggerShapeEvent(shape, eventName, eventObj) {
-    if (shape && shape.name) {
+    if (shape && shape.name && !shape.get('destroyed')) {
       const view = this.view;
@@ -119,3 +119,8 @@ if (view.isShapeInView(shape)) {
     const view = self.view;
-    const currentShape = self.currentShape;
+    let currentShape = self.currentShape;
+    // 如果图形被销毁，则设置当前 shape 为空
+    if (currentShape && currentShape.get('destroyed')) {
+      currentShape = null;
+      self.currentShape = null;
+    }
     const shape = self._getShape(ev.x, ev.y);
@@ -122,0 +127,0 @@ let eventObj = self._getShapeEventObj(ev);

src/geom/heatmap.js

@@ -120,2 +120,3 @@ /**
     ctx.clearRect(0, 0, circleCanvas.width, circleCanvas.height);
+    // ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
     ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
@@ -132,3 +133,4 @@ ctx.shadowBlur = blur;
   _drawGrayScaleBlurredCircle(x, y, r, alpha, ctx) {
-    const circleCanvas = this.get(GRAY_SCALE_BLURRED_CANVAS);
+    const self = this;
+    const circleCanvas = self.get(GRAY_SCALE_BLURRED_CANVAS);
     ctx.globalAlpha = alpha;
@@ -205,3 +207,3 @@ ctx.drawImage(circleCanvas, x - r, y - r);
       const alpha = scale.scale(obj[ORIGIN_FIELD][valueField]);
-      self._drawGrayScaleBlurredCircle(cfg.x, cfg.y, size.radius, alpha, ctx);
+      self._drawGrayScaleBlurredCircle(cfg.x, cfg.y, size.radius + size.blur, alpha, ctx);
     }
@@ -236,5 +238,4 @@
   }
-
 }
 
 module.exports = Heatmap;

src/geom/index.js

@@ -5,2 +5,3 @@
 Geom.PointJitter = Geom.Point.Jitter;
+Geom.PointStack = Geom.Point.Stack;
 Geom.Path = require('./path');
@@ -7,0 +8,0 @@ Geom.Line = require('./line');

src/geom/mixin/split.js

@@ -8,2 +8,3 @@ /**
 const Util = require('../../util');
+const Global = require('../../global');
 
@@ -20,9 +21,15 @@ module.exports = {
       yValue = obj._origin ? obj._origin[yDim] : obj[yDim];
-      if ((Util.isArray(yValue) && Util.isNil(yValue[0])) || Util.isNil(yValue)) {
-        if (tmp.length) {
-          arr.push(tmp);
-          tmp = [];
+      if (Global.connectNulls) { // 如果忽视 Null 直接连接节点，则将 value = null 的数据过滤掉
+        if (!Util.isNil(yValue)) {
+          tmp.push(obj);
         }
       } else {
-        tmp.push(obj);
+        if ((Util.isArray(yValue) && Util.isNil(yValue[0])) || Util.isNil(yValue)) {
+          if (tmp.length) {
+            arr.push(tmp);
+            tmp = [];
+          }
+        } else {
+          tmp.push(obj);
+        }
       }
@@ -29,0 +36,0 @@ });

src/geom/mixin/tooltip.js

@@ -406,3 +406,3 @@ /**
         if (self.get('type') === 'interval' || self.get('type') === 'schema') {
-          itemCfg.size = self.getSize();
+          itemCfg.size = self.getSize(point[FIELD_ORIGIN]);
         }
@@ -409,0 +409,0 @@ items.push(itemCfg);

src/geom/point.js

@@ -54,4 +54,14 @@ /**
 
+class PointStack extends Point {
+  getDefaultCfg() {
+    const cfg = super.getDefaultCfg();
+    cfg.hasDefaultAdjust = true;
+    cfg.adjusts = [{ type: 'stack' }];
+    return cfg;
+  }
+}
+
 Point.Jitter = PointJitter;
+Point.Stack = PointStack;
 
 module.exports = Point;

src/geom/shape/interval.js

@@ -11,2 +11,3 @@ /**
 const PathUtil = require('../util/path');
+const GPathUtil = require('@antv/g').PathUtil;
 const Global = require('../../global');
@@ -143,3 +144,8 @@
   path.push(
-    [ 'M', points[0].x, points[0].y ], [ 'L', points[1].x, points[1].y ], [ 'M', points[2].x, points[2].y ], [ 'L', points[3].x, points[3].y ], [ 'M', points[4].x, points[4].y ], [ 'L', points[5].x, points[5].y ]
+    [ 'M', points[0].x, points[0].y ],
+    [ 'L', points[1].x, points[1].y ],
+    [ 'M', points[2].x, points[2].y ],
+    [ 'L', points[3].x, points[3].y ],
+    [ 'M', points[4].x, points[4].y ],
+    [ 'L', points[5].x, points[5].y ]
   );
@@ -174,11 +180,23 @@ return path;
     path.push(
-      [ 'M', points[0].x, points[0].y ], [ 'L', points[1].x, points[1].y ], [ 'L', nextPoints[1].x, nextPoints[1].y ], [ 'L', nextPoints[0].x, nextPoints[0].y ], [ 'Z' ]
+      [ 'M', points[0].x, points[0].y ],
+      [ 'L', points[1].x, points[1].y ],
+      [ 'L', nextPoints[1].x, nextPoints[1].y ],
+      [ 'L', nextPoints[0].x, nextPoints[0].y ],
+      [ 'Z' ]
     );
   } else if (isFunnel) {
     path.push(
-      [ 'M', points[0].x, points[0].y ], [ 'L', points[1].x, points[1].y ], [ 'L', points[2].x, points[2].y ], [ 'L', points[3].x, points[3].y ], [ 'Z' ]
+      [ 'M', points[0].x, points[0].y ],
+      [ 'L', points[1].x, points[1].y ],
+      [ 'L', points[2].x, points[2].y ],
+      [ 'L', points[3].x, points[3].y ],
+      [ 'Z' ]
     );
   } else {
     path.push(
-      [ 'M', points[0].x, points[0].y ], [ 'L', points[1].x, points[1].y ], [ 'L', points[2].x, points[2].y ], [ 'Z' ]
+      [ 'M', points[0].x, points[0].y ],
+      [ 'L', points[1].x, points[1].y ],
+      [ 'L', points[2].x, points[2].y ],
+      [ 'L', points[2].x, points[2].y ],
+      [ 'Z' ]
     );
@@ -414,2 +432,295 @@ }
 });
+
+// 水波图
+/**
+ * 用贝塞尔曲线模拟正弦波
+ * Using Bezier curves to fit sine wave.
+ * There is 4 control points for each curve of wave,
+ * which is at 1/4 wave length of the sine wave.
+ *
+ * The control points for a wave from (a) to (d) are a-b-c-d:
+ *          c *----* d
+ *     b *
+ *       |
+ * ... a * ..................
+ *
+ * whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
+ *
+ * @param {number} x          x position of the left-most point (a)
+ * @param {number} stage      0-3, stating which part of the wave it is
+ * @param {number} waveLength wave length of the sine wave
+ * @param {number} amplitude  wave amplitude
+ * @return {Array} 正弦片段曲线
+ */
+function getWaterWavePositions(x, stage, waveLength, amplitude) {
+  if (stage === 0) {
+    return [
+      [ x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2 ],
+      [ x + 1 / 2 * waveLength / Math.PI, amplitude ],
+      [ x + waveLength / 4, amplitude ]
+    ];
+  } else if (stage === 1) {
+    return [
+      [ x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
+        amplitude
+      ],
+      [ x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
+        amplitude / 2
+      ],
+      [ x + waveLength / 4, 0 ]
+    ];
+  } else if (stage === 2) {
+    return [
+      [ x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2 ],
+      [ x + 1 / 2 * waveLength / Math.PI, -amplitude ],
+      [ x + waveLength / 4, -amplitude ]
+    ];
+  }
+  return [
+    [ x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2), -amplitude ],
+    [ x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1), -amplitude / 2 ],
+    [ x + waveLength / 4, 0 ]
+  ];
+}
+/**
+ * 获取水波路径
+ * @param  {number} radius          半径
+ * @param  {number} waterLevel      水位
+ * @param  {number} waveLength      波长
+ * @param  {number} phase           相位
+ * @param  {number} amplitude       震幅
+ * @param  {number} cx              圆心x
+ * @param  {number} cy              圆心y
+ * @return {Array}  path            路径
+ * @reference http://gitlab.alipay-inc.com/datavis/g6/blob/1.2.0/src/graph/utils/path.js#L135
+ */
+function getWaterWavePath(radius, waterLevel, waveLength, phase, amplitude, cx, cy) {
+  const curves = Math.ceil(2 * radius / waveLength * 4) * 2;
+  const path = [];
+
+  // map phase to [-Math.PI * 2, 0]
+  while (phase < -Math.PI * 2) {
+    phase += Math.PI * 2;
+  }
+  while (phase > 0) {
+    phase -= Math.PI * 2;
+  }
+  phase = phase / Math.PI / 2 * waveLength;
+
+  const left = cx - radius + phase - radius * 2;
+  /**
+   * top-left corner as start point
+   *
+   * draws this point
+   *  |
+   * \|/
+   *  ~~~~~~~~
+   *  |      |
+   *  +------+
+   */
+  path.push([ 'M', left, waterLevel ]);
+
+  /**
+   * top wave
+   *
+   * ~~~~~~~~ <- draws this sine wave
+   * |      |
+   * +------+
+   */
+  let waveRight = 0;
+  for (let c = 0; c < curves; ++c) {
+    const stage = c % 4;
+    const pos = getWaterWavePositions(c * waveLength / 4, stage, waveLength, amplitude);
+    path.push([
+      'C',
+      pos[0][0] + left, -pos[0][1] + waterLevel,
+      pos[1][0] + left, -pos[1][1] + waterLevel,
+      pos[2][0] + left, -pos[2][1] + waterLevel
+    ]);
+
+    if (c === curves - 1) {
+      waveRight = pos[2][0];
+    }
+  }
+
+  /**
+   * top-right corner
+   *
+   *                       ~~~~~~~~
+   * 3. draws this line -> |      | <- 1. draws this line
+   *                       +------+
+   *                          ^
+   *                          |
+   *                  2. draws this line
+   */
+  path.push([ 'L', waveRight + left, cy + radius ]);
+  path.push([ 'L', left, cy + radius ]);
+  path.push([ 'L', left, waterLevel ]);
+  return path;
+}
+
+/**
+ * 添加水波
+ * @param {number} x           中心x
+ * @param {number} y           中心y
+ * @param {number} level       水位等级 0～1
+ * @param {number} waveCount   水波数
+ * @param {number} colors      色值
+ * @param {number} group       图组
+ * @param {number} clip        用于剪切的图形
+ * @param {number} radius      绘制图形的高度
+ */
+function addWaterWave(x, y, level, waveCount, colors, group, clip, radius) {
+  const bbox = clip.getBBox();
+  const width = bbox.maxX - bbox.minX;
+  const height = bbox.maxY - bbox.minY;
+  const duration = 5000;
+  const delayDiff = 300;
+  for (let i = 0; i < waveCount; i++) {
+    const wave = group.addShape('path', {
+      attrs: {
+        path: getWaterWavePath(
+          radius,
+          bbox.minY + height * level,
+          width / 4, 0, width / 64, x, y
+        ),
+        fill: colors[i],
+        clip
+      }
+    });
+    wave.animate({
+      transform: [
+        [ 't', width / 2, 0 ]
+      ],
+      repeat: true
+    }, duration - i * delayDiff);
+  }
+}
+
+Shape.registerShape('interval', 'liquid-fill-gauge', {
+  draw(cfg, container) {
+    const self = this;
+    const cy = 0.5;
+    let sumX = 0;
+    let minX = Infinity;
+    Util.each(cfg.points, p => {
+      if (p.x < minX) {
+        minX = p.x;
+      }
+      sumX += p.x;
+    });
+    const cx = sumX / cfg.points.length;
+    const cp = self.parsePoint({ x: cx, y: cy });
+    const minP = self.parsePoint({ x: minX, y: 0.5 });
+    const xWidth = cp.x - minP.x;
+    const radius = Math.min(xWidth, minP.y);
+    const attrs = getFillAttrs(cfg);
+    const clipCircle = container.addShape('circle', {
+      attrs: {
+        x: cp.x,
+        y: cp.y,
+        r: radius
+      }
+    });
+    addWaterWave(
+      cp.x, cp.y,
+      cfg.y / (2 * cp.y),
+      1,
+      [ attrs.fill ],
+      container,
+      clipCircle,
+      radius * 4
+    );
+    return container.addShape('circle', {
+      attrs: Util.mix(getLineAttrs(cfg), {
+        x: cp.x,
+        y: cp.y,
+        r: radius + radius / 8
+      })
+    });
+  }
+});
+
+const pathMetaCache = {};
+Shape.registerShape('interval', 'liquid-fill-path', {
+  draw(cfg, container) {
+    const self = this;
+    const attrs = Util.mix({}, getFillAttrs(cfg));
+    const path = cfg.shape[1];
+
+    const cy = 0.5;
+    let sumX = 0;
+    let minX = Infinity;
+    Util.each(cfg.points, p => {
+      if (p.x < minX) {
+        minX = p.x;
+      }
+      sumX += p.x;
+    });
+    const cx = sumX / cfg.points.length;
+    const cp = self.parsePoint({ x: cx, y: cy });
+    const minP = self.parsePoint({ x: minX, y: 0.5 });
+    const xWidth = cp.x - minP.x;
+    const radius = Math.min(xWidth, minP.y);
+
+    let pathMeta;
+    if (pathMetaCache[path]) {
+      pathMeta = pathMetaCache[path];
+    } else {
+      const segments = GPathUtil.parsePathString(path);
+      pathMetaCache[path] = pathMeta = {
+        segments
+      };
+    }
+    const transform = [];
+    if (attrs.rotate) {
+      transform.push([ 'r', attrs.rotate / 180 * Math.PI ]);
+      delete attrs.rotate;
+    }
+    const shape = container.addShape('path', {
+      attrs: Util.mix(attrs, {
+        fillOpacity: 0,
+        path: pathMeta.segments
+      })
+    });
+    const bbox = Util.cloneDeep(shape.getBBox());
+    const rangeX = bbox.maxX - bbox.minX;
+    const rangeY = bbox.maxY - bbox.minY;
+    const range = Math.max(rangeX, rangeY);
+    const scale = radius * 2 / range;
+    shape.transform(
+      transform.concat([
+        [ 's', scale, scale ]
+      ])
+    );
+    const dw = scale * rangeX / 2; // (bbox.maxX - bbox.minX) / 2;
+    const dh = scale * rangeY / 2; // (bbox.maxY - bbox.minY) / 2;
+    shape.transform([
+      [ 't', cp.x - dw, cp.y - dh ]
+    ]);
+    addWaterWave(
+      cp.x, cp.y,
+      cfg.y / (2 * cp.y),
+      1,
+      [ attrs.fill ],
+      container,
+      shape,
+      minP.y * 4
+    );
+
+    const keyShape = container.addShape('path', {
+      attrs: Util.mix(getLineAttrs(cfg), {
+        path: pathMeta.segments
+      })
+    });
+    keyShape.transform(
+      transform.concat([
+        [ 's', scale, scale ],
+        [ 't', cp.x - dw, cp.y - dh ]
+      ])
+    );
+    return keyShape;
+  }
+});
+
 module.exports = Interval;

src/geom/shape/point.js

@@ -259,8 +259,2 @@ /**
     const attrs = Util.mix({}, getLineAttrs(cfg), getFillAttrs(cfg));
-    // const unifiedPathArray = getUnifiedPath(cfg.shape[1], cfg);
-    // return container.addShape('path', {
-    //   attrs: Util.mix(attrs, {
-    //     path: unifiedPathArray
-    //   })
-    // });
     const path = cfg.shape[1];
@@ -294,3 +288,2 @@ const size = cfg.size || 10;
     return shape;
-
   }
@@ -297,0 +290,0 @@ });

src/util.js

@@ -45,2 +45,3 @@ /**
   pick: require('lodash/pick'),
+  reduce: require('lodash/reduce'),
   replace: require('lodash/replace'),
@@ -47,0 +48,0 @@ round: require('lodash/round'),

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

Improved metrics

Total package byte prevSize

5054093

increased by0.9%

Lines of code

84811

increased by1.06%

Dependency changes

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

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

• Updated@antv/g@~2.0.5