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

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

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

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

    _this.state = {};
    return _this;
  }

  _createClass(PieChart, [{
    key: 'renderAxis',
    value: function renderAxis() {
      return (0, _rax.createElement)(_nukeBizChart.Axis, { config: false });
    }
  }, {
    key: 'renderCoord',
    value: function renderCoord() {
      var _props$inner = this.props.inner,
          inner = _props$inner === undefined ? {} : _props$inner;
      var _inner$drawHoleEnable = inner.drawHoleEnabled,
          drawHoleEnabled = _inner$drawHoleEnable === undefined ? false : _inner$drawHoleEnable,
          _inner$radius = inner.radius,
          radius = _inner$radius === undefined ? 0.6 : _inner$radius;
      // debugger;

      return (0, _rax.createElement)(_nukeBizChart.Coord, {
        type: 'polar',
        config: {
          transposed: true,
          startAngle: 0 * Math.PI,
          endAngle: 2 * Math.PI,
          inner: drawHoleEnabled ? radius : 0
        }
      });
    }
  }, {
    key: 'renderGeom',
    value: function renderGeom() {
      var _props = this.props,
          label = _props.label,
          value = _props.value,
          _props$points = _props.points,
          points = _props$points === undefined ? {} : _props$points;

      var arr = (0, _rax.createElement)(_nukeBizChart.Geom, {
        type: 'pie',
        position: 'nuke_pie_group*' + value.name,
        color: label.name
      });

      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 _props2 = this.props,
          id = _props2.id,
          data = _props2.data,
          width = _props2.width,
          height = _props2.height,
          value = _props2.value,
          label = _props2.label,
          colors = _props2.colors,
          points = _props2.points,
          _props2$grids = _props2.grids,
          grids = _props2$grids === undefined ? {} : _props2$grids,
          _props2$inner = _props2.inner,
          inner = _props2$inner === undefined ? {} : _props2$inner,
          _props2$transparentCi = _props2.transparentCircle,
          transparentCircle = _props2$transparentCi === undefined ? {} : _props2$transparentCi,
          _props2$rotationEnabl = _props2.rotationEnabled,
          rotationEnabled = _props2$rotationEnabl === undefined ? false : _props2$rotationEnabl,
          _props2$tapEnabled = _props2.tapEnabled,
          tapEnabled = _props2$tapEnabled === undefined ? false : _props2$tapEnabled,
          _props2$drawLabels = _props2.drawLabels,
          drawLabels = _props2$drawLabels === undefined ? true : _props2$drawLabels,
          _props2$showLegend = _props2.showLegend,
          showLegend = _props2$showLegend === undefined ? true : _props2$showLegend,
          _props2$animate = _props2.animate,
          animate = _props2$animate === undefined ? true : _props2$animate,
          _props2$legend = _props2.legend,
          legend = _props2$legend === undefined ? {} : _props2$legend,
          cols = _props2.cols,
          lineSeperator = _props2.lineSeperator,
          smooth = _props2.smooth,
          _props2$style = _props2.style,
          style = _props2$style === undefined ? {} : _props2$style,
          others = _objectWithoutProperties(_props2, ['id', 'data', 'width', 'height', 'value', 'label', 'colors', 'points', 'grids', 'inner', 'transparentCircle', 'rotationEnabled', 'tapEnabled', 'drawLabels', 'showLegend', 'animate', 'legend', 'cols', 'lineSeperator', 'smooth', 'style']);

      var _inner$drawHoleEnable2 = inner.drawHoleEnabled,
          drawHoleEnabled = _inner$drawHoleEnable2 === undefined ? false : _inner$drawHoleEnable2,
          _inner$radius2 = inner.radius,
          radius = _inner$radius2 === undefined ? 0.6 : _inner$radius2,
          _inner$backgroundColo = inner.backgroundColor,
          backgroundColor = _inner$backgroundColo === undefined ? '#ffffff' : _inner$backgroundColo,
          _inner$text = inner.text,
          text = _inner$text === undefined ? '' : _inner$text,
          _inner$color = inner.color,
          color = _inner$color === undefined ? '#00000' : _inner$color,
          _inner$fontSize = inner.fontSize,
          fontSize = _inner$fontSize === undefined ? 12 : _inner$fontSize;
      var _transparentCircle$tR = transparentCircle.tRadius,
          tRadius = _transparentCircle$tR === undefined ? 0.61 : _transparentCircle$tR,
          _transparentCircle$tB = transparentCircle.tBackgroundColor,
          tBackgroundColor = _transparentCircle$tB === undefined ? '#ffffff' : _transparentCircle$tB,
          _transparentCircle$tO = transparentCircle.tOpacity,
          tOpacity = _transparentCircle$tO === undefined ? 0.44 : _transparentCircle$tO;

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

      var weexOptions = (0, _pie.parseDataForWeex)({
        data: data,
        points: points,
        label: label,
        value: value,
        colors: colors,
        lineSeperator: lineSeperator,
        smooth: smooth,
        rotationEnabled: rotationEnabled
      });

      var gmData = this.formatPieData(data);
      var wrapStyle = [style, (0, _util.getWidthAndHeight)(this.props)];
      if (_universalEnv.isWeex) {
        return (0, _rax.createElement)('pie-chart', {
          id: id,
          style: wrapStyle,
          ref: 'chart',
          backgroundColor: style.backgroundColor || '#ffffff',
          data: weexOptions.dataResult,
          animate: animate ? { direction: 'X', duration: 500 } : false,
          usePercentValues: true,
          extraOffsets: [5, 10, 5, 5],
          highlightPerTapEnabled: tapEnabled,
          rotationEnabled: rotationEnabled,
          rotationAngle: 0,
          dragDecelerationFrictionCoef: 0.95,
          drawCenterText: true,
          drawEntryLabels: drawLabels,
          centerText: text,
          centerTextColor: color,
          centerTextSize: fontSize,
          drawHoleEnabled: drawHoleEnabled,
          holeColor: backgroundColor,
          holeRadius: radius * 100,
          transparentCircleRadius: tRadius * 100,
          transparentCircleColor: tBackgroundColor,
          transparentCircleAlpha: tOpacity,
          entryLabelColor: 'white',
          entryLabelTextSize: 12,
          legend: _extends({ enabled: showLegend }, legendCfg)
        });
      }
      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 PieChart;
}(_rax.Component);

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