import React, { Component } from 'react';
import IceChart from '@ali/ice-chart';

function formatData(data) {
  let chartData = [];

  for (let key of Object.keys(data)) {
    chartData.push({
      component: key,
      count: data[key].useProjectCount || 0,
    });
  }
  chartData = chartData.sort(
    (previous, current) => current.count - previous.count
  );
  return chartData;
}

export default class ComponentChart extends Component {
  componentWillReceiveProps(nextProps) {
    const { data } = nextProps;

    // 数据异步加载，可能导致在页面已经 unmount 的时候进行渲染，增加判断条件避免出错
    if (this.refs.iceChart) {
      this.refs.iceChart.getChart().changeData(formatData(data));
    }
  }

  render() {
    const { type, data = {} } = this.props;
    const chartData = formatData(data);
    const conf = {
      forceFit: true, // 设置了forceFit width 失效
      height: 500,
      data: chartData,
      legend: false,
      padding: {
        bottom: '150px',
      },
      defs: {
        count: {
          alias: '使用项目数',
        },
        component: {
          alias: '组件名',
        },
      },
      series: [
        {
          type: 'intervalStack',
          position: 'component*count',
          label: {
            dim: 'count',
            callback: (val) => val,
          },
          color: {
            dim: 'component',
          },
        },
      ],
    };

    return <IceChart ref="iceChart" {...conf} />;
  }
}