d2recharts/lib/chart/pie.js

data driven react components of echarts

'use strict';
/**
 * d2pie module
 * @module d2pie
 * @see module:index
 */
const React = require('react');
const _ = require('lodash');
const Recharts = require('./recharts');
const DataSet = require('../source/data-set');
const OptionGenerator = require('./option-generator');
const util = require('../util/index');
const propTypes = require('./prop-types');

class Pie extends React.Component {
  shouldComponentUpdate(nextProps) {
    return !_.isEqual(this.props, nextProps);
  }

  getOption() {
    // data => DataSet => option
    const me = this;
    const props = me.props;

    const data = props.data;
    const originalData = props.originalData || [];
    let name = props.dimension;
    let value = props.measure || (props.measures ? props.measures[0] : '');
    const option = {
      calculable: true,
      // tooltip: {
      //   trigger: 'item',
      //   formatter: '{a} <br/>{b} : {c} ({d}%)',
      // },
    };

    const extraOption = util.pickExcept(props, [
      'data',
      'dimension',
      'measure',
      'measures',
    ]);
    const dataSet = me.dataSet = DataSet.try2init(data);
    const dimensionAndMeasures = util.props2DimensionAndMeasures(props, dataSet);
    const dimension = dimensionAndMeasures.dimension;
    const measures = dimensionAndMeasures.measures;
    const extraSeriesOption = {};
    const optionGenerator = new OptionGenerator(_.extend(option, extraOption));
    optionGenerator
      .configLegendByData(dataSet.colValuesByName[dimension])
      .configMeasures('pie', measures, dataSet, extraSeriesOption); // FIXME set series
    const finalOption = optionGenerator.toOption();

    if (!name) {
      name = dataSet.colNamesByType.string[0];
    }
    if (!value) {
      value = dataSet.colNamesByType.number[0];
    }
    let totalValue = 0;
    originalData.forEach(item => totalValue += item[value]);
    const pieData = _.map(originalData, (row) => ({
      name: row[name],
      value: parseFloat(row[value]),
    }));

    if (_.isNumber(props['data-piecesCount'])) {
      const otherData = pieData.splice(props['data-piecesCount']);
      if (otherData.length) {
        let otherValue = 0;
        otherData.forEach((item) => {
          otherValue += item.value;
        });
        pieData.push({
          name: '其他',
          value: otherValue,
        });
      }
    }
    _.merge(finalOption.legend, {
      show: false,
      left: 'center',
    });
    finalOption.series.forEach(item => {
      item.name = dataSet.colByName[value].comments;
      item.type = 'pie';
      item.data = pieData;
      item.label = {
        normal: {
          // dimension 可以基本可以说是对文本进行格式化 format
          formatter: params => {
            const originalValue = pieData[params.dataIndex].value;
            const formatedValue = data.data[params.dataIndex][measures[0]];
            const percent = ((originalValue / totalValue) * 100).toFixed(2);
            if (option['data-showNormalLabel']) {
              return `${data.data[params.dataIndex][dimension]}\n\n${formatedValue} (${percent}%)`;
            }
            return `${data.data[params.dataIndex][dimension]}\n\n${percent}%`;
          },
          textStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 20,
          },
        }
      };
      item.labelLine = {
        normal: {
          lineStyle: {
            color: '#999',
          },
        },
      };
    });

    return finalOption;
  }

  render() {
    return (
      <Recharts option={this.getOption()} schema={_.get(this.props, 'data.schema')} />
    );
  }
}

Pie.propTypes = _.extend({
  dimension: React.PropTypes.string,
  measure: React.PropTypes.string,
}, propTypes.rechartsWithData);

module.exports = Pie;