From e5f74fdf93d045ce57bed062cd6bab009acdc505 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 23 Jan 2019 15:31:41 +0100 Subject: [PATCH] Rename colorsPalette util to namedColorsPalette --- .../src/components/ColorPicker/ColorPicker.tsx | 11 ++++++++--- .../components/ColorPicker/ColorPickerPopover.tsx | 2 +- .../components/ColorPicker/NamedColorsGroup.tsx | 2 +- .../ColorPicker/NamedColorsPalette.story.tsx | 2 +- .../components/ColorPicker/NamedColorsPalette.tsx | 2 +- .../src/components/ColorPicker/SpectrumPalette.tsx | 2 +- packages/grafana-ui/src/components/Gauge/Gauge.tsx | 13 +++---------- .../ThresholdsEditor/ThresholdsEditor.tsx | 2 +- packages/grafana-ui/src/utils/index.ts | 1 + ...sPalette.test.ts => namedColorsPalette.test.ts} | 14 +++++++++----- .../{colorsPalette.ts => namedColorsPalette.ts} | 0 public/app/plugins/panel/graph/data_processor.ts | 4 +--- public/app/plugins/panel/graph/module.ts | 3 +-- .../app/plugins/panel/graph/threshold_manager.ts | 2 +- .../app/plugins/panel/graph/time_region_manager.ts | 3 +-- public/app/plugins/panel/heatmap/color_legend.ts | 3 +-- public/app/plugins/panel/heatmap/rendering.ts | 5 +---- public/app/plugins/panel/singlestat/module.ts | 2 +- public/app/plugins/panel/table/renderer.ts | 2 +- .../app/plugins/panel/table/specs/renderer.test.ts | 2 +- 20 files changed, 36 insertions(+), 41 deletions(-) rename packages/grafana-ui/src/utils/{colorsPalette.test.ts => namedColorsPalette.test.ts} (87%) rename packages/grafana-ui/src/utils/{colorsPalette.ts => namedColorsPalette.ts} (100%) diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index ee7ea241f06..b50e177833a 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -3,7 +3,7 @@ import PopperController from '../Tooltip/PopperController'; import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper'; import { ColorPickerPopover } from './ColorPickerPopover'; import { Themeable, GrafanaTheme } from '../../types'; -import { getColorFromHexRgbOrName } from '../../utils/colorsPalette'; +import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import propDeprecationWarning from '../../utils/propDeprecationWarning'; @@ -61,7 +61,7 @@ export const colorPickerFactory = ( }; return ( - + {(showPopper, hidePopper, popperProps) => { return ( <> @@ -83,7 +83,12 @@ export const colorPickerFactory = ( onMouseLeave: hidePopper, }) ) : ( -
+
= ({ children }) => { diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx index 0932b5bde76..9ae216aa8b0 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Color, ColorsPalette } from '../../utils/colorsPalette'; +import { Color, ColorsPalette } from '../../utils/namedColorsPalette'; import { Themeable } from '../../types/index'; import NamedColorsGroup from './NamedColorsGroup'; diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index 7c890bca0e9..cf001cf5629 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { CustomPicker, ColorResult } from 'react-color'; 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 ColorInput from './ColorInput'; import { Themeable, GrafanaTheme } from '../../types'; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 6f1dd009c7d..c0f23f17bc3 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,18 +1,11 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { - ValueMapping, - Threshold, - MappingType, - BasicGaugeColor, - ValueMap, - RangeMap, -} from '../../types/panel'; +import { ValueMapping, Threshold, MappingType, BasicGaugeColor, ValueMap, RangeMap } from '../../types/panel'; import { TimeSeriesVMs } from '../../types/series'; import { getValueFormat } from '../../utils/valueFormats/valueFormats'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; -import { GrafanaTheme } from '@grafana/ui/src/types'; +import { GrafanaTheme } from '../../types'; +import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; type TimeSeriesValue = string | number | null; diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index 78979e5e3e0..c15f66cca54 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -3,7 +3,7 @@ import { Threshold, Themeable } from '../../types'; import { ColorPicker } from '../ColorPicker/ColorPicker'; import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; import { colors } from '../../utils'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; +import { getColorFromHexRgbOrName } from '@grafana/ui'; export interface Props extends Themeable { thresholds: Threshold[]; diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts index aeb65032067..52a8535f9e1 100644 --- a/packages/grafana-ui/src/utils/index.ts +++ b/packages/grafana-ui/src/utils/index.ts @@ -1,3 +1,4 @@ export * from './processTimeSeries'; export * from './valueFormats/valueFormats'; export * from './colors'; +export * from './namedColorsPalette'; diff --git a/packages/grafana-ui/src/utils/colorsPalette.test.ts b/packages/grafana-ui/src/utils/namedColorsPalette.test.ts similarity index 87% rename from packages/grafana-ui/src/utils/colorsPalette.test.ts rename to packages/grafana-ui/src/utils/namedColorsPalette.test.ts index fc22ed0ae2e..ad5822fbaaa 100644 --- a/packages/grafana-ui/src/utils/colorsPalette.test.ts +++ b/packages/grafana-ui/src/utils/namedColorsPalette.test.ts @@ -1,8 +1,13 @@ -import { getColorName, getColorDefinition, getColorByName, SemiDarkBlue, getColorFromHexRgbOrName } from './colorsPalette'; -import { GrafanaTheme } from '../types'; +import { + getColorName, + getColorDefinition, + getColorByName, + SemiDarkBlue, + getColorFromHexRgbOrName, +} from './namedColorsPalette'; +import { GrafanaTheme } from '../types/index'; describe('colors', () => { - describe('getColorDefinition', () => { it('returns undefined for unknown hex', () => { expect(getColorDefinition('#ff0000')).toBeUndefined(); @@ -33,7 +38,6 @@ describe('colors', () => { it('returns color definiton for known color', () => { expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue); }); - }); describe('getColorFromHexRgbOrName', () => { it('returns undefined for unknown color', () => { @@ -44,7 +48,7 @@ describe('colors', () => { 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); }); diff --git a/packages/grafana-ui/src/utils/colorsPalette.ts b/packages/grafana-ui/src/utils/namedColorsPalette.ts similarity index 100% rename from packages/grafana-ui/src/utils/colorsPalette.ts rename to packages/grafana-ui/src/utils/namedColorsPalette.ts diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts index 434070c2fe2..4141d36e273 100644 --- a/public/app/plugins/panel/graph/data_processor.ts +++ b/public/app/plugins/panel/graph/data_processor.ts @@ -1,8 +1,6 @@ import _ from 'lodash'; -import { colors, GrafanaTheme } from '@grafana/ui'; - +import { colors, GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; import TimeSeries from 'app/core/time_series2'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import config from 'app/core/config'; export class DataProcessor { diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 362cc67c0ae..f72b441b67b 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -9,9 +9,8 @@ import _ from 'lodash'; import { MetricsPanelCtrl } from 'app/plugins/sdk'; import { DataProcessor } from './data_processor'; import { axesEditorComponent } from './axes_editor'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; import config from 'app/core/config'; -import { GrafanaTheme } from '@grafana/ui'; +import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; class GraphCtrl extends MetricsPanelCtrl { static template = template; diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index 1c782a99d3a..ef9feb80a5b 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/public/app/plugins/panel/graph/threshold_manager.ts @@ -1,7 +1,7 @@ import 'vendor/flot/jquery.flot'; import $ from 'jquery'; import _ from 'lodash'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; +import { getColorFromHexRgbOrName } from '@grafana/ui'; export class ThresholdManager { plot: any; diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts index 6d13e37d5c5..be5de722fe2 100644 --- a/public/app/plugins/panel/graph/time_region_manager.ts +++ b/public/app/plugins/panel/graph/time_region_manager.ts @@ -1,8 +1,7 @@ import 'vendor/flot/jquery.flot'; import _ from 'lodash'; import moment from 'moment'; -import { GrafanaTheme } from '@grafana/ui'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; +import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; type TimeRegionColorDefinition = { fill: string; diff --git a/public/app/plugins/panel/heatmap/color_legend.ts b/public/app/plugins/panel/heatmap/color_legend.ts index 4ba98890a31..81329fe297b 100644 --- a/public/app/plugins/panel/heatmap/color_legend.ts +++ b/public/app/plugins/panel/heatmap/color_legend.ts @@ -5,8 +5,7 @@ import { contextSrv } from 'app/core/core'; import { tickStep } from 'app/core/utils/ticks'; import { getColorScale, getOpacityScale } from './color_scale'; import coreModule from 'app/core/core_module'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; -import { GrafanaTheme } from '@grafana/ui'; +import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; const LEGEND_HEIGHT_PX = 6; const LEGEND_WIDTH_PX = 100; diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 68ee65547e2..6333a985819 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/public/app/plugins/panel/heatmap/rendering.ts @@ -8,8 +8,7 @@ import * as ticksUtils from 'app/core/utils/ticks'; import { HeatmapTooltip } from './heatmap_tooltip'; import { mergeZeroBuckets } from './heatmap_data_converter'; import { getColorScale, getOpacityScale } from './color_scale'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; -import { GrafanaTheme } from '@grafana/ui'; +import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui'; const MIN_CARD_SIZE = 1, CARD_PADDING = 1, @@ -663,12 +662,10 @@ export class HeatmapRenderer { getCardColor(d) { if (this.panel.color.mode === 'opacity') { - return getColorFromHexRgbOrName( this.panel.color.cardColor, contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark ); - } else { return this.colorScale(d.count); } diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 25d544d4922..bb62109e0ad 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -8,7 +8,7 @@ import kbn from 'app/core/utils/kbn'; import config from 'app/core/config'; import TimeSeries from 'app/core/time_series2'; import { MetricsPanelCtrl } from 'app/plugins/sdk'; -import { getColorFromHexRgbOrName } from '@grafana/ui/src/utils/colorsPalette'; +import { getColorFromHexRgbOrName } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/ui'; class SingleStatCtrl extends MetricsPanelCtrl { diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index 9f0354a6843..ccaf3ddf423 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -1,7 +1,7 @@ import _ from 'lodash'; import moment from 'moment'; 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'; export class TableRenderer { diff --git a/public/app/plugins/panel/table/specs/renderer.test.ts b/public/app/plugins/panel/table/specs/renderer.test.ts index 017dc6f0538..a6e03417085 100644 --- a/public/app/plugins/panel/table/specs/renderer.test.ts +++ b/public/app/plugins/panel/table/specs/renderer.test.ts @@ -1,7 +1,7 @@ import _ from 'lodash'; import TableModel from 'app/core/table_model'; import { TableRenderer } from '../renderer'; -import { SemiDarkOrange } from '@grafana/ui/src/utils/colorsPalette'; +import { SemiDarkOrange } from '@grafana/ui'; describe('when rendering table', () => { describe('given 13 columns', () => {