From 55780972109190b57b3b1fd48a899ec35466e92e Mon Sep 17 00:00:00 2001 From: Dominic Smith Date: Tue, 10 Jul 2018 19:17:55 +1000 Subject: [PATCH] Add new sequential color scales * Add new sequential color scales * Simplify inversion logic --- package.json | 2 +- public/app/plugins/panel/heatmap/color_scale.ts | 2 +- public/app/plugins/panel/heatmap/heatmap_ctrl.ts | 9 ++++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index a43b2adc5be..c26438230cc 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,7 @@ "classnames": "^2.2.5", "clipboard": "^1.7.1", "d3": "^4.11.0", - "d3-scale-chromatic": "^1.1.1", + "d3-scale-chromatic": "^1.3.0", "eventemitter3": "^2.0.3", "file-saver": "^1.3.3", "immutable": "^3.8.2", diff --git a/public/app/plugins/panel/heatmap/color_scale.ts b/public/app/plugins/panel/heatmap/color_scale.ts index 40828639547..3550c981db2 100644 --- a/public/app/plugins/panel/heatmap/color_scale.ts +++ b/public/app/plugins/panel/heatmap/color_scale.ts @@ -3,7 +3,7 @@ import * as d3ScaleChromatic from 'd3-scale-chromatic'; export function getColorScale(colorScheme: any, lightTheme: boolean, maxValue: number, minValue = 0): (d: any) => any { let colorInterpolator = d3ScaleChromatic[colorScheme.value]; - let colorScaleInverted = colorScheme.invert === 'always' || (colorScheme.invert === 'dark' && !lightTheme); + let colorScaleInverted = colorScheme.invert === 'always' || colorScheme.invert === (lightTheme ? 'light' : 'dark'); let start = colorScaleInverted ? maxValue : minValue; let end = colorScaleInverted ? minValue : maxValue; diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 31a5afa630e..1d35ff2ea84 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -76,6 +76,13 @@ let colorSchemes = [ { name: 'Reds', value: 'interpolateReds', invert: 'dark' }, // Sequential (Multi-Hue) + { name: 'Viridis', value: 'interpolateViridis', invert: 'light' }, + { name: 'Magma', value: 'interpolateMagma', invert: 'light' }, + { name: 'Inferno', value: 'interpolateInferno', invert: 'light' }, + { name: 'Plasma', value: 'interpolatePlasma', invert: 'light' }, + { name: 'Warm', value: 'interpolateWarm', invert: 'light' }, + { name: 'Cool', value: 'interpolateCool', invert: 'light' }, + { name: 'Cubehelix', value: 'interpolateCubehelixDefault', invert: 'light' }, { name: 'BuGn', value: 'interpolateBuGn', invert: 'dark' }, { name: 'BuPu', value: 'interpolateBuPu', invert: 'dark' }, { name: 'GnBu', value: 'interpolateGnBu', invert: 'dark' }, @@ -87,7 +94,7 @@ let colorSchemes = [ { name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' }, { name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' }, { name: 'YlOrBr', value: 'interpolateYlOrBr', invert: 'dark' }, - { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'darm' }, + { name: 'YlOrRd', value: 'interpolateYlOrRd', invert: 'dark' }, ]; const ds_support_histogram_sort = ['prometheus', 'elasticsearch'];