@antv/g2plot
Version:
An interactive and responsive charting library
162 lines • 7.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderGaugeStatistic = exports.renderStatistic = exports.setStatisticContainerStyle = exports.adapteStyle = void 0;
var tslib_1 = require("tslib");
var util_1 = require("@antv/util");
var _1 = require(".");
/**
* @desc 生成 html-statistic 的 style 字符串 (兼容 canvas 的 shapeStyle 到 css样式上)
*
* @param width
* @param style
*/
function adapteStyle(style) {
var styleObject = {
overflow: 'hidden',
'white-space': 'nowrap',
'text-overflow': 'ellipsis',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
var shapeStyleKeys = [
'stroke',
'lineWidth',
'shadowColor',
'strokeOpacity',
'shadowBlur',
'shadowOffsetX',
'shadowOffsetY',
'fill',
];
// 兼容 shapeStyle 设置 · start
if (util_1.get(style, 'fill')) {
styleObject['color'] = style['fill'];
}
var _a = _1.pick(style, shapeStyleKeys), shadowColor = _a.shadowColor, _b = _a.shadowBlur, shadowBlur = _b === void 0 ? 0 : _b, _c = _a.shadowOffsetX, shadowOffsetX = _c === void 0 ? 0 : _c, _d = _a.shadowOffsetY, shadowOffsetY = _d === void 0 ? 0 : _d;
styleObject['text-shadow'] = "" + [shadowColor, shadowOffsetX + "px", shadowOffsetY + "px", shadowBlur + "px"].join(' ');
var _e = _1.pick(style, shapeStyleKeys), stroke = _e.stroke, _f = _e.lineWidth, lineWidth = _f === void 0 ? 0 : _f;
styleObject['-webkit-text-stroke'] = "" + [lineWidth + "px", stroke].join(' ');
// 兼容 shapeStyle 设置 · end
util_1.each(style, function (v, k) {
// 兼容 shapeStyle 的 fontSize 没有单位
if (['fontSize'].includes(k) && util_1.isNumber(v)) {
styleObject[_1.kebabCase(k)] = v + "px";
}
else if (k && !shapeStyleKeys.includes(k)) {
styleObject[_1.kebabCase(k)] = "" + v;
}
});
return styleObject;
}
exports.adapteStyle = adapteStyle;
/**
* @desc 设置 html-statistic 容器的默认样式
*
* - 默认事件穿透
*/
function setStatisticContainerStyle(container, style) {
container.style['pointer-events'] = 'none';
util_1.each(style, function (v, k) {
if (k && v) {
container.style[k] = v;
}
});
}
exports.setStatisticContainerStyle = setStatisticContainerStyle;
/**
* 渲染环图 html-annotation（默认 position 居中 [50%, 50%]）
* @param chart
* @param options
* @param meta 字段元信息
* @param {optional} datum 当前的元数据
*/
exports.renderStatistic = function (chart, options, datum) {
var statistic = options.statistic, plotType = options.plotType;
var titleOpt = statistic.title, contentOpt = statistic.content;
[titleOpt, contentOpt].forEach(function (option, idx) {
if (!option) {
return;
}
var transform = '';
if (idx === 0) {
transform = contentOpt ? 'translate(-50%, -100%)' : 'translate(-50%, -50%)';
}
else {
transform = titleOpt ? 'translate(-50%, 0)' : 'translate(-50%, -50%)';
}
var style = util_1.isFunction(option.style) ? option.style(datum) : option.style;
chart.annotation().html(tslib_1.__assign({ position: ['50%', '50%'], html: function (container, view) {
var coordinate = view.getCoordinate();
var containerW = 0;
if (plotType === 'pie' || plotType === 'ring-progress') {
containerW = coordinate.getRadius() * coordinate.innerRadius * 2;
}
else if (plotType === 'liquid') {
var liquidShape = util_1.get(view.geometries, [0, 'elements', 0, 'shape']);
if (liquidShape) {
// 获取到水波图边框大小
var path = liquidShape.find(function (t) { return t.get('name') === 'wrap'; });
var width = path.getCanvasBBox().width;
containerW = width;
}
}
else if (!containerW) {
// 保底方案
containerW = coordinate.getWidth();
}
setStatisticContainerStyle(container, tslib_1.__assign({ width: containerW + "px", transform: transform }, adapteStyle(style)));
var filteredData = view.getData();
if (option.customHtml) {
return option.customHtml(container, view, datum, filteredData);
}
var text = option.content;
if (option.formatter) {
text = option.formatter(datum, filteredData);
}
// todo G2 层修复可以返回空字符串 & G2 层修复允许返回非字符串的内容，比如数值 number
return text ? (util_1.isString(text) ? text : "" + text) : '<div></div>';
},
// @ts-ignore
key: (idx === 0 ? 'top' : 'bottom') + "-statistic" }, _1.pick(option, ['offsetX', 'offsetY', 'rotate', 'style', 'formatter']) /** 透传配置 */));
});
};
/**
* 渲染 html-annotation for gauge (等不规则 plot), 默认 position 居中居底 [50%, 100%]）
* @param chart
* @param options
* @param meta 字段元信息
* @param {optional} datum 当前的元数据
*/
exports.renderGaugeStatistic = function (chart, options, datum) {
var statistic = options.statistic;
var titleOpt = statistic.title, contentOpt = statistic.content;
[titleOpt, contentOpt].forEach(function (option) {
if (!option) {
return;
}
var style = util_1.isFunction(option.style) ? option.style(datum) : option.style;
chart.annotation().html(tslib_1.__assign({ position: ['50%', '100%'], html: function (container, view) {
var coordinate = view.getCoordinate();
// 弧形的坐标
var polarCoord = view.views[0].getCoordinate();
var polarCenter = polarCoord.getCenter();
var polarRadius = polarCoord.getRadius();
var polarMaxY = Math.max(Math.sin(polarCoord.startAngle), Math.sin(polarCoord.endAngle)) * polarRadius;
var offsetY = polarCenter.y + polarMaxY - coordinate.y.start - parseFloat(util_1.get(style, 'fontSize', 0));
var containerWidth = coordinate.getRadius() * coordinate.innerRadius * 2;
setStatisticContainerStyle(container, tslib_1.__assign({ width: containerWidth + "px", transform: "translate(-50%, " + offsetY + "px)" }, adapteStyle(style)));
var filteredData = view.getData();
if (option.customHtml) {
return option.customHtml(container, view, datum, filteredData);
}
var text = option.content;
if (option.formatter) {
text = option.formatter(datum, filteredData);
}
// todo G2 层修复可以返回空字符串 & G2 层修复允许返回非字符串的内容，比如数值 number
return text ? (util_1.isString(text) ? text : "" + text) : '<div></div>';
} }, _1.pick(option, ['offsetX', 'offsetY', 'rotate', 'style', 'formatter']) /** 透传配置 */));
});
};
//# sourceMappingURL=statistic.js.map