From 9a08a994f4fc080ea40e26cdd58e38c8c8c562c7 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 28 Jan 2019 15:49:59 +0100 Subject: [PATCH] Initialize named colors palete lazily --- .../ColorPicker/ColorPickerPopover.test.tsx | 7 +- .../ColorPicker/NamedColorsPalette.story.tsx | 6 +- .../ColorPicker/NamedColorsPalette.test.tsx | 5 +- .../ColorPicker/NamedColorsPalette.tsx | 5 +- .../src/utils/namedColorsPalette.test.ts | 4 +- .../src/utils/namedColorsPalette.ts | 125 ++++++++++-------- .../panel/table/specs/renderer.test.ts | 4 +- 7 files changed, 94 insertions(+), 62 deletions(-) diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx index 7438a206ee9..28d66e7af86 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx @@ -1,14 +1,17 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; import { ColorPickerPopover } from './ColorPickerPopover'; -import { ColorsPalette, BasicGreen, BasicBlue } from '../../utils/namedColorsPalette'; +import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette'; import { ColorSwatch } from './NamedColorsGroup'; import { flatten } from 'lodash'; import { GrafanaTheme } from '../../types'; -const allColors = flatten(Array.from(ColorsPalette.values())); +const allColors = flatten(Array.from(getNamedColorPalette().values())); describe('ColorPickerPopover', () => { + const BasicGreen = getColorDefinitionByName('green'); + const BasicBlue = getColorDefinitionByName('blue'); + describe('rendering', () => { it('should render provided color as selected if color provided by name', () => { const wrapper = mount( {}} />); diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx index a530318d6c9..af5de3b2a2d 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx @@ -1,11 +1,15 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; 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 { withCenteredStory } from '../../utils/storybook/withCenteredStory'; 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); NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory); diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx index a0015e2a557..171d26f5c56 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx @@ -2,10 +2,13 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; import { NamedColorsPalette } from './NamedColorsPalette'; import { ColorSwatch } from './NamedColorsGroup'; -import { BasicGreen } from '../../utils'; +import { getColorDefinitionByName } from '../../utils'; import { GrafanaTheme } from '../../types'; describe('NamedColorsPalette', () => { + + const BasicGreen = getColorDefinitionByName('green'); + describe('theme support for named colors', () => { let wrapper: ReactWrapper, selectedSwatch; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx index 8d09ec0cdec..7bdd3c690b9 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Color, ColorsPalette } from '../../utils/namedColorsPalette'; +import { Color, getNamedColorPalette } from '../../utils/namedColorsPalette'; import { Themeable } from '../../types/index'; import NamedColorsGroup from './NamedColorsGroup'; @@ -10,7 +10,7 @@ interface NamedColorsPaletteProps extends Themeable { export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => { const swatches: JSX.Element[] = []; - ColorsPalette.forEach((colors, hue) => { + getNamedColorPalette().forEach((colors, hue) => { swatches.push( ); }; - diff --git a/packages/grafana-ui/src/utils/namedColorsPalette.test.ts b/packages/grafana-ui/src/utils/namedColorsPalette.test.ts index dafca2de141..c6a1aaf0dd0 100644 --- a/packages/grafana-ui/src/utils/namedColorsPalette.test.ts +++ b/packages/grafana-ui/src/utils/namedColorsPalette.test.ts @@ -2,12 +2,14 @@ import { getColorName, getColorDefinition, getColorByName, - SemiDarkBlue, getColorFromHexRgbOrName, + getColorDefinitionByName, } from './namedColorsPalette'; import { GrafanaTheme } from '../types/index'; describe('colors', () => { + const SemiDarkBlue = getColorDefinitionByName('semi-dark-blue'); + describe('getColorDefinition', () => { it('returns undefined for unknown hex', () => { expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined(); diff --git a/packages/grafana-ui/src/utils/namedColorsPalette.ts b/packages/grafana-ui/src/utils/namedColorsPalette.ts index 4112927ffd1..299f5585c70 100644 --- a/packages/grafana-ui/src/utils/namedColorsPalette.ts +++ b/packages/grafana-ui/src/utils/namedColorsPalette.ts @@ -47,9 +47,9 @@ export type ColorDefinition = { variants: ThemeVariants; }; -export const ColorsPalette = new Map(); +let colorsPaletteInstance: Map; -export const buildColorDefinition = ( +const buildColorDefinition = ( hue: Hue, name: Color, [light, dark]: string[], @@ -64,58 +64,12 @@ export const buildColorDefinition = ( isPrimary: !!isPrimary, }); -export const BasicGreen = buildColorDefinition('green', 'green', ['#5AA64B', '#77BF69'], true); -export const DarkGreen = buildColorDefinition('green', 'dark-green', ['#1E6910', '#388729']); -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 getColorDefinitionByName = (name: Color): ColorDefinition => { + return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === name)[0]; +}; 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) => { @@ -140,7 +94,7 @@ export const getColorName = (color?: string, theme?: GrafanaTheme): Color | unde }; 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; }; @@ -161,3 +115,68 @@ export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaTheme): s export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaTheme) => { return theme ? color.variants[theme] : color.variants.dark; }; + +const buildNamedColorsPalette = () => { + const palette = new Map(); + + 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; +}; diff --git a/public/app/plugins/panel/table/specs/renderer.test.ts b/public/app/plugins/panel/table/specs/renderer.test.ts index a6e03417085..ca5a036d98f 100644 --- a/public/app/plugins/panel/table/specs/renderer.test.ts +++ b/public/app/plugins/panel/table/specs/renderer.test.ts @@ -1,9 +1,11 @@ import _ from 'lodash'; import TableModel from 'app/core/table_model'; import { TableRenderer } from '../renderer'; -import { SemiDarkOrange } from '@grafana/ui'; +import { getColorDefinitionByName } from '@grafana/ui'; describe('when rendering table', () => { + const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange'); + describe('given 13 columns', () => { const table = new TableModel(); table.columns = [