message: Fix to remove empty segments from PodStatus after animations
diff: @@ -5,6 +5,8 @@ import Tooltip from '../SvgPodTooltip';
  import { Pod } from '../../types';
  import { calculateRadius, podStatus, getPodStatus, podColor } from '../../utils';
  +const ANIMATION_DURATION = 2000;
  +
  type PodData = {
  x: string;
  y: number;
  @@ -23,30 +25,70 @@ type PodStatusProps = {
  subTitle?: string;
  };
  +type PodStatusState = {
  + vData: PodData[];
  + updateOnEnd: boolean;
  +};
  +
  const { podStatusInnerRadius, podStatusOuterRadius } = calculateRadius(130); // default value of size is 130
  -class PodStatus extends React.PureComponent<PodStatusProps> {
  +class PodStatus extends React.Component<PodStatusProps, PodStatusState> {
  + constructor(props) {
  + super(props);
  + this.state = {
  + vData: [],
  + updateOnEnd: false,
  + };
  + }
  +
  + static getDerivedStateFromProps(
  + nextProps: PodStatusProps,
  + prevState: PodStatusState,
  + ): PodStatusState {
  + const { data } = nextProps;
  +
  + if (prevState.updateOnEnd) {
  + // Animations complete, remove empty slices
  + return {
  + vData: _.filter(prevState.vData, (nextData) => nextData.y !== 0),
  + updateOnEnd: false,
  + };
  + }
  +
  + const vData: PodData[] = podStatus.map((pod) => ({
  + x: pod,
  + y: _.sumBy(data, (d) => +(getPodStatus(d) === pod)) || 0,
  + }));
  +
  + if (_.isEmpty(data)) {
  + _.update(vData, `[${_.findKey(vData, { x: 'Scaled to 0' })}]['y']`, () => 1);
  + }
  +
  + // Determine if we have moved to just 1 data point left
  + const prevDataPoints = _.size(_.filter(prevState.vData, (nextData) => nextData.y !== 0));
  + const dataPoints = _.size(_.filter(vData, (nextData) => nextData.y !== 0));
  +
  + return { vData, updateOnEnd: dataPoints === 1 && prevDataPoints > 1 };
  + }
  +
  + doUpdate = () => {
  + // Animations complete, update to remove empty slices
  + this.forceUpdate();
  + };
  +
  render() {
  const {
  innerRadius = podStatusInnerRadius,
  outerRadius = podStatusOuterRadius,
  x,
  y,
  - data,
  size = 130,
  standalone = false,
  showTooltip = true,
  title = '',
  subTitle = '',
  } = this.props;
  - const vData: PodData[] = podStatus.map((pod) => ({
  - x: pod,
  - y: _.sumBy(data, (d) => +(getPodStatus(d) === pod)) || 0,
  - }));
  -
  - if (_.isEmpty(data)) {
  - _.update(vData, `[${_.findKey(vData, { x: 'Scaled to 0' })}]['y']`, () => 1);
  - }
  + const { vData, updateOnEnd } = this.state;
  const tooltipEvent: any = showTooltip
  ? [
  @@ -81,7 +123,8 @@ class PodStatus extends React.PureComponent<PodStatusProps> {
  <ChartDonut
  events={tooltipEvent}
  animate={{
  - duration: 2000,
  + duration: ANIMATION_DURATION,
  + onEnd: updateOnEnd ? this.doUpdate : undefined,
  }}
  standalone={standalone}
  innerRadius={innerRadius}
  