opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-25 00:05:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Graph NG: make series color easy to clear (#27778)

Browse Source
This commit is contained in:
Ryan McKinley
2020-09-25 02:46:39 -07:00
committed by GitHub
parent 8a22111a8e
commit 3ae6ba034d
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/OptionsUI/color.tsx
View File

@ -22,7 +22,7 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<FieldColor, Color
const theme = getTheme(); const theme = getTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
const color = value.fixedColor || item.defaultValue?.fixedColor; const color = value?.fixedColor || item.defaultValue?.fixedColor;
const onValueChange = useCallback( const onValueChange = useCallback(
color => { color => {
@ -41,7 +41,7 @@ export const ColorValueEditor: React.FC<FieldConfigEditorProps<FieldColor, Color
ref={ref} ref={ref}
onClick={showColorPicker} onClick={showColorPicker}
onMouseLeave={hideColorPicker} onMouseLeave={hideColorPicker}
color={color ? getColorFromHexRgbOrName(color, theme.type) : ''} color={color ? getColorFromHexRgbOrName(color, theme.type) : theme.colors.formInputBorder}
/> />
</div> </div>
<div className={styles.colorText} onClick={showColorPicker}> <div className={styles.colorText} onClick={showColorPicker}>

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

@ -10,4 +10,4 @@ export * from './themes';
export * from './slate-plugins'; export * from './slate-plugins';
// Exposes standard editors for registries of optionsUi config and panel options UI // Exposes standard editors for registries of optionsUi config and panel options UI
export { getStandardFieldConfigs, getStandardOptionEditors } from './utils//standardEditors'; export { getStandardFieldConfigs, getStandardOptionEditors } from './utils/standardEditors';

19
public/app/plugins/panel/graph3/module.tsx
View File

@ -1,6 +1,6 @@
import { import {
FieldColor, FieldColor,
FieldColorMode, FieldConfigProperty,
identityOverrideProcessor, identityOverrideProcessor,
PanelPlugin, PanelPlugin,
standardEditorsRegistry, standardEditorsRegistry,
@ -11,6 +11,16 @@ import { Options } from './types';
export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPanel) export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPanel)
.useFieldConfig({ .useFieldConfig({
standardOptions: [
// FieldConfigProperty.Min,
// FieldConfigProperty.Max,
FieldConfigProperty.Unit,
FieldConfigProperty.DisplayName,
FieldConfigProperty.Decimals,
// NOT: FieldConfigProperty.Thresholds,
FieldConfigProperty.Mappings,
],
useCustomConfig: builder => { useCustomConfig: builder => {
builder builder
// TODO: Until we fix standard color property let's do it the custom editor way // TODO: Until we fix standard color property let's do it the custom editor way
@ -19,8 +29,11 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
id: 'line.color', id: 'line.color',
name: 'Series color', name: 'Series color',
shouldApply: () => true, shouldApply: () => true,
settings: {}, settings: {
defaultValue: { mode: FieldColorMode.Fixed }, allowUndefined: true,
textWhenUndefined: 'Automatic',
},
defaultValue: undefined,
editor: standardEditorsRegistry.get('color').editor as any, editor: standardEditorsRegistry.get('color').editor as any,
override: standardEditorsRegistry.get('color').editor as any, override: standardEditorsRegistry.get('color').editor as any,
process: identityOverrideProcessor, process: identityOverrideProcessor,