'use strict';

import React, { Component } from 'react';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
} from 'bizcharts';
// import IceChart from '@ali/ice-chart';

function dataFormatter(data) {
  return data.map((item, index) => {
    if (!item.repo || item.repo === 'undefined/undefined') {
      item.repo = item.project || '无地址' + index;
    }
    return item;
  });
}

export default class ActiveProjectsChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: dataFormatter(props.data),
    };
  }

  componentWillReceiveProps(nextProps) {
    const { data } = nextProps;
    // 数据异步加载，可能导致在页面已经 unmount 的时候进行渲染，增加判断条件避免出错
    this.setState({
      chartData: dataFormatter(data),
    });
  }

  render() {
    const { chartData } = this.state;
    const cols = {
      count: {
        min: 0,
      },
    };

    return (
      <Chart
        height={500}
        data={chartData}
        scale={cols}
        padding={[40, 40, 150, 40]}
        forceFit
      >
        <Coord type="polar" />
        <Axis
          name="count"
          label={null}
          tickLine={null}
          line={{
            stroke: '#E9E9E9',
            lineDash: [3, 3],
          }}
        />
        <Axis
          name="project"
          grid={{
            align: 'center',
          }}
          tickLine={null}
          label={{
            Offset: 10,
            textStyle: {
              textAlign: 'center', // 设置坐标轴 label 的文本对齐方向
            },
          }}
        />
        <Legend name="repo" itemWidth={120} />
        <Tooltip />
        <Geom
          type="interval"
          position="project*count"
          color="project"
          style={{
            lineWidth: 1,
            stroke: '#fff',
          }}
        >
          <Label
            content="count"
            offset={-15}
            textStyle={{
              textAlign: 'center',
              fontWeight: 'bold',
              fontSize: 11,
            }}
          />
        </Geom>
      </Chart>
    );
  }
}