Initialize named colors palete lazily

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(<ColorPickerPopover color={BasicGreen.name} onChange={() => {}} />);

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);

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;
 

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(
       <NamedColorsGroup
         key={hue}
@@ -37,4 +37,3 @@ export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPalett
     </div>
   );
 };
-

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();

packages/grafana-ui/src/utils/namedColorsPalette.ts

@@ -47,9 +47,9 @@ export type ColorDefinition = {
   variants: ThemeVariants;
 };
 
-export const ColorsPalette = new Map<Hue, ColorDefinition[]>();
+let colorsPaletteInstance: Map<Hue, ColorDefinition[]>;
 
-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<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

@@ -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 = [