From f77f8ebfc6685869f354b14109a4b558c7edc16c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 31 Mar 2017 17:12:50 +0200 Subject: [PATCH] heatmap: changes to color spectrum, inverted some on dark theme --- public/app/core/services/context_srv.ts | 1 + .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 55 ++++++++----------- .../heatmap/partials/display_editor.html | 28 ++++------ public/app/plugins/panel/heatmap/rendering.ts | 22 +++++--- .../panel/heatmap/specs/renderer_specs.ts | 8 ++- 5 files changed, 56 insertions(+), 58 deletions(-) diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index f3d319f11c6..ddff1093720 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -11,6 +11,7 @@ export class User { orgRole: any; timezone: string; helpFlags1: number; + lightTheme: boolean; constructor() { if (config.bootData.user) { diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 6eedbbaf9c4..2777b84e2f8 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -20,11 +20,11 @@ let panelDefaults = { cardRound: null }, color: { - mode: 'color', + mode: 'spectrum', cardColor: '#b4ff00', - colorScale: 'linear', + colorScale: 'sqrt', exponent: 0.5, - colorScheme: 'interpolateSpectral', + colorScheme: 'interpolateOranges', fillBackground: false }, dataFormat: 'timeseries', @@ -53,44 +53,37 @@ let panelDefaults = { highlightCards: true }; -let colorModes = ['opacity', 'color']; +let colorModes = ['opacity', 'spectrum']; let opacityScales = ['linear', 'sqrt']; // Schemes from d3-scale-chromatic // https://github.com/d3/d3-scale-chromatic let colorSchemes = [ // Diverging - {name: 'Spectral', value: 'interpolateSpectral'}, - {name: 'BrBG', value: 'interpolateBrBG'}, - {name: 'PRGn', value: 'interpolatePRGn'}, - {name: 'PiYG', value: 'interpolatePiYG'}, - {name: 'PuOr', value: 'interpolatePuOr'}, - {name: 'RdBu', value: 'interpolateRdBu'}, - {name: 'RdGy', value: 'interpolateRdGy'}, - {name: 'RdYlBu', value: 'interpolateRdYlBu'}, - {name: 'RdYlGn', value: 'interpolateRdYlGn'}, + {name: 'Spectral', value: 'interpolateSpectral', invert: 'always'}, + {name: 'RdYlGn', value: 'interpolateRdYlGn', invert: 'always'}, // Sequential (Single Hue) - {name: 'Blues', value: 'interpolateBlues'}, - {name: 'Greens', value: 'interpolateGreens'}, - {name: 'Greys', value: 'interpolateGreys'}, - {name: 'Oranges', value: 'interpolateOranges'}, - {name: 'Purples', value: 'interpolatePurples'}, - {name: 'Reds', value: 'interpolateReds'}, + {name: 'Blues', value: 'interpolateBlues', invert: 'dark'}, + {name: 'Greens', value: 'interpolateGreens', invert: 'dark'}, + {name: 'Greys', value: 'interpolateGreys', invert: 'dark'}, + {name: 'Oranges', value: 'interpolateOranges', invert: 'dark'}, + {name: 'Purples', value: 'interpolatePurples', invert: 'dark'}, + {name: 'Reds', value: 'interpolateReds', invert: 'dark'}, // Sequential (Multi-Hue) - {name: 'BuGn', value: 'interpolateBuGn'}, - {name: 'BuPu', value: 'interpolateBuPu'}, - {name: 'GnBu', value: 'interpolateGnBu'}, - {name: 'OrRd', value: 'interpolateOrRd'}, - {name: 'PuBuGn', value: 'interpolatePuBuGn'}, - {name: 'PuBu', value: 'interpolatePuBu'}, - {name: 'PuRd', value: 'interpolatePuRd'}, - {name: 'RdPu', value: 'interpolateRdPu'}, - {name: 'YlGnBu', value: 'interpolateYlGnBu'}, - {name: 'YlGn', value: 'interpolateYlGn'}, - {name: 'YlOrBr', value: 'interpolateYlOrBr'}, - {name: 'YlOrRd', value: 'interpolateYlOrRd'} + {name: 'BuGn', value: 'interpolateBuGn', invert: 'dark'}, + {name: 'BuPu', value: 'interpolateBuPu', invert: 'dark'}, + {name: 'GnBu', value: 'interpolateGnBu', invert: 'dark'}, + {name: 'OrRd', value: 'interpolateOrRd', invert: 'dark'}, + {name: 'PuBuGn', value: 'interpolatePuBuGn', invert: 'dark'}, + {name: 'PuBu', value: 'interpolatePuBu', invert: 'dark'}, + {name: 'PuRd', value: 'interpolatePuRd', invert: 'dark'}, + {name: 'RdPu', value: 'interpolateRdPu', invert: 'dark'}, + {name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark'}, + {name: 'YlGn', value: 'interpolateYlGn', invert: 'dark'}, + {name: 'YlOrBr', value: 'interpolateYlOrBr', invert: 'dark'}, + {name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'darm'} ]; export class HeatmapCtrl extends MetricsPanelCtrl { diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html index 530a7ecbcf9..92409b3ad5e 100644 --- a/public/app/plugins/panel/heatmap/partials/display_editor.html +++ b/public/app/plugins/panel/heatmap/partials/display_editor.html @@ -2,7 +2,7 @@
Colors
- +
@@ -10,44 +10,38 @@
- +
- -
+ +
- +
- - +
-
+
- +
- - +
- - + +
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 93112dca496..12316e6be79 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/public/app/plugins/panel/heatmap/rendering.ts @@ -4,7 +4,7 @@ import _ from 'lodash'; import $ from 'jquery'; import moment from 'moment'; import kbn from 'app/core/utils/kbn'; -import {appEvents} from 'app/core/core'; +import {appEvents, contextSrv} from 'app/core/core'; import d3 from 'd3'; import {HeatmapTooltip} from './heatmap_tooltip'; import {convertToCards, mergeZeroBuckets, removeZeroBuckets} from './heatmap_data_converter'; @@ -371,11 +371,11 @@ export default function link(scope, elem, attrs, ctrl) { return card.values.length; }); - setColorScale(max_value); + colorScale = getColorScale(max_value); setOpacityScale(max_value); setCardSize(); - if (panel.color.fillBackground && panel.color.mode === 'color') { + if (panel.color.fillBackground && panel.color.mode === 'spectrum') { fillBackground(heatmap, colorScale(0)); } @@ -426,9 +426,16 @@ export default function link(scope, elem, attrs, ctrl) { } } - function setColorScale(max_value) { - let colorInterpolator = d3[panel.color.colorScheme]; - colorScale = d3.scaleSequential(colorInterpolator).domain([max_value, 0]); + function getColorScale(maxValue) { + let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme}); + let colorInterpolator = d3[colorScheme.value]; + let colorScaleInverted = colorScheme.invert === 'always' || + (colorScheme.invert === 'dark' && !contextSrv.user.lightTheme); + + let start = colorScaleInverted ? maxValue : 0; + let end = colorScaleInverted ? 0 : maxValue; + + return d3.scaleSequential(colorInterpolator).domain([start, end]); } function setOpacityScale(max_value) { @@ -710,8 +717,7 @@ export default function link(scope, elem, attrs, ctrl) { let legendWidth = Math.floor($(d3.select("#heatmap-color-legend").node()).outerWidth()); let legendHeight = d3.select("#heatmap-color-legend").attr("height"); - let colorInterpolator = d3[panel.color.colorScheme]; - let legendColorScale = d3.scaleSequential(colorInterpolator).domain([legendWidth, 0]); + let legendColorScale = getColorScale(legendWidth); let rangeStep = 2; let valuesRange = d3.range(0, legendWidth, rangeStep); diff --git a/public/app/plugins/panel/heatmap/specs/renderer_specs.ts b/public/app/plugins/panel/heatmap/specs/renderer_specs.ts index 1ba1bec9b83..3467c5b7542 100644 --- a/public/app/plugins/panel/heatmap/specs/renderer_specs.ts +++ b/public/app/plugins/panel/heatmap/specs/renderer_specs.ts @@ -30,6 +30,10 @@ describe('grafanaHeatmap', function () { beforeEach(angularMocks.inject(function ($rootScope, $compile) { var ctrl: any = { + colorSchemes: [ + {name: 'Oranges', value: 'interpolateOranges', invert: 'dark'}, + {name: 'Reds', value: 'interpolateReds', invert: 'dark'}, + ], events: new Emitter(), height: 200, panel: { @@ -40,11 +44,11 @@ describe('grafanaHeatmap', function () { cardRound: null }, color: { - mode: 'color', + mode: 'spectrum', cardColor: '#b4ff00', colorScale: 'linear', exponent: 0.5, - colorScheme: 'interpolateSpectral', + colorScheme: 'interpolateOranges', fillBackground: false }, xBucketSize: 1000,