@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
269 lines • 10.2 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 scale_1 = require("../../util/scale");
require("./geometry/shape/pointer");
require("./theme");
var GAP = 1;
var RADIUS = 0.9;
var GaugeLayer = /** @class */ (function (_super) {
tslib_1.__extends(GaugeLayer, _super);
function GaugeLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'gauge';
return _this;
}
GaugeLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
startAngle: -7 / 6,
endAngle: 1 / 6,
range: [0, 25, 50, 75, 100],
gaugeStyle: {
tickLineColor: 'rgba(0,0,0,0)',
pointerColor: '#bfbfbf',
statisticPos: ['50%', '100%'],
},
});
};
GaugeLayer.prototype.init = function () {
var _a = this.options, value = _a.value, range = _a.range;
var rangeSorted = range.map(function (d) { return +d; }).sort(function (a, b) { return a - b; });
var _b = this.options, _c = _b.min, min = _c === void 0 ? rangeSorted[0] : _c, _d = _b.max, max = _d === void 0 ? rangeSorted[rangeSorted.length - 1] : _d, _e = _b.format, format = _e === void 0 ? function (d) { return "" + d; } : _e;
var valueText = format(value);
var styleMix = this.getStyleMix();
this.options.styleMix = styleMix;
this.options.data = [{ value: value || 0 }];
this.options.valueText = valueText;
this.options.min = min;
this.options.max = max;
this.options.format = format;
_super.prototype.init.call(this);
};
GaugeLayer.prototype.geometryParser = function (dim, type) {
throw new Error('Method not implemented.');
};
GaugeLayer.prototype.getStyleMix = function () {
var _a = this.options.gaugeStyle, gaugeStyle = _a === void 0 ? {} : _a;
var _b = this, width = _b.width, height = _b.height;
var size = Math.max(width, height) / 20;
var defaultStyle = Object.assign({}, this.theme, {
stripWidth: size,
tickLabelSize: size / 2,
statisticSize: size * 1.5,
});
return Object.assign(defaultStyle, gaugeStyle);
};
GaugeLayer.prototype.scale = function () {
var _a = this.options, min = _a.min, max = _a.max, format = _a.format, styleMix = _a.styleMix;
var scales = {
value: {},
};
scale_1.extractScale(scales.value, {
min: min,
max: max,
minLimit: min,
maxLimit: max,
nice: true,
formatter: format,
// 自定义 tick step
tickInterval: styleMix.tickInterval,
});
// @ts-ignore
this.setConfig('scales', scales);
_super.prototype.scale.call(this);
};
GaugeLayer.prototype.coord = function () {
var coordConfig = {
type: 'polar',
cfg: {
radius: 0.9,
startAngle: this.options.startAngle * Math.PI,
endAngle: this.options.endAngle * Math.PI,
},
};
this.setConfig('coord', coordConfig);
};
GaugeLayer.prototype.axis = function () {
var styleMix = this.options.styleMix;
var offset = typeof styleMix.tickLabelPos === 'number'
? -styleMix.tickLabelPos
: styleMix.tickLabelPos === 'outer'
? 0.8
: -0.8;
var axesConfig = {
fields: {
value: {},
1: {},
},
};
axesConfig.fields.value = {
line: null,
label: {
offset: offset * (styleMix.stripWidth / 1.8 + styleMix.tickLabelSize / 1.5),
textStyle: {
fontSize: styleMix.tickLabelSize,
fill: styleMix.tickLabelColor,
textAlign: 'center',
textBaseline: 'middle',
},
},
tickLine: {
length: offset * (styleMix.stripWidth + 4),
stroke: styleMix.tickLineColor,
lineWidth: 2,
// 由于tickline的zindex在annotation之上，所以使用lineDash实现offset
lineDash: [0, styleMix.stripWidth / 2, Math.abs(offset * (styleMix.stripWidth + 4))],
},
subTickCount: styleMix.subTickCount,
subTickLine: {
length: offset * (styleMix.stripWidth + 1),
stroke: styleMix.tickLineColor,
lineWidth: 1,
lineDash: [0, styleMix.stripWidth / 2, Math.abs(offset * (styleMix.stripWidth + 1))],
},
labelAutoRotate: true,
};
axesConfig.fields['1'] = false;
this.setConfig('axes', axesConfig);
};
GaugeLayer.prototype.addGeometry = function () {
var styleMix = this.options.styleMix;
var pointerColor = styleMix.pointerColor || this.config.theme.defaultColor;
var pointer = {
type: 'point',
position: {
fields: ['value', '1'],
},
shape: {
values: ['pointer'],
},
color: {
values: [pointerColor],
},
animate: false,
};
this.setConfig('element', pointer);
};
GaugeLayer.prototype.annotation = function () {
var _a = this.options, min = _a.min, max = _a.max, statistic = _a.statistic, range = _a.range, styleMix = _a.styleMix;
var annotationConfigs = [];
// @ts-ignore
if (statistic !== false) {
var statistics = this.renderStatistic();
annotationConfigs.push(statistics);
}
var arcSize = 1; // 0.965;
var strips = this.renderArcs(range, arcSize, styleMix);
var allArcs = annotationConfigs.concat(strips);
this.setConfig('annotations', allArcs);
};
GaugeLayer.prototype.renderArcs = function (range, arcSize, styleMix) {
var _this = this;
var colors = styleMix.colors || this.config.theme.colors;
var rangeArray = function (d) { return tslib_1.__spreadArrays(Array(d)
.fill(0)
.map(function (data, i) { return i; })); };
var count = range.length - 1;
var Arcs = [];
var Bks = [];
var countArray = rangeArray(count);
_.each(countArray, function (index) {
var gap = index === countArray.length - 1 ? 0 : _this.calGapAngle();
var arc = {
type: 'arc',
start: [range[index], arcSize],
end: [range[index + 1] - gap, arcSize],
style: {
stroke: colors[index % colors.length],
lineWidth: styleMix.stripWidth,
},
};
var base = _.deepMix({}, arc, {
style: {
stroke: styleMix.stripBackColor,
},
});
Bks.push(base);
Arcs.push(arc);
});
// 如果range不以0为起始
if (range[0] !== 0) {
Bks.push({
type: 'arc',
start: [0, arcSize],
end: [range[0] - this.calGapAngle(), arcSize],
style: {
stroke: styleMix.stripBackColor,
lineWidth: styleMix.stripWidth,
},
});
}
// 如果range不以100为结束
if (range[range.length - 1] !== 100) {
Bks.push({
type: 'arc',
start: [range[range.length - 1] + this.calGapAngle(), arcSize],
end: [100, arcSize],
style: {
stroke: styleMix.stripBackColor,
lineWidth: styleMix.stripWidth,
},
});
}
return Bks.concat(Arcs);
};
GaugeLayer.prototype.statisticHtml = function () {
var _a = this.options, value = _a.value, format = _a.format;
var statistic = this.options.statistic;
var formatted = format(value);
if (typeof statistic === 'boolean' && statistic === true) {
return value !== null ? formatted : '--';
}
if (typeof statistic === 'string') {
return statistic;
}
if (typeof statistic === 'function') {
return statistic(value, formatted);
}
return null;
};
GaugeLayer.prototype.renderStatistic = function () {
var _a = this.options, statistic = _a.statistic, styleMix = _a.styleMix;
var statisticHtml = this.statisticHtml();
if (typeof statistic !== 'function') {
var text = {
type: 'text',
content: statisticHtml,
top: true,
position: styleMix.statisticPos,
style: {
fill: styleMix.statisticColor,
fontSize: styleMix.statisticSize,
textAlign: 'center',
},
};
return text;
}
if (typeof statistic === 'function') {
var html = {
type: 'html',
zIndex: 10,
position: styleMix.statisticPos,
html: statisticHtml,
};
return html;
}
};
GaugeLayer.prototype.calGapAngle = function () {
var ratio = (Math.abs(this.options.startAngle - this.options.endAngle) / Math.PI) * 100;
var radius = (this.width / 2) * RADIUS;
return (GAP / radius) * ratio;
};
return GaugeLayer;
}(view_layer_1.default));
exports.default = GaugeLayer;
global_1.registerPlotType('gauge', GaugeLayer);
//# sourceMappingURL=layer.js.map