feat: a new chart type - Box Chart #1382

BBSQQ · 2020-08-02T10:06:26Z

new chart type: Box

支持 grouped box chart, outliers
增加测试用例覆盖 legend, tooltip 等

暂不支持 transpose 直角坐标和极坐标

tests-checker

Could you please add tests to make sure this change works as expected?

lgtm-com · 2020-08-02T10:11:58Z

This pull request introduces 3 alerts when merging c4a613d into 4e2c047 - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

hustcc · 2020-08-03T11:28:01Z

箱线图会做成什么样子，可以先简单描述吗？

lgtm-com · 2020-08-03T11:33:36Z

This pull request introduces 3 alerts when merging bbaec16 into a5f900c - view on LGTM.com

new alerts:

3 for Unused variable, import, function or class

BBSQQ · 2020-08-03T14:04:49Z

箱线图会做成什么样子，可以先简单描述吗？

实现 g2 所有 demo

export interface BoxOptions extends Options {

  /** 分类字段 */
  readonly catField: string;

  /** 测量字段映射 box range [low, q1, median, q3, hight] 五个字段 */
  readonly measureField: [string?, string?, string?, string?, string?];

  /** 颜色字段 */
  readonly colorField: string;

  /** 柱子样式配置，可选 */
  readonly boxStyle?: ShapeStyle | ((x: any, y: any, color?: any) => ShapeStyle);

  /** 是否分组箱线图 默认 false*/
  readonly isGroup?: boolean;

  /** 分组拆分字段 默认 false*/
  readonly groupField?: string;

  /** outliers 字段 */
  readonly outliersField: string;
  
  /** 在直角坐标系还是极坐标系 默认 rect 直角坐标系*/
  readonly coord: 'rect' | 'polar'; 
}

// 传入数据格式
interface BoxData {
  x: string
  low?: number
  q1?: number
  median?: number
  q3?: number
  high?: number
  outliers?: number[] | number
}

处理边界：

检测传入数据类型是否符合期望数据类型，如果是 null 处理成空
outliers 如果为数组则显示多个点，如果为 number 则显示一个点
measureField 默认从 0 开始，因为箱线图一般用于科学统计场景
其他 tooltips animation legend 等，之后看情况再处理

visiky · 2020-08-09T05:11:41Z

__tests__/unit/plots/box/index-spec.ts

+      height: 500,
+      data: boxData,
+      xField: 'x',
+      yField: ['low', 'q1', 'median', 'q3', 'high'],


是不是相当于 YField 一定要传 5 个参数，且严格按顺序（如果说缺少一个字段参数，会绘制不出来吗？比如说不需要展示中位线，是否可以不要第三个参数 median？又或者说中间三个参数是否可以在内部用 data-set 计算就行了）

是不是相当于 YField 一定要传 5 个参数，且严格按顺序（如果说缺少一个字段参数，会绘制不出来吗？比如说不需要展示中位线，是否可以不要第三个参数 median？又或者说中间三个参数是否可以在内部用 data-set 计算就行了）

需要按照顺序传5个参数

倒是不需要都传，不穿也可以绘制出来；

median 不是由 q1 q3 或者 low high 决定的，而是由原数据决定的，http://tuzhidian.com/chart?id=5c666f91372bb033b9c2fa75

可以让用户只传原数据，我们ds处理，但是会不会数据量大，我看 g2 demo 是这样指定的

5 个数据相当于是统计计算之后出来。如果按照直方图的套路，确实应该内置统计。

但是确实会增加数据量，而且数据理解成本可能更高了，我的想法是可以按照这样的方式，直接传五个字段。

src/plots/box/adaptor.ts

src/plots/box/index.ts

hustcc · 2020-08-13T05:14:41Z

outliersField

catField 还是叫 xField 吧
colorField 和 groupField 是一个含义吧
coord 用全名 coordinate，要不要传完整 coordinate 结构？ { type: '', cfg: {} };

