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

package/lib/cjs/TableExportAction.js

@@ -14,10 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TableExportAction", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TableExportAction () {
         return TableExportAction;
+    },
+    get buildTableData () {
+        return buildTableData;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,6 +34,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
 const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
+const _tabledatautils = require("./table-data-utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -72,39 +81,86 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TableExportAction = ({ queryResults, definition })=>{
-    const exportableData = (0, _react.useMemo)(()=>{
-        return (0, _pluginsystem.extractExportableData)(queryResults);
-    }, [
-        queryResults
-    ]);
-    const canExport = (0, _react.useMemo)(()=>{
-        return (0, _pluginsystem.isExportableData)(exportableData);
-    }, [
-        exportableData
+function buildTableData(queryResults, spec) {
+    // Use shared utility with forExport=true to get raw scalar values
+    const rawData = (0, _tabledatautils.buildRawTableData)(queryResults, spec, {
+        forExport: true
+    });
+    const transformed = (0, _components.transformData)(rawData, spec.transforms ?? []);
+    const allKeys = [];
+    for (const entry of transformed){
+        for (const key of Object.keys(entry)){
+            if (!allKeys.includes(key)) allKeys.push(key);
+        }
+    }
+    const columnSettings = spec.columnSettings ?? [];
+    const columns = [];
+    const customized = new Set();
+    for (const col of columnSettings){
+        if (customized.has(col.name)) continue;
+        customized.add(col.name);
+        if (col.hide) continue;
+        columns.push({
+            key: col.name,
+            header: col.header ?? col.name
+        });
+    }
+    if (!spec.defaultColumnHidden) {
+        for (const key of allKeys){
+            if (!customized.has(key)) {
+                columns.push({
+                    key,
+                    header: key
+                });
+            }
+        }
+    }
+    return {
+        data: transformed,
+        columns
+    };
+}
+const TableExportAction = ({ queryResults, spec, definition })=>{
+    const tableData = (0, _react.useMemo)(()=>buildTableData(queryResults, spec), [
+        queryResults,
+        spec
     ]);
+    const canExport = tableData.data.length > 0 && tableData.columns.length > 0;
     const handleExport = (0, _react.useCallback)(()=>{
-        if (!exportableData || !canExport) return;
+        if (!canExport) return;
         try {
-            const title = definition?.spec?.display?.name || 'Time Series Data';
-            const csvBlob = (0, _pluginsystem.exportDataAsCSV)({
-                data: exportableData
+            const title = definition?.spec?.display?.name || 'Table Data';
+            const { data, columns } = tableData;
+            const headerRow = columns.map((c)=>(0, _pluginsystem.escapeCsvValue)(c.header)).join(',');
+            const dataRows = data.map((row)=>columns.map((col)=>(0, _pluginsystem.escapeCsvValue)(row[col.key])).join(','));
+            const csvString = [
+                headerRow,
+                ...dataRows
+            ].join('\n') + '\n';
+            const csvBlob = new Blob([
+                csvString
+            ], {
+                type: 'text/csv;charset=utf-8'
             });
             const baseFilename = (0, _pluginsystem.sanitizeFilename)(title);
             const filename = `${baseFilename}_data.csv`;
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(csvBlob);
-            link.download = filename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(link.href);
+            const url = URL.createObjectURL(csvBlob);
+            try {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } finally{
+                URL.revokeObjectURL(url);
+            }
         } catch (error) {
-            console.error('Time series export failed:', error);
+            console.error('Table CSV export failed:', error);
         }
     }, [
-        exportableData,
         canExport,
+        tableData,
         definition
     ]);
     if (!canExport) {
@@ -115,7 +171,7 @@ const TableExportAction = ({ queryResults, definition })=>{
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
             size: "small",
             onClick: handleExport,
-            "aria-label": "Export time series data as CSV",
+            "aria-label": "Export table data as CSV",
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Download.default, {
                 fontSize: "inherit"
             })

package/lib/cjs/components/ColumnsEditor/ColumnEditor.js

@@ -27,6 +27,7 @@ const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _ConditionalPanel = require("../ConditionalPanel");
 const _DataLinkEditorDialog = require("./DataLinkEditorDialog");
+const _EmbeddedPanelOptionsEditor = require("./EmbeddedPanelOptionsEditor");
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -125,39 +126,53 @@ function ColumnEditor({ column, onChange, ...others }) {
                                     })
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                                    label: "Display",
-                                    control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
-                                        "aria-label": "Display",
-                                        size: "small",
+                                    label: "Cell display",
+                                    control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                        spacing: 1,
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                                variant: !column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: undefined
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
+                                                "aria-label": "Cell display",
+                                                size: "small",
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                                        variant: !column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: undefined
+                                                            }),
+                                                        children: "Text"
                                                     }),
-                                                children: "Text"
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                                        variant: column.plugin ? 'contained' : 'outlined',
+                                                        onClick: ()=>onChange({
+                                                                ...column,
+                                                                plugin: {
+                                                                    kind: 'GaugeChart',
+                                                                    spec: {}
+                                                                }
+                                                            }),
+                                                        children: "Visualization"
+                                                    })
+                                                ]
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                                variant: column.plugin ? 'contained' : 'outlined',
-                                                onClick: ()=>onChange({
-                                                        ...column,
-                                                        plugin: {
-                                                            kind: 'StatChart',
-                                                            spec: {}
-                                                        }
-                                                    }),
-                                                children: "Embedded Panel"
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
-                                    label: "Panel Type",
+                                    label: "Visualization type",
                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         pluginTypes: [
                                             'Panel'
                                         ],
+                                        size: "small",
                                         value: {
                                             type: 'Panel',
                                             kind: column.plugin.kind
@@ -231,9 +246,32 @@ function ColumnEditor({ column, onChange, ...others }) {
                     })
                 ]
             }),
+            column.plugin?.kind === 'GaugeChart' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                sx: {
+                    px: 8,
+                    mt: 4,
+                    width: '100%'
+                },
+                spacing: 2,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                    title: "Visualization settings",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmbeddedPanelOptionsEditor.EmbeddedPanelOptionsEditor, {
+                        kind: "GaugeChart",
+                        spec: column.plugin.spec,
+                        onChange: (nextSpec)=>onChange({
+                                ...column,
+                                plugin: {
+                                    kind: 'GaugeChart',
+                                    spec: nextSpec
+                                }
+                            })
+                    })
+                })
+            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 sx: {
-                    px: 8
+                    px: 8,
+                    mt: column.plugin?.kind === 'GaugeChart' ? 3 : 0
                 },
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
                     title: "Conditional Cell Format",

package/lib/cjs/components/ColumnsEditor/EmbeddedPanelOptionsEditor.js

@@ -0,0 +1,124 @@
+// 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
+});
+Object.defineProperty(exports, "EmbeddedPanelOptionsEditor", {
+    enumerable: true,
+    get: function() {
+        return EmbeddedPanelOptionsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function isSpecEmpty(spec) {
+    if (spec === undefined || spec === null) return true;
+    if (typeof spec !== 'object') return false;
+    return Object.keys(spec).length === 0;
+}
+function mergeWithPluginDefaults(plugin, spec) {
+    const initial = plugin.createInitialOptions() ?? {};
+    return (0, _merge.default)({}, initial, spec ?? {});
+}
+function EmbeddedPanelOptionsEditor({ kind, spec, onChange }) {
+    const { data: plugin, isLoading, isError, error } = (0, _pluginsystem.usePlugin)('Panel', kind);
+    const panelPlugin = plugin;
+    const mergedSpec = (0, _react.useMemo)(()=>{
+        if (!panelPlugin) {
+            return spec;
+        }
+        return mergeWithPluginDefaults(panelPlugin, spec);
+    }, [
+        panelPlugin,
+        spec
+    ]);
+    const onChangeRef = (0, _react.useRef)(onChange);
+    onChangeRef.current = onChange;
+    // Persist plugin defaults when the column still has an empty spec (e.g. after switching panel kind).
+    (0, _react.useEffect)(()=>{
+        if (!panelPlugin || !isSpecEmpty(spec)) {
+            return;
+        }
+        onChangeRef.current(mergeWithPluginDefaults(panelPlugin, spec));
+    }, [
+        panelPlugin,
+        kind,
+        spec
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                py: 1
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                    size: 22
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: "Loading panel settings…"
+                })
+            ]
+        });
+    }
+    if (isError || !plugin) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "error",
+            children: error?.message ?? 'Could not load panel plugin.'
+        });
+    }
+    const loadedPlugin = plugin;
+    const editorTabs = loadedPlugin.panelOptionsEditorComponents ?? [];
+    if (editorTabs.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: "This visualization has no editable settings."
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        spacing: 2.5,
+        sx: {
+            width: '100%',
+            py: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.OptionsEditorTabs, {
+            tabs: editorTabs.map((tab)=>{
+                const Content = tab.content;
+                return {
+                    label: tab.label,
+                    content: /*#__PURE__*/ (0, _jsxruntime.jsx)(Content, {
+                        value: mergedSpec,
+                        onChange: (next)=>{
+                            onChange(next);
+                        }
+                    })
+                };
+            })
+        })
+    });
+}