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

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

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

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

    _this.state = {};
    return _this;
  }

  _createClass(RadarChart, [{
    key: 'renderAxis',
    value: function renderAxis() {
      var arr = [];
      var _props = this.props,
          cols = _props.cols,
          lineSeperator = _props.lineSeperator,
          xAxis = _props.xAxis,
          yAxis = _props.yAxis,
          opacity = _props.opacity;

      arr.push((0, _rax.createElement)(_nukeBizChart.Axis, {
        name: xAxis.name,
        config: {
          label: { fontSize: xAxis.fontSize || 12, fill: xAxis.color },
          line: null
        }
      }));
      arr.push((0, _rax.createElement)(_nukeBizChart.Axis, {
        name: yAxis.name,
        config: {
          label: { fontSize: yAxis.fontSize || 12, fill: yAxis.color }
        }
      }));

      return arr;
    }
  }, {
    key: 'renderCoord',
    value: function renderCoord() {
      return (0, _rax.createElement)(_nukeBizChart.Coord, { type: 'polar' });
    }
  }, {
    key: 'renderGeom',
    value: function renderGeom() {
      var _props2 = this.props,
          cols = _props2.cols,
          lineSeperator = _props2.lineSeperator,
          xAxis = _props2.xAxis,
          yAxis = _props2.yAxis,
          opacity = _props2.opacity;

      var arr = [];
      var opacityObj = opacity ? { style: { opacity: opacity } } : {};
      var colorKey = lineSeperator || yAxis.name;

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

      return arr;
    }
  }, {
    key: 'renderAnimate',
    value: function renderAnimate() {
      // const { cols, lineSeperator, xAxis, yAxis, smooth} = this.props;
      return (0, _rax.createElement)(_nukeBizChart.Animate, { type: 'wavec', config: { duration: 1000 } });
    }
  }, {
    key: 'formatPieData',
    value: function formatPieData(data) {
      var arr = [];
      for (var i = 0; i < data.length; i++) {
        var obj = _extends({}, data[i]);
        obj.nuke_pie_group = 'nuke_pie_group1';
        arr.push(obj);
      }
      return arr;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          id = _props3.id,
          data = _props3.data,
          width = _props3.width,
          colors = _props3.colors,
          height = _props3.height,
          points = _props3.points,
          _props3$grids = _props3.grids,
          grids = _props3$grids === undefined ? {} : _props3$grids,
          _props3$rotationEnabl = _props3.rotationEnabled,
          rotationEnabled = _props3$rotationEnabl === undefined ? false : _props3$rotationEnabl,
          _props3$showLegend = _props3.showLegend,
          showLegend = _props3$showLegend === undefined ? true : _props3$showLegend,
          _props3$legend = _props3.legend,
          legend = _props3$legend === undefined ? {} : _props3$legend,
          lineSeperator = _props3.lineSeperator,
          _props3$lineWidth = _props3.lineWidth,
          lineWidth = _props3$lineWidth === undefined ? 2 : _props3$lineWidth,
          opacity = _props3.opacity,
          _props3$style = _props3.style,
          style = _props3$style === undefined ? {} : _props3$style,
          others = _objectWithoutProperties(_props3, ['id', 'data', 'width', 'colors', 'height', 'points', 'grids', 'rotationEnabled', 'showLegend', 'legend', 'lineSeperator', 'lineWidth', 'opacity', 'style']);

      var _props4 = this.props,
          xAxis = _props4.xAxis,
          yAxis = _props4.yAxis;


      yAxis.color = yAxis.style && yAxis.style.color ? yAxis.style.color : '#333333';
      yAxis.fontSize = yAxis.style && yAxis.style.fontSize ? parseInt(yAxis.style.fontSize, 10) : 9;
      xAxis.color = xAxis.style && xAxis.style.color ? xAxis.style.color : '#333333';
      xAxis.fontSize = xAxis.style && xAxis.style.fontSize ? parseInt(xAxis.style.fontSize, 10) : 9;

      var weexOptions = (0, _radar.parseDataForWeex)({
        data: data,
        points: points,
        colors: colors,
        lineSeperator: lineSeperator,
        xAxis: xAxis,
        yAxis: yAxis,
        opacity: opacity,

        lineWidth: lineWidth,
        color: yAxis.color,
        fontSize: yAxis.fontSize
      });
      var legendCfg = showLegend ? (0, _legend.parseLegend)(legend) : {};

      var gmData = this.formatPieData(data);
      var wrapStyle = [style, (0, _util.getWidthAndHeight)(this.props)];
      if (_universalEnv.isWeex) {
        return (0, _rax.createElement)('radar-chart', {
          id: id,
          style: wrapStyle,
          ref: 'chart',
          data: weexOptions.dataResult,
          animate: { direction: 'X', duration: 500 },
          legend: _extends({ enabled: showLegend }, legendCfg),
          drawWeb: true,
          webColor: grids.color || '#eeeeee',
          webAlpha: grids.lineAplha || 0.9,
          webLineWidthInner: grids.lineWidth || 1,
          webColorInner: grids.color || '#eeeeee',
          webLineWidth: grids.lineWidth || 1,
          rotationEnabled: true,
          xAxis: {
            textColor: xAxis.color,
            textSize: xAxis.fontSize,
            drawLabels: true,
            labels: weexOptions.labels
          },
          yAxis: {
            textColor: yAxis.color,
            textSize: yAxis.fontSize,
            drawLabels: true
          }
        });
      }
      var sizeObj = (0, _util.getWidthAndHeight)(this.props);
      return (0, _rax.createElement)(
        _nukeBizChart.Chart,
        _extends({
          id: id,
          data: gmData,
          width: sizeObj.width,
          height: sizeObj.height,
          style: style
        }, others),
        this.renderAxis(),
        this.renderCoord(),
        this.renderGeom(),
        this.renderAnimate()
      );
    }
  }]);

  return RadarChart;
}(_rax.Component);

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