@visactor/vchart
Version:
charts lib based @visactor/VGrammar
420 lines (412 loc) • 24.2 kB
JavaScript
"use strict";
var __rest = this && this.__rest || function(s, e) {
var t = {};
for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
var i = 0;
for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
}
return t;
};
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.registerAxis = exports.AxisComponent = void 0;
const vscale_1 = require("@visactor/vscale"), base_component_1 = require("../base/base-component"), data_1 = require("../../compile/data"), interface_1 = require("./interface"), interface_2 = require("../interface"), model_1 = require("../../util/model"), vutils_extension_1 = require("@visactor/vutils-extension"), event_1 = require("../../constant/event"), layout_1 = require("../../constant/layout"), utils_1 = require("../../animation/utils"), vutils_1 = require("@visactor/vutils"), util_1 = require("./util"), style_1 = require("../../util/style"), vdataset_1 = require("@visactor/vdataset"), component_1 = require("../../mark/component"), factory_1 = require("../../core/factory"), vrender_components_1 = require("@visactor/vrender-components"), scale_1 = require("../../data/parser/scale"), register_1 = require("../../data/register"), util_2 = require("../util"), transform_1 = require("../../util/spec/transform");
class AxisComponent extends base_component_1.BaseComponent {
getOrient() {
return this._orient;
}
getScale() {
return this._scale;
}
getScales() {
return this._scales;
}
getTickData(index = 0) {
return this._tickData[index];
}
get visible() {
return this._visible;
}
getInverse() {
return this._inverse;
}
getCoordinateType() {
return this._coordinateType;
}
constructor(spec, options) {
var _a;
super(spec, options), this.specKey = "axes", this._scales = [], this._tickData = [],
this._visible = !0, this._tick = void 0, this._onTickDataChange = tickData => {
this._forceLayout(), null == tickData || tickData.updateData();
}, this._visible = null === (_a = spec.visible) || void 0 === _a || _a, this._coordinateType = "none";
}
getVRenderComponents() {
var _a, _b;
return [ null === (_a = this._axisMark) || void 0 === _a ? void 0 : _a.getProduct(), null === (_b = this._gridMark) || void 0 === _b ? void 0 : _b.getProduct() ].filter(vutils_1.isValid);
}
created() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
if (super.created(), this.setSeriesAndRegionsFromSpec(), this.initEvent(), this.initScales(),
this.updateSeriesScale(), this._shouldComputeTickData() && this._initData(), this._visible) {
const axisMark = this._createMark({
type: "component",
name: `axis-${this.getOrient()}`
}, {
componentType: "angle" === this.getOrient() ? interface_1.AxisEnum.circleAxis : interface_1.AxisEnum.lineAxis,
mode: this._spec.mode
}, {
skipTheme: !0
});
if (this._updateTickDataMarks(axisMark), this._axisMark = axisMark, axisMark.setMarkConfig({
zIndex: this.layoutZIndex
}), (0, vutils_1.isValid)(this._spec.id) && axisMark.setUserId(this._spec.id), axisMark.setMarkConfig({
interactive: null !== (_a = this._spec.interactive) && void 0 !== _a ? _a : this.getDefaultInteractive()
}), this._marks.addMark(axisMark), null === (_b = this._spec.grid) || void 0 === _b ? void 0 : _b.visible) {
const gridMark = this._createMark({
type: "component",
name: `axis-${this.getOrient()}-grid`
}, {
componentType: "angle" === this.getOrient() ? interface_1.GridEnum.circleAxisGrid : interface_1.GridEnum.lineAxisGrid,
mode: this._spec.mode
}, {
skipTheme: !0
});
this._updateTickDataMarks(gridMark), gridMark.setMarkConfig({
zIndex: null !== (_g = null !== (_e = null === (_d = null === (_c = this._spec.grid) || void 0 === _c ? void 0 : _c.style) || void 0 === _d ? void 0 : _d.zIndex) && void 0 !== _e ? _e : null === (_f = this._spec.grid) || void 0 === _f ? void 0 : _f.zIndex) && void 0 !== _g ? _g : layout_1.LayoutZIndex.Axis_Grid,
interactive: !1
}), this._marks.addMark(gridMark), this._gridMark = gridMark;
}
if ((null === (_h = this._option.globalInstance) || void 0 === _h ? void 0 : _h.isAnimationEnable()) && !1 !== (0,
vutils_1.get)(this._option.getChart().getSpec(), "animation") && !0 === this._spec.animation) {
const axisAnimateConfig = (0, utils_1.animationConfig)(null === (_j = factory_1.Factory.getAnimationInKey("axis")) || void 0 === _j ? void 0 : _j(), {
appear: null !== (_l = null !== (_k = this._spec.animationAppear) && void 0 !== _k ? _k : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationAppear.axis")) && void 0 !== _l ? _l : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationAppear"),
disappear: null !== (_o = null !== (_m = this._spec.animationDisappear) && void 0 !== _m ? _m : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationDisappear.axis")) && void 0 !== _o ? _o : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationDisappear"),
enter: null !== (_q = null !== (_p = this._spec.animationEnter) && void 0 !== _p ? _p : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationEnter.axis")) && void 0 !== _q ? _q : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationEnter"),
exit: null !== (_s = null !== (_r = this._spec.animationExit) && void 0 !== _r ? _r : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationExit.axis")) && void 0 !== _s ? _s : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationExit"),
update: null !== (_u = null !== (_t = this._spec.animationUpdate) && void 0 !== _t ? _t : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationUpdate.axis")) && void 0 !== _u ? _u : (0,
vutils_1.get)(this._option.getChart().getSpec(), "animationUpdate")
});
axisAnimateConfig.enter && (axisAnimateConfig.update[0].customParameters = {
enter: axisAnimateConfig.enter[0]
}), this._marks.forEach((m => m.setAnimationConfig(axisAnimateConfig)));
}
}
}
_shouldComputeTickData() {
return this.getVisible() || this._spec.forceInitTick;
}
_initData() {
const tickData = this._initTickDataSet(this._tickTransformOption()), tickDataCompile = new data_1.CompilableData(this._option, tickData);
this._tickData = [ tickDataCompile ], tickData.target.addListener("change", (() => {
this._onTickDataChange(tickDataCompile);
}));
}
collectData(depth, rawData) {
const data = [];
return (0, model_1.eachSeries)(this._regions, (s => {
var _a;
let field = this.collectSeriesField(depth, s);
if (field = (0, vutils_1.isArray)(field) ? (0, vscale_1.isContinuous)(this._scale.type) ? field : [ field[0] ] : [ field ],
depth || (this._dataFieldText = s.getFieldAlias(field[0])), field) {
const viewData = s.getViewData();
if (rawData) field.forEach((f => {
data.push(s.getRawDataStatisticsByField(f, !!(0, vscale_1.isContinuous)(this._scale.type)));
})); else if (viewData && viewData.latestData && viewData.latestData.length) {
const seriesData = null === (_a = s.getViewDataStatistics) || void 0 === _a ? void 0 : _a.call(s), userSetBreaks = this.type === interface_2.ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
field.forEach((f => {
var _a;
(null === (_a = null == seriesData ? void 0 : seriesData.latestData) || void 0 === _a ? void 0 : _a[f]) && (userSetBreaks ? data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), {
values: viewData.latestData.map((obj => obj[f]))
})) : data.push(seriesData.latestData[f]));
}));
}
}
}), {
userId: this._seriesUserId,
specIndex: this._seriesIndex
}), data;
}
isSeriesDataEnable() {
let enable = !0;
return (0, model_1.eachSeries)(this._regions, (s => {
var _a;
(0, vutils_1.isArray)(null === (_a = s.getViewDataStatistics()) || void 0 === _a ? void 0 : _a.latestData) && (enable = !1);
}), {
userId: this._seriesUserId,
specIndex: this._seriesIndex
}), enable;
}
setSeriesAndRegionsFromSpec() {
const {seriesId: seriesId, seriesIndex: seriesIndex, regionId: regionId, regionIndex: regionIndex} = this._spec;
(0, vutils_1.isValid)(seriesId) && (this._seriesUserId = (0, vutils_1.array)(seriesId)),
(0, vutils_1.isValid)(regionId) && (this._regionUserId = (0, vutils_1.array)(regionId)),
(0, vutils_1.isValid)(seriesIndex) && (this._seriesIndex = (0, vutils_1.array)(seriesIndex)),
(0, vutils_1.isValid)(regionIndex) && (this._regionIndex = (0, vutils_1.array)(regionIndex)),
this._regions = this._option.getRegionsInUserIdOrIndex(this._regionUserId, this._regionIndex),
this.layout.layoutBindRegionID = this._regions.map((x => x.id));
}
getBindSeriesFilter() {
return {
userId: this._seriesUserId,
specIndex: this._seriesIndex
};
}
initEvent() {
this.event.on(event_1.ChartEvent.scaleUpdate, {
filter: ({model: model}) => (null == model ? void 0 : model.id) === this.id
}, this.effect.scaleUpdate.bind(this));
const viewStatistics = (0, model_1.getSeries)(this._regions, {
userId: this._seriesUserId,
specIndex: this._seriesIndex
}).map((s => s.getViewDataStatistics())).filter((v => !!v));
viewStatistics.length > 1 ? this._option.dataSet.multipleDataViewAddListener(viewStatistics, "change", (() => {
this.updateScaleDomain();
})) : 1 === viewStatistics.length && viewStatistics[0].target.addListener("change", (() => {
this.updateScaleDomain();
})), (0, model_1.eachSeries)(this._regions, (s => {
s.event.on(event_1.ChartEvent.rawDataUpdate, {
filter: ({model: model}) => (null == model ? void 0 : model.id) === s.id
}, (() => {
this._clearRawDomain();
}));
}), {
userId: this._seriesUserId,
specIndex: this._seriesIndex
});
}
updateScaleDomain() {}
_clearRawDomain() {}
onLayoutEnd() {
this.updateScaleRange();
this.event.emit(event_1.ChartEvent.scaleUpdate, {
model: this,
value: "range"
}), super.onLayoutEnd();
}
computeData(updateType) {
"force" !== updateType || this._tickData && this._tickData.length ? !this._tickData || !this._tickData.length || "force" !== updateType && (0,
vutils_1.isEqual)(this._scale.range(), [ 0, 1 ]) || this._tickData.forEach((tickData => {
tickData.getDataView().reRunAllTransform({
skipEqual: !0
});
})) : (0, model_1.eachSeries)(this._regions, (s => {
var _a;
null === (_a = s.getViewData()) || void 0 === _a || _a.reRunAllTransform();
}), {
userId: this._seriesUserId,
specIndex: this._seriesIndex
});
}
_updateTickDataMarks(m) {
this._tickData && this._tickData.forEach((d => {
d.addRelatedMark(m);
}));
}
initScales() {
this._scales = [ this._scale ];
const groups = [];
if ((0, model_1.eachSeries)(this._regions, (s => {
const g = s.getGroups();
g && groups.push(g);
}), {
userId: this._seriesUserId,
specIndex: this._seriesIndex
}), 0 !== groups.length) {
const depth = (0, vutils_1.maxInArray)(groups.map((g => g.fields.length)));
for (let i = 1; i < depth; i++) {
const scale = this._scale.clone();
this._scales.push(scale);
}
}
}
_compareSpec(spec, prevSpec) {
const result = super._compareSpec(spec, prevSpec);
return result.reMake ? result : (result.reRender = !0, (null == prevSpec ? void 0 : prevSpec.type) !== (null == spec ? void 0 : spec.type) || (null == prevSpec ? void 0 : prevSpec.visible) !== (null == spec ? void 0 : spec.visible) ? (result.reMake = !0,
result) : (result.reMake = [ "grid", "subGrid", "tick", "subTick", "label", "domainLine", "title" ].some((k => {
var _a, _b;
return (null === (_a = null == prevSpec ? void 0 : prevSpec[k]) || void 0 === _a ? void 0 : _a.visible) !== (null === (_b = null == spec ? void 0 : spec[k]) || void 0 === _b ? void 0 : _b.visible);
})), result));
}
_getAxisAttributes() {
const spec = this._spec, axisAttrs = {
orient: this.getOrient(),
select: !0 !== this._option.disableTriggerEvent && spec.select,
hover: !0 !== this._option.disableTriggerEvent && spec.hover
};
if (spec.domainLine && spec.domainLine.visible ? axisAttrs.line = (0, util_1.transformAxisLineStyle)(spec.domainLine) : axisAttrs.line = {
visible: !1
}, spec.label && spec.label.visible) {
const labelSpec = (0, vutils_1.pickWithout)(spec.label, [ "style", "formatMethod", "state" ]);
axisAttrs.label = labelSpec, spec.label.style && (axisAttrs.label.style = (0, vutils_1.isFunction)(spec.label.style) ? (datum, index, data, layer) => {
var _a;
const style = spec.label.style(datum.rawValue, index, datum, data, layer);
return (0, style_1.transformToGraphic)((0, vutils_extension_1.mergeSpec)({}, null === (_a = this._theme.label) || void 0 === _a ? void 0 : _a.style, style));
} : (0, style_1.transformToGraphic)(spec.label.style)), (spec.label.formatMethod || spec.label.formatter) && (axisAttrs.label.formatMethod = this._getLabelFormatMethod()),
spec.label.state && (axisAttrs.label.state = (0, style_1.transformAxisLabelStateStyle)(spec.label.state)),
(0, vutils_1.isFunction)(spec.label.dataFilter) && (axisAttrs.label.dataFilter = (data, layer) => spec.label.dataFilter(data, layer, {
vchart: this._option.globalInstance
}));
} else axisAttrs.label = {
visible: !1
};
if (spec.tick && spec.tick.visible ? (axisAttrs.tick = {
visible: spec.tick.visible,
length: spec.tick.tickSize,
inside: spec.tick.inside,
alignWithLabel: spec.tick.alignWithLabel,
dataFilter: (0, vutils_1.isFunction)(spec.tick.dataFilter) ? data => spec.tick.dataFilter(data, {
vchart: this._option.globalInstance
}) : void 0
}, spec.tick.style && (axisAttrs.tick.style = (0, vutils_1.isFunction)(spec.tick.style) ? (value, index, datum, data) => {
var _a;
const style = spec.tick.style(value, index, datum, data);
return (0, style_1.transformToGraphic)((0, vutils_extension_1.mergeSpec)({}, null === (_a = this._theme.tick) || void 0 === _a ? void 0 : _a.style, style));
} : (0, style_1.transformToGraphic)(spec.tick.style)), spec.tick.state && (axisAttrs.tick.state = (0,
style_1.transformStateStyle)(spec.tick.state))) : axisAttrs.tick = {
visible: !1
}, spec.subTick && spec.subTick.visible ? (axisAttrs.subTick = {
visible: spec.subTick.visible,
length: spec.subTick.tickSize,
inside: spec.subTick.inside,
count: spec.subTick.tickCount
}, spec.subTick.style && (axisAttrs.subTick.style = (0, vutils_1.isFunction)(spec.subTick.style) ? (value, index, datum, data) => {
var _a;
const style = spec.subTick.style(value, index, datum, data);
return (0, style_1.transformToGraphic)((0, vutils_extension_1.mergeSpec)({}, null === (_a = this._theme.subTick) || void 0 === _a ? void 0 : _a.style, style));
} : (0, style_1.transformToGraphic)(spec.subTick.style)), spec.subTick.state && (axisAttrs.subTick.state = (0,
style_1.transformStateStyle)(spec.subTick.state))) : axisAttrs.subTick = {
visible: !1
}, spec.title && spec.title.visible) {
const _a = spec.title, {autoRotate: autoRotate, angle: angle, style: titleStyle = {}, background: titleBackgroundSpec, state: titleState, shape: titleShapeSpec} = _a, restTitleAttrs = __rest(_a, [ "autoRotate", "angle", "style", "background", "state", "shape" ]);
let titleTextStyle, titleAngle = angle;
"left" !== spec.orient && "right" !== spec.orient || autoRotate && (0, vutils_1.isNil)(titleAngle) && (titleAngle = "left" === spec.orient ? -90 : 90,
titleTextStyle = util_1.DEFAULT_TITLE_STYLE[spec.orient]), axisAttrs.title = Object.assign(Object.assign({}, restTitleAttrs), {
autoRotate: !1,
angle: titleAngle ? (0, vutils_1.degreeToRadian)(titleAngle) : null,
textStyle: (0, vutils_extension_1.mergeSpec)({}, titleTextStyle, (0, style_1.transformToGraphic)(titleStyle)),
pickable: !1 !== titleStyle.pickable,
childrenPickable: !1 !== titleStyle.pickable,
state: {}
}), titleShapeSpec && titleShapeSpec.visible ? (axisAttrs.title.shape = Object.assign(Object.assign({}, titleShapeSpec), {
style: (0, style_1.transformToGraphic)(titleShapeSpec.style)
}), titleShapeSpec.state && (axisAttrs.title.state.shape = (0, style_1.transformStateStyle)(titleShapeSpec.state))) : axisAttrs.title.shape = {
visible: !1
}, titleBackgroundSpec && titleBackgroundSpec.visible ? (axisAttrs.title.background = Object.assign(Object.assign({}, titleBackgroundSpec), {
style: (0, style_1.transformToGraphic)(titleBackgroundSpec.style)
}), titleBackgroundSpec.state && (axisAttrs.title.state.background = (0, style_1.transformStateStyle)(titleBackgroundSpec.state))) : axisAttrs.title.background = {
visible: !1
}, titleState && (axisAttrs.title.state.text = (0, style_1.transformStateStyle)(titleState));
} else axisAttrs.title = {
visible: !1
};
return spec.background && spec.background.visible ? (axisAttrs.panel = {
visible: !0
}, spec.background.style && (axisAttrs.panel.style = (0, style_1.transformToGraphic)(spec.background.style)),
spec.background.state && (axisAttrs.panel.state = (0, style_1.transformStateStyle)(spec.background.state))) : axisAttrs.panel = {
visible: !1
}, axisAttrs;
}
_getGridAttributes() {
const spec = this._spec;
return {
alternateColor: (0, transform_1.transformFunctionAttribute)(spec.grid.alternateColor),
alignWithLabel: spec.grid.alignWithLabel,
style: (0, vutils_1.isFunction)(spec.grid.style) ? (datum, index) => {
var _a, _b;
const style = spec.grid.style(null === (_a = datum.datum) || void 0 === _a ? void 0 : _a.rawValue, index, datum.datum);
return (0, style_1.transformToGraphic)((0, vutils_extension_1.mergeSpec)({}, null === (_b = this._theme.grid) || void 0 === _b ? void 0 : _b.style, style));
} : (0, style_1.transformToGraphic)(spec.grid.style),
subGrid: !1 === spec.subGrid.visible ? {
visible: !1
} : {
type: "line",
visible: spec.subGrid.visible,
alternateColor: (0, transform_1.transformFunctionAttribute)(spec.subGrid.alternateColor),
style: (0, style_1.transformToGraphic)(spec.subGrid.style)
}
};
}
_getLabelFormatMethod() {
const {formatMethod: formatMethod, formatter: formatter} = this._spec.label, {formatFunc: formatFunc} = (0,
util_2.getFormatFunction)(formatMethod, formatter);
return formatFunc ? (value, datum, index) => formatFunc(datum.rawValue, datum, formatter) : null;
}
_initTickDataSet(options, index = 0) {
(0, register_1.registerDataSetInstanceParser)(this._option.dataSet, "scale", scale_1.scaleParser);
const name = this.registerTicksTransform();
return new vdataset_1.DataView(this._option.dataSet, {
name: `${this.type}_${this.id}_ticks_${index}`
}).parse(this._scales[index], {
type: "scale"
}).transform({
type: name,
options: options
}, !1);
}
_tickTransformOption() {
const tick = this._tick || {}, label = this._spec.label || {}, {tickCount: tickCount, forceTickCount: forceTickCount, tickStep: tickStep, tickMode: tickMode} = tick, {style: labelStyle, formatMethod: labelFormatter, minGap: labelGap} = label;
return {
sampling: !1 !== this._spec.sampling,
tickCount: tickCount,
forceTickCount: forceTickCount,
tickStep: tickStep,
tickMode: tickMode,
axisOrientType: this._orient,
coordinateType: this._coordinateType,
labelStyle: labelStyle,
labelFormatter: labelFormatter,
labelGap: labelGap
};
}
addTransformToTickData(options, execute) {
this._tickData.forEach((tickData => {
var _a;
null === (_a = null == tickData ? void 0 : tickData.getDataView()) || void 0 === _a || _a.transform(options, execute);
}));
}
dataToPosition(values) {
return this._scale.scale(values);
}
getDatum(childGraphic) {
var _a;
return childGraphic && childGraphic.name === vrender_components_1.AXIS_ELEMENT_NAME.label ? childGraphic.data : this._axisMark ? null === (_a = this._axisMark.getComponent()) || void 0 === _a ? void 0 : _a.attribute.items : void 0;
}
scaleRangeFactor(_, slience, clear) {
return this._onTickDataChange(this.getTickData()), this.getScale().rangeFactor(_, slience, clear);
}
scaleRangeFactorEnd(_, slience, clear) {
return this._onTickDataChange(this.getTickData()), this.getScale().rangeFactorEnd(_, slience);
}
scaleRangeFactorStart(_, slience, clear) {
return this._onTickDataChange(this.getTickData()), this.getScale().rangeFactorStart(_, slience);
}
}
exports.AxisComponent = AxisComponent, AxisComponent.specKey = "axes";
const registerAxis = () => {
(0, component_1.registerComponentMark)(), factory_1.Factory.registerAnimation("axis", (() => ({
appear: {
type: "fadeIn"
},
enter: {
type: "fadeIn"
},
update: {
type: "update"
},
exit: {
type: "fadeOut"
}
})));
};
exports.registerAxis = registerAxis;
//# sourceMappingURL=base-axis.js.map