feat: tooltip formatter Closes #792

src/interface/config.ts

@@ -158,6 +158,7 @@ export interface Legend {
 
 export interface Tooltip {
   visible?: boolean;
+  fields?: string[];
   shared?: boolean;
   /** html */
   showTitle?: boolean;

src/plots/area/layer.ts

@@ -138,7 +138,7 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
   protected coord() {}
 
   protected addGeometry() {
-    const props = this.options;
+    const props: any = this.options;
     const area = getGeom('area', 'main', {
       plot: this,
     });
@@ -147,6 +147,11 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
     if (props.label) {
       this.label();
     }
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.adjustArea(area);
     this.setConfig('geometry', area);
 
@@ -168,7 +173,7 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
   }
 
   protected addLine() {
-    const props = this.options;
+    const props: any = this.options;
     const lineConfig = deepMix({}, props.line);
     if (lineConfig.visible) {
       const line = getGeom('line', 'guide', {
@@ -223,6 +228,23 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
     });
   }
 
+  protected geometryTooltip() {
+    this.area.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.area.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.area.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.area.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.seriesField) {
+          this.area.tooltip.fields.push(this.options.seriesField);
+        }
+      }
+    }
+  }
+
   protected parseEvents(eventParser) {
     super.parseEvents(EventParser);
   }

src/plots/bar/layer.ts

@@ -207,7 +207,7 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
   protected adjustBar(bar: ElementOption) {}
 
   protected addGeometry() {
-    const props = this.options;
+    const props: any = this.options;
     const bar = getGeom('interval', 'main', {
       positionFields: [props.yField, props.xField],
       plot: this,
@@ -222,6 +222,11 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
     }
     this.adjustBar(bar);
     this.bar = bar;
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.setConfig('geometry', bar);
   }
 
@@ -253,6 +258,23 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
     }
   }
 
+  protected geometryTooltip() {
+    this.bar.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.bar.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.bar.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.bar.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          this.bar.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   private applyResponsive(stage) {
     const methods = responsiveMethods[stage];
     each(methods, (r) => {

src/plots/bubble/layer.ts

@@ -48,6 +48,22 @@ export default class BubbleLayer<T extends BubbleLayerConfig = BubbleLayerConfig
   protected parseEvents() {
     super.parseEvents(EventParser);
   }
+
+  protected extractTooltip() {
+    this.points.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.points.tooltip.fields = tooltipOptions.fields;
+    } else {
+      this.points.tooltip.fields = [this.options.xField, this.options.yField, this.options.sizeField];
+    }
+    if (tooltipOptions.formatter) {
+      this.points.tooltip.callback = tooltipOptions.formatter;
+      if (this.options.colorField) {
+        this.points.tooltip.fields.push(this.options.colorField);
+      }
+    }
+  }
 }
 
 registerPlotType('bubble', BubbleLayer);

src/plots/calendar/layer.ts

@@ -109,7 +109,7 @@ export default class CalendarLayer extends ViewLayer<CalendarLayerConfig> {
   }
 
   protected addGeometry(): void {
-    const { valueField, colors } = this.options;
+    const { valueField, colors, tooltip } = this.options;
     const polygonConfig: any = {
       type: 'polygon',
       position: {
@@ -125,9 +125,27 @@ export default class CalendarLayer extends ViewLayer<CalendarLayerConfig> {
       label: this.extractLabel(),
     };
 
+    if (tooltip && (tooltip.fields || tooltip.formatter)) {
+      this.geometryTooltip(polygonConfig);
+    }
+
     this.setConfig('geometry', polygonConfig);
   }
 
+  protected geometryTooltip(geomConfig) {
+    geomConfig.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      geomConfig.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      geomConfig.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        geomConfig.tooltip.fields = [WEEK_FIELD, DAY_FIELD];
+      }
+    }
+  }
+
   private extractLabel() {
     const props = this.options;
     const label = props.label;

src/plots/column/layer.ts

@@ -175,9 +175,29 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
     }
     this.adjustColumn(column);
     this.column = column;
+    if (options.tooltip && (options.tooltip.fields || options.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', column);
   }
 
+  protected geometryTooltip() {
+    this.column.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.column.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.column.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.column.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          this.column.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   protected animation() {
     super.animation();
     if (this.options.animation === false) {

src/plots/density-heatmap/layer.ts

@@ -178,6 +178,10 @@ export default class DensityHeatmapLayer<
       config.intensity = this.options.intensity;
     }
 
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip(config);
+    }
+
     this.setConfig('geometry', config);
 
     this.addPoint();
@@ -220,6 +224,23 @@ export default class DensityHeatmapLayer<
     this.setConfig('legends', false);
   }
 
+  protected geometryTooltip(config) {
+    config.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      config.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      config.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        config.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          config.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   protected parseEvents(eventParser) {
     super.parseEvents(EventParser);
   }

src/plots/grouped-bar/layer.ts

@@ -80,6 +80,20 @@ export default class GroupedBarLayer extends BaseBarLayer<GroupedBarLayerConfig>
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.bar.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.bar.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.bar.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.bar.tooltip.fields = [this.options.xField, this.options.yField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedBar', GroupedBarLayer);

src/plots/grouped-column/layer.ts

@@ -37,6 +37,20 @@ export default class GroupedColumnLayer extends BaseColumnLayer<GroupedColumnLay
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.column.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.column.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.column.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.column.tooltip.fields = [this.options.xField, this.options.yField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedColumn', GroupedColumnLayer);

src/plots/grouped-rose/layer.ts

@@ -48,6 +48,20 @@ export default class GroupedRoseLayer<T extends GroupedRoseLayerConfig = Grouped
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.rose.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.rose.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.rose.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.rose.tooltip.fields = [this.options.radiusField, this.options.categoryField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedRose', GroupedRoseLayer);

src/plots/heatmap/layer.ts

@@ -153,13 +153,18 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
 
   protected addGeometry() {
     this.gridSize = this.getGridSize();
+    let geomConfig;
     if (this.options.shapeType === 'rect') {
-      const rect = this.addRect();
-      this.setConfig('geometry', rect);
+      geomConfig = this.addRect();
     } else {
       const circle = this.addCircle();
-      this.setConfig('geometry', circle);
+      geomConfig = circle;
     }
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip(geomConfig);
+    }
+
+    this.setConfig('geometry', geomConfig);
   }
 
   protected addRect() {
@@ -231,6 +236,23 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
     return circle;
   }
 
+  protected geometryTooltip(config) {
+    config.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      config.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      config.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        config.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          config.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   private getGridSize() {
     if (this.options.padding === 'auto') {
       return [0, 0];

src/plots/line/layer.ts

@@ -147,14 +147,19 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
   }
 
   private addLine() {
-    const props = this.options;
+    const props: any = this.options;
     this.line = getGeom('line', 'main', {
       plot: this,
     });
 
     if (props.label) {
       this.label();
     }
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.setConfig('geometry', this.line);
   }
 
@@ -193,6 +198,23 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
     }
   }
 
+  protected geometryTooltip() {
+    this.line.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.line.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.line.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.line.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.seriesField) {
+          this.line.tooltip.fields.push(this.options.seriesField);
+        }
+      }
+    }
+  }
+
   protected animation() {
     super.animation();
     const props = this.options;