IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update types and themes usage in components

Browse Source
This commit is contained in:
Dominik Prokop
2019-02-05 17:04:48 +01:00
parent 1bc007e29c
commit 6b1390b972
30 changed files with 171 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,11 +2,11 @@ import React, { Component, createRef } from 'react';
import PopperController from '../Tooltip/PopperController'; import PopperController from '../Tooltip/PopperController';
import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper'; import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
import { ColorPickerPopover } from './ColorPickerPopover'; import { ColorPickerPopover } from './ColorPickerPopover';
import { Themeable, GrafanaTheme } from '../../types'; import { GrafanaThemeType, Themeable } from '../../types';
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
import propDeprecationWarning from '../../utils/propDeprecationWarning'; import propDeprecationWarning from '../../utils/propDeprecationWarning';
import { withTheme } from '../../themes/ThemeContext';
type ColorPickerChangeHandler = (color: string) => void; type ColorPickerChangeHandler = (color: string) => void;
export interface ColorPickerProps extends Themeable { export interface ColorPickerProps extends Themeable {
@@ -57,7 +57,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
<div <div
{...arrowProps} {...arrowProps}
data-placement={placement} data-placement={placement}
className={`ColorPicker__arrow ColorPicker__arrow--${theme === GrafanaTheme.Light ? 'light' : 'dark'}`} className={`ColorPicker__arrow ColorPicker__arrow--${theme.type === GrafanaThemeType.Light ? 'light' : 'dark'}`}
/> />
); );
}; };
@@ -95,7 +95,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
<div <div
className="sp-preview-inner" className="sp-preview-inner"
style={{ style={{
backgroundColor: getColorFromHexRgbOrName(this.props.color || '#000000', theme), backgroundColor: getColorFromHexRgbOrName(this.props.color || '#000000', theme.type),
}} }}
/> />
</div> </div>
@@ -110,5 +110,5 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
}; };
}; };
export const ColorPicker = colorPickerFactory(ColorPickerPopover, 'ColorPicker'); export const ColorPicker = withTheme(colorPickerFactory(ColorPickerPopover, 'ColorPicker'));
export const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'); export const SeriesColorPicker = withTheme(colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'));

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

@@ -4,7 +4,8 @@ import { ColorPickerPopover } from './ColorPickerPopover';
import { getColorDefinitionByName, getNamedColorPalette } 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 { GrafanaThemeType } from '../../types';
import { getTheme } from '../../themes';
const allColors = flatten(Array.from(getNamedColorPalette().values())); const allColors = flatten(Array.from(getNamedColorPalette().values()));
@@ -14,7 +15,7 @@ describe('ColorPickerPopover', () => {
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={() => {}} theme={getTheme()}/>);
const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name); const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false); const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false);
@@ -24,7 +25,7 @@ describe('ColorPickerPopover', () => {
}); });
it('should render provided color as selected if color provided by hex', () => { it('should render provided color as selected if color provided by hex', () => {
const wrapper = mount(<ColorPickerPopover color={BasicGreen.variants.dark} onChange={() => {}} />); const wrapper = mount(<ColorPickerPopover color={BasicGreen.variants.dark} onChange={() => {}} theme={getTheme()} />);
const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name); const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false); const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false);
@@ -45,7 +46,7 @@ describe('ColorPickerPopover', () => {
it('should pass hex color value to onChange prop by default', () => { it('should pass hex color value to onChange prop by default', () => {
wrapper = mount( wrapper = mount(
<ColorPickerPopover color={BasicGreen.variants.dark} onChange={onChangeSpy} theme={GrafanaTheme.Light} /> <ColorPickerPopover color={BasicGreen.variants.dark} onChange={onChangeSpy} theme={getTheme(GrafanaThemeType.Light)} />
); );
const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name); const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name);
@@ -61,7 +62,7 @@ describe('ColorPickerPopover', () => {
enableNamedColors enableNamedColors
color={BasicGreen.variants.dark} color={BasicGreen.variants.dark}
onChange={onChangeSpy} onChange={onChangeSpy}
theme={GrafanaTheme.Light} theme={getTheme(GrafanaThemeType.Light)}
/> />
); );
const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name); const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name);

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

@@ -2,9 +2,9 @@ import React from 'react';
import { NamedColorsPalette } from './NamedColorsPalette'; import { NamedColorsPalette } from './NamedColorsPalette';
import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker'; import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker';
import { GrafanaTheme } from '../../types';
import { PopperContentProps } from '../Tooltip/PopperController'; import { PopperContentProps } from '../Tooltip/PopperController';
import SpectrumPalette from './SpectrumPalette'; import SpectrumPalette from './SpectrumPalette';
import { GrafanaThemeType } from '@grafana/ui';
export interface Props<T> extends ColorPickerProps, PopperContentProps { export interface Props<T> extends ColorPickerProps, PopperContentProps {
customPickers?: T; customPickers?: T;
@@ -43,7 +43,7 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
if (enableNamedColors) { if (enableNamedColors) {
return changeHandler(color); return changeHandler(color);
} }
changeHandler(getColorFromHexRgbOrName(color, theme)); changeHandler(getColorFromHexRgbOrName(color, theme.type));
}; };
handleTabChange = (tab: PickerType | keyof T) => { handleTabChange = (tab: PickerType | keyof T) => {
@@ -58,7 +58,9 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
case 'spectrum': case 'spectrum':
return <SpectrumPalette color={color} onChange={this.handleChange} theme={theme} />; return <SpectrumPalette color={color} onChange={this.handleChange} theme={theme} />;
case 'palette': case 'palette':
return <NamedColorsPalette color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />; return (
<NamedColorsPalette color={getColorName(color, theme.type)} onChange={this.handleChange} theme={theme} />
);
default: default:
return this.renderCustomPicker(activePicker); return this.renderCustomPicker(activePicker);
} }
@@ -88,11 +90,7 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
<> <>
{Object.keys(customPickers).map(key => { {Object.keys(customPickers).map(key => {
return ( return (
<div <div className={this.getTabClassName(key)} onClick={this.handleTabChange(key)} key={key}>
className={this.getTabClassName(key)}
onClick={this.handleTabChange(key)}
key={key}
>
{customPickers[key].name} {customPickers[key].name}
</div> </div>
); );
@@ -103,21 +101,14 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
render() { render() {
const { theme } = this.props; const { theme } = this.props;
const colorPickerTheme = theme || GrafanaTheme.Dark; const colorPickerTheme = theme.type || GrafanaThemeType.Dark;
return ( return (
<div className={`ColorPickerPopover ColorPickerPopover--${colorPickerTheme}`}> <div className={`ColorPickerPopover ColorPickerPopover--${colorPickerTheme}`}>
<div className="ColorPickerPopover__tabs"> <div className="ColorPickerPopover__tabs">
<div <div className={this.getTabClassName('palette')} onClick={this.handleTabChange('palette')}>
className={this.getTabClassName('palette')}
onClick={this.handleTabChange('palette')}
>
Colors Colors
</div> </div>
<div <div className={this.getTabClassName('spectrum')} onClick={this.handleTabChange('spectrum')}>
className={this.getTabClassName('spectrum')}
onClick={this.handleTabChange('spectrum')}
>
Custom Custom
</div> </div>
{this.renderCustomPickerTabs()} {this.renderCustomPickerTabs()}
@@ -128,3 +119,4 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
); );
} }
} }

9
packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
View File

@@ -1,5 +1,5 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { Themeable, GrafanaTheme } from '../../types'; import { Themeable, GrafanaThemeType } from '../../types';
import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette'; import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
import { Color } from 'csstype'; import { Color } from 'csstype';
import { find, upperFirst } from 'lodash'; import { find, upperFirst } from 'lodash';
@@ -28,7 +28,8 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
}) => { }) => {
const isSmall = variant === ColorSwatchVariant.Small; const isSmall = variant === ColorSwatchVariant.Small;
const swatchSize = isSmall ? '16px' : '32px'; const swatchSize = isSmall ? '16px' : '32px';
const selectedSwatchBorder = theme === GrafanaTheme.Light ? '#ffffff' : '#1A1B1F'; const selectedSwatchBorder = theme.type === GrafanaThemeType.Light ? '#ffffff' : '#1A1B1F';
const swatchStyles = { const swatchStyles = {
width: swatchSize, width: swatchSize,
height: swatchSize, height: swatchSize,
@@ -76,7 +77,7 @@ const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
key={primaryColor.name} key={primaryColor.name}
isSelected={primaryColor.name === selectedColor} isSelected={primaryColor.name === selectedColor}
variant={ColorSwatchVariant.Large} variant={ColorSwatchVariant.Large}
color={getColorForTheme(primaryColor, theme)} color={getColorForTheme(primaryColor, theme.type)}
label={upperFirst(primaryColor.hue)} label={upperFirst(primaryColor.hue)}
onClick={() => onColorSelect(primaryColor)} onClick={() => onColorSelect(primaryColor)}
theme={theme} theme={theme}
@@ -95,7 +96,7 @@ const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
<ColorSwatch <ColorSwatch
key={color.name} key={color.name}
isSelected={color.name === selectedColor} isSelected={color.name === selectedColor}
color={getColorForTheme(color, theme)} color={getColorForTheme(color, theme.type)}
onClick={() => onColorSelect(color)} onClick={() => onColorSelect(color)}
theme={theme} theme={theme}
/> />

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

@@ -3,7 +3,8 @@ import { mount, ReactWrapper } from 'enzyme';
import { NamedColorsPalette } from './NamedColorsPalette'; import { NamedColorsPalette } from './NamedColorsPalette';
import { ColorSwatch } from './NamedColorsGroup'; import { ColorSwatch } from './NamedColorsGroup';
import { getColorDefinitionByName } from '../../utils'; import { getColorDefinitionByName } from '../../utils';
import { GrafanaTheme } from '../../types'; import { getTheme } from '../../themes';
import { GrafanaThemeType } from '../../types';
describe('NamedColorsPalette', () => { describe('NamedColorsPalette', () => {
@@ -17,18 +18,18 @@ describe('NamedColorsPalette', () => {
}); });
it('should render provided color variant specific for theme', () => { it('should render provided color variant specific for theme', () => {
wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={GrafanaTheme.Dark} onChange={() => {}} />); wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={getTheme()} onChange={() => {}} />);
selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name); selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark); expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark);
wrapper.unmount(); wrapper.unmount();
wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={GrafanaTheme.Light} onChange={() => {}} />); wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={getTheme(GrafanaThemeType.Light)} onChange={() => {}} />);
selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name); selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.light); expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.light);
}); });
it('should render dar variant of provided color when theme not provided', () => { it('should render dar variant of provided color when theme not provided', () => {
wrapper = mount(<NamedColorsPalette color={BasicGreen.name} onChange={() => {}} />); wrapper = mount(<NamedColorsPalette color={BasicGreen.name} onChange={() => {}} theme={getTheme()}/>);
selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name); selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark); expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark);
}); });

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

@@ -4,6 +4,7 @@ import { ColorPickerPopover } from './ColorPickerPopover';
import { ColorPickerProps } from './ColorPicker'; import { ColorPickerProps } from './ColorPicker';
import { PopperContentProps } from '../Tooltip/PopperController'; import { PopperContentProps } from '../Tooltip/PopperController';
import { Switch } from '../Switch/Switch'; import { Switch } from '../Switch/Switch';
import { withTheme } from '../../themes/ThemeContext';
export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps { export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
yaxis?: number; yaxis?: number;
@@ -12,7 +13,6 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperC
export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = props => { export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = props => {
const { yaxis, onToggleAxis, color, ...colorPickerProps } = props; const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
return ( return (
<ColorPickerPopover <ColorPickerPopover
{...colorPickerProps} {...colorPickerProps}
@@ -85,3 +85,6 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
); );
} }
} }
// This component is to enable SeriecColorPickerPopover usage via series-color-picker-popover directive
export const SeriesColorPickerPopoverWithTheme = withTheme(SeriesColorPickerPopover);

4
packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
View File

@@ -13,7 +13,7 @@ export interface SpectrumPaletteProps extends Themeable {
onChange: (color: string) => void; onChange: (color: string) => void;
} }
const renderPointer = (theme?: GrafanaTheme) => (props: SpectrumPalettePointerProps) => ( const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
<SpectrumPalettePointer {...props} theme={theme} /> <SpectrumPalettePointer {...props} theme={theme} />
); );
@@ -92,7 +92,7 @@ const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color,
}} }}
theme={theme} theme={theme}
/> />
<ColorInput color={color} onChange={onChange} style={{ marginTop: '16px' }} /> <ColorInput theme={theme} color={color} onChange={onChange} style={{ marginTop: '16px' }} />
</div> </div>
); );
}; };

4
packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { GrafanaTheme, Themeable } from '../../types'; import { GrafanaThemeType, Themeable } from '../../types';
export interface SpectrumPalettePointerProps extends Themeable { export interface SpectrumPalettePointerProps extends Themeable {
direction?: string; direction?: string;
@@ -17,7 +17,7 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
}, },
}; };
const pointerColor = theme === GrafanaTheme.Light ? '#3F444D' : '#8E8E8E'; const pointerColor = theme.type === GrafanaThemeType.Light ? '#3F444D' : '#8E8E8E';
let pointerStyles: React.CSSProperties = { let pointerStyles: React.CSSProperties = {
position: 'absolute', position: 'absolute',

2
packages/grafana-ui/src/components/Gauge/Gauge.test.tsx
View File

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
import { Gauge, Props } from './Gauge'; import { Gauge, Props } from './Gauge';
import { ValueMapping, MappingType } from '../../types'; import { ValueMapping, MappingType } from '../../types';
import { getTheme } from '../../themes';
jest.mock('jquery', () => ({ jest.mock('jquery', () => ({
plot: jest.fn(), plot: jest.fn(),
@@ -24,6 +25,7 @@ const setup = (propOverrides?: object) => {
width: 300, width: 300,
value: 25, value: 25,
decimals: 0, decimals: 0,
theme: getTheme()
}; };
Object.assign(props, propOverrides); Object.assign(props, propOverrides);

23
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@@ -1,13 +1,14 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import $ from 'jquery'; import $ from 'jquery';
import { ValueMapping, Threshold, BasicGaugeColor, GrafanaTheme } from '../../types'; import { ValueMapping, Threshold, BasicGaugeColor, GrafanaThemeType } from '../../types';
import { getMappedValue } from '../../utils/valueMappings'; import { getMappedValue } from '../../utils/valueMappings';
import { getColorFromHexRgbOrName, getValueFormat } from '../../utils'; import { getColorFromHexRgbOrName, getValueFormat } from '../../utils';
import { Themeable } from '../../index';
type TimeSeriesValue = string | number | null; type TimeSeriesValue = string | number | null;
export interface Props { export interface Props extends Themeable {
decimals: number; decimals: number;
height: number; height: number;
valueMappings: ValueMapping[]; valueMappings: ValueMapping[];
@@ -22,7 +23,6 @@ export interface Props {
unit: string; unit: string;
width: number; width: number;
value: number; value: number;
theme?: GrafanaTheme;
} }
const FONT_SCALE = 1; const FONT_SCALE = 1;
@@ -41,7 +41,7 @@ export class Gauge extends PureComponent<Props> {
thresholds: [], thresholds: [],
unit: 'none', unit: 'none',
stat: 'avg', stat: 'avg',
theme: GrafanaTheme.Dark, theme: GrafanaThemeType.Dark,
}; };
componentDidMount() { componentDidMount() {
@@ -77,19 +77,19 @@ export class Gauge extends PureComponent<Props> {
const { thresholds, theme } = this.props; const { thresholds, theme } = this.props;
if (thresholds.length === 1) { if (thresholds.length === 1) {
return getColorFromHexRgbOrName(thresholds[0].color, theme); return getColorFromHexRgbOrName(thresholds[0].color, theme.type);
} }
const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0]; const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
if (atThreshold) { if (atThreshold) {
return getColorFromHexRgbOrName(atThreshold.color, theme); return getColorFromHexRgbOrName(atThreshold.color, theme.type);
} }
const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value); const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
if (belowThreshold.length > 0) { if (belowThreshold.length > 0) {
const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0]; const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
return getColorFromHexRgbOrName(nearestThreshold.color, theme); return getColorFromHexRgbOrName(nearestThreshold.color, theme.type);
} }
return BasicGaugeColor.Red; return BasicGaugeColor.Red;
@@ -104,13 +104,13 @@ export class Gauge extends PureComponent<Props> {
return [ return [
...thresholdsSortedByIndex.map(threshold => { ...thresholdsSortedByIndex.map(threshold => {
if (threshold.index === 0) { if (threshold.index === 0) {
return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme) }; return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme.type) };
} }
const previousThreshold = thresholdsSortedByIndex[threshold.index - 1]; const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme) }; return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme.type) };
}), }),
{ value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme) }, { value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme.type) },
]; ];
} }
@@ -126,7 +126,8 @@ export class Gauge extends PureComponent<Props> {
const formattedValue = this.formatValue(value) as string; const formattedValue = this.formatValue(value) as string;
const dimension = Math.min(width, height * 1.3); const dimension = Math.min(width, height * 1.3);
const backgroundColor = theme === GrafanaTheme.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const backgroundColor = theme.type === GrafanaThemeType.Light ? 'rgb(230,230,230)' : theme.colors.dark3;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio; const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;

25
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View File

@@ -1,11 +1,11 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Threshold, Themeable } from '../../types'; import { Threshold } from '../../types';
import { ColorPicker } from '../ColorPicker/ColorPicker'; import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
import { colors } from '../../utils'; import { colors } from '../../utils';
import { getColorFromHexRgbOrName } from '@grafana/ui'; import { getColorFromHexRgbOrName, ThemeContext } from '@grafana/ui';
export interface Props extends Themeable { export interface Props {
thresholds: Threshold[]; thresholds: Threshold[];
onChange: (thresholds: Threshold[]) => void; onChange: (thresholds: Threshold[]) => void;
} }
@@ -164,7 +164,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
<div className="thresholds-row-input-inner-color"> <div className="thresholds-row-input-inner-color">
{threshold.color && ( {threshold.color && (
<div className="thresholds-row-input-inner-color-colorpicker"> <div className="thresholds-row-input-inner-color-colorpicker">
<ColorPicker color={threshold.color} onChange={color => this.onChangeThresholdColor(threshold, color)} /> <ColorPicker
color={threshold.color}
onChange={color => this.onChangeThresholdColor(threshold, color)}
/>
</div> </div>
)} )}
</div> </div>
@@ -188,20 +191,25 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
render() { render() {
const { thresholds } = this.state; const { thresholds } = this.state;
const { theme } = this.props;
return (
<ThemeContext.Consumer>
{theme => {
return ( return (
<PanelOptionsGroup title="Thresholds"> <PanelOptionsGroup title="Thresholds">
<div className="thresholds"> <div className="thresholds">
{thresholds.map((threshold, index) => { {thresholds.map((threshold, index) => {
return ( return (
<div className="thresholds-row" key={`${threshold.index}-${index}`}> <div className="thresholds-row" key={`${threshold.index}-${index}`}>
<div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}> <div
className="thresholds-row-add-button"
onClick={() => this.onAddThreshold(threshold.index + 1)}
>
<i className="fa fa-plus" /> <i className="fa fa-plus" />
</div> </div>
<div <div
className="thresholds-row-color-indicator" className="thresholds-row-color-indicator"
style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme) }} style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme.type) }}
/> />
<div className="thresholds-row-input">{this.renderInput(threshold)}</div> <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
</div> </div>
@@ -210,5 +218,8 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
</div> </div>
</PanelOptionsGroup> </PanelOptionsGroup>
); );
}}
</ThemeContext.Consumer>
);
} }
} }

2
packages/grafana-ui/src/components/index.ts
View File

@@ -15,7 +15,7 @@ export { FormField } from './FormField/FormField';
export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder'; export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker'; export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover'; export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor'; export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
export { Graph } from './Graph/Graph'; export { Graph } from './Graph/Graph';
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup'; export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';

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

@@ -5,20 +5,20 @@ import {
getColorFromHexRgbOrName, getColorFromHexRgbOrName,
getColorDefinitionByName, getColorDefinitionByName,
} from './namedColorsPalette'; } from './namedColorsPalette';
import { GrafanaTheme } from '../types/index'; import { GrafanaThemeType } from '../types/index';
describe('colors', () => { describe('colors', () => {
const SemiDarkBlue = getColorDefinitionByName('semi-dark-blue'); 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', GrafanaThemeType.Light)).toBeUndefined();
expect(getColorDefinition('#ff0000', GrafanaTheme.Dark)).toBeUndefined(); expect(getColorDefinition('#ff0000', GrafanaThemeType.Dark)).toBeUndefined();
}); });
it('returns definition for known hex', () => { it('returns definition for known hex', () => {
expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue); expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaThemeType.Light)).toEqual(SemiDarkBlue);
expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue); expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaThemeType.Dark)).toEqual(SemiDarkBlue);
}); });
}); });
@@ -28,8 +28,8 @@ describe('colors', () => {
}); });
it('returns name for known hex', () => { it('returns name for known hex', () => {
expect(getColorName(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue.name); expect(getColorName(SemiDarkBlue.variants.light, GrafanaThemeType.Light)).toEqual(SemiDarkBlue.name);
expect(getColorName(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue.name); expect(getColorName(SemiDarkBlue.variants.dark, GrafanaThemeType.Dark)).toEqual(SemiDarkBlue.name);
}); });
}); });
@@ -53,7 +53,7 @@ describe('colors', () => {
}); });
it("returns correct variant's hex for known color if theme specified", () => { it("returns correct variant's hex for known color if theme specified", () => {
expect(getColorFromHexRgbOrName(SemiDarkBlue.name, GrafanaTheme.Light)).toBe(SemiDarkBlue.variants.light); expect(getColorFromHexRgbOrName(SemiDarkBlue.name, GrafanaThemeType.Light)).toBe(SemiDarkBlue.variants.light);
}); });
it('returns color if specified as hex or rgb/a', () => { it('returns color if specified as hex or rgb/a', () => {

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

@@ -1,5 +1,5 @@
import { flatten } from 'lodash'; import { flatten } from 'lodash';
import { GrafanaTheme } from '../types'; import { GrafanaThemeType } from '../types';
type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple'; type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
@@ -68,7 +68,7 @@ export const getColorDefinitionByName = (name: Color): ColorDefinition => {
return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === name)[0]; return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === name)[0];
}; };
export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => { export const getColorDefinition = (hex: string, theme: GrafanaThemeType): ColorDefinition | undefined => {
return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.variants[theme] === hex)[0]; return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.variants[theme] === hex)[0];
}; };
@@ -77,7 +77,7 @@ const isHex = (color: string) => {
return hexRegex.test(color); return hexRegex.test(color);
}; };
export const getColorName = (color?: string, theme?: GrafanaTheme): Color | undefined => { export const getColorName = (color?: string, theme?: GrafanaThemeType): Color | undefined => {
if (!color) { if (!color) {
return undefined; return undefined;
} }
@@ -86,7 +86,7 @@ export const getColorName = (color?: string, theme?: GrafanaTheme): Color | unde
return undefined; return undefined;
} }
if (isHex(color)) { if (isHex(color)) {
const definition = getColorDefinition(color, theme || GrafanaTheme.Dark); const definition = getColorDefinition(color, theme || GrafanaThemeType.Dark);
return definition ? definition.name : undefined; return definition ? definition.name : undefined;
} }
@@ -98,7 +98,7 @@ export const getColorByName = (colorName: string) => {
return definition.length > 0 ? definition[0] : undefined; return definition.length > 0 ? definition[0] : undefined;
}; };
export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaTheme): string => { export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaThemeType): string => {
if (color.indexOf('rgb') > -1 || isHex(color)) { if (color.indexOf('rgb') > -1 || isHex(color)) {
return color; return color;
} }
@@ -112,7 +112,7 @@ export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaTheme): s
return theme ? colorDefinition.variants[theme] : colorDefinition.variants.dark; return theme ? colorDefinition.variants[theme] : colorDefinition.variants.dark;
}; };
export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaTheme) => { export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaThemeType) => {
return theme ? color.variants[theme] : color.variants.dark; return theme ? color.variants[theme] : color.variants.dark;
}; };

4
public/app/core/angular_wrappers.ts
View File

@@ -9,7 +9,7 @@ import { TagFilter } from './components/TagFilter/TagFilter';
import { SideMenu } from './components/sidemenu/SideMenu'; import { SideMenu } from './components/sidemenu/SideMenu';
import { MetricSelect } from './components/Select/MetricSelect'; import { MetricSelect } from './components/Select/MetricSelect';
import AppNotificationList from './components/AppNotifications/AppNotificationList'; import AppNotificationList from './components/AppNotifications/AppNotificationList';
import { ColorPicker, SeriesColorPickerPopover } from '@grafana/ui'; import { ColorPicker, SeriesColorPickerPopoverWithTheme } from '@grafana/ui';
export function registerAngularDirectives() { export function registerAngularDirectives() {
react2AngularDirective('passwordStrength', PasswordStrength, ['password']); react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
@@ -27,7 +27,7 @@ export function registerAngularDirectives() {
'color', 'color',
['onChange', { watchDepth: 'reference', wrapApply: true }], ['onChange', { watchDepth: 'reference', wrapApply: true }],
]); ]);
react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [ react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopoverWithTheme, [
'color', 'color',
'series', 'series',
'onColorChange', 'onColorChange',

19
public/app/core/utils/ConfigProvider.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import config, { Settings } from 'app/core/config'; import config, { Settings } from 'app/core/config';
import { GrafanaTheme } from '@grafana/ui'; import { GrafanaThemeType, ThemeContext, getTheme } from '@grafana/ui';
export const ConfigContext = React.createContext<Settings>(config); export const ConfigContext = React.createContext<Settings>(config);
export const ConfigConsumer = ConfigContext.Consumer; export const ConfigConsumer = ConfigContext.Consumer;
@@ -13,16 +13,21 @@ export const provideConfig = (component: React.ComponentType<any>) => {
return ConfigProvider; return ConfigProvider;
}; };
interface ThemeProviderProps { export const getCurrentThemeName = () =>
children: (theme: GrafanaTheme) => JSX.Element; config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark;
} export const getCurrentTheme = () => getTheme(getCurrentThemeName());
export const ThemeProvider = ({ children }: ThemeProviderProps) => { export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
return ( return (
<ConfigConsumer> <ConfigConsumer>
{({ bootData }) => { {config => {
return children(bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark); const currentTheme = getCurrentThemeName();
return <ThemeContext.Provider value={getTheme(currentTheme)}>{children}</ThemeContext.Provider>;
}} }}
</ConfigConsumer> </ConfigConsumer>
); );
}; };
export const provideTheme = (component: React.ComponentType<any>) => {
return provideConfig((props: any) => <ThemeProvider>{React.createElement(component, { ...props })}</ThemeProvider>);
};

