"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _g = require("@antv/g2");

var _title = _interopRequireDefault(require("../title"));

var _context = _interopRequireDefault(require("../context"));

var _Utils = require("../Utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var GaugeChart = /*#__PURE__*/function (_PureComponent) {
  (0, _inheritsLoose2["default"])(GaugeChart, _PureComponent);

  function GaugeChart(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;
    _this.containerRef = void 0;
    _this.titleRef = void 0;
    _this.chartRef = void 0;
    _this.chart = void 0;
    _this.containerHeight = void 0;

    _this.getOptions = function (config) {
      var value = config.value,
          limit = config.limit,
          _config$min = config.min,
          min = _config$min === void 0 ? 0 : _config$min,
          _config$max = config.max,
          max = _config$max === void 0 ? 10 : _config$max,
          _config$tickInterval = config.tickInterval,
          tickInterval = _config$tickInterval === void 0 ? 1 : _config$tickInterval,
          label = config.label,
          content = config.content;
      return {
        data: [{
          value: value
        }],
        legends: false,
        scales: {
          value: {
            min: min,
            max: max,
            tickInterval: tickInterval
          }
        },
        coordinate: {
          type: 'polar',
          cfg: {
            startAngle: -9 / 8 * Math.PI,
            endAngle: 1 / 8 * Math.PI,
            radius: 0.93
          }
        },
        axes: {
          1: false,
          value: {
            line: null,
            label: {
              offset: -17,
              style: {
                fontSize: 9.6,
                textAlign: 'center',
                textBaseline: 'middle',
                color: '#D3E2FF'
              }
            },
            subTickLine: null,
            tickLine: null,
            grid: null
          }
        },
        annotations: [{
          type: 'arc',
          top: false,
          start: [0, 1],
          end: [max, 1],
          style: {
            stroke: '#1F3B6D',
            lineWidth: 12,
            lineDash: null
          }
        }, {
          type: 'arc',
          start: [0, 1],
          end: [value, 1],
          style: {
            stroke: value < limit ? '#1890FF' : '#FF5E5E',
            lineWidth: 12,
            lineDash: null
          }
        }, {
          type: 'text',
          position: ['50%', '100%'],
          content: label,
          style: {
            fontSize: 12,
            fill: value < limit ? '#D3E2FF' : '#FF5E5E',
            stroke: null,
            fontWeight: 'normal',
            textAlign: 'center'
          }
        }, {
          type: 'text',
          position: ['50%', '120%'],
          content: typeof content === 'function' ? content(value) : content || value,
          style: {
            fontSize: 28,
            fill: value < limit ? '#fff' : '#FF5E5E',
            stroke: null,
            textAlign: 'center',
            fontFamily: 'HelveticaNeue-CondensedBold'
          }
        }]
      };
    };

    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
    _this.titleRef = /*#__PURE__*/_react["default"].createRef();
    _this.chartRef = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }

  var _proto = GaugeChart.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var config = this.props.config;
    this.containerHeight = this.containerRef.current.clientHeight;
    var height = this.titleRef.current ? this.containerHeight - (0, _Utils.Dimension)(this.titleRef.current) : this.containerHeight; // 自定义Shape 部分

    (0, _g.registerShape)('point', 'pointer', {
      draw: function draw(cfg, container) {
        var group = container.addGroup(); // @ts-ignore

        var center = this.parsePoint({
          x: 0,
          y: 0
        }); // 获取极坐标系下画布中心点
        // 绘制指针

        group.addShape('line', {
          attrs: {
            x1: center.x,
            y1: center.y,
            x2: cfg.x,
            y2: cfg.y,
            stroke: cfg.color,
            lineWidth: 2,
            lineCap: 'round'
          }
        });
        group.addShape('circle', {
          attrs: {
            x: center.x,
            y: center.y,
            r: 6,
            stroke: cfg.color,
            lineWidth: 2,
            fill: '#1F3B6D'
          }
        });
        return group;
      }
    });
    this.chart = new _g.Chart({
      container: this.chartRef.current,
      autoFit: true,
      height: height,
      padding: [0, 0, height * 0.07 + 36, 0],
      options: this.getOptions(config)
    });
    this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
      appear: {
        animation: 'fade-in'
      }
    });
    this.chart.render();
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var config = this.props.config;

    if (!(0, _lodash.isEqual)(config.value, prevProps.config.value)) {
      this.chart.changeData(this.getOptions(config).data);
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.chart.destroy();
  }
  /**
   * 获取配置项
   *
   * @memberof GaugeChart
   */
  ;

  _proto.render = function render() {
    var _cssPrefix = this.context._cssPrefix;
    var _this$props = this.props,
        className = _this$props.className,
        title = _this$props.title,
        universalStyle = _this$props.universalStyle,
        _this$props$titleOpti = _this$props.titleOptions,
        titleOptions = _this$props$titleOpti === void 0 ? {
      align: 'left',
      textStyle: {
        marginBottom: 8
      }
    } : _this$props$titleOpti;
    return /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.containerRef,
      className: (0, _classnames["default"])(className, _cssPrefix + "chart-wrapper"),
      style: {
        width: (0, _lodash.get)(universalStyle, 'width'),
        height: (0, _lodash.get)(universalStyle, 'height')
      }
    }, title &&
    /*#__PURE__*/
    // @ts-ignore
    _react["default"].createElement(_title["default"], (0, _extends2["default"])({}, titleOptions, {
      forwardRef: this.titleRef,
      className: (0, _classnames["default"])(_cssPrefix + "chart-title", _cssPrefix + "main-chart-title", (0, _lodash.get)(titleOptions, 'className'))
    }), title), /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.chartRef,
      className: _cssPrefix + "chart-content"
    }));
  };

  return GaugeChart;
}(_react.PureComponent); // @ts-ignore


GaugeChart.defaultProps = {
  config: {}
};
GaugeChart.contextType = _context["default"];
var _default = GaugeChart;
exports["default"] = _default;