nuke-biz-qn-chart/lib/view/line-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 _line = require('../util/line');

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 LineChart = function (_Component) {
  _inherits(LineChart, _Component);

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

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

    _this.state = {};
    return _this;
  }

  _createClass(LineChart, [{
    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: 'renderGeom',
    value: function renderGeom(colors) {
      var _props = this.props,
          cols = _props.cols,
          lineSeperator = _props.lineSeperator,
          xAxis = _props.xAxis,
          yAxis = _props.yAxis,
          _props$fill = _props.fill,
          fill = _props$fill === undefined ? {} : _props$fill,
          smooth = _props.smooth,
          _props$points = _props.points,
          points = _props$points === undefined ? {} : _props$points;

      var arr = [];

      var colorKey = lineSeperator || yAxis.name;

      arr.push((0, _rax.createElement)(_nukeBizChart.Geom, {
        type: 'line',
        position: xAxis.name + '*' + yAxis.name,
        color: colorKey,
        size: 2,
        shape: smooth ? 'smooth' : 'line'
      }));

      if (points.drawPoints) {
        arr.push((0, _rax.createElement)(_nukeBizChart.Geom, {
          type: 'point',
          position: xAxis.name + '*' + yAxis.name,
          stroke: '#999999'
        }));
      }
      if (fill.drawFilled) {
        arr.push((0, _rax.createElement)(_nukeBizChart.Geom, {
          type: 'area',
          position: xAxis.name + '*' + yAxis.name,
          color: colorKey,
          shape: smooth ? 'smooth' : 'line',
          style: { opacity: fill.fillAlpha || 0.5 }
        }));
      }
      return arr;
    }
  }, {
    key: 'renderAnimate',
    value: function renderAnimate() {
      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,
          width = _props2.width,
          height = _props2.height,
          xAxis = _props2.xAxis,
          colors = _props2.colors,
          points = _props2.points,
          _props2$grids = _props2.grids,
          grids = _props2$grids === undefined ? {} : _props2$grids,
          lineWidth = _props2.lineWidth,
          yAxis = _props2.yAxis,
          _props2$dragEnabled = _props2.dragEnabled,
          dragEnabled = _props2$dragEnabled === undefined ? false : _props2$dragEnabled,
          _props2$scaleEnabled = _props2.scaleEnabled,
          scaleEnabled = _props2$scaleEnabled === undefined ? false : _props2$scaleEnabled,
          _props2$showLegend = _props2.showLegend,
          showLegend = _props2$showLegend === undefined ? true : _props2$showLegend,
          cols = _props2.cols,
          _props2$legend = _props2.legend,
          legend = _props2$legend === undefined ? {} : _props2$legend,
          _props2$drawMarkers = _props2.drawMarkers,
          drawMarkers = _props2$drawMarkers === undefined ? false : _props2$drawMarkers,
          _props2$markerStyle = _props2.markerStyle,
          markerStyle = _props2$markerStyle === undefined ? {} : _props2$markerStyle,
          _props2$fill = _props2.fill,
          fill = _props2$fill === undefined ? {} : _props2$fill,
          lineSeperator = _props2.lineSeperator,
          labelCount = _props2.labelCount,
          smooth = _props2.smooth,
          _props2$style = _props2.style,
          style = _props2$style === undefined ? {} : _props2$style,
          _props2$drawValues = _props2.drawValues,
          drawValues = _props2$drawValues === undefined ? false : _props2$drawValues,
          _props2$showYAxis = _props2.showYAxis,
          showYAxis = _props2$showYAxis === undefined ? true : _props2$showYAxis,
          others = _objectWithoutProperties(_props2, ['id', 'data', 'width', 'height', 'xAxis', 'colors', 'points', 'grids', 'lineWidth', 'yAxis', 'dragEnabled', 'scaleEnabled', 'showLegend', 'cols', 'legend', 'drawMarkers', 'markerStyle', 'fill', 'lineSeperator', 'labelCount', 'smooth', 'style', 'drawValues', 'showYAxis']);

      var formatedData = data;
      if (xAxis.formater) {
        formatedData = this.formatX(data, xAxis.name, xAxis.formater);
      }
      var legendCfg = showLegend ? (0, _legend.parseLegend)(legend) : {};
      var weexOptions = (0, _line.parseDataForWeex)({
        data: formatedData,
        points: points,
        cols: cols,
        lineWidth: lineWidth,
        colors: colors,
        lineSeperator: lineSeperator,
        xAxis: xAxis,
        yAxis: yAxis,
        smooth: smooth,
        drawValues: drawValues,
        fill: fill
      });
      var wrapStyle = [style, (0, _util.getWidthAndHeight)(this.props)];
      // labelInterval 没有就不传。
      var xAxisExtraConfig = xAxis.labelInterval ? { labelInterval: xAxis.labelInterval } : {};
      var markerStyleObj = drawMarkers ? {
        backgroundColor: markerStyle.backgroundColor || '#cccccc',
        textSize: markerStyle.textSize || 15,
        textColor: markerStyle.textColor || '#ffffff'
      } : {};
      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);

      // console.log('weexOptions',weexOptions);
      if (_universalEnv.isWeex) {
        return (0, _rax.createElement)('line-chart', {
          id: id,
          style: wrapStyle,
          ref: 'chart',
          backgroundColor: style.backgroundColor || '#ffffff',
          data: weexOptions.dataResult,
          animate: { direction: 'X', duration: 500 },
          drawBorders: false,
          drawGridBackground: false,
          gridBackgroundColor: '#ffffff',
          dragEnabled: dragEnabled,
          scaleEnabled: scaleEnabled,
          leftAxis: leftAxisCfg,
          rightAxis: { drawLabels: false, enabled: false },
          xAxis: xAxisCfg,
          legend: _extends({ enabled: showLegend }, legendCfg),
          drawMarkers: drawMarkers || false,
          markerStyle: markerStyleObj
        });
      }
      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.renderGeom(weexOptions.colors),
        this.renderAnimate()
      );
    }
  }]);

  return LineChart;
}(_rax.Component);

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