@grafana/ui
Version:
Grafana Components Library
212 lines (207 loc) • 7.18 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var measureText = require('../../../utils/measureText.cjs');
var types = require('../types.cjs');
var UPlotScaleBuilder = require('./UPlotScaleBuilder.cjs');
;
const UPLOT_AXIS_FONT_SIZE = 12;
const Y_TICK_SPACING_PANEL_HEIGHT = 150;
const Y_TICK_SPACING_NORMAL = 30;
const Y_TICK_SPACING_SMALL = 15;
const X_TICK_SPACING_NORMAL = 40;
const X_TICK_VALUE_GAP = 18;
const labelPad = 8;
class UPlotAxisBuilder extends types.PlotConfigBuilder {
merge(props) {
this.props.size = UPlotScaleBuilder.optMinMax("max", this.props.size, props.size);
if (!this.props.label) {
this.props.label = props.label;
}
if (this.props.placement === schema.AxisPlacement.Auto) {
this.props.placement = props.placement;
}
}
getConfig() {
let {
scaleKey,
label,
show = true,
placement = schema.AxisPlacement.Auto,
grid = { show: true },
ticks,
space,
filter,
gap = 5,
formatValue,
splits,
values,
incrs,
isTime,
timeZone,
theme,
tickLabelRotation,
size,
color,
border,
decimals,
distr = schema.ScaleDistribution.Linear
} = this.props;
const font = `${UPLOT_AXIS_FONT_SIZE}px ${theme.typography.fontFamily}`;
const gridColor = theme.isDark ? "rgba(240, 250, 255, 0.09)" : "rgba(0, 10, 23, 0.09)";
if (data.isBooleanUnit(scaleKey)) {
splits = [0, 1];
}
if (decimals === 0 && distr === schema.ScaleDistribution.Linear) {
filter = (u, splits2) => splits2.map((v) => Number.isInteger(v) ? v : null);
}
let config = {
scale: scaleKey,
show,
stroke: color != null ? color : theme.colors.text.primary,
side: getUPlotSideFromAxis(placement),
font,
size: size != null ? size : (self, values2, axisIdx) => {
return calculateAxisSize(self, values2, axisIdx);
},
rotate: tickLabelRotation,
gap,
labelGap: 0,
grid: {
show: grid.show,
stroke: gridColor,
width: 1 / devicePixelRatio
},
ticks: Object.assign(
{
show: true,
stroke: (border == null ? void 0 : border.show) ? color != null ? color : theme.colors.text.primary : gridColor,
width: 1 / devicePixelRatio,
size: 4
},
ticks
),
splits,
values,
space: space != null ? space : (self, axisIdx, scaleMin, scaleMax, plotDim) => {
return calculateSpace(self, axisIdx, scaleMin, scaleMax, plotDim, formatValue);
},
filter,
incrs
};
if (border == null ? void 0 : border.show) {
config.border = {
stroke: color != null ? color : theme.colors.text.primary,
width: 1 / devicePixelRatio,
...border
};
}
if (label != null && label.length > 0) {
config.label = label;
config.labelSize = UPLOT_AXIS_FONT_SIZE + labelPad;
config.labelFont = font;
config.labelGap = labelPad;
}
if (values) {
config.values = values;
} else if (formatValue) {
config.values = (u, splits2, axisIdx, tickSpace, tickIncr) => {
let decimals2 = data.guessDecimals(data.roundDecimals(tickIncr, 6));
return splits2.map((v) => {
if (v == null) {
return null;
} else {
return formatValue(v, decimals2 > 0 ? decimals2 : void 0);
}
});
};
} else if (isTime) {
config.values = formatTime;
}
config.timeZone = timeZone;
return config;
}
}
const timeUnitSize = {
second: 1e3,
minute: 60 * 1e3,
hour: 60 * 60 * 1e3,
day: 24 * 60 * 60 * 1e3,
month: 28 * 24 * 60 * 60 * 1e3,
year: 365 * 24 * 60 * 60 * 1e3
};
function formatTime(self, splits, axisIdx, foundSpace, foundIncr) {
var _a, _b;
const axis = self.axes[axisIdx];
const timeZone = "timeZone" in axis && typeof axis.timeZone === "string" ? axis.timeZone : void 0;
const scale = self.scales.x;
const range = ((_a = scale == null ? void 0 : scale.max) != null ? _a : 0) - ((_b = scale == null ? void 0 : scale.min) != null ? _b : 0);
const yearRoundedToDay = Math.round(timeUnitSize.year / timeUnitSize.day) * timeUnitSize.day;
const incrementRoundedToDay = Math.round(foundIncr / timeUnitSize.day) * timeUnitSize.day;
let format = data.systemDateFormats.interval.year;
if (foundIncr < timeUnitSize.second) {
format = data.systemDateFormats.interval.millisecond;
} else if (foundIncr <= timeUnitSize.minute) {
format = data.systemDateFormats.interval.second;
} else if (range <= timeUnitSize.day) {
format = data.systemDateFormats.interval.minute;
} else if (foundIncr <= timeUnitSize.day) {
format = data.systemDateFormats.interval.hour;
} else if (range < timeUnitSize.year) {
format = data.systemDateFormats.interval.day;
} else if (incrementRoundedToDay === yearRoundedToDay) {
format = data.systemDateFormats.interval.year;
} else if (foundIncr <= timeUnitSize.year) {
format = data.systemDateFormats.interval.month;
}
return splits.map((v) => v == null ? "" : data.dateTimeFormat(v, { format, timeZone }));
}
function calculateSpace(self, axisIdx, scaleMin, scaleMax, plotDim, formatValue) {
const axis = self.axes[axisIdx];
const scale = self.scales[axis.scale];
if (axis.side !== 2 || !scale) {
return plotDim <= Y_TICK_SPACING_PANEL_HEIGHT ? Y_TICK_SPACING_SMALL : Y_TICK_SPACING_NORMAL;
}
const maxTicks = plotDim / X_TICK_SPACING_NORMAL;
const increment = (scaleMax - scaleMin) / maxTicks;
const bigValue = Math.max(Math.abs(scaleMin), Math.abs(scaleMax));
let sample = "";
if (scale.time) {
sample = formatTime(self, [bigValue], axisIdx, X_TICK_SPACING_NORMAL, increment)[0];
} else if (formatValue != null) {
sample = formatValue(bigValue);
} else {
return X_TICK_SPACING_NORMAL;
}
const valueWidth = measureText.measureText(sample, UPLOT_AXIS_FONT_SIZE).width;
return valueWidth + X_TICK_VALUE_GAP;
}
function calculateAxisSize(self, values, axisIdx) {
const axis = self.axes[axisIdx];
let axisSize = axis.ticks.size;
if (axis.side === 2) {
axisSize += axis.gap + UPLOT_AXIS_FONT_SIZE;
} else if (values == null ? void 0 : values.length) {
let maxTextWidth = values.reduce((acc, value) => Math.max(acc, measureText.measureText(value, UPLOT_AXIS_FONT_SIZE).width), 0);
const textWidthWithLimit = Math.min(self.width * 0.4, maxTextWidth);
axisSize += axis.gap + axis.labelGap + textWidthWithLimit;
}
return Math.ceil(axisSize);
}
function getUPlotSideFromAxis(axis) {
switch (axis) {
case schema.AxisPlacement.Top:
return 0;
case schema.AxisPlacement.Right:
return 1;
case schema.AxisPlacement.Bottom:
return 2;
case schema.AxisPlacement.Left:
}
return 3;
}
exports.UPLOT_AXIS_FONT_SIZE = UPLOT_AXIS_FONT_SIZE;
exports.UPlotAxisBuilder = UPlotAxisBuilder;
exports.timeUnitSize = timeUnitSize;
//# sourceMappingURL=UPlotAxisBuilder.cjs.map