@perses-dev/timeseries-chart-plugin 0.9.0 → 0.10.0

package/lib/cjs/CSVExportUtils.js

@@ -0,0 +1,246 @@
+// Copyright 2023 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: all[name]
+    });
+}
+_export(exports, {
+    escapeCsvValue: function() {
+        return escapeCsvValue;
+    },
+    exportDataAsCSV: function() {
+        return exportDataAsCSV;
+    },
+    extractExportableData: function() {
+        return extractExportableData;
+    },
+    formatLegendName: function() {
+        return formatLegendName;
+    },
+    formatTimestampISO: function() {
+        return formatTimestampISO;
+    },
+    isExportableData: function() {
+        return isExportableData;
+    },
+    sanitizeColumnName: function() {
+        return sanitizeColumnName;
+    },
+    sanitizeFilename: function() {
+        return sanitizeFilename;
+    }
+});
+const isExportableData = (data)=>{
+    return !!(data && typeof data === 'object' && 'series' in data && Array.isArray(data.series) && data.series.length > 0);
+};
+const extractExportableData = (queryResults)=>{
+    if (!queryResults || queryResults.length === 0) return undefined;
+    const allSeries = [];
+    let timeRange = undefined;
+    let stepMs = undefined;
+    let metadata = undefined;
+    queryResults.forEach((query)=>{
+        if (query?.data && typeof query.data === 'object' && 'series' in query.data) {
+            const data = query.data;
+            if (data.series && Array.isArray(data.series) && data.series.length > 0) {
+                allSeries.push(...data.series);
+                if (!timeRange && data.timeRange) {
+                    timeRange = data.timeRange;
+                }
+                if (!stepMs && data.stepMs) {
+                    stepMs = data.stepMs;
+                }
+                if (!metadata && data.metadata) {
+                    metadata = data.metadata;
+                }
+            }
+        }
+    });
+    if (allSeries.length > 0) {
+        return {
+            series: allSeries,
+            timeRange,
+            stepMs,
+            metadata
+        };
+    }
+    return undefined;
+};
+const formatLegendName = (series, seriesIndex)=>{
+    const seriesAny = series;
+    let legendName = series.formattedName || series.name;
+    if (!legendName || legendName === `Series ${seriesIndex + 1}`) {
+        legendName = seriesAny.legendName || seriesAny.displayName || seriesAny.legend || series.name || '';
+    }
+    if ((!legendName || legendName === series.name) && series.labels) {
+        const labels = series.labels;
+        const displayLabels = {
+            ...labels
+        };
+        const metricName = displayLabels.__name__;
+        delete displayLabels.__name__;
+        const labelPairs = Object.entries(displayLabels).filter(([value])=>value !== undefined && value !== null && value !== '').map(([key, value])=>`${key}="${value}"`).join(', ');
+        if (metricName && labelPairs) {
+            legendName = `${metricName}{${labelPairs}}`;
+        } else if (metricName) {
+            legendName = metricName;
+        } else if (labelPairs) {
+            legendName = `{${labelPairs}}`;
+        } else {
+            legendName = labels.job || labels.instance || labels.metric || `Series ${seriesIndex + 1}`;
+        }
+    }
+    if (!legendName || legendName.trim() === '') {
+        legendName = `Series ${seriesIndex + 1}`;
+    }
+    return legendName;
+};
+const sanitizeColumnName = (name)=>{
+    return name.replace(/[,"\n\r]/g, '_').replace(/\s+/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '').substring(0, 255);
+};
+const sanitizeFilename = (filename)=>{
+    return filename.replace(/[<>:"/\\|?*]/g, ' ').trim().split(/\s+/).filter((word)=>word.length > 0).map((word, index)=>{
+        if (index === 0) {
+            return word.toLowerCase();
+        }
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    }).join('');
+};
+const formatTimestampISO = (timestamp)=>{
+    let timestampMs;
+    if (typeof timestamp === 'string') {
+        const date = new Date(timestamp);
+        if (isNaN(date.getTime())) {
+            return timestamp;
+        }
+        timestampMs = date.getTime();
+    } else {
+        timestampMs = timestamp > 1e10 ? timestamp : timestamp * 1000;
+    }
+    const date = new Date(timestampMs);
+    if (isNaN(date.getTime())) {
+        return new Date(timestampMs).toISOString();
+    }
+    return date.toISOString();
+};
+const escapeCsvValue = (value)=>{
+    if (value === null || value === undefined) {
+        return '';
+    }
+    const stringValue = String(value);
+    if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n') || stringValue.includes('\r')) {
+        return `"${stringValue.replace(/"/g, '""')}"`;
+    }
+    return stringValue;
+};
+const exportDataAsCSV = ({ data })=>{
+    if (!isExportableData(data)) {
+        console.warn('No valid data found to export to CSV.');
+        return new Blob([
+            ''
+        ], {
+            type: 'text/csv;charset=utf-8'
+        });
+    }
+    let csvString = '';
+    const result = {};
+    const seriesInfo = [];
+    let validSeriesCount = 0;
+    for(let i = 0; i < data.series.length; i++){
+        const series = data.series[i];
+        if (!series) {
+            continue;
+        }
+        if (!Array.isArray(series.values) || series.values.length === 0) {
+            continue;
+        }
+        const legendName = formatLegendName(series, i);
+        const columnName = sanitizeColumnName(legendName);
+        const currentSeriesInfo = {
+            legendName,
+            columnName: columnName || `Series_${i + 1}`,
+            originalName: series.name || ''
+        };
+        seriesInfo.push(currentSeriesInfo);
+        validSeriesCount++;
+        for(let j = 0; j < series.values.length; j++){
+            const entry = series.values[j];
+            let timestamp;
+            let value;
+            if (Array.isArray(entry) && entry.length >= 2) {
+                timestamp = entry[0];
+                value = entry[1];
+            } else if (typeof entry === 'object' && entry !== null && 'timestamp' in entry && 'value' in entry) {
+                const dataPoint = entry;
+                timestamp = dataPoint.timestamp;
+                value = dataPoint.value;
+            } else {
+                continue;
+            }
+            if (value === null || value === undefined) {
+                continue;
+            }
+            const dateTime = formatTimestampISO(timestamp);
+            if (!result[dateTime]) {
+                result[dateTime] = {};
+            }
+            result[dateTime][currentSeriesInfo.columnName] = value;
+        }
+    }
+    if (validSeriesCount === 0 || seriesInfo.length === 0) {
+        console.warn('No valid data found to export to CSV.');
+        return new Blob([
+            ''
+        ], {
+            type: 'text/csv;charset=utf-8'
+        });
+    }
+    const timestampCount = Object.keys(result).length;
+    if (timestampCount === 0) {
+        console.warn('No valid timestamp data found to export to CSV.');
+        return new Blob([
+            ''
+        ], {
+            type: 'text/csv;charset=utf-8'
+        });
+    }
+    const columnNames = seriesInfo.map((info)=>info.columnName);
+    csvString += `DateTime,${columnNames.join(',')}\n`;
+    const sortedDateTimes = Object.keys(result).sort((a, b)=>{
+        const dateA = new Date(a).getTime();
+        const dateB = new Date(b).getTime();
+        return dateA - dateB;
+    });
+    for (const dateTime of sortedDateTimes){
+        const rowData = result[dateTime];
+        const values = [];
+        if (rowData) {
+            for (const columnName of columnNames){
+                const value = rowData[columnName];
+                values.push(escapeCsvValue(value));
+            }
+            csvString += `${escapeCsvValue(dateTime)},${values.join(',')}\n`;
+        }
+    }
+    return new Blob([
+        csvString
+    ], {
+        type: 'text/csv;charset=utf-8'
+    });
+};

package/lib/cjs/TimeSeriesChart.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "TimeSeriesChart", {
 const _timeserieschartmodel = require("./time-series-chart-model");
 const _TimeSeriesChartOptionsEditorSettings = require("./TimeSeriesChartOptionsEditorSettings");
 const _TimeSeriesChartPanel = require("./TimeSeriesChartPanel");
+const _TimeSeriesExportAction = require("./TimeSeriesExportAction");
 const TimeSeriesChart = {
     PanelComponent: _TimeSeriesChartPanel.TimeSeriesChartPanel,
     supportedQueryTypes: [
@@ -34,5 +35,11 @@ const TimeSeriesChart = {
             content: _TimeSeriesChartOptionsEditorSettings.TimeSeriesChartOptionsEditorSettings
         }
     ],
-    createInitialOptions: _timeserieschartmodel.createInitialTimeSeriesChartOptions
+    createInitialOptions: _timeserieschartmodel.createInitialTimeSeriesChartOptions,
+    actions: [
+        {
+            component: _TimeSeriesExportAction.TimeSeriesExportAction,
+            location: 'header'
+        }
+    ]
 };

package/lib/cjs/TimeSeriesChartBase.js

@@ -52,7 +52,7 @@ function _interop_require_default(obj) {
     _renderers.CanvasRenderer
 ]);
 const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = _components1.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
-    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _components1.useChartsContext)();
+    const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = (0, _components1.useChartsContext)();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -395,7 +395,7 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,
                 _instance: chartRef,
