@visactor/vtable
Version:
canvas table width high performance
191 lines (184 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.CartesianAxis = void 0;
const vutils_1 = require("@visactor/vutils"), vrender_1 = require("./../../vrender"), get_axis_attributes_1 = require("./get-axis-attributes"), orient_1 = require("../util/orient"), band_scale_1 = require("./band-scale"), register_1 = require("../util/register"), vdataset_1 = require("@visactor/vdataset"), vrender_2 = require("./../../vrender"), linear_scale_1 = require("./linear-scale"), label_overlap_1 = require("./label-overlap"), DEFAULT_BAND_INNER_PADDING = .1, DEFAULT_BAND_OUTER_PADDING = .3, scaleParser = scale => scale;
class CartesianAxis {
constructor(option, width, height, padding, table) {
var _a, _b, _c;
if (this.x = 0, this.y = 0, this.padding = padding, this.table = table, this.orient = null !== (_a = option.orient) && void 0 !== _a ? _a : "left",
this.type = null !== (_b = option.type) && void 0 !== _b ? _b : "band", this.option = (0,
vutils_1.merge)({}, (0, get_axis_attributes_1.getCommonAxis)(option.__vtableChartTheme), getTableAxisTheme(this.orient, table.theme), getChartSpecAxisTheme(this.orient, this.type, option.__vtableChartTheme), option),
"left" === this.orient || "right" === this.orient) {
const innerOffsetTop = 0, innerOffsetBottom = 0;
this.width = width, this.height = height - padding[0] - padding[2] - innerOffsetBottom,
this.y = padding[0] + innerOffsetTop;
} else if ("top" === this.orient || "bottom" === this.orient) {
const innerOffsetLeft = 0, innerOffsetRight = 0;
this.width = width - padding[1] - padding[3] - innerOffsetRight, this.height = height,
this.x = padding[3] + innerOffsetLeft;
}
this.visible = null === (_c = option.visible) || void 0 === _c || _c, this.inverse = "inverse" in option && !!option.inverse,
"band" === option.type && (this.data = option.domain), this.initScale(), this.initData(),
this.createComponent(), this.initEvent();
}
initScale() {
const option = this.option;
"band" === this.type || "point" === this.type ? (this.scale = new band_scale_1.BandAxisScale,
this.scale.bandPadding = option.bandPadding, this.scale.paddingInner = option.paddingInner,
this.scale.paddingOuter = option.paddingOuter, this.scale.calcScales(.1, .3), this.scale.updateScaleDomain(this.data),
this.updateScaleRange()) : "linear" !== this.type && "time" !== this.type && "log" !== this.type && "symlog" !== this.type || (this.scale = new linear_scale_1.LinearAxisScale(this.type),
this.scale.setExtraAttrFromSpec(option.nice, option.zero, option.range, option.expand, option.base, option.constant),
this.scale.transformScaleDomain(), this.scale.updateScaleDomain(), this.updateScaleRange());
}
initData() {
this.table._vDataSet || (this.table._vDataSet = new vdataset_1.DataSet), (0, register_1.registerDataSetInstanceParser)(this.table._vDataSet, "scale", scaleParser),
(0, register_1.registerDataSetInstanceTransform)(this.table._vDataSet, "ticks", vrender_2.ticks);
const label = this.option.label || {}, tick = this.option.tick || {}, tickData = new vdataset_1.DataView(this.table._vDataSet).parse(this.scale._scale, {
type: "scale"
}).transform({
type: "ticks",
options: {
sampling: !1 !== this.option.sampling,
tickCount: tick.tickCount,
forceTickCount: tick.forceTickCount,
tickStep: tick.tickStep,
tickMode: tick.tickMode,
noDecimals: tick.noDecimals,
axisOrientType: this.orient,
coordinateType: "cartesian",
labelStyle: label.style,
labelFormatter: label.formatMethod,
labelGap: label.minGap,
labelLastVisible: label.lastVisible,
labelFlush: label.flush
}
}, !1);
this.tickData = tickData, this.computeData();
}
computeData() {
this.tickData.reRunAllTransform();
}
initEvent() {}
createComponent() {
const axisStylrAttrs = (0, get_axis_attributes_1.getAxisAttributes)(this.option), attrs = this.getUpdateAttribute();
attrs.verticalFactor = "top" === this.orient || "right" === this.orient ? -1 : 1,
this.component = new vrender_1.LineAxis((0, vutils_1.merge)({
disableTriggerEvent: this.table.options.disableInteraction
}, axisStylrAttrs, attrs)), this.component.setAttributes(this.setLayoutStartPosition({
x: this.x,
y: this.y
})), this.component.originAxis = this;
}
resize(width, height) {
this.width = width - ("top" === this.orient || "bottom" === this.orient ? this.padding[1] + this.padding[3] : 0),
this.height = height - ("left" === this.orient || "right" === this.orient ? this.padding[2] + this.padding[0] : 0),
this.updateScaleRange(), this.computeData();
const axisStylrAttrs = (0, get_axis_attributes_1.getAxisAttributes)(this.option), attrs = this.getUpdateAttribute();
attrs.verticalFactor = "top" === this.orient || "right" === this.orient ? -1 : 1,
this.component.setAttributes((0, vutils_1.merge)({}, axisStylrAttrs, attrs)), this.component.setAttributes(this.setLayoutStartPosition({
x: this.x,
y: this.y
})), this.overlap();
}
overlap() {
(0, label_overlap_1.doOverlap)(this.component, this);
}
getLayoutRect() {
return {
width: this.width,
height: this.height
};
}
getUpdateAttribute() {
const regionHeight = this.table.tableNoFrameHeight, regionWidth = this.table.tableNoFrameWidth, {width: width, height: height} = this.getLayoutRect(), isX = (0,
orient_1.isXAxis)(this.orient), isY = (0, orient_1.isYAxis)(this.orient);
let end = {
x: 0,
y: 0
}, gridLength = 0, axisLength = 0;
isX ? (end = {
x: width,
y: 0
}, gridLength = regionHeight, axisLength = width) : isY && (end = {
x: 0,
y: height
}, gridLength = regionWidth, axisLength = height);
const size = "top" === this.orient || "bottom" === this.orient ? height : width;
return {
start: {
x: 0,
y: 0
},
end: end,
title: {
text: this.option.title.text,
maxWidth: this._getTitleLimit(isX)
},
items: this.getLabelItems(axisLength),
verticalLimitSize: size,
verticalMinSize: size
};
}
getLabelItems(length) {
return [ this.tickData.latestData.map((obj => ({
id: obj.value,
label: obj.value,
value: 0 === length ? 0 : this.scale.dataToPosition([ obj.value ]) / length,
rawValue: obj.value
}))).filter((entry => entry.value >= 0 && entry.value <= 1)) ];
}
updateScaleRange() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const right = null !== (_b = null === (_a = this.option.innerOffset) || void 0 === _a ? void 0 : _a.right) && void 0 !== _b ? _b : 0, left = null !== (_d = null === (_c = this.option.innerOffset) || void 0 === _c ? void 0 : _c.left) && void 0 !== _d ? _d : 0, top = null !== (_f = null === (_e = this.option.innerOffset) || void 0 === _e ? void 0 : _e.top) && void 0 !== _f ? _f : 0, bottom = null !== (_h = null === (_g = this.option.innerOffset) || void 0 === _g ? void 0 : _g.bottom) && void 0 !== _h ? _h : 0, {width: width, height: height} = this.getLayoutRect(), inverse = this.option.inverse || !1;
let newRange = [ 0, 0 ];
(0, orient_1.isXAxis)(this.orient) ? (0, vutils_1.isValidNumber)(width) && (newRange = inverse ? [ width - right, left ] : [ left, width - right ]) : (0,
vutils_1.isValidNumber)(height) && (newRange = inverse ? [ top, height - bottom ] : [ height - bottom, top ]),
this.scale.updateRange(newRange);
}
setLayoutStartPosition(pos) {
let {x: x, y: y} = pos;
return (0, vutils_1.isValidNumber)(x) && (x += Number("left" === this.orient) * this.getLayoutRect().width),
(0, vutils_1.isValidNumber)(y) && (y += Number("top" === this.orient) * this.getLayoutRect().height),
{
x: x,
y: y
};
}
_getTitleLimit(isX) {
var _a, _b, _c;
if (this.option.title.visible && (0, vutils_1.isNil)(null === (_a = this.option.title.style) || void 0 === _a ? void 0 : _a.maxLineWidth)) {
let angle = (null === (_b = this.option.title.style) || void 0 === _b ? void 0 : _b.angle) || 0;
if ((null === (_c = this.option.title) || void 0 === _c ? void 0 : _c.autoRotate) && (0,
vutils_1.isNil)(this.option.title.angle) && (angle = "left" === this.option.orient ? -90 : 90),
isX) {
const width = this.getLayoutRect().width, cosValue = Math.abs(Math.cos((0, vutils_1.degreeToRadian)(angle)));
return cosValue < 1e-6 ? 1 / 0 : width / cosValue;
}
const height = this.getLayoutRect().height, sinValue = Math.abs(Math.sin((0, vutils_1.degreeToRadian)(angle)));
return sinValue < 1e-6 ? 1 / 0 : height / sinValue;
}
return null;
}
getScale() {
return this.scale._scale;
}
getDomainSpec() {
return this.scale.domain;
}
}
function getTableAxisTheme(orient, theme) {
let directionStyle;
return "left" === orient ? directionStyle = theme.axisStyle.leftAxisStyle : "right" === orient ? directionStyle = theme.axisStyle.rightAxisStyle : "top" === orient ? directionStyle = theme.axisStyle.topAxisStyle : "bottom" === orient && (directionStyle = theme.axisStyle.bottomAxisStyle),
(0, vutils_1.merge)({}, theme.axisStyle.defaultAxisStyle, directionStyle);
}
function getChartSpecAxisTheme(orient, type, chartSpecTheme) {
if (!chartSpecTheme) return {};
const axisTheme = chartSpecTheme.axis;
let axisTypeTheme, axisOrientTheme;
return "linear" === type || "log" === type || "symlog" === type ? axisTypeTheme = chartSpecTheme.axisLinear : "band" === type && (axisTypeTheme = chartSpecTheme.axisBand),
"top" === orient || "bottom" === orient ? axisOrientTheme = chartSpecTheme.axisX : "left" !== orient && "right" !== orient || (axisOrientTheme = chartSpecTheme.axisY),
(0, vutils_1.merge)({}, axisTheme, axisTypeTheme, axisOrientTheme);
}
exports.CartesianAxis = CartesianAxis;
//# sourceMappingURL=axis.js.map