IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 11:44:26 -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
Show Stats 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' ? (
<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('getColorDefinition', () => {
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', () => {
expect(getColorDefinition(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue);
expect(getColorDefinition(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue);
expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue);
expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue);
});
});
@ -25,8 +26,8 @@ describe('colors', () => {
});
it('returns name for known hex', () => {
expect(getColorName(SemiDarkBlue.variants.light)).toEqual(SemiDarkBlue.name);
expect(getColorName(SemiDarkBlue.variants.dark)).toEqual(SemiDarkBlue.name);
expect(getColorName(SemiDarkBlue.variants.light, GrafanaTheme.Light)).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);
});
});
describe('getColorFromHexRgbOrName', () => {
it('returns undefined for unknown color', () => {
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';
type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
@ -114,10 +114,8 @@ ColorsPalette.set('blue', blues);
ColorsPalette.set('orange', oranges);
ColorsPalette.set('purple', purples);
export const getColorDefinition = (hex: string): ColorDefinition | undefined => {
return flatten(Array.from(ColorsPalette.values())).filter(definition =>
some(values(definition.variants), color => color === hex)
)[0];
export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
return flatten(Array.from(ColorsPalette.values())).filter(definition => definition.variants[theme] === hex)[0];
};
const isHex = (color: string) => {
@ -125,7 +123,7 @@ const isHex = (color: string) => {
return hexRegex.test(color);
};
export const getColorName = (color?: string): Color | undefined => {
export const getColorName = (color?: string, theme?: GrafanaTheme): Color | undefined => {
if (!color) {
return undefined;
}
@ -134,7 +132,7 @@ export const getColorName = (color?: string): Color | undefined => {
return undefined;
}
if (isHex(color)) {
const definition = getColorDefinition(color);
const definition = getColorDefinition(color, theme || GrafanaTheme.Dark);
return definition ? definition.name : undefined;
}