@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
213 lines • 7.13 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as _ from '@antv/util';
import { registerPlotType } from '../../base/global';
import ViewLayer from '../../base/view-layer';
import { getComponent } from '../../components/factory';
import { getGeom } from '../../geoms/factory';
import * as EventParser from '../column/event';
import './component/label/rose-label';
var G2_GEOM_MAP = {
rose: 'interval',
};
var PLOT_GEOM_MAP = {
rose: 'column',
};
var RoseLayer = /** @class */ (function (_super) {
__extends(RoseLayer, _super);
function RoseLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'rose';
return _this;
}
RoseLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
width: 400,
height: 400,
title: {
visible: false,
},
description: {
visible: false,
},
forceFit: true,
padding: 'auto',
radius: 0.8,
innerRadius: 0,
label: {
visible: true,
type: 'inner',
autoRotate: true,
adjustColor: false,
},
legend: {
visible: true,
position: 'bottom-center',
},
tooltip: {
visible: true,
shared: false,
crosshairs: null,
},
columnStyle: {
stroke: 'white',
lineWidth: 1,
},
xAxis: {
autoRotateLabel: true,
line: {
visible: false,
},
tickLine: {
visible: false,
},
grid: {
visible: true,
style: {
lineWidth: 0.5,
},
},
label: {
offset: 5,
},
},
yAxis: {
visible: false,
},
});
};
RoseLayer.prototype.getOptions = function (props) {
var options = _super.prototype.getOptions.call(this, props);
// @ts-ignore
var defaultOptions = this.constructor.getDefaultOptions();
var columnStyle = props.sectorStyle;
var xField = props.categoryField;
var yField = props.radiusField;
return _.deepMix({}, options, defaultOptions, { columnStyle: columnStyle, xField: xField, yField: yField }, props);
};
RoseLayer.prototype.geometryParser = function (dim, type) {
if (dim === 'g2') {
return G2_GEOM_MAP[type];
}
return PLOT_GEOM_MAP[type];
};
RoseLayer.prototype.scale = function () {
// super.scale();
var props = this.options;
var scales = {};
scales[props.radiusField] = {};
scales[props.categoryField] = { type: 'cat' };
this.setConfig('scales', scales);
};
/** 不显示坐标轴 */
RoseLayer.prototype.axis = function () {
_super.prototype.axis.call(this);
var options = this.options;
if (!options.stackField && !options.groupField) {
this.setConfig('axes', false);
}
};
RoseLayer.prototype.coord = function () {
var props = this.options;
var coordConfig = {
type: 'polar',
cfg: {
radius: props.radius,
innerRadius: props.innerRadius || 0,
},
};
this.setConfig('coord', coordConfig);
};
RoseLayer.prototype.addGeometry = function () {
var options = this.options;
this.adjustColorFieldMapping();
this.adjustLegendOptions();
var rose = getGeom('interval', 'main', {
plot: this,
positionFields: [options.categoryField, options.radiusField],
widthRatio: 1,
});
rose.label = this.extractLabel();
rose.adjust = this.adjustRoseAdjust();
this.rose = rose;
this.setConfig('element', rose);
};
RoseLayer.prototype.adjustColorFieldMapping = function () {
var options = this.options;
if (options.stackField || options.groupField) {
this.options.colorField = null;
}
};
RoseLayer.prototype.adjustRoseAdjust = function () {
if (this.options.stackField) {
return [
{
type: 'stack',
},
];
}
else if (this.options.groupField) {
return [
{
type: 'dodge',
marginRatio: 0,
},
];
}
return null;
};
RoseLayer.prototype.animation = function () {
_super.prototype.animation.call(this);
var props = this.options;
if (props.animation === false) {
/** 关闭动画 */
this.rose.animate = false;
}
};
RoseLayer.prototype.annotation = function () { };
RoseLayer.prototype.parseEvents = function (eventParser) {
_super.prototype.parseEvents.call(this, EventParser);
};
RoseLayer.prototype.extractLabel = function () {
var options = this.options;
if (!options.label || !options.label.visible) {
return false;
}
var label = _.deepMix({}, options.label);
this.adjustLabelOptions(label);
var fields = [options.categoryField, options.radiusField];
if (options.stackField || options.groupField) {
fields.push(options.stackField || options.groupField);
}
var labelConfig = getComponent('label', __assign({ plot: this, labelType: 'roseLabel', fields: fields }, label));
return labelConfig;
};
RoseLayer.prototype.adjustLabelOptions = function (labelOptions) {
var radiusField = this.options.radiusField;
if (labelOptions) {
var offset = labelOptions.offset, type = labelOptions.type, formatter = labelOptions.formatter;
if (type === 'inner') {
labelOptions.offset = offset < 0 ? offset : -10;
}
else if (type === 'outer') {
labelOptions.offset = offset >= 0 ? offset : 10;
}
if (!formatter) {
// 默认显示 数值
labelOptions.formatter = function (text, item) { return "" + item._origin[radiusField]; };
}
}
};
RoseLayer.prototype.adjustLegendOptions = function () {
var options = this.options;
var legendOptions = options.legend;
if (legendOptions) {
if (!options.stackField && !options.groupField) {
legendOptions.clickable = false;
}
}
};
return RoseLayer;
}(ViewLayer));
export default RoseLayer;
registerPlotType('rose', RoseLayer);
//# sourceMappingURL=layer.js.map