Breaking Change (5.0.0-beta.12)

[pearmini]

Breaking Change (5.0.0-beta.12)

There are some breaking changes for 5.0.0-beta.12.

Chart API

#4690

• chart.node() -> chart.getNode()
• chart.context() -> chart.getContext()
• chart.root() -> chart.getContainer()

mark.animate

#4695

// Before
chart.interval().animate('enterType', 'waveIn').animate('enterDuration', 1000);

// After
chart.interval().animate('enter', { type: 'waveIn', duration: 1000 });

mark.tooltip

#4691

// Before
chart
  .interval()
  .encode('title', 'fieldA')
  .encode('tooltip', 'fieldB')
  .encode('tooltip1', 'fieldC');

// After
chart.interval().tooltip({
  title: 'fieldA',
  items: ['fieldB', 'fieldC'],
});

// Before
const names = {
  tooltip: 'min',
  tooltip1: 'q1',
  tooltip2: 'q2',
  tooltip3: 'q3',
  tooltip4: 'max',
};

chart
  .boxplot()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/morley.json',
  })
  .encode('x', 'Expt')
  .encode('y', 'Speed');

chart.interaction('tooltip', {
  item: ({ channel, value }) => ({
    name: names[channel],
    color: channel === 'tooltip4' ? 'red' : undefined,
    value,
  }),
});

// After
chart
  .boxplot()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/morley.json',
  })
  .encode('x', 'Expt')
  .encode('y', 'Speed')
  .tooltip({ name: 'min', channel: 'y' })
  .tooltip({ name: 'q1', channel: 'y1' })
  .tooltip({ name: 'q2', channel: 'y2' })
  .tooltip({ name: 'q3', channel: 'y3' })
  .tooltip({ name: 'max', color: 'red', channel: 'y4' });

chart.interaction('tooltip', true);