d2recharts/lib/chart/funnel.js

data driven react components of echarts

'use strict';
/**
 * d2funnel module
 * @module d2funnel
 * @see module:index
 */
const React = require('react');
const _ = require('lodash');
const numeral = require('numeral');
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 Bar extends React.Component {
  getOption() {
    // data => DataSet => option
    const me = this;
    const props = me.props;
    const data = props.data;
    const originalData = props.originalData;
    const option = { // 漏斗图基础设置
      tooltip: {
        trigger: 'item',
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        normal: {
          opacity: 1,
        },
      },
    };
    const extraOption = util.pickExcept(props, [
      'data',
      'dimension',
      'measures',
      'horizontal',
      'stack',
    ]);
    const dataSet = me.dataSet = DataSet.try2init(data);
    const dimensionAndMeasures = util.props2DimensionAndMeasures(props, dataSet);
    const dimension = dimensionAndMeasures.dimension;
    const measures = dimensionAndMeasures.measures;
    const measure = measures[0];

    if (dimension === '' || measure === undefined) {
      console.warn('invalid funnel without dimension or measure');
      return {};
    }

    const extraSeriesOption = {};

    const optionGenerator = new OptionGenerator(_.extend(option, extraOption));
    optionGenerator
      .configLegendByData(dataSet.colValuesByName[dimension])
      .configMeasures('funnel', measures, dataSet, extraSeriesOption); // FIXME set series
    const finalOption = optionGenerator.toOption();
    const formatData = optionGenerator._getFormatData(dataSet, measure);
    const legend = finalOption.legend.data;
    _.each(finalOption.series, (series) => {
      const oldData = series.data;
      series.maxSize = '90%';
      series.minSize = '10%';
      series.funnelAlign = 'center';
      series.data = _.map(oldData, (value, index) => ({
          name: legend[index],
          value,
        }));
      series.label = {
        normal: {
          show: true,
          position: 'outside',
          textStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 20,
          },
          formatter: (params) => {
            const dataIndex = params.dataIndex;
            let conversionStr = '';
            if (dataIndex > 0) {
              const rate = originalData[dataIndex][measure] / originalData[dataIndex - 1][measure];
              conversionStr = `\n转化率: ${numeral(rate).format('0.00%')}`;
            }
            return `${params.name}: ${formatData[dataIndex]}${conversionStr}`;
          },
        },
      };
      series.labelLine = {
        normal: {
          // length: 50,
          lineStyle: {
            color: '#9e9e9',
          },
        },
        emphasis: {
          lineStyle: {
            color: '#9e9e9',
          },
        },
      };
    });
    return finalOption;
  }

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

Bar.propTypes = _.extend({
  stack: React.PropTypes.bool,
}, propTypes.rechartsWithDataAndCoordinates);

module.exports = Bar;