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


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from '../common/Base';
import errorWrap from '../common/errorWrap';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import label from '../common/label';
import themes from '../themes/index';
import { pxToNumber, numberDecimal } from '../common/common';
import geomStyle from '../common/geomStyle';
import "./index.css"; // 3.x代码

export var Funnel = /*#__PURE__*/function (_Base) {
  _inheritsLoose(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: themes.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); // 设置图例

    rectLegend(this, chart, config, null, true); // tooltip

    rectTooltip(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 = pxToNumber(themes['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;
    }

    geomStyle(geom, config.geomStyle);

    if (config.label) {
      label({
        geom: geom,
        config: config,
        useCustomOffset: true,
        componentConfig: {
          labelLine: {
            style: {
              lineWidth: 1,
              stroke: themes['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;
}(Base);

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 = 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: _extends({
        fill: themes['widgets-label-text'],
        fontSize: pxToNumber(themes['widgets-font-size-1']),
        textAlign: 'center',
        shadowBlur: 2,
        shadowColor: 'rgba(255, 255, 255, .3)'
      }, style)
    });
  });
}

var Wfunnel = errorWrap(Funnel);
export default Wfunnel;