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

Moved colorpicker to ui/components

Browse Source
This commit is contained in:
Hugo Häggmark
2019-01-10 13:34:23 +01:00
parent 7e106b0f49
commit d376fae393
26 changed files with 157 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/package.json
View File

@@ -23,7 +23,9 @@
"react-highlight-words": "0.11.0",
"react-popper": "^1.3.0",
"react-transition-group": "^2.2.1",
"react-virtualized": "^9.21.0"
"react-virtualized": "^9.21.0",
"tether-drop": "https://github.com/torkelo/drop/tarball/master",
"tinycolor2": "^1.4.1"
},
"devDependencies": {
"@types/classnames": "^2.2.6",

2
public/app/core/specs/ColorPalette.test.tsx → packages/grafana-ui/src/components/ColorPicker/ColorPalette.test.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { ColorPalette } from '../components/colorpicker/ColorPalette';
import { ColorPalette } from './ColorPalette';
describe('CollorPalette', () => {
it('renders correctly', () => {

6
public/app/core/components/colorpicker/ColorPalette.tsx → packages/grafana-ui/src/components/ColorPicker/ColorPalette.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { sortedColors } from 'app/core/utils/colors';
import { sortedColors } from '../../utils';
export interface Props {
color: string;
@@ -9,13 +9,13 @@ export interface Props {
export class ColorPalette extends React.Component<Props, any> {
paletteColors: string[];
constructor(props) {
constructor(props: Props) {
super(props);
this.paletteColors = sortedColors;
this.onColorSelect = this.onColorSelect.bind(this);
}
onColorSelect(color) {
onColorSelect(color: string) {
return () => {
this.props.onColorSelect(color);
};

10
public/app/core/components/colorpicker/ColorPicker.tsx → packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Drop from 'tether-drop';
import { ColorPickerPopover } from './ColorPickerPopover';
import { react2AngularDirective } from 'app/core/utils/react2angular';
export interface Props {
color: string;
@@ -10,7 +9,7 @@ export interface Props {
}
export class ColorPicker extends React.Component<Props, any> {
pickerElem: HTMLElement;
pickerElem: HTMLElement | null;
colorPickerDrop: any;
openColorPicker = () => {
@@ -45,7 +44,7 @@ export class ColorPicker extends React.Component<Props, any> {
}, 100);
};
onColorSelect = color => {
onColorSelect = (color: string) => {
this.props.onChange(color);
};
@@ -59,8 +58,3 @@ export class ColorPicker extends React.Component<Props, any> {
);
}
}
react2AngularDirective('colorPicker', ColorPicker, [
'color',
['onChange', { watchDepth: 'reference', wrapApply: true }],
]);

33
public/app/core/components/colorpicker/ColorPickerPopover.tsx → packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@@ -14,7 +14,7 @@ export interface Props {
export class ColorPickerPopover extends React.Component<Props, any> {
pickerNavElem: any;
constructor(props) {
constructor(props: Props) {
super(props);
this.state = {
tab: 'palette',
@@ -23,60 +23,51 @@ export class ColorPickerPopover extends React.Component<Props, any> {
};
}
setPickerNavElem(elem) {
setPickerNavElem(elem: any) {
this.pickerNavElem = $(elem);
}
setColor(color) {
setColor(color: string) {
const newColor = tinycolor(color);
if (newColor.isValid()) {
this.setState({
color: newColor.toString(),
colorString: newColor.toString(),
});
this.setState({ color: newColor.toString(), colorString: newColor.toString() });
this.props.onColorSelect(color);
}
}
sampleColorSelected(color) {
sampleColorSelected(color: string) {
this.setColor(color);
}
spectrumColorSelected(color) {
spectrumColorSelected(color: any) {
const rgbColor = color.toRgbString();
this.setColor(rgbColor);
}
onColorStringChange(e) {
onColorStringChange(e: any) {
const colorString = e.target.value;
this.setState({
colorString: colorString,
});
this.setState({ colorString: colorString });
const newColor = tinycolor(colorString);
if (newColor.isValid()) {
// Update only color state
const newColorString = newColor.toString();
this.setState({
color: newColorString,
});
this.setState({ color: newColorString });
this.props.onColorSelect(newColorString);
}
}
onColorStringBlur(e) {
onColorStringBlur(e: any) {
const colorString = e.target.value;
this.setColor(colorString);
}
componentDidMount() {
this.pickerNavElem.find('li:first').addClass('active');
this.pickerNavElem.on('show', e => {
this.pickerNavElem.on('show', (e: any) => {
// use href attr (#name => name)
const tab = e.target.hash.slice(1);
this.setState({
tab: tab,
});
this.setState({ tab: tab });
});
}

4
public/app/core/components/colorpicker/SeriesColorPicker.tsx → packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
View File

@@ -8,7 +8,7 @@ export interface SeriesColorPickerProps {
yaxis?: number;
optionalClass?: string;
onColorChange: (newColor: string) => void;
onToggleAxis?: () => void;
onToggleAxis: () => void;
}
export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
@@ -21,7 +21,7 @@ export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
onToggleAxis: () => {},
};
constructor(props) {
constructor(props: SeriesColorPickerProps) {
super(props);
}

11
public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx → packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
View File

@@ -1,12 +1,11 @@
import React from 'react';
import { ColorPickerPopover } from './ColorPickerPopover';
import { react2AngularDirective } from 'app/core/utils/react2angular';
export interface SeriesColorPickerPopoverProps {
color: string;
yaxis?: number;
onColorChange: (color: string) => void;
onToggleAxis?: () => void;
onToggleAxis: () => void;
}
export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPickerPopoverProps, any> {
@@ -30,7 +29,7 @@ interface AxisSelectorState {
}
export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSelectorState> {
constructor(props) {
constructor(props: AxisSelectorProps) {
super(props);
this.state = {
yaxis: this.props.yaxis,
@@ -62,9 +61,3 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
);
}
}
react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
'series',
'onColorChange',
'onToggleAxis',
]);

8
public/app/core/components/colorpicker/SpectrumPicker.tsx → packages/grafana-ui/src/components/ColorPicker/SpectrumPicker.tsx
View File

@@ -13,17 +13,17 @@ export class SpectrumPicker extends React.Component<Props, any> {
elem: any;
isMoving: boolean;
constructor(props) {
constructor(props: Props) {
super(props);
this.onSpectrumMove = this.onSpectrumMove.bind(this);
this.setComponentElem = this.setComponentElem.bind(this);
}
setComponentElem(elem) {
setComponentElem(elem: any) {
this.elem = $(elem);
}
onSpectrumMove(color) {
onSpectrumMove(color: any) {
this.isMoving = true;
this.props.onColorSelect(color);
}
@@ -46,7 +46,7 @@ export class SpectrumPicker extends React.Component<Props, any> {
this.elem.spectrum('set', this.props.color);
}
componentWillUpdate(nextProps) {
componentWillUpdate(nextProps: any) {
// If user move pointer over spectrum field this produce 'move' event and component
// may update props.color. We don't want to update spectrum color in this case, so we can use
// isMoving flag for tracking moving state. Flag should be cleared in componentDidUpdate() which

0
public/app/core/specs/__snapshots__/ColorPalette.test.tsx.snap → packages/grafana-ui/src/components/ColorPicker/__snapshots__/ColorPalette.test.tsx.snap
View File

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

@@ -2,3 +2,6 @@ export { DeleteButton } from './DeleteButton/DeleteButton';
export { Tooltip } from './Tooltip/Tooltip';
export { Portal } from './Portal/Portal';
export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
export { ColorPicker } from './ColorPicker/ColorPicker';
export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';

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

@@ -2,4 +2,5 @@ export * from './components';
export * from './visualizations';
export * from './types';
export * from './utils';
export { default } from './utils';
export * from './forms';

94
packages/grafana-ui/src/utils/colors.ts Normal file
View File

@@ -0,0 +1,94 @@
import _ from 'lodash';
import tinycolor from 'tinycolor2';
export const PALETTE_ROWS = 4;
export const PALETTE_COLUMNS = 14;
export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
export const OK_COLOR = 'rgba(11, 237, 50, 1)';
export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
export const REGION_FILL_ALPHA = 0.09;
const colors = [
'#7EB26D', // 0: pale green
'#EAB839', // 1: mustard
'#6ED0E0', // 2: light blue
'#EF843C', // 3: orange
'#E24D42', // 4: red
'#1F78C1', // 5: ocean
'#BA43A9', // 6: purple
'#705DA0', // 7: violet
'#508642', // 8: dark green
'#CCA300', // 9: dark sand
'#447EBC',
'#C15C17',
'#890F02',
'#0A437C',
'#6D1F62',
'#584477',
'#B7DBAB',
'#F4D598',
'#70DBED',
'#F9BA8F',
'#F29191',
'#82B5D8',
'#E5A8E2',
'#AEA2E0',
'#629E51',
'#E5AC0E',
'#64B0C8',
'#E0752D',
'#BF1B00',
'#0A50A1',
'#962D82',
'#614D93',
'#9AC48A',
'#F2C96D',
'#65C5DB',
'#F9934E',
'#EA6460',
'#5195CE',
'#D683CE',
'#806EB7',
'#3F6833',
'#967302',
'#2F575E',
'#99440A',
'#58140C',
'#052B51',
'#511749',
'#3F2B5B',
'#E0F9D7',
'#FCEACA',
'#CFFAFF',
'#F9E2D2',
'#FCE2DE',
'#BADFF4',
'#F9D9F9',
'#DEDAF7',
];
function sortColorsByHue(hexColors: string[]) {
const hslColors = _.map(hexColors, hexToHsl);
let sortedHSLColors = _.sortBy(hslColors, ['h']);
sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
sortedHSLColors = _.map(sortedHSLColors, chunk => {
return _.sortBy(chunk, 'l');
});
sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
return _.map(sortedHSLColors, hslToHex);
}
function hexToHsl(color: string) {
return tinycolor(color).toHsl();
}
function hslToHex(color: string) {
return tinycolor(color).toHexString();
}
export let sortedColors = sortColorsByHue(colors);
export default colors;

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

@@ -1 +1,3 @@
export * from './processTimeSeries';
export * from './colors';
export { default } from './colors';

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

@@ -6,6 +6,7 @@ import { SearchResult } from './components/search/SearchResult';
import { TagFilter } from './components/TagFilter/TagFilter';
import { SideMenu } from './components/sidemenu/SideMenu';
import AppNotificationList from './components/AppNotifications/AppNotificationList';
import { ColorPicker, SeriesColorPickerPopover } from '@grafana/ui';
export function registerAngularDirectives() {
react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
@@ -19,4 +20,13 @@ export function registerAngularDirectives() {
['onChange', { watchDepth: 'reference' }],
['tagOptions', { watchDepth: 'reference' }],
]);
react2AngularDirective('colorPicker', ColorPicker, [
'color',
['onChange', { watchDepth: 'reference', wrapApply: true }],
]);
react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
'series',
'onColorChange',
'onToggleAxis',
]);
}

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

@@ -13,8 +13,6 @@ import './partials';
import './components/jsontree/jsontree';
import './components/code_editor/code_editor';
import './utils/outline';
import './components/colorpicker/ColorPicker';
import './components/colorpicker/SeriesColorPickerPopover';
import './components/colorpicker/spectrum_picker';
import './services/search_srv';
import './services/ng_react';
@@ -36,7 +34,7 @@ import 'app/core/services/all';
import './filters/filters';
import coreModule from './core_module';
import appEvents from './app_events';
import colors from './utils/colors';
import colors from '@grafana/ui/';
import { assignModelProperties } from './utils/model_utils';
import { contextSrv } from './services/context_srv';
import { KeybindingSrv } from './services/keybindingSrv';

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

@@ -1,6 +1,8 @@
import _ from 'lodash';
import colors from '@grafana/ui';
import { TimeSeries } from 'app/core/core';
import colors, { getThemeColor } from 'app/core/utils/colors';
import { getThemeColor } from 'app/core/utils/colors';
/**
* Mapping of log level abbreviation to canonical log level.

94
public/app/core/utils/colors.ts
View File

@@ -1,99 +1,5 @@
import _ from 'lodash';
import tinycolor from 'tinycolor2';
import config from 'app/core/config';
export const PALETTE_ROWS = 4;
export const PALETTE_COLUMNS = 14;
export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
export const OK_COLOR = 'rgba(11, 237, 50, 1)';
export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
export const REGION_FILL_ALPHA = 0.09;
const colors = [
'#7EB26D', // 0: pale green
'#EAB839', // 1: mustard
'#6ED0E0', // 2: light blue
'#EF843C', // 3: orange
'#E24D42', // 4: red
'#1F78C1', // 5: ocean
'#BA43A9', // 6: purple
'#705DA0', // 7: violet
'#508642', // 8: dark green
'#CCA300', // 9: dark sand
'#447EBC',
'#C15C17',
'#890F02',
'#0A437C',
'#6D1F62',
'#584477',
'#B7DBAB',
'#F4D598',
'#70DBED',
'#F9BA8F',
'#F29191',
'#82B5D8',
'#E5A8E2',
'#AEA2E0',
'#629E51',
'#E5AC0E',
'#64B0C8',
'#E0752D',
'#BF1B00',
'#0A50A1',
'#962D82',
'#614D93',
'#9AC48A',
'#F2C96D',
'#65C5DB',
'#F9934E',
'#EA6460',
'#5195CE',
'#D683CE',
'#806EB7',
'#3F6833',
'#967302',
'#2F575E',
'#99440A',
'#58140C',
'#052B51',
'#511749',
'#3F2B5B',
'#E0F9D7',
'#FCEACA',
'#CFFAFF',
'#F9E2D2',
'#FCE2DE',
'#BADFF4',
'#F9D9F9',
'#DEDAF7',
];
export function sortColorsByHue(hexColors) {
const hslColors = _.map(hexColors, hexToHsl);
let sortedHSLColors = _.sortBy(hslColors, ['h']);
sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
sortedHSLColors = _.map(sortedHSLColors, chunk => {
return _.sortBy(chunk, 'l');
});
sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
return _.map(sortedHSLColors, hslToHex);
}
export function hexToHsl(color) {
return tinycolor(color).toHsl();
}
export function hslToHex(color) {
return tinycolor(color).toHexString();
}
export function getThemeColor(dark: string, light: string): string {
return config.bootData.user.lightTheme ? light : dark;
}
export let sortedColors = sortColorsByHue(colors);
export default colors;

2
public/app/core/utils/explore.ts
View File

@@ -1,9 +1,9 @@
import _ from 'lodash';
import colors from '@grafana/ui';
import { renderUrl } from 'app/core/utils/url';
import kbn from 'app/core/utils/kbn';
import store from 'app/core/store';
import colors from 'app/core/utils/colors';
import { parse as parseDate } from 'app/core/utils/datemath';
import TimeSeries from 'app/core/time_series2';

7
public/app/features/annotations/event_manager.ts
View File

@@ -1,8 +1,6 @@
import _ from 'lodash';
import moment from 'moment';
import tinycolor from 'tinycolor2';
import { MetricsPanelCtrl } from 'app/plugins/sdk';
import { AnnotationEvent } from './event';
import {
OK_COLOR,
ALERTING_COLOR,
@@ -10,7 +8,10 @@ import {
PENDING_COLOR,
DEFAULT_ANNOTATION_COLOR,
REGION_FILL_ALPHA,
} from 'app/core/utils/colors';
} from '@grafana/ui';
import { MetricsPanelCtrl } from 'app/plugins/sdk';
import { AnnotationEvent } from './event';
export class EventManager {
event: AnnotationEvent;

2
public/app/features/dashboard/dashboard_model.ts
View File

@@ -1,8 +1,8 @@
import moment from 'moment';
import _ from 'lodash';
import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
import { DEFAULT_ANNOTATION_COLOR } from 'app/core/utils/colors';
import { Emitter } from 'app/core/utils/emitter';
import { contextSrv } from 'app/core/services/context_srv';
import sortByKeys from 'app/core/utils/sort_by_keys';

2
public/app/plugins/panel/gauge/Thresholds.tsx
View File

@@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import tinycolor from 'tinycolor2';
import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
import { ColorPicker } from '@grafana/ui';
import { BasicGaugeColor, Threshold } from 'app/types';
import { PanelOptionsProps } from '@grafana/ui';
import { Options } from './types';

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

@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import { TimeSeries } from 'app/core/core';
import { SeriesColorPicker } from 'app/core/components/colorpicker/SeriesColorPicker';
import { SeriesColorPicker } from '@grafana/ui';
export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];

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

@@ -1,6 +1,7 @@
import _ from 'lodash';
import colors from '@grafana/ui';
import TimeSeries from 'app/core/time_series2';
import colors from 'app/core/utils/colors';
export class DataProcessor {
constructor(private panel) {}

2
public/app/plugins/panel/graph2/GraphPanel.tsx
View File

@@ -1,7 +1,7 @@
// Libraries
import _ from 'lodash';
import React, { PureComponent } from 'react';
import colors from 'app/core/utils/colors';
import colors from '@grafana/ui';
// Components & Types
import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';

4
public/app/routes/GrafanaCtrl.ts
View File

@@ -1,12 +1,12 @@
import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import Drop from 'tether-drop';
import colors from '@grafana/ui';
import coreModule from 'app/core/core_module';
import { profiler } from 'app/core/profiler';
import appEvents from 'app/core/app_events';
import Drop from 'tether-drop';
import colors from 'app/core/utils/colors';
import { BackendSrv, setBackendSrv } from 'app/core/services/backend_srv';
import { TimeSrv, setTimeSrv } from 'app/features/dashboard/time_srv';
import { DatasourceSrv, setDatasourceSrv } from 'app/features/plugins/datasource_srv';

2
public/app/viz/state/timeSeries.ts
View File

@@ -2,7 +2,7 @@
import _ from 'lodash';
// Utils
import colors from 'app/core/utils/colors';
import colors from '@grafana/ui';
// Types
import { TimeSeries, TimeSeriesVMs, NullValueMode } from '@grafana/ui';