@visactor/vchart
Version:
charts lib based @visactor/VGrammar
171 lines (159 loc) • 9.8 kB
JavaScript
import { DataView } from "@visactor/vdataset";
import { ComponentTypeEnum } from "../../interface/type";
import { cartesianCoordinateLayout, positionLayout, xyLayout, getMarkLineProcessInfo } from "../utils";
import { MarkLine as MarkLineComponent, registerMarkLineAnimate } from "@visactor/vrender-components";
import { isValid, isValidNumber } from "@visactor/vutils";
import { getInsertPoints, getTextOffset } from "./util";
import { Factory } from "../../../core/factory";
import { isPercent } from "../../../util";
import { BaseMarkLine } from "./base-mark-line";
export class CartesianMarkLine extends BaseMarkLine {
constructor() {
super(...arguments), this.type = ComponentTypeEnum.markLine, this.name = ComponentTypeEnum.markLine,
this.coordinateType = "cartesian";
}
_newMarkLineComponent(attr) {
return new MarkLineComponent(attr);
}
_computePointsAttr() {
var _a;
const spec = this._spec, data = this._markerData, startRelativeSeries = this._startRelativeSeries, endRelativeSeries = this._endRelativeSeries, relativeSeries = this._relativeSeries, isValidCoordinates = isValid(spec.coordinates), isValidProcess = isValid(spec.process), isValidProcessX = isValidProcess && isValid(spec.process.x), isValidProcessY = isValidProcess && isValid(spec.process.y), isPositionLayout = isValid(spec.positions), autoRange = null !== (_a = spec.autoRange) && void 0 !== _a && _a, {doXProcess: doXProcess, doYProcess: doYProcess, doXYY1Process: doXYY1Process, doYXX1Process: doYXX1Process, doXYProcess: doXYProcess, doCoordinatesProcess: doCoordinatesProcess} = getMarkLineProcessInfo(spec);
let points = [];
if (doXProcess || doXYY1Process || doYProcess || doYXX1Process || doXYProcess || isValidCoordinates && isValidProcessX || isValidCoordinates && isValidProcessY) {
const xyPoints = xyLayout(data, startRelativeSeries, endRelativeSeries, relativeSeries, autoRange);
points = 1 === xyPoints.length ? xyPoints[0] : xyPoints.map((point => point[0]));
} else doCoordinatesProcess ? points = cartesianCoordinateLayout(data, relativeSeries, autoRange, spec.coordinatesOffset) : isPositionLayout && (points = positionLayout(spec.positions, relativeSeries, spec.regionRelative));
return {
points: points
};
}
_markerLayout() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const updateAttrs = this._getUpdateMarkerAttrs();
if ("type-step" === this._spec.type) {
const startRelativeSeries = this._startRelativeSeries, endRelativeSeries = this._endRelativeSeries, {multiSegment: multiSegment, mainSegmentIndex: mainSegmentIndex} = this._spec.line || {}, {connectDirection: connectDirection, expandDistance: expandDistance = 0} = this._spec;
let expandDistanceValue;
if (isPercent(expandDistance)) {
const regionStart = startRelativeSeries.getRegion(), regionStartLayoutStartPoint = regionStart.getLayoutStartPoint(), regionEnd = endRelativeSeries.getRegion(), regionEndLayoutStartPoint = regionEnd.getLayoutStartPoint();
if ("bottom" === connectDirection || "top" === connectDirection) {
const regionHeight = Math.abs(Math.min(regionStartLayoutStartPoint.y, regionEndLayoutStartPoint.y) - Math.max(regionStartLayoutStartPoint.y + regionStart.getLayoutRect().height, regionEndLayoutStartPoint.y + regionEnd.getLayoutRect().height));
expandDistanceValue = Number(expandDistance.substring(0, expandDistance.length - 1)) * regionHeight / 100;
} else {
const regionWidth = Math.abs(Math.min(regionStartLayoutStartPoint.x, regionEndLayoutStartPoint.x) - Math.max(regionStartLayoutStartPoint.x + regionStart.getLayoutRect().width, regionEndLayoutStartPoint.x + regionEnd.getLayoutRect().width));
expandDistanceValue = Number(expandDistance.substring(0, expandDistance.length - 1)) * regionWidth / 100;
}
} else expandDistanceValue = expandDistance;
const {points: points, label: label, limitRect: limitRect} = updateAttrs, joinPoints = getInsertPoints(points[0], points[1], connectDirection, expandDistanceValue);
let labelPositionAttrs;
labelPositionAttrs = multiSegment && isValid(mainSegmentIndex) ? {
position: "middle",
autoRotate: !1,
refX: 0,
refY: 0
} : Object.assign(Object.assign({
position: "start",
autoRotate: !1
}, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue)), {
refX: 0,
refY: 0
}), isValidNumber(null === (_a = this._spec.label) || void 0 === _a ? void 0 : _a.refX) && (labelPositionAttrs.refX += this._spec.label.refX),
isValidNumber(null === (_b = this._spec.label) || void 0 === _b ? void 0 : _b.refY) && (labelPositionAttrs.refY += this._spec.label.refY),
isValidNumber(null === (_c = this._spec.label) || void 0 === _c ? void 0 : _c.dx) && (labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + this._spec.label.dx),
isValidNumber(null === (_d = this._spec.label) || void 0 === _d ? void 0 : _d.dy) && (labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + this._spec.label.dy);
const markerComponentAttr = null !== (_f = null === (_e = this._markerComponent) || void 0 === _e ? void 0 : _e.attribute) && void 0 !== _f ? _f : {};
null === (_g = this._markerComponent) || void 0 === _g || _g.setAttributes({
points: multiSegment ? [ [ joinPoints[0], joinPoints[1] ], [ joinPoints[1], joinPoints[2] ], [ joinPoints[2], joinPoints[3] ] ] : joinPoints,
label: Object.assign(Object.assign(Object.assign({}, label), labelPositionAttrs), {
textStyle: Object.assign(Object.assign({}, markerComponentAttr.label.textStyle), {
textAlign: "center",
textBaseline: "middle"
})
}),
limitRect: limitRect,
multiSegment: multiSegment,
mainSegmentIndex: mainSegmentIndex,
dx: this._layoutOffsetX,
dy: this._layoutOffsetY
});
} else null === (_h = this._markerComponent) || void 0 === _h || _h.setAttributes(updateAttrs);
}
_computeOptions() {
let options, processData = this._getRelativeDataView(), needAggr = !0, needRegr = !1;
const spec = this._spec, relativeSeries = this._relativeSeries, {doXProcess: doXProcess, doYProcess: doYProcess, doXYY1Process: doXYY1Process, doYXX1Process: doYXX1Process, doXYProcess: doXYProcess, doCoordinatesProcess: doCoordinatesProcess} = getMarkLineProcessInfo(spec);
if (doXYProcess) options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.x
}, {
dim: "y",
specValue: spec.y
} ]), this._processSpecByDims([ {
dim: "x",
specValue: spec.x1
}, {
dim: "y",
specValue: spec.y1
} ]) ]; else if (doXProcess) options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.x
} ]) ]; else if (doYProcess) options = [ this._processSpecByDims([ {
dim: "y",
specValue: spec.y
} ]) ]; else if (doXYY1Process) options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.x
}, {
dim: "y",
specValue: spec.y
} ]), this._processSpecByDims([ {
dim: "x",
specValue: spec.x
}, {
dim: "y",
specValue: spec.y1
} ]) ]; else if (doYXX1Process) options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.x
}, {
dim: "y",
specValue: spec.y
} ]), this._processSpecByDims([ {
dim: "x",
specValue: spec.x1
}, {
dim: "y",
specValue: spec.y
} ]) ]; else if (doCoordinatesProcess) {
if (options = this._processSpecCoo(spec), needAggr = !1, processData = new DataView(this._option.dataSet, {
name: `${this.type}_${this.id}_data`
}).parse([ relativeSeries.getViewData() ], {
type: "dataview"
}).transform({
type: "markerAggregation",
options: options
}), spec.process && "x" in spec.process && (options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.process.x
} ]) ], needAggr = !0), spec.process && "y" in spec.process && (options = options = [ this._processSpecByDims([ {
dim: "y",
specValue: spec.process.y
} ]) ], needAggr = !0), spec.process && "xy" in spec.process) {
const {xField: xField, yField: yField} = relativeSeries.getSpec();
options = {
fieldX: xField,
fieldY: yField
}, needRegr = !0;
}
} else needAggr = !1;
return {
options: options,
needAggr: needAggr,
needRegr: needRegr,
processData: processData
};
}
}
CartesianMarkLine.type = ComponentTypeEnum.markLine, CartesianMarkLine.coordinateType = "cartesian";
export const registerMarkLine = () => {
Factory.registerComponent(CartesianMarkLine.type, CartesianMarkLine), registerMarkLineAnimate();
};
//# sourceMappingURL=cartesian-mark-line.js.map