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.

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

feat(active-region): 支持配置底色样式,全局统一注册一个 配置样式 #3284

Merged
merged 2 commits into from
Feb 10, 2021

Conversation

visiky
Copy link
Member

@visiky visiky commented Feb 8, 2021

目前建议全局使用统一的 active-region 交互样式,因此需要先注册交互,再进行使用

使用方式 1⃣️:

// 覆盖注册, 且需要 chart 重新绑定交互. 或者不进行覆盖,使用新的 interaction name
registerInteraction('active-region', {
  start: [
    { trigger: 'plot:mousemove', action: 'active-region:show', arg: { style: { fill: 'rgba(255,0,0,0.25' } } },
  ],
  end: [{ trigger: 'plot:mouseleave', action: 'active-region:hide' }],
});

chart.interaction('active-region');

使用方式 2⃣️:

// 方式2: 重新绑定交互,且传入参数
chart.interaction('active-region', {
  start: [{ trigger: 'plot:mousemove', action: 'active-region:show', arg: { style: { fill: 'pink' } } }],
});

使用方式 2⃣️(多 actions):

// multiple actions with args
registerInteraction('custom', {
  start: [{ trigger: 'plot:mousemove', action: ['tooltip:show', 'active-region:show'] }],
  end: [{ trigger: 'plot:mouseleave', action: 'active-region:hide' }],
});

chart.interaction('custom', {
  start: [
    {
      trigger: 'plot:mousemove',
      action: ['tooltip:show', 'active-region:show'],
      arg: [null, { style: { fill: 'blue' } }],
    },
  ],
});
Checklist
  • npm test passes
  • tests and/or benchmarks are included
  • commit message follows commit guidelines
Description of change

@github-actions
Copy link

github-actions bot commented Feb 8, 2021

😭 Deploy PR Preview af563ee failed. Build logs

🤖 By surge-preview

@coveralls
Copy link

coveralls commented Feb 8, 2021

Pull Request Test Coverage Report for Build 553986902

Warning: This coverage report may be inaccurate.

We've detected an issue with your CI configuration that might affect the accuracy of this pull request's coverage report.
To ensure accuracy in future PRs, please see these guidelines.
A quick fix for this PR: rebase it; your next report should be accurate.

  • 3 of 3 (100.0%) changed or added relevant lines in 2 files are covered.
  • 3 unchanged lines in 1 file lost coverage.
  • Overall coverage increased (+0.008%) to 93.533%

Files with Coverage Reduction New Missed Lines %
src/interaction/action/active-region.ts 3 93.6%
Totals Coverage Status
Change from base Build 547720557: 0.008%
Covered Lines: 10851
Relevant Lines: 11256

💛 - Coveralls

@hustcc
Copy link
Member

hustcc commented Feb 10, 2021

可以如下使用吗?

chart.interaction('active-region', cfgs);

@visiky
Copy link
Member Author

visiky commented Feb 10, 2021

可以如下使用吗?

chart.interaction('active-region', cfgs);

好像可以,我写一个单测看看

@visiky visiky mentioned this pull request Feb 10, 2021
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants