diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index 4c5df5314b8..9b5f5b98432 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { ColorPickerProps } from './ColorPicker'; +import { ColorPickerProps } from './ColorPickerPopover'; import tinycolor from 'tinycolor2'; -import { debounce } from 'lodash'; +import debounce from 'lodash/debounce'; interface ColorInputState { previousColor: string; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index 321323ac58b..cee562c9474 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -1,32 +1,11 @@ import React, { Component, createRef } from 'react'; import { PopperController } from '../Tooltip/PopperController'; -import { Popper } from '../Tooltip/Popper'; -import { ColorPickerPopover } from './ColorPickerPopover'; -import { Themeable } from '../../types'; +import {Popper} from '../Tooltip/Popper'; +import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; -import propDeprecationWarning from '../../utils/propDeprecationWarning'; + import { withTheme } from '../../themes/ThemeContext'; -type ColorPickerChangeHandler = (color: string) => void; - -export interface ColorPickerProps extends Themeable { - color: string; - onChange: ColorPickerChangeHandler; - - /** - * @deprecated Use onChange instead - */ - onColorChange?: ColorPickerChangeHandler; - enableNamedColors?: boolean; - children?: JSX.Element; -} - -export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => { - const { onColorChange } = props; - if (onColorChange) { - propDeprecationWarning(componentName, 'onColorChange', 'onChange'); - } -}; export const colorPickerFactory = ( popover: React.ComponentType, diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx index 7a5000653d4..df4b5bb24a2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx @@ -3,7 +3,7 @@ import { mount, ReactWrapper } from 'enzyme'; import { ColorPickerPopover } from './ColorPickerPopover'; import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette'; import { ColorSwatch } from './NamedColorsGroup'; -import { flatten } from 'lodash'; +import flatten from 'lodash/flatten'; import { GrafanaThemeType } from '../../types'; import { getTheme } from '../../themes'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index ee879f94762..ce9ca5130d4 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -1,23 +1,37 @@ import React from 'react'; import { NamedColorsPalette } from './NamedColorsPalette'; import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; -import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker'; import { PopperContentProps } from '../Tooltip/PopperController'; import SpectrumPalette from './SpectrumPalette'; -import { GrafanaThemeType } from '../../types/theme'; +import { GrafanaThemeType, Themeable } from '../../types/theme'; +import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation'; +export type ColorPickerChangeHandler = (color: string) => void; + +export interface ColorPickerProps extends Themeable { + color: string; + onChange: ColorPickerChangeHandler; + + /** + * @deprecated Use onChange instead + */ + onColorChange?: ColorPickerChangeHandler; + enableNamedColors?: boolean; + children?: JSX.Element; +} export interface Props extends ColorPickerProps, PopperContentProps { customPickers?: T; } type PickerType = 'palette' | 'spectrum'; -interface CustomPickersDescriptor { +export interface CustomPickersDescriptor { [key: string]: { tabComponent: React.ComponentType; name: string; }; } + interface State { activePicker: PickerType | keyof T; } diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx index 2b5f7bb9b57..b488f14fd62 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx @@ -2,7 +2,8 @@ import React, { FunctionComponent } from 'react'; import { Themeable } from '../../types'; import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette'; import { Color } from 'csstype'; -import { find, upperFirst } from 'lodash'; +import upperFirst from 'lodash/upperFirst'; +import find from 'lodash/find'; import { selectThemeVariant } from '../../themes/selectThemeVariant'; type ColorChangeHandler = (color: ColorDefinition) => void; diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index 5fdad9c43cf..219d2dd357a 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent } from 'react'; -import { ColorPickerPopover } from './ColorPickerPopover'; -import { ColorPickerProps } from './ColorPicker'; +import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover'; import { PopperContentProps } from '../Tooltip/PopperController'; import { Switch } from '../Switch/Switch'; import { withTheme } from '../../themes/ThemeContext'; diff --git a/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts b/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts new file mode 100644 index 00000000000..b8919c682e2 --- /dev/null +++ b/packages/grafana-ui/src/components/ColorPicker/warnAboutColorPickerPropsDeprecation.ts @@ -0,0 +1,9 @@ +import propDeprecationWarning from '../../utils/propDeprecationWarning'; +import { ColorPickerProps } from './ColorPickerPopover'; + +export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => { + const { onColorChange } = props; + if (onColorChange) { + propDeprecationWarning(componentName, 'onColorChange', 'onChange'); + } +}; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 39bae62e28b..d52d2fea80d 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import _ from 'lodash'; +import isNil from 'lodash/isNil'; import classNames from 'classnames'; import Scrollbars from 'react-custom-scrollbars'; @@ -41,7 +41,7 @@ export class CustomScrollbar extends PureComponent { updateScroll() { const ref = this.ref.current; - if (ref && !_.isNil(this.props.scrollTop)) { + if (ref && !isNil(this.props.scrollTop)) { if (this.props.scrollTop > 10000) { ref.scrollToBottom(); } else { diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 593678c7383..89e879ccc64 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -1,5 +1,5 @@ import React, { InputHTMLAttributes, FunctionComponent } from 'react'; -import { FormLabel } from '..'; +import { FormLabel } from '../FormLabel/FormLabel'; export interface Props extends InputHTMLAttributes { label: string; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index de09cb8e1f8..d04daae3dab 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; - -import { ValueMapping, Threshold, BasicGaugeColor, GrafanaThemeType } from '../../types'; import { getMappedValue } from '../../utils/valueMappings'; -import { getColorFromHexRgbOrName, getValueFormat } from '../../utils'; -import { Themeable } from '../../index'; +import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; +import { Themeable, GrafanaThemeType } from '../../types/theme'; +import { ValueMapping, Threshold, BasicGaugeColor } from '../../types/panel'; +import { getValueFormat } from '../../utils/valueFormats/valueFormats'; type TimeSeriesValue = string | number | null; diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index 06973dc08e8..5528c886e0f 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -16,7 +16,7 @@ import SelectOptionGroup from './SelectOptionGroup'; import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; import resetSelectStyles from './resetSelectStyles'; -import { CustomScrollbar } from '..'; +import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; export interface SelectOptionItem { label?: string; diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index f79de95fd2d..e2a25682519 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import _ from 'lodash'; +import uniqueId from 'lodash/uniqueId'; export interface Props { label: string; @@ -17,7 +17,7 @@ export interface State { export class Switch extends PureComponent { state = { - id: _.uniqueId('check-'), + id: uniqueId(), }; internalOnChange = (event: React.FormEvent) => { diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx index c5704e8bc88..f5cfdfe6cbf 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx @@ -1,7 +1,9 @@ import React, { ChangeEvent, PureComponent } from 'react'; import { MappingType, ValueMapping } from '../../types'; -import { FormField, FormLabel, Select } from '..'; +import { Select } from '../Select/Select'; +import { FormField } from '../FormField/FormField'; +import { FormLabel } from '../FormLabel/FormLabel'; export interface Props { valueMapping: ValueMapping; diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx index c07369fa283..9778fdf13c4 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import MappingRow from './MappingRow'; import { MappingType, ValueMapping } from '../../types'; -import { PanelOptionsGroup } from '..'; +import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup'; export interface Props { valueMappings: ValueMapping[]; diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts index 216f2f13bad..1583e1e6334 100644 --- a/packages/grafana-ui/src/index.ts +++ b/packages/grafana-ui/src/index.ts @@ -2,4 +2,3 @@ export * from './components'; export * from './types'; export * from './utils'; export * from './themes'; -export * from './themes/ThemeContext'; diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx index a61a71d8af6..e2d91ce3671 100644 --- a/packages/grafana-ui/src/themes/ThemeContext.tsx +++ b/packages/grafana-ui/src/themes/ThemeContext.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { GrafanaThemeType, Themeable } from '../types'; import { getTheme } from './index'; +import { GrafanaThemeType, Themeable } from '../types/theme'; type Omit = Pick>; type Subtract = Omit; diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts index 1d8d2f62606..cc8d9335e4c 100644 --- a/packages/grafana-ui/src/themes/index.ts +++ b/packages/grafana-ui/src/themes/index.ts @@ -1,6 +1,7 @@ import darkTheme from './dark'; import lightTheme from './light'; import { GrafanaTheme } from '../types/theme'; +import { ThemeContext, withTheme } from './ThemeContext'; let themeMock: ((name?: string) => GrafanaTheme) | null; @@ -12,3 +13,5 @@ export const mockTheme = (mock: (name?: string) => GrafanaTheme) => { themeMock = null; }; }; + +export { ThemeContext, withTheme }; diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts index 65ee605c33b..a316919a9a8 100644 --- a/packages/grafana-ui/src/utils/colors.ts +++ b/packages/grafana-ui/src/utils/colors.ts @@ -1,4 +1,8 @@ -import _ from 'lodash'; +import map from 'lodash/map'; +import sortBy from 'lodash/sortBy'; +import flattenDeep from 'lodash/flattenDeep'; +import chunk from 'lodash/chunk'; +import zip from 'lodash/zip'; import tinycolor from 'tinycolor2'; export const PALETTE_ROWS = 4; @@ -69,16 +73,16 @@ export const colors = [ ]; function sortColorsByHue(hexColors: string[]) { - const hslColors = _.map(hexColors, hexToHsl); + const hslColors = map(hexColors, hexToHsl); - const sortedHSLColors = _.sortBy(hslColors, ['h']); - const chunkedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS); - const sortedChunkedHSLColors = _.map(chunkedHSLColors, chunk => { - return _.sortBy(chunk, 'l'); + const sortedHSLColors = sortBy(hslColors, ['h']); + const chunkedHSLColors = chunk(sortedHSLColors, PALETTE_ROWS); + const sortedChunkedHSLColors = map(chunkedHSLColors, chunk => { + return sortBy(chunk, 'l'); }); - const flattenedZippedSortedChunkedHSLColors = _.flattenDeep(_.zip(...sortedChunkedHSLColors)); + const flattenedZippedSortedChunkedHSLColors = flattenDeep(zip(...sortedChunkedHSLColors)); - return _.map(flattenedZippedSortedChunkedHSLColors, hslToHex); + return map(flattenedZippedSortedChunkedHSLColors, hslToHex); } function hexToHsl(color: string) { diff --git a/packages/grafana-ui/src/utils/namedColorsPalette.ts b/packages/grafana-ui/src/utils/namedColorsPalette.ts index ac1c1be6fa5..deea2374205 100644 --- a/packages/grafana-ui/src/utils/namedColorsPalette.ts +++ b/packages/grafana-ui/src/utils/namedColorsPalette.ts @@ -1,5 +1,5 @@ -import { flatten } from 'lodash'; -import { GrafanaThemeType } from '../types'; +import flatten from 'lodash/flatten'; +import { GrafanaThemeType } from '../types/theme'; import tinycolor from 'tinycolor2'; type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple'; diff --git a/packages/grafana-ui/src/utils/processTimeSeries.ts b/packages/grafana-ui/src/utils/processTimeSeries.ts index 9a18b85fe18..f5e9f96efba 100644 --- a/packages/grafana-ui/src/utils/processTimeSeries.ts +++ b/packages/grafana-ui/src/utils/processTimeSeries.ts @@ -1,5 +1,5 @@ // Libraries -import _ from 'lodash'; +import isNumber from 'lodash/isNumber'; import { colors } from './colors'; @@ -75,7 +75,7 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS } if (currentValue !== null) { - if (_.isNumber(currentValue)) { + if (isNumber(currentValue)) { total += currentValue; allIsNull = false; nonNulls++; diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx index af6d63c6542..dbe2c505069 100644 --- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx +++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { RenderFunction } from '@storybook/react'; import { ThemeContext } from '../../themes/ThemeContext'; import { select } from '@storybook/addon-knobs'; -import { getTheme } from '../../themes'; +import { getTheme } from '../../themes/index'; import { GrafanaThemeType } from '../../types'; const ThemableStory: React.FunctionComponent<{}> = ({ children }) => { diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 9c6be4be242..619391d46d1 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -11,7 +11,7 @@ import { colors } from '@grafana/ui'; import TableModel, { mergeTablesIntoModel } from 'app/core/table_model'; // Types -import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui/src/types'; +import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui'; import TimeSeries from 'app/core/time_series2'; import { ExploreUrlState,