4
public/app/core/utils/react2angular.ts
View File

@@ -1,11 +1,11 @@
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import { provideConfig } from 'app/core/utils/ConfigProvider'; import { provideTheme } from 'app/core/utils/ConfigProvider';
export function react2AngularDirective(name: string, component: any, options: any) { export function react2AngularDirective(name: string, component: any, options: any) {
coreModule.directive(name, [ coreModule.directive(name, [
'reactDirective', 'reactDirective',
reactDirective => { reactDirective => {
return reactDirective(provideConfig(component), options); return reactDirective(provideTheme(component), options);
}, },
]); ]);
} }

7
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Services & Utils // Services & Utils
import { processTimeSeries } from '@grafana/ui'; import { processTimeSeries, ThemeContext } from '@grafana/ui';
// Components // Components
import { Gauge } from '@grafana/ui'; import { Gauge } from '@grafana/ui';
@@ -10,7 +10,6 @@ import { Gauge } from '@grafana/ui';
// Types // Types
import { GaugeOptions } from './types'; import { GaugeOptions } from './types';
import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types'; import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
import { ThemeProvider } from 'app/core/utils/ConfigProvider';
interface Props extends PanelProps<GaugeOptions> {} interface Props extends PanelProps<GaugeOptions> {}
@@ -38,7 +37,7 @@ export class GaugePanel extends PureComponent<Props> {
} }
return ( return (
<ThemeProvider> <ThemeContext.Consumer>
{theme => ( {theme => (
<Gauge <Gauge
value={value} value={value}
@@ -50,7 +49,7 @@ export class GaugePanel extends PureComponent<Props> {
theme={theme} theme={theme}
/> />
)} )}
</ThemeProvider> </ThemeContext.Consumer>
); );
} }
} }

12
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
View File

@@ -11,7 +11,6 @@ import {
import ValueOptions from 'app/plugins/panel/gauge/ValueOptions'; import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import GaugeOptionsEditor from './GaugeOptionsEditor'; import GaugeOptionsEditor from './GaugeOptionsEditor';
import { GaugeOptions } from './types'; import { GaugeOptions } from './types';
import { ThemeProvider } from 'app/core/utils/ConfigProvider';
export const defaultProps = { export const defaultProps = {
options: { options: {
@@ -46,24 +45,17 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
render() { render() {
const { onChange, options } = this.props; const { onChange, options } = this.props;
return ( return (
<ThemeProvider>
{(theme) => (
<> <>
<PanelOptionsGrid> <PanelOptionsGrid>
<ValueOptions onChange={onChange} options={options} /> <ValueOptions onChange={onChange} options={options} />
<GaugeOptionsEditor onChange={onChange} options={options} /> <GaugeOptionsEditor onChange={onChange} options={options} />
<ThresholdsEditor <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
onChange={this.onThresholdsChanged}
thresholds={options.thresholds}
theme={theme}
/>
</PanelOptionsGrid> </PanelOptionsGrid>
<ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} /> <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
</> </>
)}
</ThemeProvider>
); );
} }
} }

9
public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
View File

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { TimeSeries } from 'app/core/core'; import { TimeSeries } from 'app/core/core';
import { SeriesColorPicker } from '@grafana/ui'; import { SeriesColorPicker } from '@grafana/ui';
import { ThemeProvider } from 'app/core/utils/ConfigProvider'; // import { ThemeProvider } from 'app/core/utils/ConfigProvider';
export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total']; export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
@@ -167,16 +167,12 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
}; };
render() { render() {
return (
<ThemeProvider>
{theme => {
return ( return (
<SeriesColorPicker <SeriesColorPicker
yaxis={this.props.yaxis} yaxis={this.props.yaxis}
color={this.props.color} color={this.props.color}
onChange={this.props.onColorChange} onChange={this.props.onColorChange}
onToggleAxis={this.props.onToggleAxis} onToggleAxis={this.props.onToggleAxis}
theme={theme}
enableNamedColors enableNamedColors
> >
<span className="graph-legend-icon"> <span className="graph-legend-icon">
@@ -184,9 +180,6 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
</span> </span>
</SeriesColorPicker> </SeriesColorPicker>
); );
}}
</ThemeProvider>
);
} }
} }

4
public/app/plugins/panel/graph/data_processor.ts
View File

@@ -1,5 +1,5 @@
import _ from 'lodash'; import _ from 'lodash';
import { colors, GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; import { colors, GrafanaThemeType, getColorFromHexRgbOrName } from '@grafana/ui';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import config from 'app/core/config'; import config from 'app/core/config';
@@ -113,7 +113,7 @@ export class DataProcessor {
const series = new TimeSeries({ const series = new TimeSeries({
datapoints: datapoints, datapoints: datapoints,
alias: alias, alias: alias,
color: getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark), color: getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark),
unit: seriesData.unit, unit: seriesData.unit,
}); });

