/**
 * Created by baoyinghai on 5/26/17.
 */
import React from 'react';
import {Pie} from 'react-chartjs-2';
import Setting from './setting';

const COLOR_ARRAY = [
  '#FF6384',
  '#36A2EB',
  '#FFCE56',
  '#C176FF',
  '#FF741E',
  '#FFAB90',
  '#FF6384',
  '#36A2EB',
  '#FFCE56',
  '#C176FF',
  '#FF741E',
  '#FFAB90',
];

// const data = {
//   labels: [
//     'Red',
//     'Green',
//     'Yellow'
//   ],
//   datasets: [{
//     data: [300, 50, 100],
//     backgroundColor: [
//       '#FF6384',
//       '#36A2EB',
//       '#FFCE56'
//     ],
//     hoverBackgroundColor: [
//       '#FF6384',
//       '#36A2EB',
//       '#FFCE56'
//     ]
//   }]
// };


export default class MXPie extends React.Component {

  processData = () => {
    const { dataSource, chartSetting = {} } = this.props;
    const { label, value } = chartSetting;
    const labels = dataSource.map(row => row[label]);
    const colorAry = COLOR_ARRAY;
    return {
      labels,
      datasets: [{
        data: dataSource.map(row => row[value]),
        backgroundColor: colorAry,
        hoverBackgroundColor: colorAry
      }]
    }
  };

  render() {
    const { width, height } = this.props;
    const data = this.processData();
    return (
      <div>
        <Pie data={data} width={width} height={height} />
      </div>
    );
  }
}

export const PieSetting = Setting;