heatmap: fix scaledDecimals calculation (use the same method as in flot.js)

This commit is contained in:
Alexander Zobnin 2017-06-27 13:59:54 +03:00 committed by Daniel Lee
parent c12a7d7f59
commit 12644372c4
3 changed files with 45 additions and 5 deletions

View File

@ -29,3 +29,39 @@ export function tickStep(start: number, stop: number, count: number): number {
export function getScaledDecimals(decimals, tick_size) {
return decimals - Math.floor(Math.log(tick_size) / Math.LN10);
}
/**
* Calculate tick size based on min and max values, number of ticks and precision.
* @param min Axis minimum
* @param max Axis maximum
* @param noTicks Number of ticks
* @param tickDecimals Tick decimal precision
*/
export function getFlotTickSize(min: number, max: number, noTicks: number, tickDecimals: number) {
var delta = (max - min) / noTicks,
dec = -Math.floor(Math.log(delta) / Math.LN10),
maxDec = tickDecimals;
var magn = Math.pow(10, -dec),
norm = delta / magn, // norm is between 1.0 and 10.0
size;
if (norm < 1.5) {
size = 1;
} else if (norm < 3) {
size = 2;
// special case for 2.5, requires an extra decimal
if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
size = 2.5;
++dec;
}
} else if (norm < 7.5) {
size = 5;
} else {
size = 10;
}
size *= magn;
return size;
}

View File

@ -89,7 +89,7 @@ export class HeatmapTooltip {
let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat);
let decimals = this.panel.tooltipDecimals || this.panelCtrl.decimals;
let scaledDecimals = decimals - 2;
let scaledDecimals = this.panel.tooltipDecimals ? decimals - 2 : this.panelCtrl.scaledDecimals;
let valueFormatter = this.valueFormatter(decimals, scaledDecimals);
let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>

View File

@ -5,7 +5,7 @@ import $ from 'jquery';
import moment from 'moment';
import kbn from 'app/core/utils/kbn';
import {appEvents, contextSrv} from 'app/core/core';
import {tickStep, getScaledDecimals} from 'app/core/utils/ticks';
import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks';
import d3 from 'd3';
import {HeatmapTooltip} from './heatmap_tooltip';
import {convertToCards, mergeZeroBuckets} from './heatmap_data_converter';
@ -133,7 +133,9 @@ export default function link(scope, elem, attrs, ctrl) {
let decimalsAuto = getPrecision(tick_interval);
let decimals = panel.yAxis.decimals === null ? decimalsAuto : panel.yAxis.decimals;
let scaledDecimals = getScaledDecimals(decimals, tick_interval);
// 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;
@ -220,8 +222,10 @@ export default function link(scope, elem, attrs, ctrl) {
let decimalsAuto = getPrecision(y_min);
let decimals = panel.yAxis.decimals || decimalsAuto;
// TODO: calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
let scaledDecimals = decimals - 2;
// 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;