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

Rename colorsPalette util to namedColorsPalette

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-23 15:31:41 +01:00
parent 511895c079
commit e5f74fdf93
20 changed files with 36 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ 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 { Themeable, GrafanaTheme } from '../../types';
import { getColorFromHexRgbOrName } from '../../utils/colorsPalette'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
import propDeprecationWarning from '../../utils/propDeprecationWarning'; import propDeprecationWarning from '../../utils/propDeprecationWarning';
@ -61,7 +61,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
}; };
return ( return (
<PopperController content={popoverElement} hideAfter={500}> <PopperController content={popoverElement} hideAfter={500000}>
{(showPopper, hidePopper, popperProps) => { {(showPopper, hidePopper, popperProps) => {
return ( return (
<> <>
@ -83,7 +83,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
onMouseLeave: hidePopper, onMouseLeave: hidePopper,
}) })
) : ( ) : (
<div ref={this.pickerTriggerRef} onClick={showPopper} onMouseLeave={hidePopper} className="sp-replacer sp-light"> <div
ref={this.pickerTriggerRef}
onClick={showPopper}
onMouseLeave={hidePopper}
className="sp-replacer sp-light"
>
<div className="sp-preview"> <div className="sp-preview">
<div <div
className="sp-preview-inner" className="sp-preview-inner"

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import NamedColorsPicker from './NamedColorsPalette'; import NamedColorsPicker from './NamedColorsPalette';
import { getColorName, getColorFromHexRgbOrName } from '../..//utils/colorsPalette'; import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { ColorPickerProps, handleColorPickerPropsDeprecation } from './ColorPicker'; import { ColorPickerProps, handleColorPickerPropsDeprecation } from './ColorPicker';
import { GrafanaTheme, Themeable } from '../../types'; import { GrafanaTheme, Themeable } from '../../types';
import { PopperContentProps } from '../Tooltip/PopperController'; import { PopperContentProps } from '../Tooltip/PopperController';

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

@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { Themeable, GrafanaTheme } from '../../types'; import { Themeable, GrafanaTheme } from '../../types';
import { ColorDefinition, getColorForTheme } from '../../utils/colorsPalette'; import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
import { Color } from 'csstype'; import { Color } from 'csstype';
import { find, upperFirst } from 'lodash'; import { find, upperFirst } from 'lodash';

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

@ -1,7 +1,7 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import NamedColorsPalette from './NamedColorsPalette'; import NamedColorsPalette from './NamedColorsPalette';
import { getColorName } from '@grafana/ui/src/utils/colorsPalette'; import { getColorName } from '../../utils/namedColorsPalette';
import { withKnobs, select } from '@storybook/addon-knobs'; import { withKnobs, select } from '@storybook/addon-knobs';
const CenteredStory: FunctionComponent<{}> = ({ children }) => { const CenteredStory: FunctionComponent<{}> = ({ children }) => {

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Color, ColorsPalette } from '../../utils/colorsPalette'; import { Color, ColorsPalette } from '../../utils/namedColorsPalette';
import { Themeable } from '../../types/index'; import { Themeable } from '../../types/index';
import NamedColorsGroup from './NamedColorsGroup'; import NamedColorsGroup from './NamedColorsGroup';

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

@ -2,7 +2,7 @@ import React from 'react';
import { CustomPicker, ColorResult } from 'react-color'; import { CustomPicker, ColorResult } from 'react-color';
import { Saturation, Hue, Alpha } from 'react-color/lib/components/common'; import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
import { getColorFromHexRgbOrName } from '../../utils/colorsPalette'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import ColorInput from './ColorInput'; import ColorInput from './ColorInput';
import { Themeable, GrafanaTheme } from '../../types'; import { Themeable, GrafanaTheme } from '../../types';

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

@ -1,18 +1,11 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import $ from 'jquery'; import $ from 'jquery';
import { import { ValueMapping, Threshold, MappingType, BasicGaugeColor, ValueMap, RangeMap } from '../../types/panel';
ValueMapping,
Threshold,
MappingType,
BasicGaugeColor,
ValueMap,
RangeMap,
} from '../../types/panel';
import { TimeSeriesVMs } from '../../types/series'; import { TimeSeriesVMs } from '../../types/series';
import { getValueFormat } from '../../utils/valueFormats/valueFormats'; import { getValueFormat } from '../../utils/valueFormats/valueFormats';
import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { GrafanaTheme } from '../../types';
import { GrafanaTheme } from '@grafana/ui/src/types'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
type TimeSeriesValue = string | number | null; type TimeSeriesValue = string | number | null;

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

@ -3,7 +3,7 @@ import { Threshold, Themeable } 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/src/utils/colorsPalette'; import { getColorFromHexRgbOrName } from '@grafana/ui';
export interface Props extends Themeable { export interface Props extends Themeable {
thresholds: Threshold[]; thresholds: Threshold[];

1
packages/grafana-ui/src/utils/index.ts
View File

@ -1,3 +1,4 @@
export * from './processTimeSeries'; export * from './processTimeSeries';
export * from './valueFormats/valueFormats'; export * from './valueFormats/valueFormats';
export * from './colors'; export * from './colors';
export * from './namedColorsPalette';

14
packages/grafana-ui/src/utils/colorsPalette.test.ts → packages/grafana-ui/src/utils/namedColorsPalette.test.ts
View File

@ -1,8 +1,13 @@
import { getColorName, getColorDefinition, getColorByName, SemiDarkBlue, getColorFromHexRgbOrName } from './colorsPalette'; import {
import { GrafanaTheme } from '../types'; getColorName,
getColorDefinition,
getColorByName,
SemiDarkBlue,
getColorFromHexRgbOrName,
} from './namedColorsPalette';
import { GrafanaTheme } from '../types/index';
describe('colors', () => { describe('colors', () => {
describe('getColorDefinition', () => { describe('getColorDefinition', () => {
it('returns undefined for unknown hex', () => { it('returns undefined for unknown hex', () => {
expect(getColorDefinition('#ff0000')).toBeUndefined(); expect(getColorDefinition('#ff0000')).toBeUndefined();
@ -33,7 +38,6 @@ describe('colors', () => {
it('returns color definiton for known color', () => { it('returns color definiton for known color', () => {
expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue); expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue);
}); });
}); });
describe('getColorFromHexRgbOrName', () => { describe('getColorFromHexRgbOrName', () => {
it('returns undefined for unknown color', () => { it('returns undefined for unknown color', () => {
@ -44,7 +48,7 @@ describe('colors', () => {
expect(getColorFromHexRgbOrName(SemiDarkBlue.name)).toBe(SemiDarkBlue.variants.dark); expect(getColorFromHexRgbOrName(SemiDarkBlue.name)).toBe(SemiDarkBlue.variants.dark);
}); });
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, GrafanaTheme.Light)).toBe(SemiDarkBlue.variants.light);
}); });

0
packages/grafana-ui/src/utils/colorsPalette.ts → packages/grafana-ui/src/utils/namedColorsPalette.ts
View File

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

@ -1,8 +1,6 @@
import _ from 'lodash'; import _ from 'lodash';
import { colors, GrafanaTheme } from '@grafana/ui'; import { colors, GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
import config from 'app/core/config'; import config from 'app/core/config';
export class DataProcessor { export class DataProcessor {

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

@ -9,9 +9,8 @@ import _ from 'lodash';
import { MetricsPanelCtrl } from 'app/plugins/sdk'; 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 { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
import config from 'app/core/config'; import config from 'app/core/config';
import { GrafanaTheme } from '@grafana/ui'; import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
class GraphCtrl extends MetricsPanelCtrl { class GraphCtrl extends MetricsPanelCtrl {
static template = template; static template = template;

2
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -1,7 +1,7 @@
import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot';
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { getColorFromHexRgbOrName } from '@grafana/ui';
export class ThresholdManager { export class ThresholdManager {
plot: any; plot: any;

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

@ -1,8 +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 } from '@grafana/ui'; import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette';
type TimeRegionColorDefinition = { type TimeRegionColorDefinition = {
fill: string; fill: string;

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

@ -5,8 +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 { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/ui';
const LEGEND_HEIGHT_PX = 6; const LEGEND_HEIGHT_PX = 6;
const LEGEND_WIDTH_PX = 100; const LEGEND_WIDTH_PX = 100;

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

@ -8,8 +8,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 { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/ui';
const MIN_CARD_SIZE = 1, const MIN_CARD_SIZE = 1,
CARD_PADDING = 1, CARD_PADDING = 1,
@ -663,12 +662,10 @@ export class HeatmapRenderer {
getCardColor(d) { getCardColor(d) {
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 ? GrafanaTheme.Light : GrafanaTheme.Dark
); );
} else { } else {
return this.colorScale(d.count); return this.colorScale(d.count);
} }

2
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 { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { getColorFromHexRgbOrName } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/ui';
class SingleStatCtrl extends MetricsPanelCtrl { class SingleStatCtrl extends MetricsPanelCtrl {

2
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 { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import { getColorFromHexRgbOrName } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/ui';
export class TableRenderer { export class TableRenderer {

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

@ -1,7 +1,7 @@
import _ from 'lodash'; import _ from 'lodash';
import TableModel from 'app/core/table_model'; import TableModel from 'app/core/table_model';
import { TableRenderer } from '../renderer'; import { TableRenderer } from '../renderer';
import { SemiDarkOrange } from '@grafana/ui/src/utils/colorsPalette'; import { SemiDarkOrange } from '@grafana/ui';
describe('when rendering table', () => { describe('when rendering table', () => {
describe('given 13 columns', () => { describe('given 13 columns', () => {