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

Heatmap: Add option to reverse color scheme (#54365)

Browse Source
This commit is contained in:
Leon Sorokin 2022-09-07 11:09:44 -05:00 committed by GitHub
parent 940d18ad57
commit 4223d3a6a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/plugins/panel/heatmap/migrations.test.ts
View File

@ -55,6 +55,7 @@ describe('Heatmap Migrations', () => {
"max": 100, "max": 100,
"min": 5, "min": 5,
"mode": "scheme", "mode": "scheme",
"reverse": true,
"scale": "exponential", "scale": "exponential",
"scheme": "BuGn", "scheme": "BuGn",
"steps": 128, "steps": 128,
@ -155,8 +156,8 @@ const oldHeatmap = {
colorScale: 'sqrt', colorScale: 'sqrt',
exponent: 0.5, exponent: 0.5,
colorScheme: 'interpolateBuGn', colorScheme: 'interpolateBuGn',
min: 5, min: 100,
max: 100, max: 5,
}, },
legend: { legend: {
show: true, show: true,

6
public/app/plugins/panel/heatmap/migrations.ts
View File

@ -145,6 +145,12 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
options.color.min = color.min; options.color.min = color.min;
options.color.max = color.max; options.color.max = color.max;
if (typeof color.min === 'number' && typeof color.max === 'number' && color.min > color.max) {
options.color.min = color.max;
options.color.max = color.min;
options.color.reverse = true;
}
return { fieldConfig, options }; return { fieldConfig, options };
} }

9
public/app/plugins/panel/heatmap/models.gen.ts
View File

@ -26,13 +26,15 @@ export interface HeatmapColorOptions {
exponent: number; // when scale== sqrt exponent: number; // when scale== sqrt
steps: number; // 2-128 steps: number; // 2-128
reverse: boolean;
// Clamp the colors to the value range // Clamp the colors to the value range
min?: number; min?: number;
max?: number; max?: number;
} }
export interface YAxisConfig extends AxisConfig { export interface YAxisConfig extends AxisConfig {
unit?: string; unit?: string;
reverse?: boolean; reverse?: boolean;
decimals?: number; decimals?: number;
// Only used when the axis is not ordinal // Only used when the axis is not ordinal
min?: number; min?: number;
@ -78,9 +80,9 @@ export interface PanelOptions {
cellGap?: number; // was cardPadding cellGap?: number; // was cardPadding
cellRadius?: number; // was cardRadius (not used, but migrated from angular) cellRadius?: number; // was cardRadius (not used, but migrated from angular)
cellValues?: CellValues; cellValues?: CellValues;
yAxis: YAxisConfig; yAxis: YAxisConfig;
legend: HeatmapLegend; legend: HeatmapLegend;
tooltip: HeatmapTooltip; tooltip: HeatmapTooltip;
@ -94,6 +96,7 @@ export const defaultPanelOptions: PanelOptions = {
scheme: 'Oranges', scheme: 'Oranges',
fill: 'dark-orange', fill: 'dark-orange',
scale: HeatmapColorScale.Exponential, scale: HeatmapColorScale.Exponential,
reverse: false,
exponent: 0.5, exponent: 0.5,
steps: 64, steps: 64,
}, },

6
public/app/plugins/panel/heatmap/module.tsx
View File

@ -244,6 +244,12 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
step: 1, step: 1,
}, },
}) })
.addBooleanSwitch({
path: 'color.reverse',
name: 'Reverse',
defaultValue: defaultPanelOptions.color.reverse,
category,
})
.addCustomEditor({ .addCustomEditor({
id: '__scale__', id: '__scale__',
path: `__scale__`, path: `__scale__`,

1
public/app/plugins/panel/heatmap/palettes.ts
View File

@ -97,6 +97,7 @@ export function quantizeScheme(opts: HeatmapColorOptions, theme: GrafanaTheme2):
} }
if ( if (
opts.reverse ||
scheme.invert === 'always' || scheme.invert === 'always' ||
(scheme.invert === 'dark' && theme.isDark) || (scheme.invert === 'dark' && theme.isDark) ||
(scheme.invert === 'light' && theme.isLight) (scheme.invert === 'light' && theme.isLight)