d2recharts/lib/chart/line2.js

data driven react components of echarts

'use strict';
/**
 * d2line module
 * @module d2line
 * @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 Line2 extends React.Component {
  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 option = {
      tooltip: {
        trigger: 'axis',
      },
      // yAxis: {
      //   axisLine: {
      //     show: false,
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      //   axisLabel: {
      //     textStyle: {
      //       color: '#999',
      //     }
      //   },
      // },
    };
    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;

    let measures = dimensionAndMeasures.measures;
    let measuresRight = dimensionAndMeasures.measuresRight || [];
    let allMeasures = measures.concat(measuresRight);
    const extraSeriesOption = {};
    if (stack) {
      extraSeriesOption.stack = true;
    }
    extraSeriesOption.measures = measures;
    extraSeriesOption.measuresRight = measuresRight;
    extraSeriesOption.allMeasures = allMeasures;
    const optionGenerator = new OptionGenerator(_.merge(option, extraOption));
    const theme = optionGenerator._option.theme;
    const themeConfig = require(`../theme/${theme}`);
    optionGenerator
      .configCoordinates(
        transformDate(dataSet.colValuesByName[dimension]),
        horizontal,
        {
          boundaryGap: true,
          yAxis: [
            {
              type: 'value',
              // name: '左侧标题'
              axisLine:{
                lineStyle:{
                  color: themeConfig.color[0],
                }
              },
            },
            {
              type: 'value',
              // name: '右侧标题'
              axisLine:{
                lineStyle:{
                  color: themeConfig.color[1],
                }
              }
            },
          ]
        }
      )
      .configLegend(allMeasures, dataSet)
      .configMeasures(['bar', 'line'], allMeasures, dataSet, extraSeriesOption);
    return optionGenerator.toOption();
  }

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

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

module.exports = Line2;