Merge pull request #267 from antvis/wthell

👹👺👹👺👹👺
antvis · Nov 19, 2019 · 68a4e55 · 68a4e55
2 parents 37c7e9a + bbbe2e5
commit 68a4e55
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 49 deletions.
diff --git a/src/components/axis/parser.ts b/src/components/axis/parser.ts
@@ -43,9 +43,8 @@ export default class AxisParser {
     this._isVisible('grid') ? this._gridParser() : (this.config.grid = null);
     this._isVisible('tickLine') ? this._tickLineParser() : (this.config.tickLine = null);
     this._isVisible('label') ? this._labelParser() : (this.config.label = null);
-    if (this.localProps.title) {
-      this._titleParser();
-    }
+    this._isVisible('title') ? this._titleParser() : (this.config.title = null);
+
     propertyMapping(this.localProps, this.config, 'autoHideLabel');
     propertyMapping(this.localProps, this.config, 'autoRotateLabel');
     propertyMapping(this.localProps, this.config, 'autoRotateTitle');
@@ -118,22 +117,19 @@ export default class AxisParser {
   private _titleParser() {
     const titleConfig: DataPointType = { ...this.localProps.title };
     const { visible, style, text } = this.localProps.title;
-
     if (!visible) {
       this.config.showTitle = false;
     } else {
       this.config.showTitle = true;
+      if (style) {
+        titleConfig.textStyle = style;
+      }
+      titleConfig.textStyle = _.deepMix({}, _.get(this.config, 'title.style'), titleConfig.textStyle);
+
+      if (text) {
+        titleConfig.text = text;
+      }
     }
-
-    if (style) {
-      titleConfig.textStyle = style;
-    }
-    titleConfig.textStyle = _.deepMix({}, _.get(this.config, 'title.style'), titleConfig.textStyle);
-
-    if (text) {
-      titleConfig.text = text;
-    }
-
     this.config.title = titleConfig;
   }
 

diff --git a/src/components/connected-area.ts b/src/components/connected-area.ts
@@ -48,8 +48,10 @@ export default class ConnectedArea {
 
   public draw() {
     const groupedShapes = this._getGroupedShapes();
-    _.each(groupedShapes, (shaps, name) => {
-      this._drawConnection(shaps, name);
+    _.each(groupedShapes, (shapes, name) => {
+      if (shapes.length > 0) {
+        this._drawConnection(shapes, name);
+      }
     });
     if (this.triggerOn) {
       this._addInteraction();

diff --git a/src/plots/bar/layer.ts b/src/plots/bar/layer.ts
@@ -89,12 +89,7 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
       label: {
         visible: true,
         position: 'left',
-        offset: 8,
         adjustColor: true,
-        style: {
-          stroke: null,
-          lineWidth: 0,
-        },
       },
       legend: {
         visible: true,
@@ -192,11 +187,13 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
 
   protected extractLabel() {
     const props = this.options;
-    const label = props.label as Label;
+    const defaultOptions = this.getLabelOptionsByPosition(props.label.position);
+    const label = _.deepMix({}, defaultOptions, this.options.label as Label);
 
     if (label && label.visible === false) {
       return false;
     }
+
     const labelConfig = getComponent('label', {
       plot: this,
       labelType: 'barLabel',
@@ -218,6 +215,30 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
       responsive.method(this);
     });
   }
+
+  public getLabelOptionsByPosition(position: string) {
+    if (position === 'middle') {
+      return {
+        offset: 0,
+      };
+    }
+
+    if (position === 'left') {
+      return {
+        offset: 7,
+        style: {
+          stroke: null,
+          lineWidth: 0,
+        },
+      };
+    }
+
+    if (position === 'right') {
+      return {
+        offset: 4,
+      };
+    }
+  }
 }
 
 registerPlotType('bar', BaseBarLayer);
diff --git a/src/plots/column/layer.ts b/src/plots/column/layer.ts
@@ -75,10 +75,6 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
         visible: false,
         position: 'top',
         adjustColor: true,
-        offset: 4,
-        style: {
-          textBaseline: 'bottom',
-        },
       },
       legend: {
         visible: true,
@@ -170,8 +166,10 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
   }
 
   protected extractLabel() {
-    const label = this.options.label as Label;
-    if (label && label.visible === false) {
+    const props = this.options;
+    const defaultOptions = this.getLabelOptionsByPosition(props.label.position);
+    const label = _.deepMix({}, defaultOptions, this.options.label as Label);
+    if (label.visible === false) {
       return false;
     }
     const labelConfig = getComponent('label', {
@@ -190,6 +188,27 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
       responsive.method(this);
     });
   }
+
+  public getLabelOptionsByPosition(position: string) {
+    if (position === 'middle') {
+      return {
+        offset: 0,
+        style: {
+          textBaseline: 'middle',
+        },
+      };
+    }
+
+    if (position === 'top') {
+      return {
+        offset: 4,
+        style: {
+          textBaseline: 'bottom',
+        },
+      };
+    }
+    return { offset: 0 };
+  }
 }
 
 registerPlotType('column', BaseColumnLayer);
diff --git a/src/plots/percentage-stack-column/layer.ts b/src/plots/percentage-stack-column/layer.ts
@@ -12,6 +12,7 @@ export default class PercentageStackColumnLayer extends StackColumn<PercentageSt
       label: {
         visible: true,
         position: 'middle',
+        offset: 0,
       },
       yAxis: {
         visible: true,

diff --git a/src/plots/ring/component/annotation/central-text-template.ts b/src/plots/ring/component/annotation/central-text-template.ts
@@ -1,19 +1,21 @@
 import * as _ from '@antv/util';
 
 /*tslint:disable*/
-const container_style =
-  "color:#8c8c8c;font-size:14px;text-align:center;line-height:2;font-family:'-apple-system',BlinkMacSystemFont,'SegoeUI',Roboto,'HelveticaNeue',Helvetica,'PingFangSC','HiraginoSansGB','MicrosoftYaHei',SimSun,'sans-serif';";
+const containerStyle =
+  "color:#8c8c8c;font-size:14px;text-align:center;line-height:2;font-family:'-apple-system',BlinkMacSystemFont,'SegoeUI',Roboto,'HelveticaNeue',Helvetica,'PingFangSC','HiraginoSansGB','MicrosoftYaHei',SimSun,'sans-serif';pointer-events:none;";
 
-const name_style = 'font-weight:300;';
+const nameStyle = 'font-weight:300;';
 
-const value_style = 'font-size:32px;font-weight:bold;color:#4D4D4D';
+const valueStyle = 'font-size:32px;font-weight:bold;color:#4D4D4D';
 
-function getSingleDataTemplate(value, classId) {
-  return `<div class="ring-guide-html ${classId}" style=${container_style}><span class="ring-guide-value" style=${value_style}>${value}</span></div>`;
+function getSingleDataTemplate(value, classId, size) {
+  const domStyle = `${containerStyle}width:${size}px;`;
+  return `<div class="ring-guide-html ${classId}" style=${domStyle}><span class="ring-guide-value" style=${valueStyle}>${value}</span></div>`;
 }
 
-function getTwoDataTemplate(name, value, classId) {
-  return `<div class="ring-guide-html ${classId}" style=${container_style}><span class="ring-guide-name" style=${name_style}>${name}</span><br/><span class="ring-guide-value" style=${value_style}>${value}</span></div>`;
+function getTwoDataTemplate(name, value, classId, size) {
+  const domStyle = `${containerStyle}width:${size}px;`;
+  return `<div class="ring-guide-html ${classId}" style=${domStyle}><span class="ring-guide-name" style=${nameStyle}>${name}</span><br/><span class="ring-guide-value" style=${valueStyle}>${value}</span></div>`;
 }
 
 export { getSingleDataTemplate, getTwoDataTemplate };
diff --git a/src/plots/ring/layer.ts b/src/plots/ring/layer.ts
@@ -175,14 +175,15 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
   }
 
   private getCentralTextTemplate(displayData) {
+    const size = this.getCentralTextSize();
     let htmlString;
     /** 如果文本内容为string或单条数据 */
     if (_.isString(displayData)) {
-      htmlString = centralTextTemplate.getSingleDataTemplate(displayData, this.centralClass);
+      htmlString = centralTextTemplate.getSingleDataTemplate(displayData, this.centralClass, size);
     } else if (_.isObject(displayData) && _.keys(displayData).length === 2) {
       /** 如果文本内容为两条数据 */
       const content = displayData as IAttrs;
-      htmlString = centralTextTemplate.getTwoDataTemplate(content.name, content.value, this.centralClass);
+      htmlString = centralTextTemplate.getTwoDataTemplate(content.name, content.value, this.centralClass, size);
     }
     /** 更为复杂的文本要求用户自行制定html模板 */
     return htmlString;
@@ -208,6 +209,10 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
       responsive.method(this);
     });
   }
+
+  private getCentralTextSize() {
+    return this.width * this.options.radius;
+  }
 }
 
 registerPlotType('ring', RingLayer);
diff --git a/src/plots/stack-area/layer.ts b/src/plots/stack-area/layer.ts
@@ -39,6 +39,13 @@ export default class StackAreaLayer<T extends StackAreaLayerConfig = StackAreaLa
       label.offset = 0;
     }
 
+    if (labelType === 'area') {
+      label.style = _.deepMix({}, label.style, {
+        lineWidth: 0,
+        stroke: 'rgba(0,0,0,0)',
+      });
+    }
+
     this.area.label = getComponent('label', {
       fields: [this.getLabelField(labelType, props)],
       labelType,

diff --git a/src/plots/stack-bar/layer.ts b/src/plots/stack-bar/layer.ts
@@ -31,6 +31,8 @@ export default class StackBarLayer<T extends StackBarLayerConfig = StackBarLayer
         },
         label: {
           visible: true,
+          position: 'middle',
+          offset: 0,
         },
         title: {
           visible: true,
@@ -76,14 +78,10 @@ export default class StackBarLayer<T extends StackBarLayerConfig = StackBarLayer
     const props = this.options;
     const label = props.label as Label;
 
-    if (label && label.visible === false) {
+    if (label.visible === false) {
       return false;
     }
 
-    if (!label.position) {
-      label.position = 'middle';
-    }
-
     const labelConfig = getComponent('label', {
       plot: this,
       labelType: 'stackBarLabel',

diff --git a/src/plots/stack-column/layer.ts b/src/plots/stack-column/layer.ts
@@ -6,7 +6,6 @@ import { getComponent } from '../../components/factory';
 import { ElementOption, Label } from '../../interface/config';
 import BaseColumnLayer, { ColumnViewConfig } from '../column/layer';
 import './component/label/stack-column-label';
-import { tsPropertySignature } from '@babel/types';
 
 export interface StackColumnViewConfig extends ColumnViewConfig {
   stackField: string;
@@ -27,6 +26,7 @@ export default class StackColumnLayer<
       label: {
         visible: false,
         position: 'middle',
+        offset: 0,
         adjustColor: true,
       },
       connectedArea: {
@@ -70,11 +70,8 @@ export default class StackColumnLayer<
 
   protected extractLabel() {
     const props = this.options;
-
-    const label = props.label as Label;
-    if (!label.position) {
-      label.position = 'middle';
-    }
+    const defaultOptions = this.getLabelOptionsByPosition(props.label.position);
+    const label = _.deepMix({}, defaultOptions, this.options.label as Label);
 
     if (label && label.visible === false) {
       return false;