@antv/f2/es/components/guide/withGuide.js

Charts for mobile visualization.

import { __assign, __extends } from "tslib";
import { jsx, Component } from '@antv/f-engine';
import { isString, isNil, isFunction } from '@antv/util';
import { computeLayout } from '@antv/f-engine';
export default (function (View) {
  return /** @class */function (_super) {
    __extends(Guide, _super);
    function Guide(props) {
      return _super.call(this, props) || this;
    }
    Guide.prototype.getGuideBBox = function () {
      var node = computeLayout(this, this.render());
      var layout = node.layout;
      if (!layout) return;
      return layout;
    };
    // 解析record里的模板字符串，如min、max、50%...
    Guide.prototype.parseReplaceStr = function (value, scale) {
      var replaceMap = {
        min: 0,
        max: 1,
        median: 0.5
      };
      // 传入的是 min、max、median 的
      if (!isNil(replaceMap[value])) {
        return replaceMap[value];
      }
      // 传入的是 xx%
      if (isString(value) && value.indexOf('%') != -1 && !isNaN(Number(value.slice(0, -1)))) {
        var rateValue = Number(value.slice(0, -1));
        var percent = rateValue / 100;
        return percent;
      }
      return scale.scale(value);
    };
    Guide.prototype.parsePoint = function (record) {
      var props = this.props;
      var chart = props.chart,
        coord = props.coord;
      var xScale = chart.getXScales()[0];
      // 只取第一个yScale
      var yScale = chart.getYScales()[0];
      // 解析 record 为归一化后的坐标
      var x = this.parseReplaceStr(record[xScale.field], xScale);
      var y = this.parseReplaceStr(record[yScale.field], yScale);
      return coord.convertPoint({
        x: x,
        y: y
      });
    };
    Guide.prototype.convertPoints = function (records) {
      var _this = this;
      return records.map(function (record) {
        return _this.parsePoint(record);
      });
    };
    Guide.prototype.getGuideTheme = function () {
      var context = this.context;
      var theme = context.theme;
      return theme.guide;
    };
    Guide.prototype.render = function () {
      var _a = this,
        props = _a.props,
        context = _a.context;
      var coord = props.coord,
        _b = props.records,
        records = _b === void 0 ? [] : _b,
        animation = props.animation,
        chart = props.chart,
        style = props.style,
        _onClick = props.onClick;
      var width = context.width,
        height = context.height;
      var points = this.convertPoints(records);
      var theme = this.getGuideTheme();
      return jsx("group", {
        onClick: function onClick(ev) {
          _onClick && _onClick(ev);
        }
      }, jsx(View, __assign({
        points: points,
        theme: theme,
        coord: coord
      }, props, {
        canvasWidth: width,
        canvasHeight: height,
        style: isFunction(style) ? style(points, chart) : style,
        animation: isFunction(animation) ? animation(points, chart) : animation
      })));
    };
    return Guide;
  }(Component);
});