@antv/f2
Version:
Charts for mobile visualization.
418 lines (417 loc) • 15.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _util = require("@antv/util");
var _component = _interopRequireDefault(require("../../base/component"));
var _createRef = _interopRequireDefault(require("../../createRef"));
var _jsx = require("../../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((0, _toConsumableArray2.default)(records.map(function (record) {
return record.xMin;
})), (0, _toConsumableArray2.default)(records.map(function (record) {
return record.xMax;
})));
var yPoints = [].concat((0, _toConsumableArray2.default)(records.map(function (record) {
return record.yMin;
})), (0, _toConsumableArray2.default)(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 (0, _jsx.jsx)("rect", {
attrs: (0, _objectSpread2.default)({
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 = (0, _util.find)(ticks, function (tick) {
return origin[xField] === tick.tickValue;
});
var end = coord.convertPoint({
x: tick.value,
y: 1
});
return (0, _jsx.jsx)("line", {
attrs: (0, _objectSpread2.default)({
x1: center.x,
y1: center.y,
x2: end.x,
y2: end.y
}, crosshairsStyle)
});
}
return (0, _jsx.jsx)("group", null, directionEnabled(crosshairsType, 'x') ? (0, _jsx.jsx)("line", {
attrs: (0, _objectSpread2.default)({
x1: coordLeft,
y1: y,
x2: coordRight,
y2: y
}, crosshairsStyle)
}) : null, directionEnabled(crosshairsType, 'y') ? (0, _jsx.jsx)("line", {
attrs: (0, _objectSpread2.default)({
x1: x,
y1: coordTop,
x2: x,
y2: coordBottom
}, crosshairsStyle)
}) : null);
};
var TooltipView = /*#__PURE__*/function (_Component) {
(0, _inherits2.default)(TooltipView, _Component);
var _super = (0, _createSuper2.default)(TooltipView);
function TooltipView(props) {
var _this;
(0, _classCallCheck2.default)(this, TooltipView);
_this = _super.call(this, props);
_this.rootRef = (0, _createRef.default)();
_this.arrowRef = (0, _createRef.default)();
return _this;
}
// 调整 显示的位置
(0, _createClass2.default)(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 = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, customItemMarkerStyle), defaultStyle.itemMarkerStyle);
var background = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.background), customBackground);
var arrowWidth = context.px2hd('6px');
return (0, _jsx.jsx)("group", null, (0, _jsx.jsx)("group", {
style: {
left: coordLeft,
top: coordTop
}
}, !custom && (0, _jsx.jsx)("group", null, (0, _jsx.jsx)("group", {
ref: this.rootRef,
style: background,
attrs: background
}, (0, _jsx.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 (0, _jsx.jsx)("group", {
style: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: [0, '6px', 0, 0]
}
}, showItemMarker ? (0, _jsx.jsx)("marker", {
style: {
width: itemMarkerStyle.width,
marginRight: '6px'
},
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemMarkerStyle), {}, {
fill: record.color
})
}) : null, customText && (0, _util.isFunction)(customText) ? customText(record) : (0, _jsx.jsx)("group", {
style: {
display: 'flex',
flexDirection: 'row'
}
}, (0, _jsx.jsx)("text", {
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.nameStyle), nameStyle), {}, {
text: value ? "".concat(name).concat(joinString) : name
})
}), (0, _jsx.jsx)("text", {
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.valueStyle), valueStyle), {}, {
text: value
})
})));
}))), (0, _jsx.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 ? (0, _jsx.jsx)(RenderItemMarker, {
coord: coord,
context: context,
records: records,
markerBackgroundStyle: markerBackgroundStyle
}) : null, showCrosshairs ? (0, _jsx.jsx)(RenderCrosshairs, {
chart: chart,
coord: coord,
records: records,
crosshairsType: crosshairsType,
crosshairsStyle: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.crosshairsStyle), crosshairsStyle)
}) : null, snap ? records.map(function (item) {
var x = item.x,
y = item.y,
color = item.color,
shape = item.shape;
return (0, _jsx.jsx)("circle", {
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)({
x: x,
y: y,
r: '6px',
stroke: color,
fill: color
}, shape), tooltipMarkerStyle)
});
}) : null), showXTip && (0, _jsx.jsx)("group", {
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
left: x,
top: coordBottom
}, defaultStyle.xTipBackground), xTipBackground),
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.xTipBackground), xTipBackground)
}, (0, _jsx.jsx)("text", {
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.xTipTextStyle), xTipTextStyle), {}, {
text: (0, _util.isFunction)(xTip) ? xTip(xFirstText) : xFirstText
})
})), showYTip && (0, _jsx.jsx)("group", {
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
left: coordLeft,
top: y
}, defaultStyle.yTipBackground), yTipBackground),
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.yTipBackground), yTipBackground)
}, (0, _jsx.jsx)("text", {
attrs: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle.yTipTextStyle), yTipTextStyle), {}, {
text: (0, _util.isFunction)(yTip) ? yTip(yFirstText) : yFirstText
})
})));
}
}]);
return TooltipView;
}(_component.default);
exports.default = TooltipView;