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

Charts for mobile visualization.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;
var _tslib = require("tslib");
var _fEngine = require("@antv/f-engine");
var _util = require("@antv/util");
function _default(View) {
  return /** @class */function (_super) {
    (0, _tslib.__extends)(Guide, _super);
    function Guide(props) {
      return _super.call(this, props) || this;
    }
    Guide.prototype.getGuideBBox = function () {
      var node = (0, _fEngine.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 (!(0, _util.isNil)(replaceMap[value])) {
        return replaceMap[value];
      }
      // 传入的是 xx%
      if ((0, _util.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._numberic = function (data) {
      var chart = this.props.chart;
      var scales = [chart.getXScales()[0], chart.getYScales()[0]];
      var count = scales.length;
      for (var i = 0; i < count; i++) {
        var scale = scales[i];
        if (scale.isCategory) {
          var field = scale.field;
          var value = scale.translate(data[field]);
          data[field] = value;
        }
      }
    };
    Guide.prototype.parsePoint = function (record) {
      var props = this.props;
      var chart = props.chart,
        coord = props.coord,
        precise = props.precise;
      var adjust = chart.adjust;
      if (precise && (adjust === null || adjust === void 0 ? void 0 : adjust.type) === 'dodge') {
        var xScale_1 = chart.getXScales()[0];
        var typeScale = chart.getColorScales()[0];
        this._numberic(record);
        adjust.adjust.getPositionInfo(record, xScale_1.field, record[typeScale.field]);
      }
      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,
        _c = props.visible,
        visible = _c === void 0 ? true : _c;
      if (!visible) return;
      var width = context.width,
        height = context.height;
      var points = this.convertPoints(records);
      var theme = this.getGuideTheme();
      return (0, _fEngine.jsx)("group", {
        onClick: function onClick(ev) {
          _onClick && _onClick(ev);
        }
      }, (0, _fEngine.jsx)(View, (0, _tslib.__assign)({
        points: points,
        theme: theme,
        coord: coord
      }, props, {
        canvasWidth: width,
        canvasHeight: height,
        style: (0, _util.isFunction)(style) ? style(points, chart) : style,
        animation: (0, _util.isFunction)(animation) ? animation(points, chart) : animation
      })));
    };
    return Guide;
  }(_fEngine.Component);
}