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

Fixed issue with color name retrieval not being aware of current theme

Browse Source
This commit is contained in:
Dominik Prokop
2019-01-24 09:56:52 +01:00
parent d13efb3372
commit 071b1f8478
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@@ -40,7 +40,7 @@ export class ColorPickerPopover extends React.Component<Props, State> {
return activePicker === 'spectrum' ? ( return activePicker === 'spectrum' ? (
<SpectrumPalette color={color} onChange={this.handleChange} theme={theme} /> <SpectrumPalette color={color} onChange={this.handleChange} theme={theme} />
) : ( ) : (
<NamedColorsPicker color={getColorName(color)} onChange={this.handleChange} theme={theme} /> <NamedColorsPicker color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />
); );
}; };

12
packages/grafana-ui/src/utils/namedColorsPalette.test.ts
View File

@@ -10,12 +10,13 @@ import { GrafanaTheme } from '../types/index';
describe('colors', () => { describe('colors', () => {
describe('getColorDefinition', () => { describe('getColorDefinition', () => {
it('returns undefined for unknown hex', () => { it('returns undefined for unknown hex', () => {
expect(getColorDefinition('#ff0000')).toBeUndefined(); expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined();
expect(getColorDefinition('#ff0000', GrafanaTheme.Dark)).toBeUndefined();
}); });
it('returns definition for known hex', () => { it('returns definition for known hex', () => {
expect(getColorDefinition(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue); expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue);
expect(getColorDefinition(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue); expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue);
}); });
}); });
@@ -25,8 +26,8 @@ describe('colors', () => {
}); });
it('returns name for known hex', () => { it('returns name for known hex', () => {
expect(getColorName(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue.name); expect(getColorName(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue.name);
expect(getColorName(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue.name); expect(getColorName(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue.name);
}); });
}); });
@@ -39,6 +40,7 @@ describe('colors', () => {
expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue); expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue);
}); });
}); });
describe('getColorFromHexRgbOrName', () => { describe('getColorFromHexRgbOrName', () => {
it('returns undefined for unknown color', () => { it('returns undefined for unknown color', () => {
expect(() => getColorFromHexRgbOrName('aruba-sunshine')).toThrow(); expect(() => getColorFromHexRgbOrName('aruba-sunshine')).toThrow();

12
packages/grafana-ui/src/utils/namedColorsPalette.ts
View File

@@ -1,4 +1,4 @@
import { flatten, some, values } from 'lodash'; import { flatten } from 'lodash';
import { GrafanaTheme } from '../types'; import { GrafanaTheme } from '../types';
type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple'; type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
@@ -114,10 +114,8 @@ ColorsPalette.set('blue', blues);
ColorsPalette.set('orange', oranges); ColorsPalette.set('orange', oranges);
ColorsPalette.set('purple', purples); ColorsPalette.set('purple', purples);
export const getColorDefinition = (hex: string): ColorDefinition | undefined => { export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
return flatten(Array.from(ColorsPalette.values())).filter(definition => return flatten(Array.from(ColorsPalette.values())).filter(definition => definition.variants[theme] === hex)[0];
some(values(definition.variants), color => color === hex)
)[0];
}; };
const isHex = (color: string) => { const isHex = (color: string) => {
@@ -125,7 +123,7 @@ const isHex = (color: string) => {
return hexRegex.test(color); return hexRegex.test(color);
}; };
export const getColorName = (color?: string): Color | undefined => { export const getColorName = (color?: string, theme?: GrafanaTheme): Color | undefined => {
if (!color) { if (!color) {
return undefined; return undefined;
} }
@@ -134,7 +132,7 @@ export const getColorName = (color?: string): Color | undefined => {
return undefined; return undefined;
} }
if (isHex(color)) { if (isHex(color)) {
const definition = getColorDefinition(color); const definition = getColorDefinition(color, theme || GrafanaTheme.Dark);
return definition ? definition.name : undefined; return definition ? definition.name : undefined;
} }