@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
236 lines • 8.29 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");
var view_layer_1 = tslib_1.__importDefault(require("../../base/view-layer"));
var factory_1 = require("../../geoms/factory");
var scale_1 = require("../../util/scale");
require("./geometry/shape/liquid");
require("./animation/liquid-move-in");
var color_1 = require("../../util/color");
var G2_GEOM_MAP = {
column: 'interval',
};
var PLOT_GEOM_MAP = {
interval: 'liquid',
};
var LiquidLayer = /** @class */ (function (_super) {
tslib_1.__extends(LiquidLayer, _super);
function LiquidLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'liquid';
_this.shouldFadeInAnnotation = true;
return _this;
}
LiquidLayer.getDefaultOptions = function () {
var cfg = {
animation: {
factor: 0.4,
easing: 'easeExpOut',
duration: 800,
},
liquidStyle: {
lineWidth: 2,
},
};
return _.deepMix({}, _super.getDefaultOptions.call(this), cfg);
};
LiquidLayer.prototype.init = function () {
this.options.data = [{}];
_super.prototype.init.call(this);
};
LiquidLayer.prototype.coord = function () { };
LiquidLayer.prototype.scale = function () {
var props = this.options;
var min = props.min, max = props.max;
var scales = {
value: {},
};
scale_1.extractScale(scales.value, {
min: Math.min(min, max),
max: Math.max(min, max),
});
// @ts-ignore
this.setConfig('scales', scales);
_super.prototype.scale.call(this);
};
LiquidLayer.prototype.axis = function () {
this.setConfig('axes', false);
};
LiquidLayer.prototype.adjustLiquid = function (liquid) {
var props = this.options;
liquid.shape = {
values: ['liquid-fill-gauge'],
};
liquid.tooltip = false;
var liquidStyle = props.liquidStyle;
if (_.isFunction(liquidStyle))
liquidStyle = liquidStyle();
if (liquidStyle) {
liquid.style = liquidStyle;
}
};
LiquidLayer.prototype.addGeometry = function () {
var liquid = factory_1.getGeom('interval', 'main', {
positionFields: ['_', 'value'],
plot: this,
});
this.adjustLiquid(liquid);
this.liquid = liquid;
this.setConfig('element', liquid);
};
LiquidLayer.prototype.animation = function () {
var props = this.options;
if (props.animation === false) {
/** 关闭动画 */
this.liquid.animate = false;
}
else {
var factor = _.get(props, 'animation.factor');
var easing = _.get(props, 'animation.easing');
var duration = _.get(props, 'animation.duration');
this.liquid.animate = {
appear: {
animation: 'liquidMoveIn',
factor: factor,
easing: easing,
duration: duration,
},
};
}
};
LiquidLayer.prototype.geometryParser = function (dim, type) {
if (dim === 'g2') {
return G2_GEOM_MAP[type];
}
return PLOT_GEOM_MAP[type];
};
LiquidLayer.prototype.annotation = function () {
var annotationConfigs = [];
var statisticConfig = this.extractStatistic();
annotationConfigs.push(statisticConfig);
this.setConfig('annotations', annotationConfigs);
};
LiquidLayer.prototype.extractStatistic = function () {
var props = this.options;
var statistic = props.statistic || {};
var content;
if (_.isFunction(statistic.formatter)) {
content = statistic.formatter(props.value);
}
else {
content = "" + props.value;
}
var fontSize;
var shadowBlur;
if (content) {
var contentWidth = void 0;
if (props.width < props.height) {
contentWidth = props.width * 0.8;
}
else {
contentWidth = props.height;
}
fontSize = (0.8 * contentWidth) / content.length;
shadowBlur = Math.max(1, Math.ceil(0.025 * fontSize));
}
var opacity;
if (statistic.visible === false) {
opacity = 0;
}
var statisticConfig = _.deepMix({
style: {
fontSize: fontSize,
shadowBlur: shadowBlur,
},
}, statistic, {
top: true,
content: content,
type: 'text',
position: ['_', 'median'],
style: {
opacity: opacity,
fill: 'transparent',
shadowColor: 'transparent',
textAlign: 'center',
},
});
delete statisticConfig.visible;
delete statisticConfig.formatter;
delete statisticConfig.adjustColor;
return statisticConfig;
};
LiquidLayer.prototype.afterRender = function () {
_super.prototype.afterRender.call(this);
this.fadeInAnnotation();
};
LiquidLayer.prototype.processData = function (data) {
var props = this.options;
return [{ _: '_', value: props.value }];
};
LiquidLayer.prototype.changeValue = function (value) {
var props = this.options;
props.value = value;
this.changeData([]);
};
LiquidLayer.prototype.fadeInAnnotation = function () {
var _this = this;
var props = this.options;
var animation = props.animation || {};
var annotations = this.view.annotation().annotations;
var annotationEl = annotations[0].get('el');
var colorStyle = this.calcAnnotationColorStyle();
if (this.shouldFadeInAnnotation) {
annotationEl.animate(colorStyle, animation.duration * Math.min(1, 1.5 * animation.factor), null, function () {
_this.shouldFadeInAnnotation = false;
});
}
else {
_.forIn(colorStyle, function (v, k) { return annotationEl.attr(k, v); });
}
};
LiquidLayer.prototype.calcAnnotationColorStyle = function () {
var props = this.options;
var lightColorStyle = { fill: '#f6f6f6', shadowColor: 'black' };
var darkColorStyle = { fill: '#303030', shadowColor: 'white' };
if (_.get(props, 'statistic.adjustColor') === false) {
return {
fill: _.get(props, 'statistic.style.fill', darkColorStyle.fill),
shadowColor: _.get(props, 'statistic.style.shadowColor', darkColorStyle.shadowColor),
};
}
var min = props.min, max = props.max;
var value = props.value;
min = Math.min(min, max);
max = Math.max(min, max);
var percent;
if (min == max) {
percent = 1;
}
else {
percent = (value - min) / (max - min);
}
if (percent > 0.55) {
var waves = this.view
.get('elements')[0]
.get('container')
.find(function (shape) { return shape.get('name') == 'waves'; });
var wave = waves.getChildByIndex(0);
var waveColor = wave.attr('fill');
var waveOpacity = 0.8;
var rgb = color_1.rgb2arr(waveColor);
var gray = Math.round(rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) / waveOpacity;
return gray < 156 ? lightColorStyle : darkColorStyle;
}
return darkColorStyle;
};
LiquidLayer.prototype.updateConfig = function (cfg) {
_super.prototype.updateConfig.call(this, cfg);
this.shouldFadeInAnnotation = true;
};
return LiquidLayer;
}(view_layer_1.default));
exports.default = LiquidLayer;
global_1.registerPlotType('liquid', LiquidLayer);
//# sourceMappingURL=layer.js.map