@antv/g2plot
Version:
An interactive and responsive charting library
145 lines • 5.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.compareFunnel = exports.compareConversionTag = void 0;
var util_1 = require("@antv/util");
var base_1 = require("../../../adaptor/geometries/base");
var utils_1 = require("../../../utils");
var tooltip_1 = require("../../../utils/tooltip");
var constant_1 = require("../constant");
var common_1 = require("./common");
/**
* 处理字段数据
* @param params
*/
function field(params) {
var _a;
var chart = params.chart, options = params.options;
var _b = options.data, data = _b === void 0 ? [] : _b, yField = options.yField;
// 绘制漏斗图
chart.data(data);
chart.scale((_a = {},
_a[yField] = {
sync: true,
},
_a));
return params;
}
/**
* geometry处理
* @param params
*/
function geometry(params) {
var chart = params.chart, options = params.options;
var data = options.data, xField = options.xField, yField = options.yField, color = options.color, compareField = options.compareField, isTransposed = options.isTransposed, tooltip = options.tooltip, maxSize = options.maxSize, minSize = options.minSize, label = options.label, funnelStyle = options.funnelStyle, state = options.state, showFacetTitle = options.showFacetTitle;
chart.facet('mirror', {
fields: [compareField],
// 漏斗图的转置规则与分面相反，默认是垂直布局
transpose: !isTransposed,
padding: isTransposed ? 0 : [32, 0, 0, 0],
showTitle: showFacetTitle,
eachView: function (view, facet) {
var index = isTransposed ? facet.rowIndex : facet.columnIndex;
if (!isTransposed) {
view.coordinate({
type: 'rect',
actions: [['transpose'], ['scale', index === 0 ? -1 : 1, -1]],
});
}
var formatterData = (0, common_1.transformData)(facet.data, data, {
yField: yField,
maxSize: maxSize,
minSize: minSize,
});
view.data(formatterData);
// 绘制图形
var _a = (0, tooltip_1.getTooltipMapping)(tooltip, [xField, yField, compareField]), fields = _a.fields, formatter = _a.formatter;
var defaultFacetLabel = isTransposed
? {
offset: index === 0 ? 10 : -23,
position: (index === 0 ? 'bottom' : 'top'),
}
: {
offset: 10,
position: 'left',
style: {
textAlign: index === 0 ? 'end' : 'start',
},
};
(0, base_1.geometry)({
chart: view,
options: {
type: 'interval',
xField: xField,
yField: constant_1.FUNNEL_MAPPING_VALUE,
colorField: xField,
tooltipFields: (0, util_1.isArray)(fields) && fields.concat([constant_1.FUNNEL_PERCENT, constant_1.FUNNEL_CONVERSATION]),
mapping: {
// todo 暂时不提供 金字塔 shape，后续需要自定义下形状
shape: 'funnel',
tooltip: formatter,
color: color,
style: funnelStyle,
},
label: label === false ? false : (0, utils_1.deepAssign)({}, defaultFacetLabel, label),
state: state,
},
});
},
});
return params;
}
function compareConversionTag(params) {
// @ts-ignore
var chart = params.chart, index = params.index, options = params.options;
var conversionTag = options.conversionTag, isTransposed = options.isTransposed;
((0, util_1.isNumber)(index) ? [chart] : chart.views).forEach(function (view, viewIndex) {
// 获取形状位置，再转化为需要的转化率位置
var dataArray = (0, util_1.get)(view, ['geometries', '0', 'dataArray'], []);
var size = (0, util_1.get)(view, ['options', 'data', 'length']);
var x = (0, util_1.map)(dataArray, function (item) { return (0, util_1.get)(item, ['0', 'nextPoints', '0', 'x']) * size - 0.5; });
var getLineCoordinate = function (datum, datumIndex, data, initLineOption) {
var ratio = (index || viewIndex) === 0 ? -1 : 1;
return (0, utils_1.deepAssign)({}, initLineOption, {
start: [x[datumIndex - 1] || datumIndex - 0.5, datum[constant_1.FUNNEL_MAPPING_VALUE]],
end: [x[datumIndex - 1] || datumIndex - 0.5, datum[constant_1.FUNNEL_MAPPING_VALUE] + 0.05],
text: isTransposed
? {
style: {
textAlign: 'start',
},
}
: {
offsetX: conversionTag !== false ? ratio * conversionTag.offsetX : 0,
style: {
textAlign: (index || viewIndex) === 0 ? 'end' : 'start',
},
},
});
};
(0, common_1.conversionTagComponent)(getLineCoordinate)((0, utils_1.deepAssign)({}, {
chart: view,
options: options,
}));
});
}
exports.compareConversionTag = compareConversionTag;
/**
* 转化率组件
* @param params
*/
function conversionTag(params) {
var chart = params.chart;
// @ts-ignore
chart.once('beforepaint', function () { return compareConversionTag(params); });
return params;
}
/**
* 对比漏斗
* @param chart
* @param options
*/
function compareFunnel(params) {
return (0, utils_1.flow)(field, geometry, conversionTag)(params);
}
exports.compareFunnel = compareFunnel;
//# sourceMappingURL=compare.js.map