bee-ui/src/BarChart/index.js

import React, {
  PropTypes,
  Component,
} from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';
import AxisX from './AxisX';
import AxisXContainer from './AxisXContainer';
import Rectangular from './Rectangular';
import ShapContainer from './ShapContainer';
import TopPoint from './TopPoint';

const styles = StyleSheet.create({
  yAxis: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  textColor: {
    color: '#DCDEE5',
  },
  bdWrap: {
    flex: 1,
    alignItems: 'center',
  },
  topValBar: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
});

class BarChart extends Component {
  static propTypes = {
    customStyle: PropTypes.shape({
      width: PropTypes.number.isRequired, // 每个柱子的宽度
      height: PropTypes.number.isRequired, // 图表容器的高度
      fillColor: PropTypes.string.isRequired, // 柱状图的前景填充色
      backgroundColor: PropTypes.string.isRequired, // 柱状图底色背景
      raduis: PropTypes.number.isRequired, // 样式的圆角
      parity: PropTypes.string.isRequired, // odd奇数显示 even偶数显示 all显示全部
      piecewise: PropTypes.number.isRequired, // Y轴度量分几段
      topAxisXShow: PropTypes.bool.isRequired, // 是否展示顶部对应的value值
      showAxisY: PropTypes.bool.isRequired, // 是否展示Y轴
      showAxisXLine: PropTypes.bool.isRequired, // 是否显示分段线
      showTopBar: PropTypes.bool.isRequired, // 是否显示顶部数值条
      borderColor: PropTypes.string.isRequired, // 表格边框
      textStyle: PropTypes.object.isRequired, // 文本的颜色
      topTextStyle: PropTypes.object.isRequired, // 顶部文字颜色
      onClick: PropTypes.func, // click回调
      unitName: PropTypes.string,
      xAxisContainerStyle: PropTypes.object, // X轴容器样式
    }),
    dataSource: PropTypes.array,
  }
  static defaultProps = {
    customStyle: {},
    dataSource: [],
  }
  constructor(props) {
    super(props);
    this.AxisX = [];
    this.AxisY = [];
    this.ChartArea = [];
    this.TopValBar = [];
    this.createChart(this.props.dataSource);
  }
  componentWillUpdate(nextProps) {
    this.createChart(nextProps.dataSource);
  }
  _findMaxVal(data) {
    let max = Math.max(...data);
    const average = this._average(max);
    const piecewise = this.props.customStyle.piecewise;
    max = piecewise * average;
    return max;
  }
  _average(max) {
    const piecewise = this.props.customStyle.piecewise;
    return Math.ceil(max / piecewise);
  }
  createLabel(parity, label, idx) {
    let text;
    const unitName = this.props.customStyle.unitName;
    switch (parity) {
      case 'odd': text = idx % 2 === 0 ? `${label}${unitName}` : '';
        break;
      case 'even': text = idx % 2 === 0 ? '' : `${label}${unitName}`;
        break;
      default: text = label;
        break;
    }
    return text;
  }
  createChart(dataSource) {
    const ValueList = [];
    this.AxisX = [];
    dataSource.forEach((data, idx) => {
      this.AxisX.push(this.createAxisX(data.x, idx));
      ValueList.push(data.value);
    });
    this.createAxisY(ValueList);
    this.createChartArea(ValueList, dataSource);
  }
  createAxisX(label, idx) {
    const customStyle = this.props.customStyle;
    const parity = customStyle.parity;
    const showAxisXLine = customStyle.showAxisXLine;
    const text = this.createLabel(parity, label, idx);
    const style = {
      fontSize: customStyle.textStyle.fontSize,
      color: customStyle.textStyle.color,
      borderColor: customStyle.borderColor,
    };
    return <AxisX label={String(text)} key={idx} showAxisXLine={showAxisXLine} style={style} />;
  }

  createAxisY(ValueList) {
    let idx = 0;
    const max = this._findMaxVal(ValueList);
    const average = this._average(max);
    const customStyle = this.props.customStyle;
    const { textStyle, piecewise } = customStyle;

    if (max === 0) {
      return this.AxisY[idx] = <Text style={[styles.textColor, textStyle]} key={99}>{max}</Text>;
    }
    for (let i = piecewise; i > -1; i--) {
      const yLabel = i * average;
      this.AxisY[idx] = <Text style={[styles.textColor, textStyle]} key={i}>{yLabel}</Text>;
      idx++;
    }
    return null;
  }
  createChartArea(ValueList, dataSource) {
    const { customStyle } = this.props;
    const max = this._findMaxVal(ValueList);
    const topTextStyle = customStyle.topTextStyle;
    const onClick = customStyle.onClick;
    this.ChartArea = [];
    this.TopValBar = [];
    ValueList.map((data, index) => {
      const value = (data / max) * customStyle.height;
      customStyle.topAxisXShow ? this.TopValBar.push(<TopPoint key={`${index}`} label={data} style={topTextStyle} />) : null;
      this.ChartArea.push(<Rectangular onClick={onClick} item={dataSource[index]} key={`li_${index}`} valueHeight={value} customStyle={customStyle} />);
      return false;
    });
  }

  render() {
    const customStyle = this.props.customStyle;
    const axisYWidth = customStyle.axisYWidth;
    const isBorderRight = customStyle.showAxisY ? { width: axisYWidth - 1, borderRightWidth: 1, borderColor: customStyle.borderColor } : { borderRightWidth: 0, width: 0 };
    const yAxis = customStyle.showAxisY ? this.AxisY : null;
    const dynamicStyle = customStyle.showAxisY ? { marginLeft: axisYWidth } : { marginLeft: 0 };
    const topBar = customStyle.showTopBar ? this.TopValBar : null;
    const shapStyle = {
      height: customStyle.height,
      borderColor: customStyle.borderColor,
    };
    return (
      <View>
        <View style={dynamicStyle}><View style={styles.topValBar}>{topBar}</View></View>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <View style={isBorderRight}>
            <View style={[styles.yAxis, { height: customStyle.height }, isBorderRight]}>{yAxis}</View>
          </View>
          <View style={{ flex: 1 }}>
            <View>
              <ShapContainer style={shapStyle}>{this.ChartArea}</ShapContainer>
            </View>
          </View>
        </View>
        <View style={[dynamicStyle]}>
          <AxisXContainer style={customStyle.xAxisContainerStyle}>{this.AxisX}</AxisXContainer>
        </View>
      </View>
    );
  }
}
export default BarChart;