@perses-dev/table-plugin 0.11.1 → 0.13.0-beta.0

package/lib/cjs/components/TablePanel.js

@@ -31,18 +31,163 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
 const _dashboards = require("@perses-dev/dashboards");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
 const _models = require("../models");
+const _tabledatautils = require("../table-data-utils");
 const _EmbeddedPanel = require("./EmbeddedPanel");
-function generateCellContentConfig(column) {
+function parseNumericCellValue(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+            return parsed;
+        }
+    }
+    return undefined;
+}
+function isPanelData(value) {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const candidate = value;
+    return candidate.definition !== undefined && candidate.data !== undefined;
+}
+function createSyntheticPanelData(value, columnName) {
+    const numericValue = parseNumericCellValue(value);
+    if (numericValue === undefined) {
+        return undefined;
+    }
+    const now = Date.now();
+    return {
+        definition: {
+            kind: 'TimeSeriesQuery',
+            spec: {
+                plugin: {
+                    kind: 'PrometheusTimeSeriesQuery',
+                    spec: {
+                        query: ''
+                    }
+                }
+            }
+        },
+        data: {
+            timeRange: {
+                start: new Date(now),
+                end: new Date(now)
+            },
+            stepMs: 1,
+            series: [
+                {
+                    name: columnName,
+                    values: [
+                        [
+                            now,
+                            numericValue
+                        ]
+                    ],
+                    labels: {}
+                }
+            ]
+        }
+    };
+}
+function getGaugeNumericValue(value) {
+    if (isPanelData(value)) {
+        const series = value.data?.series;
+        const firstSeries = series?.[0];
+        if (!firstSeries?.values?.length) {
+            return undefined;
+        }
+        const calc = _pluginsystem.CalculationsMap['last-number'];
+        if (typeof calc !== 'function') {
+            return undefined;
+        }
+        const calculatedValue = calc(firstSeries.values);
+        return typeof calculatedValue === 'number' ? calculatedValue : undefined;
+    }
+    return parseNumericCellValue(value);
+}
+function InlineGaugeCellWithRange({ value, range, fillColor, format }) {
+    if (value === undefined) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    }
+    let percent = 0;
+    if (range !== undefined) {
+        if (range.max === range.min) {
+            percent = 100;
+        } else {
+            percent = (value - range.min) / (range.max - range.min) * 100;
+        }
+    }
+    percent = Math.max(0, Math.min(100, percent));
+    const trackColor = 'rgba(127,127,127,0.20)';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            gap: 1
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    flexGrow: 1,
+                    borderRadius: 1,
+                    backgroundColor: trackColor,
+                    height: 24,
+                    overflow: 'hidden'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        width: `${percent}%`,
+                        height: '100%',
+                        backgroundColor: fillColor ?? 'success.main',
+                        borderRadius: 1
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                sx: {
+                    minWidth: 52,
+                    textAlign: 'right'
+                },
+                children: format ? (0, _components.formatValue)(value, format) : value.toFixed(2)
+            })
+        ]
+    });
+}
+function resolveGaugeFillColor(value, globalCellSettings, columnCellSettings) {
+    let cellConfig = (0, _models.evaluateConditionalFormatting)(value, globalCellSettings);
+    if (columnCellSettings?.length) {
+        const columnCellConfig = (0, _models.evaluateConditionalFormatting)(value, columnCellSettings);
+        if (columnCellConfig) {
+            cellConfig = columnCellConfig;
+        }
+    }
+    return cellConfig?.backgroundColor ?? cellConfig?.textColor;
+}
+function generateCellContentConfig(column, gaugeRange, globalCellSettings = []) {
     const plugin = column.plugin;
     if (plugin !== undefined) {
         return {
             cell: (ctx)=>{
-                const panelData = ctx.getValue();
+                const cellValue = ctx.getValue();
+                if (plugin.kind === 'GaugeChart') {
+                    const gaugeValue = getGaugeNumericValue(cellValue);
+                    const gaugeFillColor = resolveGaugeFillColor(gaugeValue, globalCellSettings, column.cellSettings);
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(InlineGaugeCellWithRange, {
+                        value: gaugeValue,
+                        range: gaugeRange,
+                        fillColor: gaugeFillColor,
+                        format: plugin.spec?.format ?? column.format
+                    });
+                }
+                const panelData = isPanelData(cellValue) ? cellValue : createSyntheticPanelData(cellValue, column.name);
                 if (!panelData) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmbeddedPanel.EmbeddedPanel, {
                     kind: plugin.kind,
@@ -58,15 +203,17 @@ function generateCellContentConfig(column) {
     return {
         cell: (ctx)=>{
             const cellValue = ctx.getValue();
-            return typeof cellValue === 'number' && column.format ? (0, _core.formatValue)(cellValue, column.format) : cellValue;
+            return typeof cellValue === 'number' && column.format ? (0, _components.formatValue)(cellValue, column.format) : cellValue;
         },
         cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : undefined
     };
 }
 function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme }) {
+    const [searchTerm, setSearchTerm] = (0, _react.useState)('');
     const values = [
         ...new Set(allValues)
     ].filter((v)=>v !== null).sort();
+    const filteredValues = searchTerm ? values.filter((v)=>String(v).toLowerCase().includes(searchTerm.toLowerCase())) : values;
     if (values.length === 0) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             "data-filter-dropdown": true,
@@ -100,6 +247,23 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
             overflowY: 'auto'
         },
         children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "text",
+                placeholder: "Search...",
+                value: searchTerm,
+                onChange: (e)=>setSearchTerm(e.target.value),
+                style: {
+                    width: '100%',
+                    padding: '6px 8px',
+                    marginBottom: 8,
+                    fontSize: 13,
+                    border: `1px solid ${theme.palette.divider}`,
+                    borderRadius: 4,
+                    backgroundColor: theme.palette.background.default,
+                    color: theme.palette.text.primary,
+                    boxSizing: 'border-box'
+                }
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 style: {
                     marginBottom: 8,
@@ -141,7 +305,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                     borderTop: `1px solid ${theme.palette.divider}`
                 }
             }),
-            values.map((value, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            filteredValues.map((value, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     style: {
                         marginBottom: 4
                     },
@@ -194,7 +358,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
  * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.
  * If column is hidden, return undefined.
  * If column do not have a definition, return a default column config.
- */ function generateColumnConfig(name, columnSettings, allVariables) {
+ */ function generateColumnConfig(name, columnSettings, allVariables, gaugeRangeByColumn, globalCellSettings = []) {
     for (const column of columnSettings){
         if (column.name === name) {
             if (column.hide) {
@@ -213,7 +377,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                 width,
                 align,
                 dataLink: modifiedDataLink,
-                ...generateCellContentConfig(column)
+                ...generateCellContentConfig(column, gaugeRangeByColumn[name], globalCellSettings)
             };
         }
     }
@@ -225,7 +389,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
 function getTablePanelQueryOptions(spec) {
     // if any cell renders a panel plugin, perform a range query instead of an instant query
     return {
-        mode: (spec.columnSettings ?? []).some((c)=>c.plugin) ? 'range' : 'instant'
+        mode: (0, _tabledatautils.getTablePanelQueryMode)(spec)
     };
 }
 function TablePanel({ contentDimensions, spec, queryResults }) {
@@ -273,56 +437,15 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         clearSelection
     ]);
     // TODO: handle other query types
-    const queryMode = getTablePanelQueryOptions(spec).mode;
     const rawData = (0, _react.useMemo)(()=>{
-        // Transform query results to a tabular format:
-        // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]
-        return queryResults.flatMap((data, queryIndex)=>data.data.series.map((ts)=>({
-                    data,
-                    ts,
-                    queryIndex
-                }))).map(({ data, ts, queryIndex })=>{
-            if (ts.values[0] === undefined) {
-                return {
-                    ...ts.labels
-                };
-            }
-            // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts
-            const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
-            const labels = queryResults.length === 1 ? ts.labels : Object.entries(ts.labels ?? {}).reduce((acc, [key, value])=>{
-                if (key) acc[`${key} #${queryIndex + 1}`] = value;
-                return acc;
-            }, {});
-            // If the cell visualization is a panel plugin, filter the data by the current series
-            const columnValue = (spec.columnSettings ?? []).find((x)=>x.name === valueColumnName)?.plugin ? {
-                ...data,
-                data: {
-                    ...data.data,
-                    series: data.data.series.filter((s)=>s === ts)
-                }
-            } : ts.values[0][1];
-            if (queryMode === 'instant') {
-                // Timestamp is not indexed as it will be the same for all queries
-                return {
-                    timestamp: ts.values[0][0],
-                    [valueColumnName]: columnValue,
-                    ...labels
-                };
-            } else {
-                // Don't add a timestamp for range queries
-                return {
-                    [valueColumnName]: columnValue,
-                    ...labels
-                };
-            }
-        });
+        // Transform query results to a tabular format using shared utility
+        return (0, _tabledatautils.buildRawTableData)(queryResults, spec);
     }, [
         queryResults,
-        queryMode,
-        spec.columnSettings
+        spec
     ]);
     // Transform will be applied by their orders on the original data
-    const data = (0, _react.useMemo)(()=>(0, _core.transformData)(rawData, spec.transforms ?? []), [
+    const data = (0, _react.useMemo)(()=>(0, _components.transformData)(rawData, spec.transforms ?? []), [
         rawData,
         spec.transforms
     ]);
@@ -351,6 +474,31 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         data,
         keys
     ]);
+    const gaugeRangeByColumn = (0, _react.useMemo)(()=>{
+        const result = {};
+        for (const key of keys){
+            let min = Number.POSITIVE_INFINITY;
+            let max = Number.NEGATIVE_INFINITY;
+            for (const row of data){
+                const numericValue = getGaugeNumericValue(row[key]);
+                if (numericValue === undefined) {
+                    continue;
+                }
+                min = Math.min(min, numericValue);
+                max = Math.max(max, numericValue);
+            }
+            if (min !== Number.POSITIVE_INFINITY && max !== Number.NEGATIVE_INFINITY) {
+                result[key] = {
+                    min,
+                    max
+                };
+            }
+        }
+        return result;
+    }, [
+        data,
+        keys
+    ]);
     // Generate columns and map each column accessor to its settings index and data key
     const columns = (0, _react.useMemo)(()=>{
         const columns = [];
@@ -358,7 +506,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         // Process columnSettings if they exist
         for (const columnSetting of spec.columnSettings ?? []){
             if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
-            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables);
+            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
                 customizedColumns.add(columnSetting.name);
@@ -368,7 +516,7 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         if (!spec.defaultColumnHidden) {
             for (const key of keys){
                 if (!customizedColumns.has(key)) {
-                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables);
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
                     if (columnConfig !== undefined) {
                         columns.push(columnConfig);
                     }
@@ -380,7 +528,9 @@ function TablePanel({ contentDimensions, spec, queryResults }) {
         keys,
         spec.columnSettings,
         spec.defaultColumnHidden,
-        allVariables
+        allVariables,
+        gaugeRangeByColumn,
+        spec.cellSettings
     ]);
     // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
     const cellConfigs = (0, _react.useMemo)(()=>{

package/lib/cjs/models/table-model.js

@@ -50,6 +50,14 @@ function createInitialTableOptions() {
         enableFiltering: true
     };
 }
+function parseRangeBound(rawValue) {
+    const trimmed = rawValue.trim();
+    if (trimmed === '') {
+        return undefined;
+    }
+    const parsed = Number(trimmed);
+    return Number.isNaN(parsed) ? undefined : parsed;
+}
 function formatCellDisplay(value, setting, defaultText) {
     const baseText = setting.text || defaultText || String(value);
     const displayText = `${setting.prefix ?? ''}${baseText}${setting.suffix ?? ''}`;
@@ -153,13 +161,22 @@ function renderConditionEditor(condition, onChange, size = 'small') {
                 label: 'From',
                 placeholder: 'Start of range',
                 value: condition.spec?.min ?? '',
-                onChange: (e)=>onChange({
+                onChange: (e)=>{
+                    const nextMin = parseRangeBound(e.target.value);
+                    onChange({
                         ...condition,
                         spec: {
                             ...condition.spec,
-                            min: +e.target.value
+                            min: nextMin
                         }
-                    }),
+                    });
+                },
+                type: 'number',
+                slotProps: {
+                    htmlInput: {
+                        step: 'any'
+                    }
+                },
                 fullWidth: true,
                 size: size
             }),
@@ -168,13 +185,22 @@ function renderConditionEditor(condition, onChange, size = 'small') {
                 label: 'To',
                 placeholder: 'End of range (inclusive)',
                 value: condition.spec?.max ?? '',
-                onChange: (e)=>onChange({
+                onChange: (e)=>{
+                    const nextMax = parseRangeBound(e.target.value);
+                    onChange({
                         ...condition,
                         spec: {
                             ...condition.spec,
-                            max: +e.target.value
+                            max: nextMax
                         }
-                    }),
+                    });
+                },
+                type: 'number',
+                slotProps: {
+                    htmlInput: {
+                        step: 'any'
+                    }
+                },
                 fullWidth: true,
                 size: size
             })

package/lib/cjs/table-data-utils.js

@@ -0,0 +1,83 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get buildRawTableData () {
+        return buildRawTableData;
+    },
+    get getTablePanelQueryMode () {
+        return getTablePanelQueryMode;
+    }
+});
+function getTablePanelQueryMode(spec) {
+    return (spec.columnSettings ?? []).some((c)=>c.plugin) ? 'range' : 'instant';
+}
+function buildRawTableData(queryResults, spec, options = {}) {
+    const { forExport = false } = options;
+    const queryMode = getTablePanelQueryMode(spec);
+    return queryResults.flatMap((data, queryIndex)=>(data.data?.series ?? []).map((ts)=>({
+                data,
+                ts,
+                queryIndex
+            }))).map(({ data, ts, queryIndex })=>{
+        if (ts.values[0] === undefined) {
+            return {
+                ...ts.labels
+            };
+        }
+        // If there are multiple queries, add query index to value key and label keys to avoid conflicts
+        const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
+        const labels = queryResults.length === 1 ? ts.labels : Object.entries(ts.labels ?? {}).reduce((acc, [key, value])=>{
+            if (key) acc[`${key} #${queryIndex + 1}`] = value;
+            return acc;
+        }, {});
+        // For export: always use raw scalar values
+        // For rendering: plugin columns get embedded PanelData objects
+        let columnValue;
+        if (forExport) {
+            columnValue = ts.values[0][1];
+        } else {
+            const hasPlugin = (spec.columnSettings ?? []).find((x)=>x.name === valueColumnName)?.plugin;
+            columnValue = hasPlugin ? {
+                ...data,
+                data: {
+                    ...data.data,
+                    series: data.data.series.filter((s)=>s === ts)
+                }
+            } : ts.values[0][1];
+        }
+        if (queryMode === 'instant') {
+            // Timestamp is not indexed as it will be the same for all queries
+            return {
+                timestamp: ts.values[0][0],
+                [valueColumnName]: columnValue,
+                ...labels
+            };
+        } else {
+            // Don't add a timestamp for range queries
+            return {
+                [valueColumnName]: columnValue,
+                ...labels
+            };
+        }
+    });
+}

package/lib/components/ColumnsEditor/ColumnEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAqB,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAS9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAuL7F"}
+{"version":3,"file":"ColumnEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnsEditor/ColumnEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAiC,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa/C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC;IAC1E,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,YAAY,CA8M7F"}

package/lib/components/ColumnsEditor/ColumnEditor.js

@@ -11,12 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Button, ButtonGroup, Stack, Switch, TextField } from '@mui/material';
+import { Button, ButtonGroup, Stack, Switch, TextField, Typography } from '@mui/material';
 import { useState } from 'react';
 import { AlignSelector, FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons } from '@perses-dev/components';
 import { PluginKindSelect } from '@perses-dev/plugin-system';
 import { ConditionalPanel } from '../ConditionalPanel';
 import { DataLinkEditor } from './DataLinkEditorDialog';
+import { EmbeddedPanelOptionsEditor } from './EmbeddedPanelOptionsEditor';
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -115,39 +116,53 @@ export function ColumnEditor({ column, onChange, ...others }) {
                                     })
                                 }),
                                 /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                                    label: "Display",
-                                    control: /*#__PURE__*/ _jsxs(ButtonGroup, {
-                                        "aria-label": "Display",
-                                        size: "small",
+                                    label: "Cell display",
+                                    control: /*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 1,
                                         children: [
-                                            /*#__PURE__*/ _jsx(Button, {
-                                                variant: !column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: undefined
+                                            /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                                "aria-label": "Cell display",
+                                                size: "small",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: !column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: undefined
+                                                            }),
+                                                        children: "Text"
                                                     }),
-                                                children: "Text"
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: {
+                                                                    kind: 'GaugeChart',
+                                                                    spec: {}
+                                                                }
+                                                            }),
+                                                        children: "Visualization"
+                                                    })
+                                                ]
                                             }),
-                                            /*#__PURE__*/ _jsx(Button, {
-                                                variant: column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: {
-                                                            kind: 'StatChart',
-                                                            spec: {}
-                                                        }
-                                                    }),
-                                                children: "Embedded Panel"
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                sx: {
+                                                    maxWidth: 360
+                                                },
+                                                children: "Visualizations reuse panel settings (thresholds, units, colors). Text mode uses value formatting below."
                                             })
                                         ]
                                     })
                                 }),
                                 column.plugin ? /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                                    label: "Panel Type",
+                                    label: "Visualization type",
                                     control: /*#__PURE__*/ _jsx(PluginKindSelect, {
                                         pluginTypes: [
                                             'Panel'
                                         ],
+                                        size: "small",
                                         value: {
                                             type: 'Panel',
                                             kind: column.plugin.kind
@@ -221,9 +236,32 @@ export function ColumnEditor({ column, onChange, ...others }) {
                     })
                 ]
             }),
+            column.plugin?.kind === 'GaugeChart' && /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    px: 8,
+                    mt: 4,
+                    width: '100%'
+                },
+                spacing: 2,
+                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    title: "Visualization settings",
+                    children: /*#__PURE__*/ _jsx(EmbeddedPanelOptionsEditor, {
+                        kind: "GaugeChart",
+                        spec: column.plugin.spec,
+                        onChange: (nextSpec)=>onChange({
+                                ...column,
+                                plugin: {
+                                    kind: 'GaugeChart',
+                                    spec: nextSpec
+                                }
+                            })
+                    })
+                })
+            }),
             /*#__PURE__*/ _jsx(Stack, {
                 sx: {
-                    px: 8
+                    px: 8,
+                    mt: column.plugin?.kind === 'GaugeChart' ? 3 : 0
                 },
                 children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
                     title: "Conditional Cell Format",