nuke-biz-qn-chart/lib/view/bar-chart.js

weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile

/** @jsx createElement */

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _universalEnv = require('universal-env');

var _nukeBizChart = require('nuke-biz-chart');

var _bar = require('../util/bar');

var _legend = require('../util/legend');

var _util = require('../util/util');

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var BarChart = function (_Component) {
  _inherits(BarChart, _Component);

  function BarChart(props) {
    _classCallCheck(this, BarChart);

    var _this = _possibleConstructorReturn(this, (BarChart.__proto__ || Object.getPrototypeOf(BarChart)).call(this, props));

    _this.state = {};
    return _this;
  }

  _createClass(BarChart, [{
    key: 'renderAxis',
    value: function renderAxis() {
      var cols = this.props.cols;

      var arr = [];
      for (var key in cols) {
        arr.push((0, _rax.createElement)(_nukeBizChart.Axis, { name: key, config: { label: { fontSize: 12 } } }));
      }
      return arr;
    }
  }, {
    key: 'renderCoord',
    value: function renderCoord() {
      var arr = null;
      var _props$horizontal = this.props.horizontal,
          horizontal = _props$horizontal === undefined ? false : _props$horizontal;

      if (horizontal) {
        arr = (0, _rax.createElement)(_nukeBizChart.Coord, { config: { transposed: true } });
      }

      return arr;
    }
  }, {
    key: 'renderGeom',
    value: function renderGeom() {
      var _props = this.props,
          lineSeperator = _props.lineSeperator,
          xAxis = _props.xAxis,
          yAxis = _props.yAxis,
          smooth = _props.smooth;

      var colorKey = lineSeperator || yAxis.name;

      return (0, _rax.createElement)(_nukeBizChart.Geom, {
        type: 'barStack',
        position: xAxis.name + '*' + yAxis.name,
        color: colorKey,
        size: 10
      });
    }
  }, {
    key: 'renderAnimate',
    value: function renderAnimate() {
      var _props$horizontal2 = this.props.horizontal,
          horizontal = _props$horizontal2 === undefined ? false : _props$horizontal2;

      if (horizontal) {
        return (0, _rax.createElement)(_nukeBizChart.Animate, { type: 'scalex', config: { duration: 1000 } });
      }
      return (0, _rax.createElement)(_nukeBizChart.Animate, { type: 'waveh', config: { duration: 1000 } });
    }
  }, {
    key: 'formatX',
    value: function formatX(data, key, func) {
      var arr = [];
      for (var i = 0; i < data.length; i++) {
        var obj = _extends({}, data[i]);
        obj[key] = func(data[i][key]);
        arr.push(obj);
      }
      return arr;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          id = _props2.id,
          data = _props2.data,
          xAxis = _props2.xAxis,
          yAxis = _props2.yAxis,
          _props2$horizontal = _props2.horizontal,
          horizontal = _props2$horizontal === undefined ? false : _props2$horizontal,
          colors = _props2.colors,
          _props2$grids = _props2.grids,
          grids = _props2$grids === undefined ? {} : _props2$grids,
          _props2$showLegend = _props2.showLegend,
          showLegend = _props2$showLegend === undefined ? true : _props2$showLegend,
          cols = _props2.cols,
          lineSeperator = _props2.lineSeperator,
          _props2$dragEnabled = _props2.dragEnabled,
          dragEnabled = _props2$dragEnabled === undefined ? false : _props2$dragEnabled,
          _props2$scaleEnabled = _props2.scaleEnabled,
          scaleEnabled = _props2$scaleEnabled === undefined ? false : _props2$scaleEnabled,
          _props2$legend = _props2.legend,
          legend = _props2$legend === undefined ? {} : _props2$legend,
          _props2$showYAxis = _props2.showYAxis,
          showYAxis = _props2$showYAxis === undefined ? true : _props2$showYAxis,
          labelCount = _props2.labelCount,
          smooth = _props2.smooth,
          _props2$style = _props2.style,
          style = _props2$style === undefined ? {} : _props2$style,
          others = _objectWithoutProperties(_props2, ['id', 'data', 'xAxis', 'yAxis', 'horizontal', 'colors', 'grids', 'showLegend', 'cols', 'lineSeperator', 'dragEnabled', 'scaleEnabled', 'legend', 'showYAxis', 'labelCount', 'smooth', 'style']);

      var formatedData = data;
      var legendCfg = showLegend ? (0, _legend.parseLegend)(legend) : {};
      if (xAxis.formater) {
        formatedData = this.formatX(data, xAxis.name, xAxis.formater);
      }
      var weexOptions = (0, _bar.parseDataForWeex)({
        data: formatedData,
        cols: cols,
        colors: colors,
        lineSeperator: lineSeperator,
        xAxis: xAxis,
        yAxis: yAxis,
        smooth: smooth
      });

      var wrapStyle = [style, (0, _util.getWidthAndHeight)(this.props)];
      // labelInterval 没有就不传。
      var xAxisExtraConfig = xAxis.labelInterval ? { labelInterval: xAxis.labelInterval } : {};

      var xAxisCfg = Object.assign((0, _util.getXAxisCfg)(xAxis), {
        labels: weexOptions.labels,
        labelCount: labelCount || weexOptions.labels.length
      }, xAxisExtraConfig);
      var leftAxisCfg = (0, _util.getLeftAxisCfg)(yAxis, grids, showYAxis);
      var leftAxisHorizontalCfg = (0, _util.getLeftAxisHorizontalCfg)(xAxis);
      // console.log('weexOptions',weexOptions);
      if (_universalEnv.isWeex) {
        if (horizontal) {
          return (0, _rax.createElement)('horizontal-bar-chart', {
            id: id,
            style: wrapStyle,
            ref: 'chart',
            backgroundColor: style.backgroundColor || '#ffffff',
            data: weexOptions.dataResult,
            animate: { direction: 'Y', duration: 0.5 },
            drawBorders: false,
            borderColor: '#b2ebf2',
            borderWidth: 1,
            fitBars: false,
            drawBarShadow: false,
            drawGridBackground: false,
            gridBackgroundColor: '#ffffff',
            dragEnabled: dragEnabled,
            scaleEnabled: scaleEnabled,
            leftAxis: leftAxisHorizontalCfg,
            rightAxis: { drawLabels: false, enabled: false },
            xAxis: _extends({
              drawLabels: true,
              drawGridLines: false,
              textColor: '#37474f',
              textSize: 9,
              position: 'bottom',
              labels: weexOptions.labels,
              labelCount: labelCount || weexOptions.labels.length
            }, xAxisExtraConfig),
            legend: _extends({ enabled: showLegend }, legendCfg)
          });
        }
        return (0, _rax.createElement)('bar-chart', {
          id: id,
          style: wrapStyle,
          ref: 'chart',
          backgroundColor: style.backgroundColor || '#ffffff',
          data: weexOptions.dataResult,
          animate: { direction: 'X', duration: 0.5 },
          drawBorders: false,
          borderColor: '#b2ebf2',
          borderWidth: 1,
          fitBars: false,
          drawBarShadow: false,
          drawGridBackground: false,
          gridBackgroundColor: '#ffffff',
          dragEnabled: dragEnabled,
          scaleEnabled: scaleEnabled,
          leftAxis: leftAxisCfg,
          xAxis: xAxisCfg,
          legend: _extends({ enabled: showLegend }, legendCfg)
        });
      }
      var sizeObj = (0, _util.getWidthAndHeight)(this.props);
      return (0, _rax.createElement)(
        _nukeBizChart.Chart,
        _extends({
          id: id,
          data: formatedData,
          width: sizeObj.width,
          height: sizeObj.height,
          cols: cols,
          style: style
        }, others),
        this.renderAxis(),
        this.renderCoord(),
        this.renderGeom(),
        this.renderAnimate()
      );
    }
  }]);

  return BarChart;
}(_rax.Component);

exports.default = BarChart;
module.exports = exports['default'];