@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
253 lines • 9.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var global_1 = require("../../base/global");
require("./geometry/shape/waterfall");
var view_layer_1 = tslib_1.__importDefault(require("../../base/view-layer"));
var scale_1 = require("../../util/scale");
var factory_1 = require("../../components/factory");
var EventParser = tslib_1.__importStar(require("./event"));
require("./component/label/waterfall-label");
var diff_label_1 = tslib_1.__importDefault(require("./component/label/diff-label"));
var G2_GEOM_MAP = {
waterfall: 'interval',
};
var PLOT_GEOM_MAP = {
interval: 'waterfall',
};
exports.VALUE_FIELD = '$$value$$';
exports.IS_TOTAL = '$$total$$';
var INDEX_FIELD = '$$index$$';
var WaterfallLayer = /** @class */ (function (_super) {
tslib_1.__extends(WaterfallLayer, _super);
function WaterfallLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'watarfall';
return _this;
}
WaterfallLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
legend: {
visible: false,
position: 'bottom',
},
label: {
visible: true,
adjustPosition: true,
},
/** 差值 label */
diffLabel: {
visible: true,
},
/** 迁移线 */
leaderLine: {
visible: true,
},
/** 显示总计 */
showTotal: {
visible: true,
label: '总计值',
},
waterfallStyle: {
/** 默认无描边 */
lineWidth: 0,
},
tooltip: {
visible: true,
shared: true,
crosshairs: {
type: 'rect',
},
},
});
};
WaterfallLayer.prototype.getOptions = function (props) {
var options = _super.prototype.getOptions.call(this, props);
this.adjustLegendOptions(options);
return options;
};
WaterfallLayer.prototype.afterInit = function () {
_super.prototype.afterInit.call(this);
var options = this.options;
if (options.diffLabel && options.diffLabel.visible) {
this.diffLabel = new diff_label_1.default({
view: this.view,
fields: [options.xField, options.yField, exports.VALUE_FIELD],
formatter: options.diffLabel.formatter,
style: options.diffLabel.style,
});
}
else if (this.diffLabel) {
this.diffLabel.clear();
this.diffLabel = null;
}
};
WaterfallLayer.prototype.afterRender = function () {
_super.prototype.afterRender.call(this);
var options = this.options;
this.view.on('tooltip:change', function (e) {
var items = e.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var _origin = _.get(item.point, '_origin', {});
// 改变 tooltip 显示的name和value
item.name = _origin[options.xField];
item.value = _origin[options.yField];
if (!item.value && _origin[exports.IS_TOTAL]) {
var values = _origin[exports.VALUE_FIELD];
item.value = values[0] - values[1];
}
e.items[i] = item;
}
});
};
WaterfallLayer.prototype.geometryParser = function (dim, type) {
if (dim === 'g2') {
return G2_GEOM_MAP[type];
}
return PLOT_GEOM_MAP[type];
};
WaterfallLayer.prototype.addGeometry = function () {
var options = this.options;
var waterfall = {
type: 'interval',
position: {
fields: [options.xField, exports.VALUE_FIELD],
},
shape: {
values: ['waterfall'],
},
};
if (options.label) {
waterfall.label = this.extractLabel();
}
waterfall.style = this._parseStyle();
waterfall.color = this._parseColor();
this.waterfall = waterfall;
this.setConfig('element', waterfall);
};
WaterfallLayer.prototype.processData = function (originData) {
var _a;
var plotData = [];
var xField = this.options.xField;
var yField = this.options.yField;
_.map(originData, function (dataItem, idx) {
var _a;
var value = dataItem[yField];
if (idx > 0) {
var prevValue = plotData[idx - 1][exports.VALUE_FIELD];
if (_.isArray(prevValue)) {
value = [prevValue[1], dataItem[yField] + prevValue[1]];
}
else {
value = [prevValue, dataItem[yField] + prevValue];
}
}
plotData.push(tslib_1.__assign(tslib_1.__assign({}, dataItem), (_a = {}, _a[exports.VALUE_FIELD] = value, _a[INDEX_FIELD] = idx, _a)));
});
if (this.options.showTotal && this.options.showTotal.visible) {
var values = _.map(originData, function (o) { return o[yField]; });
var totalValue = _.reduce(values, function (p, n) { return p + n; }, 0);
plotData.push((_a = {},
_a[xField] = this.options.showTotal.label,
_a[yField] = null,
_a[exports.VALUE_FIELD] = [totalValue, 0],
_a[INDEX_FIELD] = plotData.length,
_a[exports.IS_TOTAL] = true,
_a));
}
return plotData;
};
WaterfallLayer.prototype.scale = function () {
var options = this.options;
var scales = {};
/** 配置x-scale */
scales[options.xField] = { type: 'cat' };
if (_.has(options, 'xAxis')) {
scale_1.extractScale(scales[options.xField], options.xAxis);
}
/** 配置y-scale */
scales[options.yField] = {};
if (_.has(options, 'yAxis')) {
scale_1.extractScale(scales[options.yField], options.yAxis);
}
this.setConfig('scales', scales);
_super.prototype.scale.call(this);
};
WaterfallLayer.prototype.coord = function () { };
WaterfallLayer.prototype.parseEvents = function (eventParser) {
_super.prototype.parseEvents.call(this, EventParser);
};
WaterfallLayer.prototype.extractLabel = function () {
var options = this.options;
var label = _.deepMix({}, options.label);
if (label.visible === false) {
return false;
}
var labelConfig = factory_1.getComponent('label', tslib_1.__assign({ plot: this, labelType: 'waterfall', fields: [options.yField] }, label));
return labelConfig;
};
/** 牵引线的样式注入到style中 */
WaterfallLayer.prototype._parseStyle = function () {
var style = this.options.waterfallStyle;
var leaderLine = this.options.leaderLine;
var config = {};
if (_.isFunction(style)) {
config.callback = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return Object.assign({}, style.apply(void 0, args), { leaderLine: leaderLine });
};
}
else {
config.cfg = tslib_1.__assign(tslib_1.__assign({}, style), { leaderLine: leaderLine });
}
return config;
};
WaterfallLayer.prototype._parseColor = function () {
var _this = this;
var options = this.options;
var _a = this.options, xField = _a.xField, yField = _a.yField;
var config = {
fields: [xField, yField, exports.VALUE_FIELD, INDEX_FIELD],
};
if (_.isFunction(options.color)) {
config.callback = options.color;
}
else {
var risingColor_1 = '#f4664a';
var fallingColor_1 = '#30bf78';
var totalColor_1 = 'rgba(0, 0, 0, 0.25)';
if (_.isString(options.color)) {
risingColor_1 = fallingColor_1 = totalColor_1 = options.color;
}
else if (_.isObject(options.color)) {
var _b = options.color, rising = _b.rising, falling = _b.falling, total = _b.total;
risingColor_1 = rising;
fallingColor_1 = falling;
totalColor_1 = total;
}
config.callback = function (type, value, values, index) {
if (index === _this.options.data.length) {
return totalColor_1 || (values[0] >= 0 ? risingColor_1 : fallingColor_1);
}
return (_.isArray(values) ? values[1] - values[0] : values) >= 0 ? risingColor_1 : fallingColor_1;
};
}
return config;
};
/** 复写 legend 配置, 瀑布图默认无legend */
WaterfallLayer.prototype.adjustLegendOptions = function (options) {
var legendOptions = options.legend;
if (legendOptions) {
legendOptions.visible = false;
}
};
return WaterfallLayer;
}(view_layer_1.default));
exports.default = WaterfallLayer;
global_1.registerPlotType('waterfall', WaterfallLayer);
//# sourceMappingURL=layer.js.map