d2recharts/lib/chart/bar.js

data driven react components of echarts

'use strict';
/**
 * d2bar module
 * @module d2bar
 * @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');
const { transformDate } = require('../formatter');

class Bar 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;
    /**
     * 逍为：兼容两种方法，但是优先使用 data-stack 的方式（这样便于属性统一配置）
     * data-stack -> stack；
     * data-horizontal -> horizontal；
     *
     */
    const horizontal = props['data-horizontal'] || props.horizontal;
    const stack = props['data-stack'] || props.stack;
    const percent = props['data-percent'] || props.percent;

    const option = {
      // 为不顶到坐标轴
      // grid: {
      //   top: '12%',
      //   left: '1%',
      //   right: '10%',
      //   containLabel: true
      // },
    };
    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 extraSeriesOption = {};
    if (stack) {
      extraSeriesOption.stack = true;
    }
    const optionGenerator = new OptionGenerator(_.extend(option, extraOption));
    optionGenerator
      .configCoordinates(
        transformDate(dataSet.colValuesByName[dimension]),
        horizontal
      )
      .configLegend(measures, dataSet)
      .configMeasures('bar', measures, dataSet, extraSeriesOption);

    const finalOption = optionGenerator.toOption();
    if (percent) {
      const valueArray = finalOption.series.map(item => item.data);
      const zipArgs = [].concat(valueArray, (...args) => {
        return args.reduce((a, b) => a + b, 0)
      });
      const totalValueArray = _.zipWith(...zipArgs);
      finalOption.series.forEach((serie, serieIndex) => {
        serie.data = serie.data.map((value, valueIndex) => {
          return value / totalValueArray[valueIndex];
        });
      });
      console.log('finalOption11', finalOption.series);
    }
    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;