@alicloud/cloud-charts/lib/Wfunnel/index.js


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Funnel = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _label = _interopRequireDefault(require("../common/label"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
require("./index.css");
// 3.x代码
var Funnel = exports.Funnel = /*#__PURE__*/function (_Base) {
  (0, _inheritsLoose2["default"])(Funnel, _Base);
  function Funnel() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Base.call.apply(_Base, [this].concat(args)) || this;
    _this.chartName = 'G2Funnel';
    _this.legendField = 'x';
    return _this;
  }
  var _proto = Funnel.prototype;
  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: _index["default"].order_10,
      legend: {
        position: 'top',
        align: '',
        nameFormatter: null // 可以强制覆盖，手动设置label
      },
      tooltip: {
        titleFormatter: null,
        nameFormatter: null,
        valueFormatter: null
      },
      label: false,
      pyramid: false,
      // 主方向，从上到下(vertical)、从左到右(horizontal)
      direction: 'vertical',
      // 排列位置 start,center,end
      align: 'center',
      // 尖顶漏斗图
      percent: true
    };
  };
  _proto.init = function init(chart, config, data) {
    var defs = {
      type: {
        type: 'cat'
      }
    };
    chart.scale(defs);
    chart.interaction('element-active');
    chart.axis(false);
    chart.data(data);

    // 设置图例
    (0, _rectLegend["default"])(this, chart, config, null, 'single');

    // tooltip
    (0, _rectTooltip["default"])(this, chart, config, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false
    }, null, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false
    });

    // 根据传入的 direction 和 align 设置坐标系，并绘制图形
    var drawType = config.direction + "-" + config.align;
    var geom = null;
    var fontSize1 = (0, _common.pxToNumber)(_index["default"]['widgets-font-size-1']);
    var percentOffsetX = 0;
    var percentOffsetY = 0;
    var funnelShape = config.align === 'center' && config.pyramid ? 'pyramid' : 'funnel';
    switch (drawType) {
      case 'vertical-left':
      case 'vertical-start':
        chart.coordinate('rect').transpose().scale(1, -1);
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetX = 3 * fontSize1;
        break;
      case 'vertical-center':
        chart.coordinate('rect').transpose().scale(1, -1);
        geom = chart.interval().adjust([{
          type: 'symmetric'
        }]).position('x*y').shape(funnelShape).color('x', config.colors);
        break;
      case 'vertical-right':
      case 'vertical-end':
        chart.coordinate('rect').transpose().scale(-1, -1);
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetX = -3 * fontSize1;
        break;
      case 'horizontal-top':
      case 'horizontal-start':
        chart.coordinate('rect').reflect('y');
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetY = 3 * fontSize1;
        break;
      case 'horizontal-center':
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors).adjust([{
          type: 'symmetric'
        }]);
        break;
      // case 'horizontal-bottom':
      // case 'horizontal-end':
      // 和 default 时相同
      default:
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetY = -3 * fontSize1;
    }
    (0, _geomStyle["default"])(geom, config.geomStyle);
    if (config.label) {
      (0, _label["default"])({
        geom: geom,
        config: config,
        useCustomOffset: true,
        componentConfig: {
          labelLine: {
            style: {
              lineWidth: 1,
              stroke: _index["default"]['widgets-axis-line']
            }
          },
          content: function content(v, item, index) {
            if (typeof config.label === 'boolean') {
              return v['y'];
            }
            if (config.label.labelFormatter) {
              return config.label.labelFormatter(v['y'], item, index);
            }
            return v['y'];
          }
        }
      });
    }

    // 绘制辅助线，辅助背景区域
    renderGuide(chart, config, data, percentOffsetX, percentOffsetY);
  };
  return Funnel;
}(_Base2["default"]);
function renderGuide(chart, config, data, percentOffsetX, percentOffsetY) {
  // 中间标签文本
  chart.annotation().clear(true);
  var configPercent = config.percent;
  if (!configPercent) {
    return;
  }
  if (configPercent === true) {
    configPercent = {};
  }
  var _configPercent = configPercent,
    labelFormatter = _configPercent.labelFormatter,
    _configPercent$offset = _configPercent.offsetX,
    offsetX = _configPercent$offset === void 0 ? 0 : _configPercent$offset,
    _configPercent$offset2 = _configPercent.offsetY,
    offsetY = _configPercent$offset2 === void 0 ? 0 : _configPercent$offset2,
    _configPercent$top = _configPercent.top,
    top = _configPercent$top === void 0 ? true : _configPercent$top,
    _configPercent$style = _configPercent.style,
    style = _configPercent$style === void 0 ? {} : _configPercent$style;
  var positionY = config.align === 'center' ? 'center' : 'start';
  data.forEach(function (d, i) {
    var content = (0, _common.numberDecimal)(100 * d.y / data[0].y) + "%";
    if (labelFormatter) {
      content = labelFormatter(d.y / data[0].y, d, i);
    }
    chart.annotation().text({
      top: top,
      position: [d.x, positionY],
      offsetX: percentOffsetX + offsetX,
      offsetY: percentOffsetY + offsetY,
      content: content,
      // 显示的文本内容
      style: (0, _extends2["default"])({
        fill: _index["default"]['widgets-label-text'],
        fontSize: (0, _common.pxToNumber)(_index["default"]['widgets-font-size-1']),
        textAlign: 'center',
        shadowBlur: 2,
        shadowColor: 'rgba(255, 255, 255, .3)'
      }, style)
    });
  });
}
var Wfunnel = (0, _errorWrap["default"])(Funnel);
var _default = exports["default"] = Wfunnel;