@antv/f2/es/components/axis/withAxis.js

Charts for mobile visualization.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { deepMix, isFunction, mix, each, clone, isString, isNumber } from '@antv/util';
import { jsx } from '../../jsx';
import equal from '../../base/equal';
import Component from '../../base/component';
export default (function (View) {
  return /*#__PURE__*/function (_Component) {
    _inherits(Axis, _Component);
    var _super = _createSuper(Axis);
    function Axis(props) {
      var _this;
      _classCallCheck(this, Axis);
      _this = _super.call(this, props);
      _this.style = {};
      var _this$props = _this.props,
        chart = _this$props.chart,
        field = _this$props.field;
      var scaleOption = _this.getScaleOption(props);
      chart.setScale(field, scaleOption);
      return _this;
    }
    _createClass(Axis, [{
      key: "willReceiveProps",
      value: function willReceiveProps(nextProps) {
        var lastProps = this.props;
        var chart = nextProps.chart,
          field = nextProps.field;
        var nextScaleOption = this.getScaleOption(nextProps);
        var lastScaleOption = this.getScaleOption(lastProps);
        if (!equal(nextScaleOption, lastScaleOption)) {
          chart.setScale(field, nextScaleOption);
        }
      }
    }, {
      key: "willMount",
      value: function willMount() {
        this.updateCoord();
      }
    }, {
      key: "willUpdate",
      value: function willUpdate() {
        this.updateCoord();
      }
    }, {
      key: "getScaleOption",
      value: function getScaleOption(props) {
        var type = props.type,
          tickCount = props.tickCount,
          range = props.range,
          mask = props.mask,
          formatter = props.formatter,
          ticks = props.ticks,
          min = props.min,
          max = props.max,
          nice = props.nice;
        return {
          type: type,
          tickCount: tickCount,
          range: range,
          mask: mask,
          formatter: formatter,
          min: min,
          max: max,
          nice: nice,
          ticks: ticks
        };
      }
    }, {
      key: "_getDimType",
      value: function _getDimType() {
        var props = this.props;
        var field = props.field,
          chart = props.chart;
        var xScales = chart.getXScales();
        var scales = xScales.filter(function (scale) {
          return scale.field === field;
        });
        return scales.length > 0 ? 'x' : 'y';
      }
      // 获取ticks最大的宽高
    }, {
      key: "getMaxBBox",
      value: function getMaxBBox(ticks, style) {
        var context = this.context;
        var measureText = context.measureText;
        var label = style.label,
          labelOffset = style.labelOffset;
        var width = 0;
        var height = 0;
        ticks.forEach(function (tick) {
          if (!label) return;
          var _tick$labelStyle = tick.labelStyle,
            labelStyle = _tick$labelStyle === void 0 ? {} : _tick$labelStyle,
            text = tick.text;
          var bbox = measureText(labelStyle.text || text, _objectSpread(_objectSpread({}, label), labelStyle));
          width = Math.max(width, bbox.width);
          height = Math.max(height, bbox.height);
        });
        if (!width && !height) {
          return {
            width: width,
            height: height
          };
        }
        var bbox = {
          width: width + labelOffset,
          height: height + labelOffset
        };
        return bbox;
      }
    }, {
      key: "_getPosition",
      value: function _getPosition() {
        var props = this.props;
        var position = props.position,
          coord = props.coord;
        if (position) {
          return position;
        }
        var dimType = this._getDimType();
        if (coord.transposed) {
          return dimType === 'x' ? 'left' : 'bottom';
        }
        return dimType === 'x' ? 'bottom' : 'left';
      }
    }, {
      key: "getTicks",
      value: function getTicks() {
        var props = this.props;
        var field = props.field,
          chart = props.chart;
        var scale = chart.getScale(field);
        var ticks = scale.getTicks();
        // 设置tick的样式
        ticks = this._setTicksStyle(ticks);
        ticks = this._generateGridPoints(ticks);
        return ticks;
      }
      /**
       * 生成极坐标下网格线的交叉点
       * @param ticks
       * @returns
       */
    }, {
      key: "_generateGridPoints",
      value: function _generateGridPoints(ticks) {
        var props = this.props;
        var chart = props.chart,
          coord = props.coord;
        if (!coord.isPolar) {
          return ticks;
        }
        var dimType = this._getDimType();
        // 只需要在 y 的时候生成
        if (dimType !== 'y') {
          return ticks;
        }
        var xScale = chart.getXScales()[0];
        var xTicks = xScale.getTicks();
        ticks.forEach(function (tick) {
          var gridPoints = xTicks.map(function (xTick) {
            return coord.convertPoint({
              x: xTick.value,
              y: tick.value
            });
          });
          // 添加第 1 个点，形成环状
          gridPoints.push(gridPoints[0]);
          tick.gridPoints = gridPoints;
        });
        return ticks;
      }
    }, {
      key: "_setTicksStyle",
      value: function _setTicksStyle(ticks) {
        var _this2 = this;
        var props = this.props,
          context = this.context;
        var theme = context.theme,
          px2hd = context.px2hd;
        var _props$style = props.style,
          style = _props$style === void 0 ? {} : _props$style;
        var themeAxis = theme.axis;
        each(themeAxis, function (value, key) {
          // 关闭tick的样式
          if (style[key] === null) {
            return;
          }
          var styleValue = isFunction(style[key]) ? undefined : style[key];
          if (isString(value) || isNumber(value)) {
            _this2.style[key] = px2hd(styleValue) || value;
          } else {
            _this2.style[key] = px2hd(deepMix(clone(value), styleValue));
          }
        });
        return ticks.map(function (tick, index) {
          var label = style.label,
            grid = style.grid;
          var defaultLabelStyle = themeAxis.label,
            defaultGridStyle = themeAxis.grid;
          if (isFunction(label)) {
            tick.labelStyle = px2hd(mix({}, defaultLabelStyle, label(tick.text, index, ticks)));
          }
          if (isFunction(grid)) {
            tick.gridStyle = px2hd(mix({}, defaultGridStyle, grid(tick.text, index, ticks.length)));
          }
          return tick;
        });
      }
    }, {
      key: "convertTicks",
      value: function convertTicks(ticks) {
        var props = this.props;
        var coord = props.coord;
        var dimType = this._getDimType();
        var otherDim = dimType === 'x' ? 'y' : 'x';
        return ticks.map(function (tick) {
          var _coord$convertPoint, _coord$convertPoint2;
          var start = coord.convertPoint((_coord$convertPoint = {}, _defineProperty(_coord$convertPoint, dimType, tick.value), _defineProperty(_coord$convertPoint, otherDim, 0), _coord$convertPoint));
          var end = coord.convertPoint((_coord$convertPoint2 = {}, _defineProperty(_coord$convertPoint2, dimType, tick.value), _defineProperty(_coord$convertPoint2, otherDim, 1), _coord$convertPoint2));
          return _objectSpread(_objectSpread({}, tick), {}, {
            points: [start, end]
          });
        });
      }
    }, {
      key: "measureLayout",
      value: function measureLayout() {
        var props = this.props;
        var visible = props.visible,
          coord = props.coord;
        if (visible === false) {
          return null;
        }
        var ticks = this.getTicks();
        var bbox = this.getMaxBBox(ticks, this.style);
        var isPolar = coord.isPolar;
        var dimType = this._getDimType();
        var width = bbox.width,
          height = bbox.height;
        if (isPolar) {
          // 机坐标系的 y 不占位置
          if (dimType === 'y') {
            return null;
          }
          // 4 个方向都需要留空
          return ['top', 'right', 'bottom', 'left'].map(function (position) {
            return {
              position: position,
              width: width,
              height: height
            };
          });
        }
        // 直角坐标系下
        var position = this._getPosition();
        return {
          position: position,
          width: width,
          height: height
        };
      }
      // 主要是计算coord的布局
    }, {
      key: "updateCoord",
      value: function updateCoord() {
        var props = this.props;
        var chart = props.chart;
        var layout = this.measureLayout();
        chart.updateCoordFor(this, layout);
      }
    }, {
      key: "render",
      value: function render() {
        var props = this.props,
          style = this.style;
        var visible = props.visible,
          coord = props.coord;
        if (visible === false) {
          return null;
        }
        var ticks = this.getTicks();
        var position = this._getPosition();
        var dimType = this._getDimType();
        return jsx(View, _objectSpread(_objectSpread({}, props), {}, {
          style: style,
          ticks: this.convertTicks(ticks),
          coord: coord,
          position: position,
          dimType: dimType
        }));
      }
    }]);
    return Axis;
  }(Component);
});