feat: miniChart progress支持添加浮标

Author: paleface001

__tests__/unit/tinyPlot/progress-spec.ts

@@ -13,18 +13,30 @@ it.only('initialize & destory', () => {
     width: 200,
     height: 100,
     percent: 0.1,
-    animation: {
+    /*animation: {
       update: {
         duration: 1000,
       },
-    },
+    },*/
+    marker: [
+      {
+        value: 0.3,
+        /*style:{
+          stroke:'red',
+          lineWidth: 2
+       }*/
+      },
+      {
+        value: 0.5,
+      },
+    ],
   });
   progress.render();
-  window.setTimeout(() => {
+
+  /*window.setTimeout(() => {
     progress.update(0.6, [{ fill: 'red' }, { fill: 'green' }]);
   }, 2000);
-
-  /* expect(progress).toBeInstanceOf(Progress);
+   expect(progress).toBeInstanceOf(Progress);
     const canvas = progress.plot.get('canvas');
     expect(canvas.get('width')).toBe(200);
     expect(canvas.get('height')).toBe(100);

src/tiny-plots/progress/component/marker.ts

@@ -0,0 +1,46 @@
+import * as _ from '@antv/util';
+import { View, Coord } from '@antv/g2';
+import { Group, Shape, Canvas } from '@antv/g';
+
+export interface IMarker {
+  value: number;
+  style?: any;
+}
+
+export default class Marker {
+  protected canvas: Canvas;
+  protected view: View;
+  protected coord: Coord;
+  protected container: Group;
+  protected shape: Shape;
+  protected progressSize: number;
+
+  constructor(cfg) {
+    _.assign(this, cfg);
+    this.init();
+  }
+
+  public clear() {}
+
+  public destory() {}
+
+  protected init() {
+    this.coord = this.view.get('coord');
+    this.container = this.view.get('container');
+    const x = this.coord.convert({ x: 0, y: this.value }).x; // progress坐标系是转置坐标系
+    const y0 = this.coord.center.y - this.progressSize / 2 - 2;
+    const y1 = this.coord.center.y + this.progressSize / 2 + 2;
+    const style = _.deepMix({}, { stroke: 'grey', lineWidth: 1 }, this.style);
+    this.shape = this.container.addShape('path', {
+      attrs: {
+        path: [
+          ['M', x, y0],
+          ['L', x, y1],
+        ],
+        ...style,
+      },
+      name: 'progress-marker',
+    });
+    this.canvas.draw();
+  }
+}

src/tiny-plots/progress/layer.ts

@@ -3,6 +3,7 @@ import { registerPlotType } from '../../base/global';
 import { LayerConfig } from '../../base/layer';
 import { getGeom } from '../../geoms/factory';
 import TinyLayer, { TinyViewConfig } from '../tiny-layer';
+import Marker from './component/marker';
 import * as EventParser from './event';
 
 export interface ProgressViewConfig extends TinyViewConfig {
@@ -31,7 +32,6 @@ export default class ProgressLayer<T extends ProgressLayerConfig = ProgressLayer
 
   public type: string = 'progress';
   public processProps() {
-    this.getSize();
     let props = this.options;
     props.data = this.processData();
     const cfg = {
@@ -60,6 +60,23 @@ export default class ProgressLayer<T extends ProgressLayerConfig = ProgressLayer
     }
   }
 
+  public afterRender() {
+    if (this.options.marker) {
+      _.each(this.options.marker, (cfg) => {
+        const marker = new Marker(
+          _.mix(
+            {
+              canvas: this.canvas,
+              view: this.view,
+              progressSize: this.options.barSize,
+            },
+            cfg
+          )
+        );
+      });
+    }
+  }
+
   protected geometryParser(dim: string, type: string): string {
     if (dim === 'g2') {
       return G2_GEOM_MAP[type];