8000 axis label layout by kkxxkk2019 · Pull Request #203 · VisActor/VChart · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

axis label layout #203

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
Merged
merged 13 commits into from
Jul 21, 2023
Merged

axis label layout #203

merged 13 commits into from
Jul 21, 2023

Conversation

kkxxkk2019
Copy link
Collaborator
@kkxxkk2019 kkxxkk2019 commented Jul 14, 2023 •
edited
Loading

…enable the axis sampling logic, which is enabled by default

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Refactoring
  • Update dependency
  • Code style optimization
  • Test Case
  • Branch merge
  • Release
  • Site / documentation update
  • Demo update
  • Workflow
  • Other (about what?)

🔗 Related issue link

关联 vrender-components 的修改： https://github.com/VisActor/VRender/pull/167，需要 vrender-components 发版

🐞 Bugserver case id

  • 64b7bf3f14220f89e4720c82
  • 64b7bf0814220f89e4720c81
  • 64b7beba14220f89e4720c80
  • 64b7be6214220f89e4720c7f
  • 64b7bdfe14220f89e4720c7e

💡 Background and solution

1. dataFilter for tick and label

tick: {
 /**
   * 用于 tick 的数据过滤
   * @param data
   * @returns
   */
  dataFilter?: (data: AxisItem[]) => AxisItem[];
},

label: {
  /**
   * 用于 label 的数据过滤
   * @param data
   * @param layer
   * @returns
   */
  dataFilter?: (data: AxisItem[], layer: number) => AxisItem[];
}

2. overlap config for cartesian axis label

  1. 轴采样，添加 sampling 属性用于进行轴采样的开关，默认开启

该配置等同于 3.x 的 labelMonospace，轴采样开启后会进行防重叠的处理，所以即使配置了 label.autoRotate 这些也不会触发，所以如果想要进行自动旋转，需要将 sampling 属性关闭

  1. 直角坐标系下的轴标签防重叠配置，axis.label 新增如下配置，整体的逻辑如下：

    1. 如果用户配置了 layoutFunc 则不进行内置的防重叠逻辑，autoRotate, autoLimit, autoHide 默认为 false，如果都配置，内部会按照 autoRotate -> autoLimit -> autoHide 的方式进行布局，目前 autoHide 未基于旋转后的包围盒进行计算，这个等后续 vrender 支持后修改。
    2. 另外在主题上配置了左右轴的最大高度和最大宽度，用于控制轴的显示空间，到超出空间并且用户配置了 autoLimit 则会进行文本的自动省略
export type CustomMethod = (items: IText[], separation: number) => IText[];

export interface AxisLabelOverlap {
  /**
   * 自动旋转配置
   * @default false
   */
  autoRotate?: boolean;
  /**
   * 仅当 `autoRotate` 为 true 时生效，可选的旋转范围，默认为 [0, 45, 90]
   * @default [0, 45, 90]
   */
  autoRotateAngle?: number[];
  /**
   * 自动隐藏配置
   * @default false
   */
  autoHide?: boolean;
  /**
   * 防重叠策略，默认为 'parity'。
   * - 'parity': 奇偶校验，使用删除所有其他标签的策略（这对于标准线性轴非常有效）。
   * - 'greedy': 将执行标签的线性扫描，并删除与最后一个可见标签重叠的所有标签。
   * - 也可以传入函数用于自定义策略
   * @default 'parity'
   */
  autoHideMethod?: 'parity' | 'greedy' | CustomMethod;
  /**
   * 仅当 `autoHide` 为 true 时生效，设置文本之间的间隔距离，单位 px
   * @default 0
   */
  autoHideSeparation?: number;
  /**
   * 自动隐藏配置
   * @default false
   */
  autoLimit?: boolean;
  /**
   * 仅当 `autoLimit` 为 true 时生效，省略占位符，默认为 '...'
   * @default '...'
   */
  limitEllipsis?: string;

  /**
   * 自定义布局配置，如果声明了 `layoutFunc`，则默认提供的防重叠相关的配置（`autoHide`, `autoRotate`, `autoLimit`）均不生效
   * @param labels 标签图形元素
   * @param labelData 标签数据
   * @param layer 当前轴的层级
   * @param axis 当前轴组件实例
   * @returns void
   */
  layoutFunc?: (labels: IText[], labelData: AxisItem[], layer: number, axis: IGroup) => void;
}

image
image
image
image

📝 Changelog

Language Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

copilot:summary

🔍 Walkthrough

copilot:walkthrough

@kkxxkk2019 kkxxkk2019 linked an issue Jul 14, 2023 that may be closed by this pull request
[Feature] axis label autoOverlap autoRotate #185
Closed
@kkxxkk2019 kkxxkk2019 linked an issue Jul 14, 2023 that may be closed by this pull request
[Feature] axis label data filter strategy & custom layout strategy #125
Closed
@kkxxkk2019 kkxxkk2019 force-pushed the feat/axis-label-layout branch from 33bc82b to 7397224 Compare July 17, 2023 14:25
@github-actions github-actions bot added the chore label Jul 17, 2023
@kkxxkk2019 kkxxkk2019 changed the title WIP: axis label layout axis label layout Jul 18, 2023
@kkxxkk2019 kkxxkk2019 requested review from zamhown and a team July 18, 2023 05:55
@kkxxkk2019 kkxxkk2019 added this to the v1.1.0 milestone Jul 18, 2023
@kkxxkk2019 kkxxkk2019 force-pushed the feat/axis-label-layout branch from 5714e6b to 0f571af Compare July 19, 2023 13:39
@kkxxkk2019 kkxxkk2019 force-pushed the feat/axis-label-layout branch from 31c0e70 to 427ffdb Compare July 21, 2023 05:14
@kkxxkk2019 kkxxkk2019 force-pushed the feat/axis-label-layout branch from 427ffdb to 00b5eda Compare July 21, 2023 07:10
@kkxxkk2019 kkxxkk2019 merged commit d360de4 into develop Jul 21, 2023
@kkxxkk2019 kkxxkk2019 deleted the feat/axis-label-layout branch July 21, 2023 11:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zamhown zamhown zamhown approved these changes

Assignees
No one assigned
Labels
chore react-vchart typescript vchart
Projects
None yet
Milestone
v1.1.0
Development

Successfully merging this pull request may close these issues.

[Feature] axis label autoOverlap autoRotate [Feature] axis label data filter strategy & custom layout strategy
2 participants
@kkxxkk2019 @zamhown
0