lgtm-com · 2020-08-25T09:14:30Z

This pull request introduces 1 alert when merging b091805 into eacf58f - view on LGTM.com

new alerts:

1 for Useless assignment to local variable

hustcc · 2020-08-25T09:57:52Z

examples/histogram/basic/API.en.md

-  { value: 56 },
-  { value: 67 }
-];
+const data = [{ value: 20 }, { value: 34 }, { value: 56 }, { value: 67 }];


这个 diff 可以去掉。

examples/pie/basic/API.en.md

examples/pie/basic/API.zh.md

lgtm-com · 2020-08-25T09:59:44Z

This pull request introduces 1 alert when merging bb4b134 into eacf58f - view on LGTM.com

new alerts:

1 for Useless assignment to local variable

hustcc · 2020-08-25T09:59:52Z

examples/pie/donut/API.en.md

+| content                      | _boolean_, _object_ | 指标卡内容                     |
+| &nbsp;&nbsp;&nbsp; formatter | _function_          | 通过回调的方式，设置指标卡内容 |
+| &nbsp;&nbsp;&nbsp; style     | _object_            | 指标卡内容样式                 |


hustcc · 2020-08-25T09:59:59Z

examples/pie/donut/API.zh.md

+| content                      | _boolean_, _object_ | 指标卡内容                     |
+| &nbsp;&nbsp;&nbsp; formatter | _function_          | 通过回调的方式，设置指标卡内容 |
+| &nbsp;&nbsp;&nbsp; style     | _object_            | 指标卡内容样式                 |


src/plots/box/index.ts

lgtm-com · 2020-08-25T10:04:49Z

This pull request introduces 1 alert when merging 465f938 into eacf58f - view on LGTM.com

new alerts:

1 for Useless assignment to local variable

lgtm-com · 2020-08-25T10:36:46Z

This pull request introduces 1 alert when merging 9c1e077 into eacf58f - view on LGTM.com

new alerts:

1 for Useless assignment to local variable

hustcc · 2020-08-25T11:27:29Z

src/plots/box/adaptor.ts

+import { BoxOptions } from './types';
+import { flow, pick } from '../../utils';
+import { AXIS_META_CONFIG_KEYS } from '../../constant';
+import * as constant from './const';


import { Range, xxx }

建议不使用 import * as yyy，因为这个就存在一个命名问题，不同人命名风格又不一样。。

文件名就叫 constant.ts 吧，不用简写~

hustcc · 2020-08-25T11:28:32Z

src/plots/box/adaptor.ts

+
+  // make yField and outliersField share y mate
+  if (outliersField) {
+    const syncName = '$$y_outliers$$';


常量，放到 constant.ts 中

hustcc · 2020-08-25T11:29:47Z

src/plots/box/const.ts

@@ -0,0 +1,2 @@
+export const BOX_RANGE = '$$range$$';
+export const BOX_RANGE_ALIAS = '区间信息';


nit: 默认的名字用英文不？

hustcc · 2020-08-25T11:30:16Z

src/plots/box/index.ts

+import { BoxOptions } from './types';
+import { adaptor } from './adaptor';
+import { deepMix } from '@antv/util';
+import * as constant from './const';


import { BOX_RANGE_ALIAS } from './constant';

hustcc · 2020-08-25T11:33:06Z

src/plots/box/types.ts

+  /** 分组拆分字段 */
+  readonly groupField?: string;
+  /** 颜色字段，可选 */
+  readonly colorField?: string;


是否有必要三个字段 @me-momo @zqLu 这里用那个一比较合适？

BBSQQ requested review from lessmost, hustcc and visiky August 2, 2020 10:06

auto-add-label bot added the WIP label Aug 2, 2020

tests-checker bot suggested changes Aug 2, 2020

View reviewed changes

github-actions bot force-pushed the v2-box branch from c4a613d to bbaec16 Compare August 3, 2020 11:28

visiky reviewed Aug 9, 2020

View reviewed changes