diff --git a/packages/grafana-ui/src/components/FieldConfigs/select.tsx b/packages/grafana-ui/src/components/FieldConfigs/select.tsx new file mode 100644 index 00000000000..3579ef1e31f --- /dev/null +++ b/packages/grafana-ui/src/components/FieldConfigs/select.tsx @@ -0,0 +1,32 @@ +import React, { FC } from 'react'; + +import { FieldOverrideContext, FieldOverrideEditorProps, FieldConfigEditorProps, SelectableValue } from '@grafana/data'; +import Forms from '../Forms'; + +export interface SelectFieldConfigSettings { + options: Array>; +} + +export const selectOverrideProcessor = ( + value: any, + context: FieldOverrideContext, + settings: SelectFieldConfigSettings +) => { + return value; +}; + +export const SelectValueEditor: FC>> = ({ + item, + value, + onChange, +}) => { + return onChange(e.value)} options={item.settings.options} />; +}; + +export const SelectOverrideEditor: FC>> = ({ + item, + value, + onChange, +}) => { + return onChange(e.value)} options={item.settings.options} />; +}; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 7d11161d121..98f4b884871 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -130,6 +130,12 @@ export { numberOverrideProcessor, NumberFieldConfigSettings, } from './FieldConfigs/number'; +export { + selectOverrideProcessor, + SelectValueEditor, + SelectOverrideEditor, + SelectFieldConfigSettings, +} from './FieldConfigs/select'; // Next-gen forms export { default as Forms } from './Forms'; diff --git a/public/app/plugins/panel/table2/custom.tsx b/public/app/plugins/panel/table2/custom.tsx index 2436d04b775..e8cee0f08c2 100644 --- a/public/app/plugins/panel/table2/custom.tsx +++ b/public/app/plugins/panel/table2/custom.tsx @@ -4,25 +4,51 @@ import { NumberOverrideEditor, numberOverrideProcessor, NumberFieldConfigSettings, + selectOverrideProcessor, + SelectValueEditor, + SelectOverrideEditor, + SelectFieldConfigSettings, } from '@grafana/ui'; -const columWidth: FieldPropertyEditorItem = { - id: 'width', // Match field properties - name: 'Column Width', - description: 'column width (for table)', - - editor: NumberValueEditor, - override: NumberOverrideEditor, - process: numberOverrideProcessor, - - settings: { - placeholder: 'auto', - min: 20, - max: 300, - }, - shouldApply: () => true, -}; - export const tableFieldRegistry: FieldConfigEditorRegistry = new Registry(() => { - return [columWidth]; + const columWidth: FieldPropertyEditorItem = { + id: 'width', // Match field properties + name: 'Column width', + description: 'column width (for table)', + + editor: NumberValueEditor, + override: NumberOverrideEditor, + process: numberOverrideProcessor, + + settings: { + placeholder: 'auto', + min: 20, + max: 300, + }, + + shouldApply: () => true, + }; + + const cellDisplayMode: FieldPropertyEditorItem> = { + id: 'displayMode', // Match field properties + name: 'Cell display mode', + description: 'Color value, background, show as gauge, etc', + + editor: SelectValueEditor, + override: SelectOverrideEditor, + process: selectOverrideProcessor, + + settings: { + options: [ + { value: 'auto', label: 'Auto' }, + { value: 'color-background', label: 'Color background' }, + { value: 'gradient-gauge', label: 'Gradient gauge' }, + { value: 'lcd-gauge', label: 'LCD gauge' }, + ], + }, + + shouldApply: () => true, + }; + + return [columWidth, cellDisplayMode]; });