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

TablePanel: Switch to radio buttons for some cell options (#65000)

Browse Source 
* TablePanel: Switch to radio buttons for the cell option

* Fixes issue with no default mode handling for colored background
This commit is contained in:
Torkel Ödegaard
2023-03-20 16:37:58 +01:00
committed by GitHub
parent a416235e8f
commit c00c0a283e
3 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@@ -77,10 +77,12 @@ function getCellStyle(
if (cellOptions.type === TableCellDisplayMode.ColorText) { if (cellOptions.type === TableCellDisplayMode.ColorText) {
textColor = displayValue.color; textColor = displayValue.color;
} else if (cellOptions.type === TableCellDisplayMode.ColorBackground) { } else if (cellOptions.type === TableCellDisplayMode.ColorBackground) {
if (cellOptions.mode === TableCellBackgroundDisplayMode.Basic) { const mode = cellOptions.mode ?? TableCellBackgroundDisplayMode.Gradient;
if (mode === TableCellBackgroundDisplayMode.Basic) {
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark); textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = tinycolor(displayValue.color).toRgbString(); bgColor = tinycolor(displayValue.color).toRgbString();
} else if (cellOptions.mode === TableCellBackgroundDisplayMode.Gradient) { } else if (mode === TableCellBackgroundDisplayMode.Gradient) {
const bgColor2 = tinycolor(displayValue.color) const bgColor2 = tinycolor(displayValue.color)
.darken(10 * darkeningFactor) .darken(10 * darkeningFactor)
.spin(5); .spin(5);

18
public/app/plugins/panel/table/cells/BarGaugeCellOptionsEditor.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Stack } from '@grafana/experimental'; import { Stack } from '@grafana/experimental';
import { BarGaugeDisplayMode, BarGaugeValueMode, TableBarGaugeCellOptions } from '@grafana/schema'; import { BarGaugeDisplayMode, BarGaugeValueMode, TableBarGaugeCellOptions } from '@grafana/schema';
import { Field, RadioButtonGroup, Select } from '@grafana/ui'; import { Field, RadioButtonGroup } from '@grafana/ui';
import { TableCellEditorProps } from '../TableCellOptionEditor'; import { TableCellEditorProps } from '../TableCellOptionEditor';
@@ -11,8 +11,8 @@ type Props = TableCellEditorProps<TableBarGaugeCellOptions>;
export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) { export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
// Set the display mode on change // Set the display mode on change
const onCellOptionsChange = (v: SelectableValue) => { const onCellOptionsChange = (v: BarGaugeDisplayMode) => {
cellOptions.mode = v.value; cellOptions.mode = v;
onChange(cellOptions); onChange(cellOptions);
}; };
@@ -24,10 +24,18 @@ export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
return ( return (
<Stack direction="column" gap={0}> <Stack direction="column" gap={0}>
<Field label="Gauge display mode"> <Field label="Gauge display mode">
<Select value={cellOptions?.mode} onChange={onCellOptionsChange} options={barGaugeOpts} /> <RadioButtonGroup
value={cellOptions?.mode ?? BarGaugeDisplayMode.Gradient}
onChange={onCellOptionsChange}
options={barGaugeOpts}
/>
</Field> </Field>
<Field label="Value display"> <Field label="Value display">
<RadioButtonGroup value={cellOptions?.valueDisplayMode} onChange={onValueModeChange} options={valueModes} /> <RadioButtonGroup
value={cellOptions?.valueDisplayMode ?? BarGaugeValueMode.Text}
onChange={onValueModeChange}
options={valueModes}
/>
</Field> </Field>
</Stack> </Stack>
); );

14
public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema'; import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
import { Select, Field } from '@grafana/ui'; import { Field, RadioButtonGroup } from '@grafana/ui';
import { TableCellEditorProps } from '../TableCellOptionEditor'; import { TableCellEditorProps } from '../TableCellOptionEditor';
const colorBackgroundOpts: SelectableValue[] = [ const colorBackgroundOpts: Array<SelectableValue<TableCellBackgroundDisplayMode>> = [
{ value: TableCellBackgroundDisplayMode.Basic, label: 'Basic' }, { value: TableCellBackgroundDisplayMode.Basic, label: 'Basic' },
{ value: TableCellBackgroundDisplayMode.Gradient, label: 'Gradient' }, { value: TableCellBackgroundDisplayMode.Gradient, label: 'Gradient' },
]; ];
@@ -16,14 +16,18 @@ export const ColorBackgroundCellOptionsEditor = ({
onChange, onChange,
}: TableCellEditorProps<TableColoredBackgroundCellOptions>) => { }: TableCellEditorProps<TableColoredBackgroundCellOptions>) => {
// Set the display mode on change // Set the display mode on change
const onCellOptionsChange = (v: SelectableValue) => { const onCellOptionsChange = (v: TableCellBackgroundDisplayMode) => {
cellOptions.mode = v.value; cellOptions.mode = v;
onChange(cellOptions); onChange(cellOptions);
}; };
return ( return (
<Field label="Background display mode"> <Field label="Background display mode">
<Select value={cellOptions?.mode} onChange={onCellOptionsChange} options={colorBackgroundOpts} /> <RadioButtonGroup
value={cellOptions?.mode ?? TableCellBackgroundDisplayMode.Gradient}
onChange={onCellOptionsChange}
options={colorBackgroundOpts}
/>
</Field> </Field>
); );
}; };