-                syncGroup: syncGroup
+                syncGroup: enableSyncGrouping ? syncGroup : undefined
             })
         ]
     });

package/lib/cjs/TimeSeriesChartOptionsEditorSettings.js

@@ -62,6 +62,7 @@ function TimeSeriesChartOptionsEditorSettings(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.LegendOptionsEditor, {
+                        calculation: "aggregation",
                         value: value.legend,
                         onChange: handleLegendChange
                     }),

package/lib/cjs/TimeSeriesExportAction.js

@@ -0,0 +1,123 @@
+// Copyright 2023 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, "TimeSeriesExportAction", {
+    enumerable: true,
+    get: function() {
+        return TimeSeriesExportAction;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _material = require("@mui/material");
+const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
+const _CSVExportUtils = require("./CSVExportUtils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const TimeSeriesExportAction = ({ queryResults, definition })=>{
+    const exportableData = (0, _react.useMemo)(()=>{
+        return (0, _CSVExportUtils.extractExportableData)(queryResults);
+    }, [
+        queryResults
+    ]);
+    const canExport = (0, _react.useMemo)(()=>{
+        return (0, _CSVExportUtils.isExportableData)(exportableData);
+    }, [
+        exportableData
+    ]);
+    const handleExport = (0, _react.useCallback)(()=>{
+        if (!exportableData || !canExport) return;
+        try {
+            const title = definition?.spec?.display?.name || 'Time Series Data';
+            const csvBlob = (0, _CSVExportUtils.exportDataAsCSV)({
+                data: exportableData
+            });
+            const baseFilename = (0, _CSVExportUtils.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);
+        } catch (error) {
+            console.error('Time series export failed:', error);
+        }
+    }, [
+        exportableData,
+        canExport,
+        definition
+    ]);
+    if (!canExport) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+        title: "Export as CSV",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleExport,
+            "aria-label": "Export time series data as CSV",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Download.default, {
+                fontSize: "inherit"
+            })
+        })
+    });
+};

package/lib/cjs/index.js

@@ -29,6 +29,7 @@ _export_star(require("./YAxisOptionsEditor"), exports);
 _export_star(require("./TimeSeriesChartPanel"), exports);
 _export_star(require("./TimeSeriesChartBase"), exports);
 _export_star(require("./time-series-chart-model"), exports);
+_export_star(require("./CSVExportUtils"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/lib/index.d.ts

@@ -7,4 +7,5 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
+export * from './CSVExportUtils';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wCAAwC,CAAC;AACvD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wCAAwC,CAAC;AACvD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}

package/lib/index.js

@@ -19,5 +19,6 @@ export * from './YAxisOptionsEditor';
 export * from './TimeSeriesChartPanel';
 export * from './TimeSeriesChartBase';
 export * from './time-series-chart-model';
+export * from './CSVExportUtils';
 
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './QuerySettingsEditor';\nexport * from './TimeSeriesChartOptionsEditorSettings';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\n"],"names":["getPluginModule"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,wBAAwB;AACtC,cAAc,yCAAyC;AACvD,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport { getPluginModule } from './getPluginModule';\nexport * from './TimeSeriesChart';\nexport * from './QuerySettingsEditor';\nexport * from './TimeSeriesChartOptionsEditorSettings';\nexport * from './VisualOptionsEditor';\nexport * from './YAxisOptionsEditor';\nexport * from './TimeSeriesChartPanel';\nexport * from './TimeSeriesChartBase';\nexport * from './time-series-chart-model';\nexport * from './CSVExportUtils';\n"],"names":["getPluginModule"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,oBAAoB;AAClC,cAAc,wBAAwB;AACtC,cAAc,yCAAyC;AACvD,cAAc,wBAAwB;AACtC,cAAc,uBAAuB;AACrC,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,4BAA4B;AAC1C,cAAc,mBAAmB"}