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(interaction): add elementSelect, elementSelectByX, elementSelect… #4219

Merged
merged 1 commit into from
Oct 25, 2022
Merged

feat(interaction): add elementSelect, elementSelectByX, elementSelect… #4219

merged 1 commit into from
Oct 25, 2022

Conversation

pearmini
Copy link
Member

@pearmini pearmini commented Oct 25, 2022 •
edited
Loading

添加 ElementSelect

4.0 叫 ElementSelected，这个命名是有问题的：ElementActive 不叫 ElementActived。所以改成 ElementSelect，同时增加了 ElementSelectByX 和 ElementSelectByColor。

  • ElementSelect
  • ElementSelectByX
  • ElementSelectByColor

多选

element-select

export function alphabetIntervalSelect(): G2Spec {
  return {
    type: 'interval',
    padding: 0,
    data: {
      type: 'fetch',
      value: 'data/alphabet.csv',
    },
    axis: false,
    legend: false,
    encode: {
      x: 'letter',
      y: 'frequency',
      color: 'steelblue',
    },
    interaction: [
      { type: 'elementSelect', selectedFill: 'red', unselectedOpacity: 0.6 },
    ],
  };
}

单选

element-select-single

export function alphabetIntervalSelectSingle(): G2Spec {
  return {
    type: 'interval',
    padding: 0,
    transform: [{ type: 'sortX', by: 'y', reverse: true }],
    data: {
      type: 'fetch',
      value: 'data/alphabet.csv',
    },
    axis: false,
    legend: false,
    encode: {
      x: 'letter',
      y: 'frequency',
      color: 'steelblue',
    },
    interaction: [
      {
        type: 'elementSelect',
        selectedFill: 'red',
        unselectedOpacity: 0.6,
        single: true,
      },
    ],
  };
}

By X

element-select-by-x

export function stateAgesIntervalSelectByX(): G2Spec {
  return {
    type: 'interval',
    padding: 0,
    transform: [
      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
      { type: 'dodgeX' },
    ],
    data: {
      type: 'fetch',
      value: 'data/stateages.csv',
    },
    axis: false,
    legend: false,
    encode: {
      x: 'state',
      y: 'population',
      color: 'age',
    },
    interaction: [
      {
        type: 'elementSelectByX',
        selectedFill: 'red',
        unselectedOpacity: 0.6,
      },
    ],
  };
}

By Color

element-select-by-color

export function stateAgesIntervalSelectByColor(): G2Spec {
  return {
    type: 'interval',
    padding: 0,
    axis: false,
    legend: false,
    width: 800,
    transform: [
      { type: 'stackY' },
      { type: 'sortX', by: 'y', reverse: true, slice: 5 },
    ],
    data: {
      type: 'fetch',
      value: 'data/stateages.csv',
      format: 'csv',
    },
    encode: {
      x: 'state',
      y: 'population',
      color: 'age',
    },
    scale: {
      x: { paddingInner: 0.2 },
    },
    interaction: [
      {
        type: 'elementSelectByColor',
        link: true,
        linkFill: (d) => (d.state === 'CA' ? 'red' : undefined),
        selectedStroke: '#000',
        selectedStrokeWidth: 1,
        unselectedOpacity: 0.6,
        linkFillOpacity: 0.5,
      },
    ],
  };
}

@pearmini pearmini merged commit a53bba9 into v5 Oct 25, 2022
@pearmini pearmini deleted the feat/interaction-select branch October 25, 2022 10:42
@visiky
Copy link
Member

visiky commented Oct 25, 2022 via email

@visiky
Copy link
Member

visiky commented Oct 25, 2022

嗷，没有仔细看改名的事情～
有 3 点原因可以考虑下是否重命名：

  1. active 是形容词, selected 也是形容, select 是动词
  2. 同类, highcharts 表示元素选中也是 selected, sliced(饼图切片划出) 等
  3. 不改名可以保持心智一致性, 即保留至少: selected, default, active, inactive 四种状态，实际上还可以衍生，比如 disabled

综合，如无强烈缘由，不改名。可以再看下是否有强烈缘由，需要改名。

hustcc pushed a commit that referenced this pull request May 16, 2023
@pearmini @hustcc
feat(interaction): add elementSelect, elementSelectByX, elementSelect…
6b509bc 
…ByColor (#4219)
hustcc pushed a commit that referenced this pull request May 16, 2023
@pearmini @hustcc
feat(interaction): add elementSelect, elementSelectByX, elementSelect…
ddeb340 
…ByColor (#4219)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hustcc hustcc hustcc approved these changes

@visiky visiky Awaiting requested review from visiky

Assignees
No one assigned
Labels
PR: merged
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@pearmini @visiky @hustcc