@visactor/vchart
Version:
charts lib based @visactor/VGrammar
181 lines (168 loc) • 10.3 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 { array, 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";
import { markLine } from "../../../theme/builtin/common/component/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;
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, limitRect: limitRect} = updateAttrs, joinPoints = getInsertPoints(points[0], points[1], connectDirection, expandDistanceValue);
let labelPositionAttrs;
labelPositionAttrs = multiSegment && isValid(mainSegmentIndex) ? {
position: "middle",
autoRotate: !1
} : Object.assign({
position: "start",
autoRotate: !1
}, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue));
const markerComponentAttr = null !== (_b = null === (_a = this._markerComponent) || void 0 === _a ? void 0 : _a.attribute) && void 0 !== _b ? _b : {}, prevLabelAttrs = array(markerComponentAttr.label), updateLabels = array(updateAttrs.label), labelsInSpec = array(this._spec.label);
null === (_c = this._markerComponent) || void 0 === _c || _c.setAttributes({
points: multiSegment ? [ [ joinPoints[0], joinPoints[1] ], [ joinPoints[1], joinPoints[2] ], [ joinPoints[2], joinPoints[3] ] ] : joinPoints,
label: updateLabels.map(((labelItem, index) => {
var _a, _b, _c, _d;
let refX = 0, refY = 0, dx = null !== (_a = labelPositionAttrs.dx) && void 0 !== _a ? _a : 0, dy = null !== (_b = labelPositionAttrs.dy) && void 0 !== _b ? _b : 0;
const labelSpec = null !== (_c = labelsInSpec[index]) && void 0 !== _c ? _c : labelsInSpec[0];
return isValidNumber(null == labelSpec ? void 0 : labelSpec.refX) && (refX += labelSpec.refX),
isValidNumber(null == labelSpec ? void 0 : labelSpec.refY) && (refY += labelSpec.refY),
isValidNumber(null == labelSpec ? void 0 : labelSpec.dx) && (dx += labelSpec.dx),
isValidNumber(null == labelSpec ? void 0 : labelSpec.dy) && (dy += labelSpec.dy),
Object.assign(Object.assign(Object.assign({}, labelItem), labelPositionAttrs), {
refX: refX,
refY: refY,
dx: dx,
dy: dy,
textStyle: Object.assign(Object.assign({}, null === (_d = prevLabelAttrs[index]) || void 0 === _d ? void 0 : _d.textStyle), {
textAlign: "center",
textBaseline: "middle"
})
});
})),
limitRect: limitRect,
multiSegment: multiSegment,
mainSegmentIndex: mainSegmentIndex,
dx: this._layoutOffsetX,
dy: this._layoutOffsetY
});
} else null === (_d = this._markerComponent) || void 0 === _d || _d.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 && isValid(spec.process.x) && (options = [ this._processSpecByDims([ {
dim: "x",
specValue: spec.process.x
} ]) ], needAggr = !0), spec.process && isValid(spec.process.y) && (options = options = [ this._processSpecByDims([ {
dim: "y",
specValue: spec.process.y
} ]) ], needAggr = !0), spec.process && isValid(spec.process.xy)) {
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",
CartesianMarkLine.builtInTheme = {
markLine: markLine
};
export const registerMarkLine = () => {
Factory.registerComponent(CartesianMarkLine.type, CartesianMarkLine), registerMarkLineAnimate();
};
//# sourceMappingURL=cartesian-mark-line.js.map