fix(box): 修复箱形图异常点view的label只能展示一个 (#2913)

visiky · visiky · commit 1dedf61b331f · 2021-10-14T16:20:49.000+08:00
* fix(box): 修复箱形图异常点view的label只能展示一个

* docs(box): 丰富 box plot demo

* fix(box): box plot 单测修改
diff --git a/__tests__/unit/plots/box/change-data-spec.ts b/__tests__/unit/plots/box/change-data-spec.ts
@@ -60,8 +60,9 @@ describe('box change data', () => {
     box.render();
     const outliersView = box.chart.views.find((v) => v.id === OUTLIERS_VIEW_ID);
 
+    const len = outliersData.reduce((r, d) => r + d.outliers.length, 0);
     expect(box.chart.geometries[0].elements.length).toEqual(outliersData.length);
-    expect(outliersView.geometries[0].elements.length).toEqual(outliersData.length);
+    expect(outliersView.geometries[0].elements.length).toEqual(len);
 
     const newData = [
       ...outliersData,
diff --git a/__tests__/unit/plots/box/outliers-spec.ts b/__tests__/unit/plots/box/outliers-spec.ts
@@ -26,7 +26,8 @@ describe('box outliers', () => {
     // 类型
     expect(geometry.type).toBe('point');
     // 图形元素个数
-    expect(geometry.elements.length).toBe(outliersData.length);
+    const len = outliersData.reduce((r, d) => r + d.outliers.length, 0);
+    expect(geometry.elements.length).toBe(len);
     // 同步y轴度量 axis sync
     // @ts-ignore
     expect(outliersScale.sync).toEqual(BOX_SYNC_NAME);
@@ -59,7 +60,7 @@ describe('box outliers', () => {
     const elements = view.geometries[0].elements;
 
     // 类型
-    expect(elements[0].shape.cfg.children[0].attr('fill')).toBe('#f6f');
+    expect(elements[0].shape.attr('fill')).toBe('#f6f');
 
     box.destroy();
   });
diff --git a/docs/common/label.en.md b/docs/common/label.en.md
@@ -13,7 +13,7 @@
 | labelLine  | _null_ \| _boolean_ \| _LabelLineCfg_                               | Used to set the style property of the text connector. NULL indicates that it is not displayed.                                                                   |
 | labelEmit  | _boolean_                                                    | Only applies to text in polar coordinates, indicating whether the text is radially displayed according to the Angle. True means on and false means off           |
 | layout     | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_              | Text layout type, support a variety of layout function combination.                                                                                              |
-| position   | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_         | Specifies the position of the current Label relative to the current graphic  (Only works for column plot and bar plot, which geometry is interval)                                                                                   |
+| position   | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_         | Specifies the position of the current Label relative to the current graphic   (💡 Attention: Only works for **column plot** and **bar plot**, which geometry is interval)                                                                                   |
 | animate    | _boolean \| AnimateOption_                                   | Animation configuration.                                                                                                                                         |
 | formatter  | _Function_                                                   | Format function                                                                                                                                                  |
 | autoHide   | _boolean_                                                    | Whether to hide it automatically, default to false                                                                                                               |
diff --git a/docs/common/label.zh.md b/docs/common/label.zh.md
@@ -13,7 +13,7 @@
 | labelLine    | _null_ \| _boolean_ \| _LabelLineCfg_                                   | 用于设置文本连接线的样式属性，null 表示不展示。                                            |
 | labelEmit    | _boolean_                                                    | 只对极坐标下的文本生效，表示文本是否按照角度进行放射状显示，true 表示开启，false 表示关闭  |
 | layout       | _'overlap' \| 'fixedOverlap' \| 'limitInShape'_              | 文本布局类型，支持多种布局函数组合使用。                                                   |
-| position     | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_         | 指定当前 label 与当前图形的相对位置 (只对 geometry 为 interval 的 柱条形图生效)                                                       |
+| position     | _'top' \| 'bottom' \| 'middle' \| 'left' \| 'right'_         | 指定当前 label 与当前图形的相对位置 (💡 注意：只对 geometry 为 interval 的柱条形图生效)                                                       |
 | animate      | _boolean \| AnimateOption_                                   | 动画配置。                                                                                 |
 | formatter    | _Function_                                                   | 格式化函数                                                                                 |
 | autoHide     | _boolean_                                                    | 是否自动隐藏，默认 false                                                                   |
diff --git a/examples/more-plots/box/demo/label.ts b/examples/more-plots/box/demo/label.ts
@@ -0,0 +1,30 @@
+import { Box } from '@antv/g2plot';
+
+const data = [
+  { x: '职业 A', low: 20000, q1: 26000, median: 27000, q3: 32000, high: 38000, outliers: [50000, 52000] },
+  { x: '职业 B', low: 40000, q1: 49000, median: 62000, q3: 73000, high: 88000, outliers: [32000, 29000, 106000] },
+  { x: '职业 C', low: 52000, q1: 59000, median: 65000, q3: 74000, high: 83000, outliers: [91000] },
+  { x: '职业 D', low: 58000, q1: 96000, median: 130000, q3: 170000, high: 200000, outliers: [42000, 210000, 215000] },
+  { x: '职业 E', low: 24000, q1: 28000, median: 32000, q3: 38000, high: 42000, outliers: [48000] },
+  { x: '职业 F', low: 47000, q1: 56000, median: 69000, q3: 85000, high: 100000, outliers: [110000, 115000, 32000] },
+  { x: '职业 G', low: 64000, q1: 74000, median: 83000, q3: 93000, high: 100000, outliers: [110000] },
+  { x: '职业 H', low: 67000, q1: 72000, median: 84000, q3: 95000, high: 110000, outliers: [57000, 54000] },
+];
+
+const outliersBoxPlot = new Box('container', {
+  data,
+  xField: 'x',
+  yField: ['low', 'q1', 'median', 'q3', 'high'],
+  outliersField: 'outliers',
+  outliersStyle: {
+    fill: '#f6f',
+  },
+  label: {
+    style: {
+      textBaseline: 'top',
+    },
+    layout: { type: 'hide-overlap' },
+  },
+});
+
+outliersBoxPlot.render();
diff --git a/examples/more-plots/box/demo/meta.json b/examples/more-plots/box/demo/meta.json
@@ -35,6 +35,23 @@
         "en": "Set alias of field"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/BUWqiUYOhY/box-alias.png"
+    },
+    {
+      "filename": "label.ts",
+      "title": {
+        "zh": "设置箱线图 label",
+        "en": "Box plot label"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "tooltip.ts",
+      "title": {
+        "zh": "设置箱线图 tooltip",
+        "en": "Box plot tooltip"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cE6vR461omUAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/more-plots/box/demo/tooltip.ts b/examples/more-plots/box/demo/tooltip.ts
@@ -0,0 +1,52 @@
+import { Box } from '@antv/g2plot';
+
+const data = [
+  { x: '职业 A', low: 20000, q1: 26000, median: 27000, q3: 32000, high: 38000, outliers: [50000, 52000] },
+  { x: '职业 B', low: 40000, q1: 49000, median: 62000, q3: 73000, high: 88000, outliers: [32000, 29000, 106000] },
+  { x: '职业 C', low: 52000, q1: 59000, median: 65000, q3: 74000, high: 83000, outliers: [91000] },
+  { x: '职业 D', low: 58000, q1: 96000, median: 130000, q3: 170000, high: 200000, outliers: [42000, 210000, 215000] },
+  { x: '职业 E', low: 24000, q1: 28000, median: 32000, q3: 38000, high: 42000, outliers: [48000] },
+  { x: '职业 F', low: 47000, q1: 56000, median: 69000, q3: 85000, high: 100000, outliers: [110000, 115000, 32000] },
+  { x: '职业 G', low: 64000, q1: 74000, median: 83000, q3: 93000, high: 100000, outliers: [110000] },
+  { x: '职业 H', low: 67000, q1: 72000, median: 84000, q3: 95000, high: 110000, outliers: [57000, 54000] },
+];
+
+const boxPlot = new Box('container', {
+  width: 400,
+  height: 500,
+  data: data,
+  xField: 'x',
+  yField: ['low', 'q1', 'median', 'q3', 'high'],
+  meta: {
+    low: {
+      alias: '最低值',
+    },
+    q1: {
+      alias: '下四分位数',
+    },
+    median: {
+      alias: '最低值',
+    },
+    q3: {
+      alias: '上四分位数',
+    },
+    high: {
+      alias: '最高值',
+    },
+    outliers: {
+      alias: '异常值',
+    },
+  },
+  outliersField: 'outliers',
+  tooltip: {
+    fields: ['high', 'q3', 'median', 'q1', 'low', 'outliers'],
+  },
+  boxStyle: {
+    stroke: '#545454',
+    fill: '#1890FF',
+    fillOpacity: 0.3,
+  },
+  animation: false,
+});
+
+boxPlot.render();
diff --git a/examples/plugin/pattern/demo/meta.json b/examples/plugin/pattern/demo/meta.json
@@ -10,7 +10,6 @@
         "zh": "带贴图图案的饼图",
         "en": "Pie plot with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cACfJO99IO/32b38815-8427-4111-a0f0-34208aa65dd8.png"
     },
     {
@@ -19,7 +18,6 @@
         "zh": "图例 marker 设置贴图图案",
         "en": "Custom legend marker with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/N%26xo4t7zRW/79c6bdf8-0cc6-49b7-94a2-f462b9f825bc.png"
     },
     {
@@ -28,7 +26,6 @@
         "zh": "带贴图图案的分组柱状图",
         "en": "Grouped column plot with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wlurjHqyu%24/4b21f53e-7186-42c8-8f57-6f32c91a09ba.png"
     },
     {
@@ -37,7 +34,6 @@
         "zh": "带贴图图案的条形图",
         "en": "Bar plot with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/APiY4THavu/93d5749b-1e0d-4118-b04f-4e928a7eb144.png"
     },
     {
@@ -46,7 +42,6 @@
         "zh": "带贴图图案的堆叠图",
         "en": "Stack-bar plot with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/LGFxwRRwZl/d11e9835-a520-4a4c-9893-30b6a6ebb3c1.png"
     },
     {
@@ -55,7 +50,6 @@
         "zh": "带贴图图案的环形图",
         "en": "Donut with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/spgIo%26zAzG/6562dc40-2ac6-4c8a-b433-88e41e20621a.png"
     },
     {
@@ -64,7 +58,6 @@
         "zh": "带贴图图案的面积图",
         "en": "Area with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/msiCPIX%243T/16b69b77-6a87-42e0-9e8c-9767d6b9df79.png"
     },
     {
@@ -73,7 +66,6 @@
         "zh": "带贴图图案的堆叠分组柱状图",
         "en": "Stacked grouped column plot with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/1Ei8A%24VtRI/a9f53248-bdb4-4bc4-a567-3cd0d76e2a26.png"
     },
     {
@@ -82,7 +74,6 @@
         "zh": "带贴图图案的热力图",
         "en": "Heatmap with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/0zXfW5rjOu/e442fed3-047c-4f34-9536-8efe2e60a92f.png"
     },
     {
@@ -91,7 +82,6 @@
         "zh": "带贴图图案的热力图",
         "en": "Heatmap with pattern (cookie)"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vR9mVPFTmx/7b2e0aac-cee0-428b-bca3-c7082bb2b76f.png"
     },
     {
@@ -100,8 +90,7 @@
         "zh": "带贴图图案的水波图",
         "en": "Liquid with pattern"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CBo9L7m9Ux/53202fa4-ad16-4c47-ba72-f8b9858f0c78.png"
     }
   ]
-}
+}
diff --git a/src/plots/box/adaptor.ts b/src/plots/box/adaptor.ts
@@ -1,4 +1,5 @@
 import { isArray } from '@antv/util';
+import { Types } from '@antv/g2';
 import { Params } from '../../core/adaptor';
 import { interaction, animation, theme, tooltip } from '../../adaptor/common';
 import { point, schema } from '../../adaptor/geometries';
@@ -34,6 +35,8 @@ function field(params: Params<BoxOptions>): Params<BoxOptions> {
         seriesField: groupField,
         tooltip: tooltipOptions,
         rawFields,
+        // 只有异常点视图展示 label
+        label: false,
         schema: {
           shape: 'box',
           color,
@@ -50,21 +53,30 @@ function field(params: Params<BoxOptions>): Params<BoxOptions> {
   return params;
 }
 
+/**
+ * 创建异常点 view
+ */
 function outliersPoint(params: Params<BoxOptions>): Params<BoxOptions> {
   const { chart, options } = params;
-  const { xField, data, outliersField, outliersStyle, padding } = options;
+  const { xField, data, outliersField, outliersStyle, padding, label } = options;
 
   if (!outliersField) return params;
 
   const outliersView = chart.createView({ padding, id: OUTLIERS_VIEW_ID });
-  outliersView.data(data);
+  const outliersViewData = data.reduce((ret, datum) => {
+    const outliersData = datum[outliersField];
+    outliersData.forEach((d) => ret.push({ ...datum, [outliersField]: d }));
+    return ret;
+  }, []) as Types.Datum[];
 
+  outliersView.data(outliersViewData);
   point({
     chart: outliersView,
     options: {
       xField,
       yField: outliersField,
       point: { shape: 'circle', style: outliersStyle },
+      label,
     },
   });
 
