IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 12 deletions
Show Stats 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) {
textColor = displayValue.color;
} 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);
bgColor = tinycolor(displayValue.color).toRgbString();
} else if (cellOptions.mode === TableCellBackgroundDisplayMode.Gradient) {
} else if (mode === TableCellBackgroundDisplayMode.Gradient) {
const bgColor2 = tinycolor(displayValue.color)
.darken(10 * darkeningFactor)
.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 { Stack } from '@grafana/experimental';
import { BarGaugeDisplayMode, BarGaugeValueMode, TableBarGaugeCellOptions } from '@grafana/schema';
import { Field, RadioButtonGroup, Select } from '@grafana/ui';
import { Field, RadioButtonGroup } from '@grafana/ui';
import { TableCellEditorProps } from '../TableCellOptionEditor';
@ -11,8 +11,8 @@ type Props = TableCellEditorProps<TableBarGaugeCellOptions>;
export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
// Set the display mode on change
const onCellOptionsChange = (v: SelectableValue) => {
cellOptions.mode = v.value;
const onCellOptionsChange = (v: BarGaugeDisplayMode) => {
cellOptions.mode = v;
onChange(cellOptions);
};
@ -24,10 +24,18 @@ export function BarGaugeCellOptionsEditor({ cellOptions, onChange }: Props) {
return (
<Stack direction="column" gap={0}>
<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 label="Value display">
<RadioButtonGroup value={cellOptions?.valueDisplayMode} onChange={onValueModeChange} options={valueModes} />
<RadioButtonGroup
value={cellOptions?.valueDisplayMode ?? BarGaugeValueMode.Text}
onChange={onValueModeChange}
options={valueModes}
/>
</Field>
</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 { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
import { Select, Field } from '@grafana/ui';
import { Field, RadioButtonGroup } from '@grafana/ui';
import { TableCellEditorProps } from '../TableCellOptionEditor';
const colorBackgroundOpts: SelectableValue[] = [
const colorBackgroundOpts: Array<SelectableValue<TableCellBackgroundDisplayMode>> = [
{ value: TableCellBackgroundDisplayMode.Basic, label: 'Basic' },
{ value: TableCellBackgroundDisplayMode.Gradient, label: 'Gradient' },
];
@ -16,14 +16,18 @@ export const ColorBackgroundCellOptionsEditor = ({
onChange,
}: TableCellEditorProps<TableColoredBackgroundCellOptions>) => {
// Set the display mode on change
const onCellOptionsChange = (v: SelectableValue) => {
cellOptions.mode = v.value;
const onCellOptionsChange = (v: TableCellBackgroundDisplayMode) => {
cellOptions.mode = v;
onChange(cellOptions);
};
return (
<Field label="Background display mode">
<Select value={cellOptions?.mode} onChange={onCellOptionsChange} options={colorBackgroundOpts} />
<RadioButtonGroup
value={cellOptions?.mode ?? TableCellBackgroundDisplayMode.Gradient}
onChange={onCellOptionsChange}
options={colorBackgroundOpts}
/>
</Field>
);
};