IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-07 22:53:56 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for heatmap panel in Grafana 5 (#10973)

Browse Source 
* heatmap: fix chart height

* heatmap: fix font size

* heatmap: fix legend size

* heatmap: fix rendering tests
This commit is contained in:
Alexander Zobnin 2018-02-21 11:16:56 +03:00 committed by Torkel Ödegaard
parent 3964d6b797
commit ceb8223ddf
4 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/plugins/panel/heatmap/color_legend.ts
View File

@ -8,13 +8,18 @@ import { getColorScale, getOpacityScale } from './color_scale';
let module = angular.module('grafana.directives');
const LEGEND_HEIGHT_PX = 6;
const LEGEND_WIDTH_PX = 100;
const LEGEND_TICK_SIZE = 0;
const LEGEND_VALUE_MARGIN = 0;
/**
* Color legend for heatmap editor.
*/
module.directive('colorLegend', function() {
return {
restrict: 'E',
template: '<div class="heatmap-color-legend"><svg width="16.8rem" height="24px"></svg></div>',
template: '<div class="heatmap-color-legend"><svg width="16.5rem" height="24px"></svg></div>',
link: function(scope, elem, attrs) {
let ctrl = scope.ctrl;
let panel = scope.ctrl.panel;
@ -50,7 +55,7 @@ module.directive('colorLegend', function() {
module.directive('heatmapLegend', function() {
return {
restrict: 'E',
template: '<div class="heatmap-color-legend"><svg width="100px" height="14px"></svg></div>',
template: `<div class="heatmap-color-legend"><svg width="${LEGEND_WIDTH_PX}px" height="${LEGEND_HEIGHT_PX}px"></svg></div>`,
link: function(scope, elem, attrs) {
let ctrl = scope.ctrl;
let panel = scope.ctrl.panel;
@ -163,10 +168,10 @@ function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minVal
let xAxis = d3
.axisBottom(legendValueScale)
.tickValues(ticks)
.tickSize(2);
.tickSize(LEGEND_TICK_SIZE);
let colorRect = legendElem.find(':first-child');
let posY = getSvgElemHeight(legendElem) + 2;
let posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
let posX = getSvgElemX(colorRect);
d3

3
public/app/plugins/panel/heatmap/rendering.ts
View File

@ -66,8 +66,7 @@ export default function link(scope, elem, attrs, ctrl) {
height = parseInt(height.replace('px', ''), 10);
}
height -= 5; // padding
height -= panel.title ? 24 : 9; // subtract panel title bar
height -= panel.legend.show ? 28 : 11; // bottom padding and space for legend
$heatmap.css('height', height + 'px');

3
public/app/plugins/panel/heatmap/specs/renderer_specs.ts
View File

@ -51,6 +51,9 @@ describe('grafanaHeatmap', function() {
colorScheme: 'interpolateOranges',
fillBackground: false,
},
legend: {
show: false,
},
xBucketSize: 1000,
xBucketNumber: null,
yBucketSize: 1,

10
public/sass/components/_panel_heatmap.scss
View File

@ -1,3 +1,5 @@
$font-size-heatmap-tick: 11px;
.heatmap-canvas-wrapper {
// position: relative;
cursor: crosshair;
@ -10,7 +12,7 @@
text {
fill: $text-color;
color: $text-color;
font-size: $font-size-sm;
font-size: $font-size-heatmap-tick;
}
line {
@ -56,12 +58,12 @@
.heatmap-legend-wrapper {
@include clearfix();
margin: 0 $spacer;
padding-top: 10px;
padding-top: 4px;
svg {
width: 100%;
max-width: 300px;
height: 33px;
height: 18px;
float: left;
white-space: nowrap;
padding-left: 10px;
@ -75,7 +77,7 @@
text {
fill: $text-color;
color: $text-color;
font-size: $font-size-sm;
font-size: $font-size-heatmap-tick;
}
line {