IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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'); 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. * Color legend for heatmap editor.
*/ */
module.directive('colorLegend', function() { module.directive('colorLegend', function() {
return { return {
restrict: 'E', 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) { link: function(scope, elem, attrs) {
let ctrl = scope.ctrl; let ctrl = scope.ctrl;
let panel = scope.ctrl.panel; let panel = scope.ctrl.panel;
@ -50,7 +55,7 @@ module.directive('colorLegend', function() {
module.directive('heatmapLegend', function() { module.directive('heatmapLegend', function() {
return { return {
restrict: 'E', 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) { link: function(scope, elem, attrs) {
let ctrl = scope.ctrl; let ctrl = scope.ctrl;
let panel = scope.ctrl.panel; let panel = scope.ctrl.panel;
@ -163,10 +168,10 @@ function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minVal
let xAxis = d3 let xAxis = d3
.axisBottom(legendValueScale) .axisBottom(legendValueScale)
.tickValues(ticks) .tickValues(ticks)
.tickSize(2); .tickSize(LEGEND_TICK_SIZE);
let colorRect = legendElem.find(':first-child'); let colorRect = legendElem.find(':first-child');
let posY = getSvgElemHeight(legendElem) + 2; let posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
let posX = getSvgElemX(colorRect); let posX = getSvgElemX(colorRect);
d3 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 = parseInt(height.replace('px', ''), 10);
} }
height -= 5; // padding height -= panel.legend.show ? 28 : 11; // bottom padding and space for legend
height -= panel.title ? 24 : 9; // subtract panel title bar
$heatmap.css('height', height + 'px'); $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', colorScheme: 'interpolateOranges',
fillBackground: false, fillBackground: false,
}, },
legend: {
show: false,
},
xBucketSize: 1000, xBucketSize: 1000,
xBucketNumber: null, xBucketNumber: null,
yBucketSize: 1, yBucketSize: 1,

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

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