feat: add public methods for charts (#971)

src/base/plot.ts

@@ -134,6 +134,22 @@ export default class BasePlot<
     }
   }
 
+  public getScaleByField(field: string) {
+    return this.layers[0].getScaleByField(field);
+  }
+
+  public getXScale() {
+    return this.layers[0].getXScale();
+  }
+
+  public getYScale() {
+    return this.layers[0].getYScale();
+  }
+
+  public getColorScale() {
+    return this.layers[0].getColorScale();
+  }
+
   public getPlotTheme() {
     const layer: any = this.layers[0];
     return layer.getPlotTheme();

src/base/view-layer.ts

@@ -12,6 +12,7 @@ import {
   reduce,
   findIndex,
   isString,
+  contains,
 } from '@antv/util';
 import { View, BBox, Geometry, VIEW_LIFE_CIRCLE, registerComponentController, Gesture } from '../dependents';
 import TextDescription from '../components/description';
@@ -303,6 +304,49 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
     }
   }
 
+  /** 画布重绘 */
+  public repaint(): void {
+    if (this.canvas) {
+      this.canvas.draw();
+    }
+  }
+
+  public getScaleByField(field: string) {
+    return this.view.getScaleByField(field);
+  }
+
+  public getXScale() {
+    const { xField } = this.options;
+    if (xField) {
+      return this.view.getScaleByField(xField);
+    }
+  }
+
+  public getYScale() {
+    const { yField } = this.options;
+    if (yField) {
+      return this.view.getScaleByField(yField);
+    }
+  }
+
+  public getColorScale() {
+    const options: any = this.options;
+    if (contains(options, 'colorField')) {
+      return this.view.getScaleByField(options);
+    }
+  }
+
+  public getShapes() {
+    const geometries = this.view.geometries;
+    const shapes = {};
+    // todo: geometry 类型转译
+    each(geometries, (geom) => {
+      const { type } = geom;
+      shapes[type] = geom.getShapes();
+    });
+    return shapes;
+  }
+
   /** 销毁 */
   public destroy(): void {
     this.doDestroy();

src/plots/bubble/index.ts

@@ -12,4 +12,9 @@ export default class Bubble extends BasePlot<BubbleConfig> {
     layerProps.type = 'bubble';
     super.createLayers(layerProps);
   }
+
+  public getSizeScale() {
+    const layer: any = this.layers[0];
+    return layer.getSizeScale();
+  }
 }

src/plots/bubble/layer.ts

@@ -36,6 +36,13 @@ export default class BubbleLayer<T extends BubbleLayerConfig = BubbleLayerConfig
     });
   }
 
+  public getSizeScale() {
+    const { sizeField } = this.options;
+    if (sizeField) {
+      this.view.getScaleByField(sizeField);
+    }
+  }
+
   public type: string = 'bubble';
 
   protected legend() {

src/plots/donut/index.ts

@@ -12,4 +12,9 @@ export default class Donut extends BasePlot<DonutConfig> {
     layerProps.type = 'donut';
     super.createLayers(layerProps);
   }
+
+  public getAngleScale() {
+    const layer: any = this.layers[0];
+    return layer.getAngleScale();
+  }
 }

src/plots/funnel/layer.ts

@@ -156,6 +156,13 @@ export default class FunnelLayer<T extends FunnelLayerConfig = FunnelLayerConfig
     }
   }
 
+  public getColorScale() {
+    const { xField } = this.options;
+    if (xField) {
+      return this.view.getScaleByField(xField);
+    }
+  }
+
   protected coord() {
     const props = this.options;
     const coordConfig = {

src/plots/grouped-bar/layer.ts

@@ -60,6 +60,13 @@ export default class GroupedBarLayer extends BaseBarLayer<GroupedBarLayerConfig>
     });
   }
 
+  public getColorScale() {
+    const { groupField } = this.options;
+    if (groupField) {
+      return this.view.getScaleByField(groupField);
+    }
+  }
+
   protected scale() {
     const defaultMeta = {};
     defaultMeta[this.options.groupField] = {

src/plots/grouped-column/layer.ts

@@ -27,6 +27,13 @@ export default class GroupedColumnLayer extends BaseColumnLayer<GroupedColumnLay
     return this.themeController.getResponsiveTheme('column');
   }
 
+  public getColorScale() {
+    const { groupField } = this.options;
+    if (groupField) {
+      return this.view.getScaleByField(groupField);
+    }
+  }
+
   protected addGeometry() {
     super.addGeometry();
   }

src/plots/grouped-rose/layer.ts

@@ -40,6 +40,13 @@ export default class GroupedRoseLayer<T extends GroupedRoseLayerConfig = Grouped
 
   public type: string = 'groupedRose';
 
+  public getColorScale() {
+    const { groupField } = this.options;
+    if (groupField) {
+      return this.view.getScaleByField(groupField);
+    }
+  }
+
   protected adjustRoseAdjust() {
     return [
       {

src/plots/heatmap/index.ts

@@ -27,4 +27,9 @@ export default class Heatmap extends BasePlot<HeatmapConfig> {
     const layer: any = this.layers[0];
     layer.disableMappingSize();
   }
+
+  public getSizeScale() {
+    const layer: any = this.layers[0];
+    return layer.getSizeScale();
+  }
 }

src/plots/heatmap/layer.ts

@@ -96,10 +96,10 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
     }
     this.options.shapeType = type;
     if (type === 'rect') {
-      const shapes = this.getShapes();
+      const shapes = this.getShape();
       this.circleToRect(shapes);
     } else if (type === 'circle') {
-      const shapes = this.getShapes();
+      const shapes = this.getShape();
       this.rectToCircle(shapes);
     }
   }
@@ -118,7 +118,7 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
       min,
       max,
     });
