mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Initialize named colors palete lazily
This commit is contained in:
parent
053d4060e8
commit
9a08a994f4
@ -1,14 +1,17 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount, ReactWrapper } from 'enzyme';
|
import { mount, ReactWrapper } from 'enzyme';
|
||||||
import { ColorPickerPopover } from './ColorPickerPopover';
|
import { ColorPickerPopover } from './ColorPickerPopover';
|
||||||
import { ColorsPalette, BasicGreen, BasicBlue } from '../../utils/namedColorsPalette';
|
import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette';
|
||||||
import { ColorSwatch } from './NamedColorsGroup';
|
import { ColorSwatch } from './NamedColorsGroup';
|
||||||
import { flatten } from 'lodash';
|
import { flatten } from 'lodash';
|
||||||
import { GrafanaTheme } from '../../types';
|
import { GrafanaTheme } from '../../types';
|
||||||
|
|
||||||
const allColors = flatten(Array.from(ColorsPalette.values()));
|
const allColors = flatten(Array.from(getNamedColorPalette().values()));
|
||||||
|
|
||||||
describe('ColorPickerPopover', () => {
|
describe('ColorPickerPopover', () => {
|
||||||
|
const BasicGreen = getColorDefinitionByName('green');
|
||||||
|
const BasicBlue = getColorDefinitionByName('blue');
|
||||||
|
|
||||||
describe('rendering', () => {
|
describe('rendering', () => {
|
||||||
it('should render provided color as selected if color provided by name', () => {
|
it('should render provided color as selected if color provided by name', () => {
|
||||||
const wrapper = mount(<ColorPickerPopover color={BasicGreen.name} onChange={() => {}} />);
|
const wrapper = mount(<ColorPickerPopover color={BasicGreen.name} onChange={() => {}} />);
|
||||||
|
@ -1,11 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { storiesOf } from '@storybook/react';
|
import { storiesOf } from '@storybook/react';
|
||||||
import { NamedColorsPalette } from './NamedColorsPalette';
|
import { NamedColorsPalette } from './NamedColorsPalette';
|
||||||
import { getColorName, BasicGreen, BasicBlue, LightBlue } from '../../utils/namedColorsPalette';
|
import { getColorName, getColorDefinitionByName } from '../../utils/namedColorsPalette';
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
import { withKnobs, select } from '@storybook/addon-knobs';
|
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||||
import { UseState } from '../../utils/storybook/UseState';
|
import { UseState } from '../../utils/storybook/UseState';
|
||||||
|
|
||||||
|
const BasicGreen = getColorDefinitionByName('green');
|
||||||
|
const BasicBlue = getColorDefinitionByName('blue');
|
||||||
|
const LightBlue = getColorDefinitionByName('light-blue');
|
||||||
|
|
||||||
const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
|
const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
|
||||||
|
|
||||||
NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
|
NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
|
||||||
|
@ -2,10 +2,13 @@ import React from 'react';
|
|||||||
import { mount, ReactWrapper } from 'enzyme';
|
import { mount, ReactWrapper } from 'enzyme';
|
||||||
import { NamedColorsPalette } from './NamedColorsPalette';
|
import { NamedColorsPalette } from './NamedColorsPalette';
|
||||||
import { ColorSwatch } from './NamedColorsGroup';
|
import { ColorSwatch } from './NamedColorsGroup';
|
||||||
import { BasicGreen } from '../../utils';
|
import { getColorDefinitionByName } from '../../utils';
|
||||||
import { GrafanaTheme } from '../../types';
|
import { GrafanaTheme } from '../../types';
|
||||||
|
|
||||||
describe('NamedColorsPalette', () => {
|
describe('NamedColorsPalette', () => {
|
||||||
|
|
||||||
|
const BasicGreen = getColorDefinitionByName('green');
|
||||||
|
|
||||||
describe('theme support for named colors', () => {
|
describe('theme support for named colors', () => {
|
||||||
let wrapper: ReactWrapper, selectedSwatch;
|
let wrapper: ReactWrapper, selectedSwatch;
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Color, ColorsPalette } from '../../utils/namedColorsPalette';
|
import { Color, getNamedColorPalette } from '../../utils/namedColorsPalette';
|
||||||
import { Themeable } from '../../types/index';
|
import { Themeable } from '../../types/index';
|
||||||
import NamedColorsGroup from './NamedColorsGroup';
|
import NamedColorsGroup from './NamedColorsGroup';
|
||||||
|
|
||||||
@ -10,7 +10,7 @@ interface NamedColorsPaletteProps extends Themeable {
|
|||||||
|
|
||||||
export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
|
export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
|
||||||
const swatches: JSX.Element[] = [];
|
const swatches: JSX.Element[] = [];
|
||||||
ColorsPalette.forEach((colors, hue) => {
|
getNamedColorPalette().forEach((colors, hue) => {
|
||||||
swatches.push(
|
swatches.push(
|
||||||
<NamedColorsGroup
|
<NamedColorsGroup
|
||||||
key={hue}
|
key={hue}
|
||||||
@ -37,4 +37,3 @@ export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPalett
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -2,12 +2,14 @@ import {
|
|||||||
getColorName,
|
getColorName,
|
||||||
getColorDefinition,
|
getColorDefinition,
|
||||||
getColorByName,
|
getColorByName,
|
||||||
SemiDarkBlue,
|
|
||||||
getColorFromHexRgbOrName,
|
getColorFromHexRgbOrName,
|
||||||
|
getColorDefinitionByName,
|
||||||
} from './namedColorsPalette';
|
} from './namedColorsPalette';
|
||||||
import { GrafanaTheme } from '../types/index';
|
import { GrafanaTheme } from '../types/index';
|
||||||
|
|
||||||
describe('colors', () => {
|
describe('colors', () => {
|
||||||
|
const SemiDarkBlue = getColorDefinitionByName('semi-dark-blue');
|
||||||
|
|
||||||
describe('getColorDefinition', () => {
|
describe('getColorDefinition', () => {
|
||||||
it('returns undefined for unknown hex', () => {
|
it('returns undefined for unknown hex', () => {
|
||||||
expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined();
|
expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined();
|
||||||
|
@ -47,9 +47,9 @@ export type ColorDefinition = {
|
|||||||
variants: ThemeVariants;
|
variants: ThemeVariants;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ColorsPalette = new Map<Hue, ColorDefinition[]>();
|
let colorsPaletteInstance: Map<Hue, ColorDefinition[]>;
|
||||||
|
|
||||||
export const buildColorDefinition = (
|
const buildColorDefinition = (
|
||||||
hue: Hue,
|
hue: Hue,
|
||||||
name: Color,
|
name: Color,
|
||||||
[light, dark]: string[],
|
[light, dark]: string[],
|
||||||
@ -64,58 +64,12 @@ export const buildColorDefinition = (
|
|||||||
isPrimary: !!isPrimary,
|
isPrimary: !!isPrimary,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const BasicGreen = buildColorDefinition('green', 'green', ['#5AA64B', '#77BF69'], true);
|
export const getColorDefinitionByName = (name: Color): ColorDefinition => {
|
||||||
export const DarkGreen = buildColorDefinition('green', 'dark-green', ['#1E6910', '#388729']);
|
return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === name)[0];
|
||||||
export const SemiDarkGreen = buildColorDefinition('green', 'semi-dark-green', ['#388729', '#5AA64B']);
|
};
|
||||||
export const LightGreen = buildColorDefinition('green', 'light-green', ['#77BF69', '#99D98D']);
|
|
||||||
export const SuperLightGreen = buildColorDefinition('green', 'super-light-green', ['#99D98D', '#CAF2C2']);
|
|
||||||
|
|
||||||
export const BasicYellow = buildColorDefinition('yellow', 'yellow', ['#F2CC0C', '#FADE2A'], true);
|
|
||||||
export const DarkYellow = buildColorDefinition('yellow', 'dark-yellow', ['#CC9D00', '#E0B400']);
|
|
||||||
export const SemiDarkYellow = buildColorDefinition('yellow', 'semi-dark-yellow', ['#E0B400', '#F2CC0C']);
|
|
||||||
export const LightYellow = buildColorDefinition('yellow', 'light-yellow', ['#FADE2A', '#FFEE52']);
|
|
||||||
export const SuperLightYellow = buildColorDefinition('yellow', 'super-light-yellow', ['#FFEE52', '#FFF899']);
|
|
||||||
|
|
||||||
export const BasicRed = buildColorDefinition('red', 'red', ['#DE314D', '#F24965'], true);
|
|
||||||
export const DarkRed = buildColorDefinition('red', 'dark-red', ['#AB031F', '#C41834']);
|
|
||||||
export const SemiDarkRed = buildColorDefinition('red', 'semi-dark-red', ['#C41834', '#DE314D']);
|
|
||||||
export const LightRed = buildColorDefinition('red', 'light-red', ['#F24965', '#FF7389']);
|
|
||||||
export const SuperLightRed = buildColorDefinition('red', 'super-light-red', ['#FF7389', '#FFA6B4']);
|
|
||||||
|
|
||||||
export const BasicBlue = buildColorDefinition('blue', 'blue', ['#3274D9', '#5794F2'], true);
|
|
||||||
export const DarkBlue = buildColorDefinition('blue', 'dark-blue', ['#144796', '#1857B8']);
|
|
||||||
export const SemiDarkBlue = buildColorDefinition('blue', 'semi-dark-blue', ['#1857B8', '#3274D9']);
|
|
||||||
export const LightBlue = buildColorDefinition('blue', 'light-blue', ['#5794F2', '#8AB8FF']);
|
|
||||||
export const SuperLightBlue = buildColorDefinition('blue', 'super-light-blue', ['#8AB8FF', '#C0D8FF']);
|
|
||||||
|
|
||||||
export const BasicOrange = buildColorDefinition('orange', 'orange', ['#FF780A', '#FF9830'], true);
|
|
||||||
export const DarkOrange = buildColorDefinition('orange', 'dark-orange', ['#E55400', '#FA6400']);
|
|
||||||
export const SemiDarkOrange = buildColorDefinition('orange', 'semi-dark-orange', ['#FA6400', '#FF780A']);
|
|
||||||
export const LightOrange = buildColorDefinition('orange', 'light-orange', ['#FF9830', '#FFB357']);
|
|
||||||
export const SuperLightOrange = buildColorDefinition('orange', 'super-light-orange', ['#FFB357', '#FFCB7D']);
|
|
||||||
|
|
||||||
export const BasicPurple = buildColorDefinition('purple', 'purple', ['#A352CC', '#B877D9'], true);
|
|
||||||
export const DarkPurple = buildColorDefinition('purple', 'dark-purple', ['#732699', '#8936B2']);
|
|
||||||
export const SemiDarkPurple = buildColorDefinition('purple', 'semi-dark-purple', ['#8936B2', '#A352CC']);
|
|
||||||
export const LightPurple = buildColorDefinition('purple', 'light-purple', ['#B877D9', '#CA95E5']);
|
|
||||||
export const SuperLightPurple = buildColorDefinition('purple', 'super-light-purple', ['#CA95E5', '#DEB6F2']);
|
|
||||||
|
|
||||||
const greens = [BasicGreen, DarkGreen, SemiDarkGreen, LightGreen, SuperLightGreen];
|
|
||||||
const yellows = [BasicYellow, DarkYellow, SemiDarkYellow, LightYellow, SuperLightYellow];
|
|
||||||
const reds = [BasicRed, DarkRed, SemiDarkRed, LightRed, SuperLightRed];
|
|
||||||
const blues = [BasicBlue, DarkBlue, SemiDarkBlue, LightBlue, SuperLightBlue];
|
|
||||||
const oranges = [BasicOrange, DarkOrange, SemiDarkOrange, LightOrange, SuperLightOrange];
|
|
||||||
const purples = [BasicPurple, DarkPurple, SemiDarkPurple, LightPurple, SuperLightPurple];
|
|
||||||
|
|
||||||
ColorsPalette.set('green', greens);
|
|
||||||
ColorsPalette.set('yellow', yellows);
|
|
||||||
ColorsPalette.set('red', reds);
|
|
||||||
ColorsPalette.set('blue', blues);
|
|
||||||
ColorsPalette.set('orange', oranges);
|
|
||||||
ColorsPalette.set('purple', purples);
|
|
||||||
|
|
||||||
export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
|
export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
|
||||||
return flatten(Array.from(ColorsPalette.values())).filter(definition => definition.variants[theme] === hex)[0];
|
return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.variants[theme] === hex)[0];
|
||||||
};
|
};
|
||||||
|
|
||||||
const isHex = (color: string) => {
|
const isHex = (color: string) => {
|
||||||
@ -140,7 +94,7 @@ export const getColorName = (color?: string, theme?: GrafanaTheme): Color | unde
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getColorByName = (colorName: string) => {
|
export const getColorByName = (colorName: string) => {
|
||||||
const definition = flatten(Array.from(ColorsPalette.values())).filter(definition => definition.name === colorName);
|
const definition = flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === colorName);
|
||||||
return definition.length > 0 ? definition[0] : undefined;
|
return definition.length > 0 ? definition[0] : undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -161,3 +115,68 @@ export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaTheme): s
|
|||||||
export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaTheme) => {
|
export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaTheme) => {
|
||||||
return theme ? color.variants[theme] : color.variants.dark;
|
return theme ? color.variants[theme] : color.variants.dark;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const buildNamedColorsPalette = () => {
|
||||||
|
const palette = new Map<Hue, ColorDefinition[]>();
|
||||||
|
|
||||||
|
const BasicGreen = buildColorDefinition('green', 'green', ['#5AA64B', '#77BF69'], true);
|
||||||
|
const DarkGreen = buildColorDefinition('green', 'dark-green', ['#1E6910', '#388729']);
|
||||||
|
const SemiDarkGreen = buildColorDefinition('green', 'semi-dark-green', ['#388729', '#5AA64B']);
|
||||||
|
const LightGreen = buildColorDefinition('green', 'light-green', ['#77BF69', '#99D98D']);
|
||||||
|
const SuperLightGreen = buildColorDefinition('green', 'super-light-green', ['#99D98D', '#CAF2C2']);
|
||||||
|
|
||||||
|
const BasicYellow = buildColorDefinition('yellow', 'yellow', ['#F2CC0C', '#FADE2A'], true);
|
||||||
|
const DarkYellow = buildColorDefinition('yellow', 'dark-yellow', ['#CC9D00', '#E0B400']);
|
||||||
|
const SemiDarkYellow = buildColorDefinition('yellow', 'semi-dark-yellow', ['#E0B400', '#F2CC0C']);
|
||||||
|
const LightYellow = buildColorDefinition('yellow', 'light-yellow', ['#FADE2A', '#FFEE52']);
|
||||||
|
const SuperLightYellow = buildColorDefinition('yellow', 'super-light-yellow', ['#FFEE52', '#FFF899']);
|
||||||
|
|
||||||
|
const BasicRed = buildColorDefinition('red', 'red', ['#DE314D', '#F24965'], true);
|
||||||
|
const DarkRed = buildColorDefinition('red', 'dark-red', ['#AB031F', '#C41834']);
|
||||||
|
const SemiDarkRed = buildColorDefinition('red', 'semi-dark-red', ['#C41834', '#DE314D']);
|
||||||
|
const LightRed = buildColorDefinition('red', 'light-red', ['#F24965', '#FF7389']);
|
||||||
|
const SuperLightRed = buildColorDefinition('red', 'super-light-red', ['#FF7389', '#FFA6B4']);
|
||||||
|
|
||||||
|
const BasicBlue = buildColorDefinition('blue', 'blue', ['#3274D9', '#5794F2'], true);
|
||||||
|
const DarkBlue = buildColorDefinition('blue', 'dark-blue', ['#144796', '#1857B8']);
|
||||||
|
const SemiDarkBlue = buildColorDefinition('blue', 'semi-dark-blue', ['#1857B8', '#3274D9']);
|
||||||
|
const LightBlue = buildColorDefinition('blue', 'light-blue', ['#5794F2', '#8AB8FF']);
|
||||||
|
const SuperLightBlue = buildColorDefinition('blue', 'super-light-blue', ['#8AB8FF', '#C0D8FF']);
|
||||||
|
|
||||||
|
const BasicOrange = buildColorDefinition('orange', 'orange', ['#FF780A', '#FF9830'], true);
|
||||||
|
const DarkOrange = buildColorDefinition('orange', 'dark-orange', ['#E55400', '#FA6400']);
|
||||||
|
const SemiDarkOrange = buildColorDefinition('orange', 'semi-dark-orange', ['#FA6400', '#FF780A']);
|
||||||
|
const LightOrange = buildColorDefinition('orange', 'light-orange', ['#FF9830', '#FFB357']);
|
||||||
|
const SuperLightOrange = buildColorDefinition('orange', 'super-light-orange', ['#FFB357', '#FFCB7D']);
|
||||||
|
|
||||||
|
const BasicPurple = buildColorDefinition('purple', 'purple', ['#A352CC', '#B877D9'], true);
|
||||||
|
const DarkPurple = buildColorDefinition('purple', 'dark-purple', ['#732699', '#8936B2']);
|
||||||
|
const SemiDarkPurple = buildColorDefinition('purple', 'semi-dark-purple', ['#8936B2', '#A352CC']);
|
||||||
|
const LightPurple = buildColorDefinition('purple', 'light-purple', ['#B877D9', '#CA95E5']);
|
||||||
|
const SuperLightPurple = buildColorDefinition('purple', 'super-light-purple', ['#CA95E5', '#DEB6F2']);
|
||||||
|
|
||||||
|
const greens = [BasicGreen, DarkGreen, SemiDarkGreen, LightGreen, SuperLightGreen];
|
||||||
|
const yellows = [BasicYellow, DarkYellow, SemiDarkYellow, LightYellow, SuperLightYellow];
|
||||||
|
const reds = [BasicRed, DarkRed, SemiDarkRed, LightRed, SuperLightRed];
|
||||||
|
const blues = [BasicBlue, DarkBlue, SemiDarkBlue, LightBlue, SuperLightBlue];
|
||||||
|
const oranges = [BasicOrange, DarkOrange, SemiDarkOrange, LightOrange, SuperLightOrange];
|
||||||
|
const purples = [BasicPurple, DarkPurple, SemiDarkPurple, LightPurple, SuperLightPurple];
|
||||||
|
|
||||||
|
palette.set('green', greens);
|
||||||
|
palette.set('yellow', yellows);
|
||||||
|
palette.set('red', reds);
|
||||||
|
palette.set('blue', blues);
|
||||||
|
palette.set('orange', oranges);
|
||||||
|
palette.set('purple', purples);
|
||||||
|
|
||||||
|
return palette;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getNamedColorPalette = () => {
|
||||||
|
if (colorsPaletteInstance) {
|
||||||
|
return colorsPaletteInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
colorsPaletteInstance = buildNamedColorsPalette();
|
||||||
|
return colorsPaletteInstance;
|
||||||
|
};
|
||||||
|
@ -1,9 +1,11 @@
|
|||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import TableModel from 'app/core/table_model';
|
import TableModel from 'app/core/table_model';
|
||||||
import { TableRenderer } from '../renderer';
|
import { TableRenderer } from '../renderer';
|
||||||
import { SemiDarkOrange } from '@grafana/ui';
|
import { getColorDefinitionByName } from '@grafana/ui';
|
||||||
|
|
||||||
describe('when rendering table', () => {
|
describe('when rendering table', () => {
|
||||||
|
const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange');
|
||||||
|
|
||||||
describe('given 13 columns', () => {
|
describe('given 13 columns', () => {
|
||||||
const table = new TableModel();
|
const table = new TableModel();
|
||||||
table.columns = [
|
table.columns = [
|
||||||
|
Loading…
Reference in New Issue
Block a user