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

Initialize named colors palete lazily

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-28 15:49:59 +01:00
parent 053d4060e8
commit 9a08a994f4
7 changed files with 94 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx
View File

@ -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={() => {}} />);

6
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
View File

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

5
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx
View File

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

5
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
View File

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

4
packages/grafana-ui/src/utils/namedColorsPalette.test.ts
View File

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

125
packages/grafana-ui/src/utils/namedColorsPalette.ts
View File

@ -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;
};

4
public/app/plugins/panel/table/specs/renderer.test.ts
View File

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