7
public/app/plugins/panel/graph/graph.ts
View File

@@ -25,7 +25,8 @@ import ReactDOM from 'react-dom';
import { Legend, GraphLegendProps } from './Legend/Legend'; import { Legend, GraphLegendProps } from './Legend/Legend';
import { GraphCtrl } from './module'; import { GraphCtrl } from './module';
import { GrafanaTheme, getValueFormat } from '@grafana/ui'; import { GrafanaThemeType, getValueFormat } from '@grafana/ui';
import { provideTheme } from 'app/core/utils/ConfigProvider';
class GraphElement { class GraphElement {
ctrl: GraphCtrl; ctrl: GraphCtrl;
@@ -53,7 +54,7 @@ class GraphElement {
this.thresholdManager = new ThresholdManager(this.ctrl); this.thresholdManager = new ThresholdManager(this.ctrl);
this.timeRegionManager = new TimeRegionManager( this.timeRegionManager = new TimeRegionManager(
this.ctrl, this.ctrl,
config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
); );
this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => { this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
return this.sortedSeries; return this.sortedSeries;
@@ -109,7 +110,7 @@ class GraphElement {
onToggleAxis: this.ctrl.onToggleAxis, onToggleAxis: this.ctrl.onToggleAxis,
}; };
const legendReactElem = React.createElement(Legend, legendProps); const legendReactElem = React.createElement(provideTheme(Legend), legendProps);
ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel()); ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
} }

4
public/app/plugins/panel/graph/module.ts
View File

@@ -10,7 +10,7 @@ import { MetricsPanelCtrl } from 'app/plugins/sdk';
import { DataProcessor } from './data_processor'; import { DataProcessor } from './data_processor';
import { axesEditorComponent } from './axes_editor'; import { axesEditorComponent } from './axes_editor';
import config from 'app/core/config'; import config from 'app/core/config';
import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; import { GrafanaThemeType, getColorFromHexRgbOrName } from '@grafana/ui';
class GraphCtrl extends MetricsPanelCtrl { class GraphCtrl extends MetricsPanelCtrl {
static template = template; static template = template;
@@ -244,7 +244,7 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
onColorChange = (series, color) => { onColorChange = (series, color) => {
series.setColor(getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark)); series.setColor(getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark));
this.panel.aliasColors[series.alias] = color; this.panel.aliasColors[series.alias] = color;
this.render(); this.render();
}; };

8
public/app/plugins/panel/graph/time_region_manager.ts
View File

