feat(interaction): add elementActiveByX and elementActiveByColor

[pearmini]

Element Active

添加和 Element Active 有关的交互。

• elementActive
• elementActiveByX
• elementActiveByColor

TODO: 过渡动画

变更点

• ElementActive 和 ElementHighlight 合并，因为 ElementHighlight 可以通过 ElementActive 模拟。
• 通过 ${state}${style} 的形式来设置数据驱动的各个状态的样式。

// 通过 ElementActive 来模拟 ElementHighlight
export function alphabetIntervalActiveUnselected(): G2Spec {
  return {
    interaction: [
      {
        type: 'elementActive',
        activeFill: (d) => (d.frequency > 0.05 ? 'red' : 'yellow'), // 激活状态
        inactiveOpacity: 0.6, // 非激活状态
      },
    ],
  };
}

• 使用集成测试来测试交互。

案例

默认样式

export function alphabetIntervalActiveDefaults(): 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: 'elementActive' }],
  };
}

指定激活样式

export function alphabetIntervalActive(): 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: 'elementActive', activeFill: 'red' }],
  };
}

指定未激活样式

数据驱动的样式。

export function alphabetIntervalActiveUnselected(): G2Spec {
  return {
    type: 'interval',
    data: {
      type: 'fetch',
      value: 'data/alphabet.csv',
    },
    axis: false,
    legend: false,
    padding: 0,
    encode: {
      x: 'letter',
      y: 'frequency',
      color: 'steelblue',
    },
    interaction: [
      {
        type: 'elementActive',
        activeFill: (d) => (d.frequency > 0.05 ? 'red' : 'yellow'),
        inactiveOpacity: 0.6,
      },
    ],
  };
}

激活同一颜色

export function stateAgesIntervalActiveByColor(): 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: 'elementActiveByColor',
        activeFill: 'red',
        inactiveOpacity: 0.6,
      },
    ],
  };
}

激活同一位置

export function stateAgesIntervalActiveByX(): 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: 'elementActiveByX',
        activeFill: 'red',
        inactiveOpacity: 0.6,
      },
    ],
  };
}

添加 Link

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

[visiky]

其它都挺好的~ 我就多确认一个点：遵循 ${state}${style}，这样子主题也容易写，然后考虑下交互怎么消费主题 token。

[pearmini]

其它都挺好的~ 我就多确认一个点：遵循 ${state}${style}，这样子主题也容易写，然后考虑下交互怎么消费主题 token。

嗯嗯，这个确实也是需要考虑的。