-    const shapes = this.getShapes();
+    const shapes = this.getShape();
     if (this.options.shapeType === 'rect') {
       this.rectSizeMapping(shapes, scale, field);
     } else if (this.options.shapeType === 'circle') {
@@ -127,7 +127,7 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
   }
 
   public disableMappingSize() {
-    const shapes = this.getShapes();
+    const shapes = this.getShape();
     if (this.options.shapeType === 'rect') {
       this.rectDisableSizeMapping(shapes);
     } else if (this.options.shapeType === 'circle') {
@@ -142,6 +142,13 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
     super.destroy();
   }
 
+  public getSizeScale() {
+    const { sizeField } = this.options;
+    if (sizeField) {
+      this.view.getScaleByField(sizeField);
+    }
+  }
+
   protected geometryParser() {
     return '';
   }
@@ -416,7 +423,7 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
     });
   }
 
-  private getShapes() {
+  private getShape() {
     const elements = this.view.geometries[0].elements;
     const shapes = [];
     each(elements, (ele) => {

src/plots/line/layer.ts

@@ -135,6 +135,13 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
     super.afterRender();
   }
 
+  public getColorScale() {
+    const { seriesField } = this.options;
+    if (seriesField) {
+      return this.view.getScaleByField(seriesField);
+    }
+  }
+
   protected geometryParser(dim, type) {
     return GEOM_MAP[type];
   }

src/plots/pie/index.ts

@@ -12,4 +12,9 @@ export default class Pie extends BasePlot<PieConfig, PieLayer> {
     layerProps.type = 'pie';
     super.createLayers(layerProps);
   }
+
+  public getAngleScale() {
+    const layer: any = this.layers[0];
+    return layer.getAngleScale();
+  }
 }

src/plots/pie/layer.ts

@@ -100,6 +100,13 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
     }
   }
 
+  public getAngleScale() {
+    const { angleField } = this.options;
+    if (angleField) {
+      return this.view.getScaleByField(angleField);
+    }
+  }
+
   protected geometryParser(dim, type) {
     if (dim === 'g2') {
       return G2_GEOM_MAP[type];

src/plots/radar/index.ts

@@ -16,4 +16,19 @@ export default class Radar extends BasePlot<RadarConfig> {
     layerProps.type = 'radar';
     super.createLayers(layerProps);
   }
+
+  public getAngleScale() {
+    const layer = this.layers[0] as RadarLayer;
+    return layer.getAngleScale();
+  }
+
+  public getRadiusScale() {
+    const layer: any = this.layers[0];
+    return layer.getRadiusScale();
+  }
+
+  public getColorScale() {
+    const layer: any = this.layers[0];
+    return layer.getColorScale();
+  }
 }

src/plots/radar/layer.ts

@@ -182,6 +182,21 @@ export default class RadarLayer extends ViewLayer<RadarLayerConfig> {
     super.init();
   }
 
+  public getAngleScale() {
+    const { angleField } = this.options;
+    return this.view.getScaleByField(angleField);
+  }
+
+  public getRadiusScale() {
+    const { radiusField } = this.options;
+    return this.view.getScaleByField(radiusField);
+  }
+
+  public getColorScale() {
+    const { seriesField } = this.options;
+    return this.view.getScaleByField(seriesField);
+  }
+
   protected geometryParser(dim, type) {
     return GEOM_MAP[type];
   }

src/plots/rose/index.ts

@@ -17,4 +17,14 @@ export default class Rose extends BasePlot<RoseConfig> {
     layerProps.type = 'rose';
     super.createLayers(layerProps);
   }
+
+  public getRadiusScale() {
+    const layer: any = this.layers[0];
+    return layer.getRadiusScale();
+  }
+
+  public getAngleScale() {
+    const layer: any = this.layers[0];
+    return layer.getAngleScale();
+  }
 }

src/plots/rose/layer.ts

@@ -115,6 +115,20 @@ export default class RoseLayer<T extends RoseLayerConfig = RoseLayerConfig> exte
     return deepMix({}, options, { columnStyle, xField, yField });
   }
 
+  public getRadiusScale() {
+    const { radiusField } = this.options;
+    if (radiusField) {
+      this.view.getScaleByField(radiusField);
+    }
+  }
+
+  public getAngleScale() {
+    const { categoryField } = this.options;
+    if (categoryField) {
+      this.view.getScaleByField(categoryField);
+    }
+  }
+
   protected geometryParser(dim, type) {
     if (dim === 'g2') {
       return G2_GEOM_MAP[type];

src/plots/stacked-area/layer.ts

@@ -40,6 +40,11 @@ export default class StackedAreaLayer<T extends StackedAreaLayerConfig = Stacked
     super.beforeInit();
   }
 
+  public getColorScale() {
+    const { stackField } = this.options;
+    return this.view.getScaleByField(stackField);
+  }
+
   protected label() {
     const props = this.options;
     const label = props.label as Label;

src/plots/stacked-bar/layer.ts

@@ -73,6 +73,11 @@ export default class StackedBarLayer<T extends StackedBarLayerConfig = StackedBa
 
   public type: string = 'stackedBar';
 
+  public getColorScale() {
+    const { stackField } = this.options;
+    return this.view.getScaleByField(stackField);
+  }
+
   protected adjustBar(bar: ElementOption) {
     bar.adjust = [
       {

src/plots/stacked-column/layer.ts

@@ -64,6 +64,11 @@ export default class StackedColumnLayer<
     super.afterRender();
   }
 
+  public getColorScale() {
+    const { stackField } = this.options;
+    return this.view.getScaleByField(stackField);
+  }
+
   protected adjustColumn(column: ElementOption) {
     column.adjust = [
       {