@@ -1,7 +1,7 @@
import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot';
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; import { GrafanaThemeType, getColorFromHexRgbOrName } from '@grafana/ui';
type TimeRegionColorDefinition = { type TimeRegionColorDefinition = {
fill: string; fill: string;
@@ -43,7 +43,7 @@ export function getColorModes() {
}); });
} }
function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition { function getColor(timeRegion, theme: GrafanaThemeType): TimeRegionColorDefinition {
if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) { if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
timeRegion.colorMode = 'red'; timeRegion.colorMode = 'red';
} }
@@ -58,7 +58,7 @@ function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition {
const colorMode = colorModes[timeRegion.colorMode]; const colorMode = colorModes[timeRegion.colorMode];
if (colorMode.themeDependent === true) { if (colorMode.themeDependent === true) {
return theme === GrafanaTheme.Light ? colorMode.lightColor : colorMode.darkColor; return theme === GrafanaThemeType.Light ? colorMode.lightColor : colorMode.darkColor;
} }
return { return {
@@ -71,7 +71,7 @@ export class TimeRegionManager {
plot: any; plot: any;
timeRegions: any; timeRegions: any;
constructor(private panelCtrl, private theme: GrafanaTheme = GrafanaTheme.Dark) {} constructor(private panelCtrl, private theme: GrafanaThemeType = GrafanaThemeType.Dark) {}
draw(plot) { draw(plot) {
this.timeRegions = this.panelCtrl.panel.timeRegions; this.timeRegions = this.panelCtrl.panel.timeRegions;

4
public/app/plugins/panel/heatmap/color_legend.ts
View File

@@ -5,7 +5,7 @@ import { contextSrv } from 'app/core/core';
import { tickStep } from 'app/core/utils/ticks'; import { tickStep } from 'app/core/utils/ticks';
import { getColorScale, getOpacityScale } from './color_scale'; import { getColorScale, getOpacityScale } from './color_scale';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; import { GrafanaThemeType, getColorFromHexRgbOrName } from '@grafana/ui';
const LEGEND_HEIGHT_PX = 6; const LEGEND_HEIGHT_PX = 6;
const LEGEND_WIDTH_PX = 100; const LEGEND_WIDTH_PX = 100;
@@ -250,7 +250,7 @@ function drawSimpleOpacityLegend(elem, options) {
.attr('stroke-width', 0) .attr('stroke-width', 0)
.attr( .attr(
'fill', 'fill',
getColorFromHexRgbOrName(options.cardColor, contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark) getColorFromHexRgbOrName(options.cardColor, contextSrv.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark)
) )
.style('opacity', d => legendOpacityScale(d)); .style('opacity', d => legendOpacityScale(d));
} }

4
public/app/plugins/panel/heatmap/rendering.ts
View File

@@ -7,7 +7,7 @@ import * as ticksUtils from 'app/core/utils/ticks';
import { HeatmapTooltip } from './heatmap_tooltip'; import { HeatmapTooltip } from './heatmap_tooltip';
import { mergeZeroBuckets } from './heatmap_data_converter'; import { mergeZeroBuckets } from './heatmap_data_converter';
import { getColorScale, getOpacityScale } from './color_scale'; import { getColorScale, getOpacityScale } from './color_scale';
import { GrafanaTheme, getColorFromHexRgbOrName, getValueFormat } from '@grafana/ui'; import { GrafanaThemeType, getColorFromHexRgbOrName, getValueFormat } from '@grafana/ui';
const MIN_CARD_SIZE = 1, const MIN_CARD_SIZE = 1,
CARD_PADDING = 1, CARD_PADDING = 1,
@@ -663,7 +663,7 @@ export class HeatmapRenderer {
if (this.panel.color.mode === 'opacity') { if (this.panel.color.mode === 'opacity') {
return getColorFromHexRgbOrName( return getColorFromHexRgbOrName(
this.panel.color.cardColor, this.panel.color.cardColor,
contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark contextSrv.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
); );
} else { } else {
return this.colorScale(d.count); return this.colorScale(d.count);

8
public/app/plugins/panel/singlestat/module.ts
View File

@@ -8,7 +8,7 @@ import kbn from 'app/core/utils/kbn';
import config from 'app/core/config'; import config from 'app/core/config';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import { MetricsPanelCtrl } from 'app/plugins/sdk'; import { MetricsPanelCtrl } from 'app/plugins/sdk';
import { GrafanaTheme, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui'; import { GrafanaThemeType, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui';
class SingleStatCtrl extends MetricsPanelCtrl { class SingleStatCtrl extends MetricsPanelCtrl {
static templateUrl = 'module.html'; static templateUrl = 'module.html';
@@ -590,7 +590,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
lineWidth: 1, lineWidth: 1,
fillColor: getColorFromHexRgbOrName( fillColor: getColorFromHexRgbOrName(
panel.sparkline.fillColor, panel.sparkline.fillColor,
config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
), ),
}, },
}, },
@@ -610,7 +610,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
data: data.flotpairs, data: data.flotpairs,
color: getColorFromHexRgbOrName( color: getColorFromHexRgbOrName(
panel.sparkline.lineColor, panel.sparkline.lineColor,
config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
), ),
}; };
@@ -630,7 +630,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
// Map panel colors to hex or rgb/a values // Map panel colors to hex or rgb/a values
data.colorMap = panel.colors.map(color => data.colorMap = panel.colors.map(color =>
getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark) getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark)
); );
const body = panel.gauge.show ? '' : getBigValueHtml(); const body = panel.gauge.show ? '' : getBigValueHtml();

4
public/app/plugins/panel/table/module.ts
View File

@@ -6,7 +6,7 @@ import { transformDataToTable } from './transformers';
import { tablePanelEditor } from './editor'; import { tablePanelEditor } from './editor';
import { columnOptionsTab } from './column_options'; import { columnOptionsTab } from './column_options';
import { TableRenderer } from './renderer'; import { TableRenderer } from './renderer';
import { GrafanaTheme } from '@grafana/ui'; import { GrafanaThemeType } from '@grafana/ui';
class TablePanelCtrl extends MetricsPanelCtrl { class TablePanelCtrl extends MetricsPanelCtrl {
static templateUrl = 'module.html'; static templateUrl = 'module.html';
@@ -131,7 +131,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
this.dashboard.isTimezoneUtc(), this.dashboard.isTimezoneUtc(),
this.$sanitize, this.$sanitize,
this.templateSrv, this.templateSrv,
config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark, config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark,
); );
return super.render(this.table); return super.render(this.table);

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

@@ -1,7 +1,7 @@
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import { GrafanaTheme, getValueFormat, getColorFromHexRgbOrName } from '@grafana/ui'; import { getValueFormat, getColorFromHexRgbOrName, GrafanaThemeType } from '@grafana/ui';
export class TableRenderer { export class TableRenderer {
formatters: any[]; formatters: any[];
@@ -13,7 +13,7 @@ export class TableRenderer {
private isUtc, private isUtc,
private sanitize, private sanitize,
private templateSrv, private templateSrv,
private theme?: GrafanaTheme private theme?: GrafanaThemeType
) { ) {
this.initColumns(); this.initColumns();
} }

3
public/app/routes/ReactContainer.tsx
View File

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import { store } from 'app/store/store'; import { store } from 'app/store/store';
import { ContextSrv } from 'app/core/services/context_srv'; import { ContextSrv } from 'app/core/services/context_srv';
import { provideTheme } from 'app/core/utils/ConfigProvider';
function WrapInProvider(store, Component, props) { function WrapInProvider(store, Component, props) {
return ( return (
@@ -46,7 +47,7 @@ export function reactContainer(
$scope: scope, $scope: scope,
}; };
ReactDOM.render(WrapInProvider(store, component, props), elem[0]); ReactDOM.render(WrapInProvider(store, provideTheme(component), props), elem[0]);
scope.$on('$destroy', () => { scope.$on('$destroy', () => {
ReactDOM.unmountComponentAtNode(elem[0]); ReactDOM.unmountComponentAtNode(elem[0]);