d2recharts/lib/chart/gauge.js

data driven react components of echarts

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

class Gauge 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: {
        show: false,
      },
    };
    const extraOption = util.pickExcept(props, [
      'data',
      'measures',
    ]);
    const dataSet = me.dataSet = DataSet.try2init(data);
    const measures = props.measures ? props.measures : dataSet.colNamesByType.number;
    const measure = measures[0];

    const totalValueKey = props['data-valuesTotal'] ? props['data-valuesTotal'][0] : undefined;
    let totalOriginalValue;
    let totalValue;
    if (totalValueKey) {
      totalOriginalValue = (originalData && originalData[0][totalValueKey]) ? originalData[0][totalValueKey] : 1;
      totalValue = dataSet.data[0][totalValueKey]
    } else {
      totalOriginalValue = props['data-totalValue'] || 1;
      totalValue = formatNumber(totalOriginalValue);
    }
    let currentValue = dataSet.data[0][measure];
    const currentValueFormat = dataSet.colByName[measure] && dataSet.colByName[measure].format;
    const totalValueFormat = dataSet.colByName[totalValueKey] && dataSet.colByName[totalValueKey].format;
    if (totalValueFormat === 'auto' || totalValueFormat === null) {
      totalValue = formatNumber(totalValue);
    }
    if (currentValueFormat === 'auto' || currentValueFormat === null) {
      currentValue = formatNumber(currentValue);
    }
    const currentOriginalValue = originalData ? originalData[0][measure] : 1;
    const name = dataSet.colByName[measure].comments;
    const percent = (currentOriginalValue / totalOriginalValue * 100).toFixed(2);
    const seriesData = [{
      type: 'gauge',
      radius: '100%',
      startAngle: 215,
      endAngle: -35,
      title: {
        show: false,
        textStyle: {
          fontSize: 16,
        },
      },
      data: [{
        name,
        value: percent,
        _currentValue: currentValue, // for diff
      }],
      detail: {
        formatter: (value) => {
          return `${name}\n\n${currentValue} / ${totalValue ? totalValue : 1}\n\n完成率: ${value}%`;
        },
        offsetCenter: [0, '50%'],
        textStyle: {
          fontSize: 13,
          color: '#666',
        },
      },
      axisLine: {
        lineStyle: {
          color: [
            [0.1, '#00934A'],
            [0.2, '#4AA443'],
            [0.3, '#9FB739'],
            [0.4, '#E9C92C'],
            [0.5, '#FBB42B'],
            [0.6, '#F59D2B'],
            [0.7, '#EB792E'],
            [0.8, '#E45C31'],
            [0.9, '#DE442F'],
            [1, '#D83330'],
          ],
        },
      },
      pointer: {
        length: '60%',
        width: 10,
      },
      itemStyle: {
        normal: {
          color: '#C0C0C0',
        },
      },

    }];
    _.merge(option, {
      series: seriesData,
    });
    const optionGenerator = new OptionGenerator(_.merge(option, extraOption));
    return optionGenerator.toOption();
  }

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

Gauge.propTypes = _.extend({
  measures: React.PropTypes.array,
  rowIndex: React.PropTypes.number,
}, propTypes.rechartsWithData);

module.exports = Gauge;