@antv/f2/es/components/tooltip/tooltipView.js

Charts for mobile visualization.

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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { find, isFunction } from '@antv/util';
import Component from '../../base/component';
import createRef from '../../createRef';
import { jsx } from '../../jsx';
// view 的默认配置
var defaultStyle = {
  showTitle: false,
  showCrosshairs: false,
  crosshairsType: 'y',
  crosshairsStyle: {
    stroke: 'rgba(0, 0, 0, 0.25)',
    lineWidth: '2px'
  },
  showTooltipMarker: false,
  markerBackgroundStyle: {
    fill: '#CCD6EC',
    opacity: 0.3,
    padding: '6px'
  },
  tooltipMarkerStyle: {
    fill: '#fff',
    lineWidth: '3px'
  },
  background: {
    radius: '4px',
    fill: 'rgba(0, 0, 0, 0.65)',
    padding: ['6px', '10px']
  },
  titleStyle: {
    fontSize: '24px',
    fill: '#fff',
    textAlign: 'start',
    textBaseline: 'top'
  },
  nameStyle: {
    fontSize: '24px',
    fill: 'rgba(255, 255, 255, 0.65)',
    textAlign: 'start',
    textBaseline: 'middle'
  },
  valueStyle: {
    fontSize: '24px',
    fill: '#fff',
    textAlign: 'start',
    textBaseline: 'middle'
  },
  joinString: ': ',
  showItemMarker: true,
  itemMarkerStyle: {
    width: '12px',
    radius: '6px',
    symbol: 'circle',
    lineWidth: '2px',
    stroke: '#fff'
  },
  layout: 'horizontal',
  snap: false,
  xTipTextStyle: {
    fontSize: '24px',
    fill: '#fff'
  },
  yTipTextStyle: {
    fontSize: '24px',
    fill: '#fff'
  },
  xTipBackground: {
    radius: '4px',
    fill: 'rgba(0, 0, 0, 0.65)',
    padding: ['6px', '10px'],
    marginLeft: '-50%',
    marginTop: '6px'
  },
  yTipBackground: {
    radius: '4px',
    fill: 'rgba(0, 0, 0, 0.65)',
    padding: ['6px', '10px'],
    marginLeft: '-100%',
    marginTop: '-50%'
  }
};
function directionEnabled(mode, dir) {
  if (mode === undefined) {
    return true;
  } else if (typeof mode === 'string') {
    return mode.indexOf(dir) !== -1;
  }
  return false;
}
var RenderItemMarker = function RenderItemMarker(props) {
  var records = props.records,
    coord = props.coord,
    context = props.context,
    markerBackgroundStyle = props.markerBackgroundStyle;
  var point = coord.convertPoint({
    x: 1,
    y: 1
  });
  var padding = context.px2hd(markerBackgroundStyle.padding || '6px');
  var xPoints = [].concat(_toConsumableArray(records.map(function (record) {
    return record.xMin;
  })), _toConsumableArray(records.map(function (record) {
    return record.xMax;
  })));
  var yPoints = [].concat(_toConsumableArray(records.map(function (record) {
    return record.yMin;
  })), _toConsumableArray(records.map(function (record) {
    return record.yMax;
  })));
  if (coord.transposed) {
    xPoints.push(point.x);
  } else {
    yPoints.push(point.y);
  }
  var xMin = Math.min.apply(null, xPoints);
  var xMax = Math.max.apply(null, xPoints);
  var yMin = Math.min.apply(null, yPoints);
  var yMax = Math.max.apply(null, yPoints);
  var x = coord.transposed ? xMin : xMin - padding;
  var y = coord.transposed ? yMin - padding : yMin;
  var width = coord.transposed ? xMax - xMin : xMax - xMin + 2 * padding;
  var height = coord.transposed ? yMax - yMin + 2 * padding : yMax - yMin;
  return jsx("rect", {
    attrs: _objectSpread({
      x: x,
      y: y,
      width: width,
      height: height
    }, markerBackgroundStyle)
  });
};
var RenderCrosshairs = function RenderCrosshairs(props) {
  var records = props.records,
    coord = props.coord,
    chart = props.chart,
    crosshairsType = props.crosshairsType,
    crosshairsStyle = props.crosshairsStyle;
  var coordLeft = coord.left,
    coordTop = coord.top,
    coordRight = coord.right,
    coordBottom = coord.bottom,
    center = coord.center;
  var firstRecord = records[0];
  var x = firstRecord.x,
    y = firstRecord.y,
    origin = firstRecord.origin,
    xField = firstRecord.xField;
  if (coord.isPolar) {
    // 极坐标下的辅助线
    var xScale = chart.getScale(xField);
    var ticks = xScale.getTicks();
    var tick = find(ticks, function (tick) {
      return origin[xField] === tick.tickValue;
    });
    var end = coord.convertPoint({
      x: tick.value,
      y: 1
    });
    return jsx("line", {
      attrs: _objectSpread({
        x1: center.x,
        y1: center.y,
        x2: end.x,
        y2: end.y
      }, crosshairsStyle)
    });
  }
  return jsx("group", null, directionEnabled(crosshairsType, 'x') ? jsx("line", {
    attrs: _objectSpread({
      x1: coordLeft,
      y1: y,
      x2: coordRight,
      y2: y
    }, crosshairsStyle)
  }) : null, directionEnabled(crosshairsType, 'y') ? jsx("line", {
    attrs: _objectSpread({
      x1: x,
      y1: coordTop,
      x2: x,
      y2: coordBottom
    }, crosshairsStyle)
  }) : null);
};
var TooltipView = /*#__PURE__*/function (_Component) {
  _inherits(TooltipView, _Component);
  var _super = _createSuper(TooltipView);
  function TooltipView(props) {
    var _this;
    _classCallCheck(this, TooltipView);
    _this = _super.call(this, props);
    _this.rootRef = createRef();
    _this.arrowRef = createRef();
    return _this;
  }
  // 调整 显示的位置
  _createClass(TooltipView, [{
    key: "_position",
    value: function _position() {
      var props = this.props,
        context = this.context,
        rootRef = this.rootRef,
        arrowRef = this.arrowRef;
      var group = rootRef.current;
      if (!group) {
        return;
      }
      var records = props.records,
        coord = props.coord;
      var arrowWidth = context.px2hd('6px');
      var record = records[0];
      // 中心点
      var x = record.x;
      var coordLeft = coord.left,
        coordWidth = coord.width;
      var _group$get = group.get('attrs'),
        y = _group$get.y,
        width = _group$get.width,
        height = _group$get.height,
        radius = _group$get.radius;
      var halfWidth = width / 2;
      // 让 tooltip 限制在 coord 的显示范围内
      var offsetX = Math.min(Math.max(x - coordLeft - halfWidth, -arrowWidth - radius), coordWidth - width + arrowWidth + radius);
      // 因为默认是从 coord 的范围内显示的，所以要往上移，移出 coord，避免挡住 geometry
      var offset = Math.min(y, height + arrowWidth); // 因为不能超出 canvas 画布区域，所以最大只能是 y
      group.moveTo(offsetX, -offset);
      arrowRef.current.moveTo(0, height - offset);
    }
  }, {
    key: "didMount",
    value: function didMount() {
      this._position();
    }
  }, {
    key: "didUpdate",
    value: function didUpdate() {
      this._position();
    }
  }, {
    key: "render",
    value: function render() {
      var props = this.props,
        context = this.context;
      var records = props.records,
        coord = props.coord;
      var coordLeft = coord.left,
        coordTop = coord.top,
        coordBottom = coord.bottom;
      var firstRecord = records[0];
      var x = firstRecord.x,
        y = firstRecord.y;
      var xFirstText = firstRecord.name,
        yFirstText = firstRecord.value;
      var chart = props.chart,
        customBackground = props.background,
        _props$showTooltipMar = props.showTooltipMarker,
        showTooltipMarker = _props$showTooltipMar === void 0 ? defaultStyle.showTooltipMarker : _props$showTooltipMar,
        _props$markerBackgrou = props.markerBackgroundStyle,
        markerBackgroundStyle = _props$markerBackgrou === void 0 ? defaultStyle.markerBackgroundStyle : _props$markerBackgrou,
        _props$showItemMarker = props.showItemMarker,
        showItemMarker = _props$showItemMarker === void 0 ? defaultStyle.showItemMarker : _props$showItemMarker,
        customItemMarkerStyle = props.itemMarkerStyle,
        nameStyle = props.nameStyle,
        valueStyle = props.valueStyle,
        _props$joinString = props.joinString,
        joinString = _props$joinString === void 0 ? defaultStyle.joinString : _props$joinString,
        _props$showCrosshairs = props.showCrosshairs,
        showCrosshairs = _props$showCrosshairs === void 0 ? defaultStyle.showCrosshairs : _props$showCrosshairs,
        crosshairsStyle = props.crosshairsStyle,
        _props$crosshairsType = props.crosshairsType,
        crosshairsType = _props$crosshairsType === void 0 ? defaultStyle.crosshairsType : _props$crosshairsType,
        _props$snap = props.snap,
        snap = _props$snap === void 0 ? defaultStyle.snap : _props$snap,
        _props$tooltipMarkerS = props.tooltipMarkerStyle,
        tooltipMarkerStyle = _props$tooltipMarkerS === void 0 ? defaultStyle.tooltipMarkerStyle : _props$tooltipMarkerS,
        showXTip = props.showXTip,
        showYTip = props.showYTip,
        xTip = props.xTip,
        yTip = props.yTip,
        _props$xTipTextStyle = props.xTipTextStyle,
        xTipTextStyle = _props$xTipTextStyle === void 0 ? defaultStyle.xTipTextStyle : _props$xTipTextStyle,
        _props$yTipTextStyle = props.yTipTextStyle,
        yTipTextStyle = _props$yTipTextStyle === void 0 ? defaultStyle.yTipTextStyle : _props$yTipTextStyle,
        _props$xTipBackground = props.xTipBackground,
        xTipBackground = _props$xTipBackground === void 0 ? defaultStyle.xTipBackground : _props$xTipBackground,
        _props$yTipBackground = props.yTipBackground,
        yTipBackground = _props$yTipBackground === void 0 ? defaultStyle.yTipBackground : _props$yTipBackground,
        _props$custom = props.custom,
        custom = _props$custom === void 0 ? false : _props$custom,
        customText = props.customText;
      var itemMarkerStyle = _objectSpread(_objectSpread({}, customItemMarkerStyle), defaultStyle.itemMarkerStyle);
      var background = _objectSpread(_objectSpread({}, defaultStyle.background), customBackground);
      var arrowWidth = context.px2hd('6px');
      return jsx("group", null, jsx("group", {
        style: {
          left: coordLeft,
          top: coordTop
        }
      }, !custom && jsx("group", null, jsx("group", {
        ref: this.rootRef,
        style: background,
        attrs: background
      }, jsx("group", {
        style: {
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap',
          padding: [0, 0, 0, '6px']
        }
      }, records.map(function (record) {
        var name = record.name,
          value = record.value;
        return jsx("group", {
          style: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            padding: [0, '6px', 0, 0]
          }
        }, showItemMarker ? jsx("marker", {
          style: {
            width: itemMarkerStyle.width,
            marginRight: '6px'
          },
          attrs: _objectSpread(_objectSpread({}, itemMarkerStyle), {}, {
            fill: record.color
          })
        }) : null, customText && isFunction(customText) ? customText(record) : jsx("group", {
          style: {
            display: 'flex',
            flexDirection: 'row'
          }
        }, jsx("text", {
          attrs: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle.nameStyle), nameStyle), {}, {
            text: value ? "".concat(name).concat(joinString) : name
          })
        }), jsx("text", {
          attrs: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle.valueStyle), valueStyle), {}, {
            text: value
          })
        })));
      }))), jsx("polygon", {
        ref: this.arrowRef,
        attrs: {
          points: [{
            x: x - arrowWidth,
            y: coordTop
          }, {
            x: x + arrowWidth,
            y: coordTop
          }, {
            x: x,
            y: coordTop + arrowWidth
          }],
          fill: background.fill
        }
      })), showTooltipMarker ? jsx(RenderItemMarker, {
        coord: coord,
        context: context,
        records: records,
        markerBackgroundStyle: markerBackgroundStyle
      }) : null, showCrosshairs ? jsx(RenderCrosshairs, {
        chart: chart,
        coord: coord,
        records: records,
        crosshairsType: crosshairsType,
        crosshairsStyle: _objectSpread(_objectSpread({}, defaultStyle.crosshairsStyle), crosshairsStyle)
      }) : null, snap ? records.map(function (item) {
        var x = item.x,
          y = item.y,
          color = item.color,
          shape = item.shape;
        return jsx("circle", {
          attrs: _objectSpread(_objectSpread({
            x: x,
            y: y,
            r: '6px',
            stroke: color,
            fill: color
          }, shape), tooltipMarkerStyle)
        });
      }) : null), showXTip && jsx("group", {
        style: _objectSpread(_objectSpread({
          left: x,
          top: coordBottom
        }, defaultStyle.xTipBackground), xTipBackground),
        attrs: _objectSpread(_objectSpread({}, defaultStyle.xTipBackground), xTipBackground)
      }, jsx("text", {
        attrs: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle.xTipTextStyle), xTipTextStyle), {}, {
          text: isFunction(xTip) ? xTip(xFirstText) : xFirstText
        })
      })), showYTip && jsx("group", {
        style: _objectSpread(_objectSpread({
          left: coordLeft,
          top: y
        }, defaultStyle.yTipBackground), yTipBackground),
        attrs: _objectSpread(_objectSpread({}, defaultStyle.yTipBackground), yTipBackground)
      }, jsx("text", {
        attrs: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle.yTipTextStyle), yTipTextStyle), {}, {
          text: isFunction(yTip) ? yTip(yFirstText) : yFirstText
        })
      })));
    }
  }]);
  return TooltipView;
}(Component);
export { TooltipView as default };