Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: [V2_combo] 混合图表-双折线图 #1331

Merged
merged 21 commits into from
Aug 4, 2020
Merged

feat: [V2_combo] 混合图表-双折线图 #1331

merged 21 commits into from
Aug 4, 2020

Conversation

liuzhenying
Copy link
Member

@liuzhenying liuzhenying commented Jul 24, 2020 •
edited
Loading

更新：

  • 将多个混合图表集成为一个双轴图
  • 数据源仍然保持为多数据源
  • 复用 geometry 内容

混合双折线图：
API 所做更改：

  • yAxis 和 yField 等一致，改为数组形式
  • ledged，tooltip 等组件，和 line 保持一致，遵循 g2 格式

可能有问题的地方

  • 目录，和源目录保持一致，将 combo 放置于和 plot 平级位置
  • 混合图表的公共方法，随着更多混合图表的加入需要部分抽象

tests-checker[bot]
tests-checker bot suggested changes Jul 24, 2020
View reviewed changes
Copy link

@tests-checker tests-checker bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@liuzhenying liuzhenying changed the title V2 feat combo [WIP] 混合图表-双折线图 V2 feat combo Jul 24, 2020
visiky
visiky requested changes Jul 24, 2020
View reviewed changes
@liuzhenying liuzhenying requested a review from visiky July 24, 2020 03:47
@liuzhenying liuzhenying changed the title [WIP] 混合图表-双折线图 V2 feat combo 混合图表-双折线图 V2 feat combo Jul 24, 2020
@antvis antvis deleted a comment from visiky Jul 24, 2020
@antvis antvis deleted a comment from visiky Jul 24, 2020
@antvis antvis deleted a comment from visiky Jul 24, 2020
@antvis antvis deleted a comment from visiky Jul 24, 2020
@liuzhenying
Copy link
Member Author

因本地 lint 问题（commit 前未执行钩子），更新了一部分格式错误，包括删除了部分无用代码，因此 Me-Momo 的部分 review 已过时，为保持整洁删除了一些过时 review（后来才发现还可以不删除直接隐藏）感谢 Me-Momo 的 review

visiky
visiky previously requested changes Jul 24, 2020
View reviewed changes
@liuzhenying liuzhenying changed the title 混合图表-双折线图 V2 feat combo feat: [V2_combo] 混合图表-双折线图 Jul 24, 2020
@auto-add-label auto-add-label bot added the enhancement New feature or request label Jul 24, 2020
hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
__tests__/unit/plots/biax/axis-spec.ts

biax.render();

// TODO 补充用例
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

加一些断言吧~

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的，测试我再补充一下

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
__tests__/unit/plots/biax/double-line-spec.ts
xAxis: false,
geometryConfigs: [
{
geometry: 'Line',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个中 type 等产量，全部用小写 + 中划线的方式吧~

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type 是指？

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

就是大概一些表达类型区分的常量，都用 小写 + 中划线方式。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type 比如：图形类别，动画类型，布局算法类型等

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
__tests__/unit/plots/biax/double-line-spec.ts
// expect(pointGeometrys[0].attributes.size.values).toEqual([3]);
// expect(pointGeometrys[0].attributes.shape.values).toEqual(['circle']);

// Biax.destroy();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

单测打开~加上断言。

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
src/adaptor/geometries/line.ts Outdated
@@ -3,25 +3,26 @@ import { Params } from '../../core/adaptor';
import { Options } from '../../types';
import { ShapeStyle } from '../../types/style';

type lineOption = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

line -> Line

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
src/common/helper.ts Outdated

/**
* 在 Chart 中查找第一个指定 type 类型的 geometry
* @param chart
* @param type
*/
export function findGeometry(chart: Chart, type: string): Geometry {
export function findGeometry(chart: Chart | View, type: string): Geometry {
Copy link
Member

@hustcc hustcc Aug 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

应该直接指定为 View 就可以了。传入 Chart 也是属于 View 的

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
src/plots/biax/types.ts
Right = 'Right',
}

export enum BiaxGeometry {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Biax 表示双轴图是行业术语嘛？

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Biax 是双轴的意思 （bi axis）我看竞品都没有双轴图表这个概念，而是称之为带有双轴的折线图，因此新取了一个图表名。这个也欢迎给点意见，看看有没有更好的名称。或者 DualAxis 也可以？ combo （混合图表）？

@hustcc
Copy link
Member

hustcc commented Aug 3, 2020

目前来看，双轴图应该是最复杂的图形了，保证质量，好好设计，不用为了时间点~

hustcc
hustcc reviewed Aug 3, 2020
View reviewed changes
src/plots/biax/adaptor.ts
geometryConfig: geometryConfigs[1],
},
});
return params;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

既然是双图形了，建议还是两个 view 吧，然后分别设置数据和配置。

现在 chart 创建 view 的时候，会把 chart 自己的属性也带给 view，比如 data、tooltip 等配置，如果左边用 chart，右边用 view，感觉没有隔离开，后面可能会遇到一些 bug。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好，我瞅下这块儿

@hustcc
Copy link
Member

hustcc commented Aug 4, 2020 •
edited
Loading

分支 hold 太久，先合并一个版本，后续几个点：

  1. 多图使用 两个 view 绘制，平级，而不是放到 chart view 父子级上。
  2. 单测补齐
  3. 代码复用

@hustcc hustcc self-requested a review August 4, 2020 09:17
@hustcc hustcc requested a review from visiky August 4, 2020 09:17
@liuzhenying liuzhenying requested review from hustcc and removed request for lessmost, visiky, lxfu1 and BBSQQ August 4, 2020 09:21
@hustcc hustcc merged commit 14f564d into v2 Aug 4, 2020
@hustcc hustcc deleted the v2_feat_combo branch August 4, 2020 09:24
BBSQQ pushed a commit that referenced this pull request Aug 25, 2020
@liuzhenying @BBSQQ
feat: [V2_combo] 混合图表-双折线图 (#1331)
c1bf24b 
* feat: add baseCombo & dualline

* fix: 部分lint 错误

* fix: npm run fix

* fix: 删除无用变量

* feat: push geogemtry 拆分方式

* feat: lint

* fix: lint

* fix: github test 失败

* feat: 双轴图打平

* feat: line

* feat: 更改双轴图引用

* feat: test 用例

* fix: lint

* feat: fix lint

* fix:  fix 不必要的提交

* fix: merge

* fix: typescript

* feat: 更改 cr 问题

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
BBSQQ pushed a commit that referenced this pull request Aug 25, 2020
@liuzhenying @BBSQQ
feat: [V2_combo] 混合图表-双折线图 (#1331)
e89e453 
* feat: add baseCombo & dualline

* fix: 部分lint 错误

* fix: npm run fix

* fix: 删除无用变量

* feat: push geogemtry 拆分方式

* feat: lint

* fix: lint

* fix: github test 失败

* feat: 双轴图打平

* feat: line

* feat: 更改双轴图引用

* feat: test 用例

* fix: lint

* feat: fix lint

* fix:  fix 不必要的提交

* fix: merge

* fix: typescript

* feat: 更改 cr 问题

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@visiky visiky visiky left review comments

@tests-checker tests-checker[bot] tests-checker[bot] requested changes

@hustcc hustcc Awaiting requested review from hustcc

Assignees
No one assigned
Labels
enhancement New feature or request PR: unreviewed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@liuzhenying @visiky @hustcc