function addLogYAxis() {
let log_base = panel.yAxis.logBase;
let {y_min, y_max} = adjustLogRange(data.heatmapStats.minLog, data.heatmapStats.max, log_base);
y_min = panel.yAxis.min && panel.yAxis.min !== '0' ? adjustLogMin(panel.yAxis.min, log_base) : y_min;
y_max = panel.yAxis.max !== null ? adjustLogMax(panel.yAxis.max, log_base) : y_max;
// Set default Y min and max if no data
if (_.isEmpty(data.buckets)) {
y_max = Math.pow(log_base, 2);
y_min = 1;
}
scope.yScale = yScale = d3.scaleLog()
.base(panel.yAxis.logBase)
.domain([y_min, y_max])
.range([chartHeight, 0]);
let domain = yScale.domain();
let tick_values = logScaleTickValues(domain, log_base);
let decimalsAuto = getPrecision(y_min);
let decimals = panel.yAxis.decimals || decimalsAuto;
// Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
let flot_tick_size = getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
let scaledDecimals = getScaledDecimals(decimals, flot_tick_size);
ctrl.decimals = decimals;
ctrl.scaledDecimals = scaledDecimals;
data.yAxis = {
min: y_min,
max: y_max,
ticks: tick_values.length
};
let yAxis = d3.axisLeft(yScale)
.tickValues(tick_values)
.tickFormat(tickValueFormatter(decimals, scaledDecimals))
.tickSizeInner(0 - width)
.tickSizeOuter(0)
.tickPadding(Y_AXIS_TICK_PADDING);
heatmap.append("g")
.attr("class", "axis axis-y")
.call(yAxis);
// Calculate Y axis width first, then move axis into visible area
let posY = margin.top;
let posX = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
heatmap.select(".axis-y").attr("transform", "translate(" + posX + "," + posY + ")");
// Set first tick as pseudo 0
if (y_min < 1) {
heatmap.select(".axis-y").select(".tick text").text("0");
}
// Remove vertical line in the right of axis labels (called domain in d3)
heatmap.select(".axis-y").select(".domain").remove();
}
function addYAxis() {
let ticks = Math.ceil(chartHeight / DEFAULT_Y_TICK_SIZE_PX);
let tick_interval = tickStep(data.heatmapStats.min, data.heatmapStats.max, ticks);
let {y_min, y_max} = wideYAxisRange(data.heatmapStats.min, data.heatmapStats.max, tick_interval);
// Rewrite min and max if it have been set explicitly
y_min = panel.yAxis.min !== null ? panel.yAxis.min : y_min;
y_max = panel.yAxis.max !== null ? panel.yAxis.max : y_max;
// Adjust ticks after Y range widening
tick_interval = tickStep(y_min, y_max, ticks);
ticks = Math.ceil((y_max - y_min) / tick_interval);
let decimalsAuto = getPrecision(tick_interval);
let decimals = panel.yAxis.decimals === null ? decimalsAuto : panel.yAxis.decimals;
// Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
let flot_tick_size = getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
let scaledDecimals = getScaledDecimals(decimals, flot_tick_size);
ctrl.decimals = decimals;
ctrl.scaledDecimals = scaledDecimals;
// Set default Y min and max if no data
if (_.isEmpty(data.buckets)) {
y_max = 1;
y_min = -1;
ticks = 3;
decimals = 1;
}
data.yAxis = {
min: y_min,
max: y_max,
ticks: ticks
};
scope.yScale = yScale = d3.scaleLinear()
.domain([y_min, y_max])
.range([chartHeight, 0]);
let yAxis = d3.axisLeft(yScale)
.ticks(ticks)
.tickFormat(tickValueFormatter(decimals, scaledDecimals))
.tickSizeInner(0 - width)
.tickSizeOuter(0)
.tickPadding(Y_AXIS_TICK_PADDING);
heatmap.append("g")
.attr("class", "axis axis-y")
.call(yAxis);
// Calculate Y axis width first, then move axis into visible area
let posY = margin.top;
let posX = getYAxisWidth(heatmap) + Y_AXIS_TICK_PADDING;
heatmap.select(".axis-y").attr("transform", "translate(" + posX + "," + posY + ")");
// Remove vertical line in the right of axis labels (called domain in d3)
heatmap.select(".axis-y").select(".domain").remove();
}
addLogYAxis() {
const log_base = this.panel.yAxis.logBase;
let { y_min, y_max } = this.adjustLogRange(this.data.heatmapStats.minLog, this.data.heatmapStats.max, log_base);
y_min =
this.panel.yAxis.min && this.panel.yAxis.min !== '0' ? this.adjustLogMin(this.panel.yAxis.min, log_base) : y_min;
y_max = this.panel.yAxis.max !== null ? this.adjustLogMax(this.panel.yAxis.max, log_base) : y_max;
// Set default Y min and max if no data
if (_.isEmpty(this.data.buckets)) {
y_max = Math.pow(log_base, 2);
y_min = 1;
}
this.scope.yScale = this.yScale = d3
.scaleLog()
.base(this.panel.yAxis.logBase)
.domain([y_min, y_max])
.range([this.chartHeight, 0]);
const domain = this.yScale.domain();
const tick_values = this.logScaleTickValues(domain, log_base);
const decimalsAuto = ticksUtils.getPrecision(y_min);
const decimals = this.panel.yAxis.decimals || decimalsAuto;
// Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
const flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
this.ctrl.decimals = decimals;
this.ctrl.scaledDecimals = scaledDecimals;
this.data.yAxis = {
min: y_min,
max: y_max,
ticks: tick_values.length,
};
const yAxis = d3
.axisLeft(this.yScale)
.tickValues(tick_values)
.tickFormat(this.tickValueFormatter(decimals, scaledDecimals))
.tickSizeInner(0 - this.width)
.tickSizeOuter(0)
.tickPadding(Y_AXIS_TICK_PADDING);
this.heatmap
.append('g')
.attr('class', 'axis axis-y')
.call(yAxis);
// Calculate Y axis width first, then move axis into visible area
const posY = this.margin.top;
const posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');
// Set first tick as pseudo 0
if (y_min < 1) {
this.heatmap
.select('.axis-y')
.select('.tick text')
.text('0');
}
// Remove vertical line in the right of axis labels (called domain in d3)
this.heatmap
.select('.axis-y')
.select('.domain')
.remove();
}
addYAxis() {
let ticks = Math.ceil(this.chartHeight / DEFAULT_Y_TICK_SIZE_PX);
let tick_interval = ticksUtils.tickStep(this.data.heatmapStats.min, this.data.heatmapStats.max, ticks);
let { y_min, y_max } = this.wideYAxisRange(this.data.heatmapStats.min, this.data.heatmapStats.max, tick_interval);
// Rewrite min and max if it have been set explicitly
y_min = this.panel.yAxis.min !== null ? this.panel.yAxis.min : y_min;
y_max = this.panel.yAxis.max !== null ? this.panel.yAxis.max : y_max;
// Adjust ticks after Y range widening
tick_interval = ticksUtils.tickStep(y_min, y_max, ticks);
ticks = Math.ceil((y_max - y_min) / tick_interval);
const decimalsAuto = ticksUtils.getPrecision(tick_interval);
let decimals = this.panel.yAxis.decimals === null ? decimalsAuto : this.panel.yAxis.decimals;
// Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
const flot_tick_size = ticksUtils.getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
const scaledDecimals = ticksUtils.getScaledDecimals(decimals, flot_tick_size);
this.ctrl.decimals = decimals;
this.ctrl.scaledDecimals = scaledDecimals;
// Set default Y min and max if no data
if (_.isEmpty(this.data.buckets)) {
y_max = 1;
y_min = -1;
ticks = 3;
decimals = 1;
}
this.data.yAxis = {
min: y_min,
max: y_max,
ticks: ticks,
};
this.scope.yScale = this.yScale = d3
.scaleLinear()
.domain([y_min, y_max])
.range([this.chartHeight, 0]);
const yAxis = d3
.axisLeft(this.yScale)
.ticks(ticks)
.tickFormat(this.tickValueFormatter(decimals, scaledDecimals))
.tickSizeInner(0 - this.width)
.tickSizeOuter(0)
.tickPadding(Y_AXIS_TICK_PADDING);
this.heatmap
.append('g')
.attr('class', 'axis axis-y')
.call(yAxis);
// Calculate Y axis width first, then move axis into visible area
const posY = this.margin.top;
const posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')');
// Remove vertical line in the right of axis labels (called domain in d3)
this.heatmap
.select('.axis-y')
.select('.domain')
.remove();
}