diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md index 707acfababc..10f87a87953 100644 --- a/docs/sources/panels-visualizations/visualizations/table/index.md +++ b/docs/sources/panels-visualizations/visualizations/table/index.md @@ -236,11 +236,11 @@ If you want to apply a cell type to only some fields instead of all fields, you | Cell type | Description | | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | [Auto](#auto) | A basic text and number cell. | -| [Sparkline](#sparkline) | Shows values rendered as a sparkline. | | [Colored text](#colored-text) | If thresholds, value mappings, or color schemes are set, then the cell text is displayed in the appropriate color. | | [Colored background](#colored-background) | If thresholds, value mappings, or color schemes are set, then the cell background is displayed in the appropriate color. | -| [Gauge](#gauge) | Values are displayed as a horizontal bar gauge. You can set the [Gauge display mode](#gauge-display-mode) and the [Value display](#value-display) options. | | Data links | If you've configured data links, when the cell type is **Auto**, the cell text becomes clickable. If you change the cell type to **Data links**, the cell text reflects the titles of the configured data links. To control the application of data link text more granularly, use a **Cell option > Cell type > Data links** field override. | +| [Gauge](#gauge) | Values are displayed as a horizontal bar gauge. You can set the [Gauge display mode](#gauge-display-mode) and the [Value display](#value-display) options. | +| [Sparkline](#sparkline) | Shows values rendered as a sparkline. | | [JSON View](#json-view) | Shows values formatted as code. | | [Image](#image) | Displays an image when the value is a URL or a base64 encoded image. | | [Actions](#actions) | The cell displays a button that triggers a basic, unauthenticated API call when clicked. | @@ -254,32 +254,6 @@ It has the following cell options: {{< docs/shared lookup="visualizations/cell-options.md" source="grafana" version="" >}} -#### Sparkline - -This cell type shows values rendered as a sparkline. -To show sparklines on data with multiple time series, use the [Time series to table transformation](ref:time-series-to-table-transformation) to process it into a format the table can show. - -![Table using sparkline cell type](/media/docs/grafana/panels-visualizations/screenshot-table-as-sparkline-v11.3.png) - -The sparkline cell type options are described in the following table. -For more detailed information about all of the sparkline styling options (except **Hide value**), refer to the [time series graph styles documentation](ref:graph-styles). - - -| Option | Description | -| ------------------- | --------------------------------------------------------------------------------------------- | -| Hide value | Toggle the switch on or off to display or hide the cell value on the sparkline. | -| Style | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. You can use overrides to combine multiple styles in the same graph. | -| Line interpolation | How the graph interpolates the series line. Choose from: | -| Line width | The thickness of the series lines or the outline for bars using the **Line width** slider. | -| Fill opacity | The series area fill color using the **Fill opacity** slider. | -| Gradient mode | Gradient mode controls the gradient fill, which is based on the series color. Gradient appearance is influenced by the **Fill opacity** setting. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme). Choose from: | -| Line style | Choose from: | -| Connect null values | How null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected. Choose from: | -| Show points | Whether to show data points to lines or bars. Choose from: | -| Point size | Set the size of the points, from 1 to 40 pixels in diameter. | -| Bar alignment | Set the position of the bar relative to a data point. | - - #### Colored text If thresholds, value mappings, or color schemes are set, the cell text is displayed in the appropriate color. @@ -346,6 +320,32 @@ Labels displayed alongside of the gauges can be set to be colored by value, matc | Hidden | Labels are hidden. {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-labels-hidden-v11.3.png" alt="Table with labels hidden" >}} | +#### Sparkline + +This cell type shows values rendered as a sparkline. +To show sparklines on data with multiple time series, use the [Time series to table transformation](ref:time-series-to-table-transformation) to process it into a format the table can show. + +![Table using sparkline cell type](/media/docs/grafana/panels-visualizations/screenshot-table-as-sparkline-v11.3.png) + +The sparkline cell type options are described in the following table. +For more detailed information about all of the sparkline styling options (except **Hide value**), refer to the [time series graph styles documentation](ref:graph-styles). + + +| Option | Description | +| ------------------- | --------------------------------------------------------------------------------------------- | +| Hide value | Toggle the switch on or off to display or hide the cell value on the sparkline. | +| Style | Choose whether to display your time-series data as **Lines**, **Bars**, or **Points**. You can use overrides to combine multiple styles in the same graph. | +| Line interpolation | How the graph interpolates the series line. Choose from: | +| Line width | The thickness of the series lines or the outline for bars using the **Line width** slider. | +| Fill opacity | The series area fill color using the **Fill opacity** slider. | +| Gradient mode | Gradient mode controls the gradient fill, which is based on the series color. Gradient appearance is influenced by the **Fill opacity** setting. To change the color, use the standard color scheme field option. For more information, refer to [Color scheme](ref:color-scheme). Choose from: | +| Line style | Choose from: | +| Connect null values | How null values, which are gaps in the data, appear on the graph. Null values can be connected to form a continuous line or set to a threshold above which gaps in the data are no longer connected. Choose from: | +| Show points | Whether to show data points to lines or bars. Choose from: | +| Point size | Set the size of the points, from 1 to 40 pixels in diameter. | +| Bar alignment | Set the position of the bar relative to a data point. | + + #### JSON View This cell type shows values formatted as code. diff --git a/public/app/plugins/panel/table/TableCellOptionEditor.tsx b/public/app/plugins/panel/table/TableCellOptionEditor.tsx index ad5d9e400be..c0fd5e0e5ea 100644 --- a/public/app/plugins/panel/table/TableCellOptionEditor.tsx +++ b/public/app/plugins/panel/table/TableCellOptionEditor.tsx @@ -83,11 +83,11 @@ export const TableCellOptionEditor = ({ value, onChange }: Props) => { let cellDisplayModeOptions: Array> = [ { value: { type: TableCellDisplayMode.Auto }, label: 'Auto' }, - { value: { type: TableCellDisplayMode.Sparkline }, label: 'Sparkline' }, { value: { type: TableCellDisplayMode.ColorText }, label: 'Colored text' }, { value: { type: TableCellDisplayMode.ColorBackground }, label: 'Colored background' }, - { value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' }, { value: { type: TableCellDisplayMode.DataLinks }, label: 'Data links' }, + { value: { type: TableCellDisplayMode.Gauge }, label: 'Gauge' }, + { value: { type: TableCellDisplayMode.Sparkline }, label: 'Sparkline' }, { value: { type: TableCellDisplayMode.JSONView }, label: 'JSON View' }, { value: { type: TableCellDisplayMode.Image }, label: 'Image' }, { value: { type: TableCellDisplayMode.Actions }, label: 'Actions' }, diff --git a/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx b/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx index ee4d69c1add..77e2acf0808 100644 --- a/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx +++ b/public/app/plugins/panel/table/table-new/TableCellOptionEditor.tsx @@ -2,9 +2,10 @@ import { css } from '@emotion/css'; import { merge } from 'lodash'; import { useState } from 'react'; -import { GrafanaTheme2, SelectableValue } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; +import { t } from '@grafana/i18n'; import { TableCellOptions } from '@grafana/schema'; -import { Field, Select, TableCellDisplayMode, useStyles2 } from '@grafana/ui'; +import { Combobox, ComboboxOption, Field, TableCellDisplayMode, useStyles2 } from '@grafana/ui'; import { AutoCellOptionsEditor } from './cells/AutoCellOptionsEditor'; import { BarGaugeCellOptionsEditor } from './cells/BarGaugeCellOptionsEditor'; @@ -28,15 +29,31 @@ interface Props { export const TableCellOptionEditor = ({ value, onChange }: Props) => { const cellType = value.type; const styles = useStyles2(getStyles); - const currentMode = cellDisplayModeOptions.find((o) => o.value!.type === cellType)!; + const cellDisplayModeOptions: Array> = [ + { value: TableCellDisplayMode.Auto, label: t('table.cell-types.auto', 'Auto') }, + { value: TableCellDisplayMode.ColorText, label: t('table.cell-types.color-text', 'Colored text') }, + { + value: TableCellDisplayMode.ColorBackground, + label: t('table.cell-types.color-background', 'Colored background'), + }, + { value: TableCellDisplayMode.DataLinks, label: t('table.cell-types.data-links', 'Data links') }, + { value: TableCellDisplayMode.Gauge, label: t('table.cell-types.gauge', 'Gauge') }, + { value: TableCellDisplayMode.Sparkline, label: t('table.cell-types.sparkline', 'Sparkline') }, + { value: TableCellDisplayMode.JSONView, label: t('table.cell-types.json', 'JSON View') }, + { value: TableCellDisplayMode.Pill, label: t('table.cell-types.pill', 'Pill') }, + { value: TableCellDisplayMode.Image, label: t('table.cell-types.image', 'Image') }, + { value: TableCellDisplayMode.Actions, label: t('table.cell-types.actions', 'Actions') }, + ]; + const currentMode = cellDisplayModeOptions.find((o) => o.value === cellType)!; + let [settingCache, setSettingCache] = useState>({}); // Update display mode on change - const onCellTypeChange = (v: SelectableValue) => { - if (v.value !== undefined) { + const onCellTypeChange = (v: ComboboxOption) => { + if (v !== null) { // Set the new type of cell starting // with default settings - value = v.value; + value = { type: v.value }; // When changing cell type see if there were previously stored // settings and merge those with the changed value @@ -60,7 +77,7 @@ export const TableCellOptionEditor = ({ value, onChange }: Props) => { return (
-