Skip to content

N
nexpie-grafana-theme
Commit 9a08a994 by Dominik Prokop
Options

Initialize named colors palete lazily

parent 053d4060
Showing with 94 additions and 62 deletions
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx
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={() => {}} />);
......
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
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);
......
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx
...@@ -2,10 +2,13 @@ import React from 'react'; ...@@ -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;
......
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
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 { ...@@ -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 ...@@ -37,4 +37,3 @@ export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPalett
</div> </div>
); );
}; };
packages/grafana-ui/src/utils/namedColorsPalette.test.ts
...@@ -2,12 +2,14 @@ import { ...@@ -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();
......
packages/grafana-ui/src/utils/namedColorsPalette.ts
...@@ -47,9 +47,9 @@ export type ColorDefinition = { ...@@ -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 = ( ...@@ -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 ...@@ -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 ...@@ -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;
};
public/app/plugins/panel/table/specs/renderer.test.ts
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 = [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment