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

Add new sequential color scales

Browse Source 
* Add new sequential color scales

* Simplify inversion logic
This commit is contained in:
Dominic Smith 2018-07-10 19:17:55 +10:00 committed by Alexander Zobnin
parent 9595f992b9
commit 5578097210
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -149,7 +149,7 @@
"classnames": "^2.2.5", "classnames": "^2.2.5",
"clipboard": "^1.7.1", "clipboard": "^1.7.1",
"d3": "^4.11.0", "d3": "^4.11.0",
"d3-scale-chromatic": "^1.1.1", "d3-scale-chromatic": "^1.3.0",
"eventemitter3": "^2.0.3", "eventemitter3": "^2.0.3",
"file-saver": "^1.3.3", "file-saver": "^1.3.3",
"immutable": "^3.8.2", "immutable": "^3.8.2",

2
public/app/plugins/panel/heatmap/color_scale.ts
View File

@ -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 { export function getColorScale(colorScheme: any, lightTheme: boolean, maxValue: number, minValue = 0): (d: any) => any {
let colorInterpolator = d3ScaleChromatic[colorScheme.value]; 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 start = colorScaleInverted ? maxValue : minValue;
let end = colorScaleInverted ? minValue : maxValue; let end = colorScaleInverted ? minValue : maxValue;

9
public/app/plugins/panel/heatmap/heatmap_ctrl.ts
View File

@ -76,6 +76,13 @@ let colorSchemes = [
{ name: 'Reds', value: 'interpolateReds', invert: 'dark' }, { name: 'Reds', value: 'interpolateReds', invert: 'dark' },
// Sequential (Multi-Hue) // 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: 'BuGn', value: 'interpolateBuGn', invert: 'dark' },
{ name: 'BuPu', value: 'interpolateBuPu', invert: 'dark' }, { name: 'BuPu', value: 'interpolateBuPu', invert: 'dark' },
{ name: 'GnBu', value: 'interpolateGnBu', invert: 'dark' }, { name: 'GnBu', value: 'interpolateGnBu', invert: 'dark' },
@ -87,7 +94,7 @@ let colorSchemes = [
{ name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' }, { name: 'YlGnBu', value: 'interpolateYlGnBu', invert: 'dark' },
{ name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' }, { name: 'YlGn', value: 'interpolateYlGn', invert: 'dark' },
{ name: 'YlOrBr', value: 'interpolateYlOrBr', 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']; const ds_support_histogram_sort = ['prometheus', 'elasticsearch'];