@perses-dev/timeseries-chart-plugin 0.13.0 → 0.14.0-beta.2

package/lib/cjs/TimeSeriesChartPanel.js

@@ -1,456 +0,0 @@
-// 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, "TimeSeriesChartPanel", {
-    enumerable: true,
-    get: function() {
-        return TimeSeriesChartPanel;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _components = require("@perses-dev/components");
-const _dashboards = require("@perses-dev/dashboards");
-const _timeserieschartmodel = require("./time-series-chart-model");
-const _datatransform = require("./utils/data-transform");
-const _palettegen = require("./utils/palette-gen");
-const _TimeSeriesChartBase = require("./TimeSeriesChartBase");
-const _annotation = require("./utils/annotation");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function TimeSeriesChartPanel(props) {
-    const { spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
-    const chartsTheme = (0, _components.useChartsTheme)();
-    const muiTheme = (0, _material.useTheme)();
-    const chartId = (0, _components.useId)('time-series-panel');
-    const chartRef = (0, _react.useRef)(null);
-    // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color
-    // Colors are manually applied since our legend and tooltip are built custom with React.
-    const categoricalPalette = chartsTheme.echartsTheme.color;
-    // TODO: consider refactoring how the layout/spacing/alignment are calculated
-    // the next time significant changes are made to the time series panel (e.g.
-    // when making improvements to the legend to more closely match designs).
-    // This may also want to include moving some of this logic down to the shared,
-    // embeddable components.
-    const contentPadding = chartsTheme.container.padding.default;
-    const adjustedContentDimensions = contentDimensions ? {
-        width: contentDimensions.width - contentPadding * 2,
-        height: contentDimensions.height - contentPadding * 2
-    } : undefined;
-    // populate default 'position' and other future properties
-    const legend = (0, _react.useMemo)(()=>{
-        return props.spec.legend && (0, _pluginsystem.validateLegendSpec)(props.spec.legend) ? (0, _merge.default)({}, _components.DEFAULT_LEGEND, props.spec.legend) : undefined;
-    }, [
-        props.spec.legend
-    ]);
-    // TODO: add support for y_axis_alt.format
-    const format = props.spec.yAxis?.format ?? _timeserieschartmodel.DEFAULT_FORMAT;
-    // ensures there are fallbacks for unset properties since most
-    // users should not need to customize visual display
-    const visual = (0, _react.useMemo)(()=>{
-        return (0, _merge.default)({}, _timeserieschartmodel.DEFAULT_VISUAL, props.spec.visual);
-    }, [
-        props.spec.visual
-    ]);
-    // convert Perses dashboard format to be ECharts compatible
-    const echartsYAxis = (0, _react.useMemo)(()=>{
-        return (0, _datatransform.convertPanelYAxis)(yAxis);
-    }, [
-        yAxis
-    ]);
-    // Collect unique formats from query settings that differ from the base format
-    // These will create additional Y axes on the right side
-    const { additionalFormats, formatToYAxisIndex, seriesFormatMap } = (0, _react.useMemo)(()=>{
-        const baseUnit = format?.unit ?? 'decimal';
-        const additionalFormats = [];
-        const formatToYAxisIndex = new Map();
-        const seriesFormatMap = new Map();
-        // Index 0 is reserved for the base Y axis
-        formatToYAxisIndex.set(baseUnit, 0);
-        // Collect unique formats from query settings
-        for (const qs of querySettingsList ?? []){
-            if (qs.format?.unit && qs.format.unit !== baseUnit) {
-                const unitKey = qs.format.unit;
-                if (!formatToYAxisIndex.has(unitKey)) {
-                    // Add new format - index is 1 + position in additionalFormats array
-                    formatToYAxisIndex.set(unitKey, 1 + additionalFormats.length);
-                    additionalFormats.push(qs.format);
-                }
-            }
-        }
-        return {
-            additionalFormats,
-            formatToYAxisIndex,
-            seriesFormatMap
-        };
-    }, [
-        format,
-        querySettingsList
-    ]);
-    const [selectedLegendItems, setSelectedLegendItems] = (0, _react.useState)('ALL');
-    const [legendSorting, setLegendSorting] = (0, _react.useState)();
-    const { setTimeRange } = (0, _pluginsystem.useTimeRange)();
-    const annotationsWithData = (0, _dashboards.useAnnotationsWithData)();
-    const annotations = (0, _react.useMemo)(()=>(0, _annotation.convertAnnotationToTimeSeriesAnnotation)(annotationsWithData), [
-        annotationsWithData
-    ]);
-    // Populate series data based on query results
-    const { timeScale, timeChartData, timeSeriesMapping, legendItems, seriesFormatMap: computedSeriesFormatMap, maxValuesByFormat } = (0, _react.useMemo)(()=>{
-        const timeScale = (0, _datatransform.getCommonTimeScaleForQueries)(queryResults);
-        if (timeScale === undefined) {
-            return {
-                timeChartData: [],
-                timeSeriesMapping: [],
-                seriesFormatMap: new Map(),
-                maxValuesByFormat: new Map()
-            };
-        }
-        const legendItems = [];
-        // Utilizes ECharts dataset so raw data is separate from series option style properties
-        // https://apache.github.io/echarts-handbook/en/concepts/dataset/
-        const timeChartData = [];
-        const timeSeriesMapping = [];
-        // Track max values for each format unit (used for dynamic Y axis offset calculation)
-        const maxValuesByFormat = new Map();
-        // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query
-        let seriesIndex = 0;
-        // Mapping of each set of query results to be ECharts option compatible
-        // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart
-        for(let queryIndex = 0; queryIndex < queryResults.length; queryIndex++){
-            const result = queryResults[queryIndex];
-            // Retrieve querySettings for this query, if exists.
-            // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
-            let querySettings;
-            for (const item of querySettingsList ?? []){
-                if (item.queryIndex === queryIndex) {
-                    querySettings = item;
-                // We don't break the loop here just in case there are multiple querySettings defined for the
-                // same queryIndex, because in that case we want the last one to take precedence.
-                }
-            }
-            if (result) {
-                for(let i = 0; i < result.data.series.length; i++){
-                    const timeSeries = result.data.series[i];
-                    if (timeSeries === undefined) {
-                        return {
-                            timeChartData: [],
-                            timeSeriesMapping: [],
-                            legendItems: []
-                        };
-                    }
-                    // Format is determined by seriesNameFormat in query spec
-                    const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;
-                    // Color is used for line, tooltip, and legend
-                    const seriesColor = (0, _palettegen.getSeriesColor)({
-                        // ECharts type for color is not always an array but it is always an array in ChartsProvider
-                        categoricalPalette: categoricalPalette,
-                        visual,
-                        muiPrimaryColor: muiTheme.palette.primary.main,
-                        seriesName: formattedSeriesName,
-                        seriesIndex,
-                        querySettings: querySettings,
-                        queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1
-                    });
-                    // We add a unique id for the chart to disambiguate items across charts
-                    // when there are multiple on the page.
-                    const seriesId = chartId + timeSeries.name + seriesIndex;
-                    const legendCalculations = legend?.values ? (0, _pluginsystem.getCalculations)(timeSeries.values, legend.values) : undefined;
-                    // When we initially load the chart, we want to show all series, but
-                    // DO NOT want to visualy highlight all the items in the legend.
-                    const isSelectAll = selectedLegendItems === 'ALL';
-                    const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];
-                    const showTimeSeries = isSelected || isSelectAll;
-                    if (showTimeSeries) {
-                        // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for
-                        // which legend items are selected. This must happen before timeChartData.push to avoid an
-                        // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette
-                        const datasetIndex = timeChartData.length;
-                        // Determine yAxisIndex based on the query's format setting
-                        const queryFormat = querySettings?.format;
-                        const yAxisIndex = queryFormat?.unit ? formatToYAxisIndex.get(queryFormat.unit) ?? 0 : 0;
-                        // Each series is stored as a separate dataset source.
-                        // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets
-                        timeSeriesMapping.push((0, _datatransform.getTimeSeries)(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings, yAxisIndex));
-                        // Store the format for this series for tooltip formatting
-                        if (queryFormat) {
-                            seriesFormatMap.set(seriesId, queryFormat);
-                            // Track max value for this format unit (used for dynamic Y axis offset calculation)
-                            const unitKey = queryFormat.unit;
-                            if (unitKey) {
-                                const seriesMax = Math.max(...timeSeries.values.map((v)=>Math.abs(v[1] ?? 0)));
-                                const currentMax = maxValuesByFormat.get(unitKey) ?? 0;
-                                if (seriesMax > currentMax) {
-                                    maxValuesByFormat.set(unitKey, seriesMax);
-                                }
-                            }
-                        }
-                        // When negativeY is set on this query, negate the rendered values so the
-                        // series renders below the X axis. The original (positive) values are
-                        // preserved in `timeSeries.values` (used for legend calculations) and in
-                        // `queryResults` (used for CSV export).
-                        const baseValues = (0, _components.getTimeSeriesValues)(timeSeries, timeScale);
-                        const renderedValues = querySettings?.negativeY ? baseValues.map((tuple)=>{
-                            const [t, v] = tuple;
-                            return [
-                                t,
-                                v === null ? null : -v
-                            ];
-                        }) : baseValues;
-                        timeChartData.push({
-                            name: formattedSeriesName,
-                            values: renderedValues
-                        });
-                    }
-                    if (legend && legendItems) {
-                        legendItems.push({
-                            id: seriesId,
-                            label: formattedSeriesName,
-                            color: seriesColor,
-                            data: legendCalculations
-                        });
-                    }
-                    // Used for repeating colors in Categorical palette
-                    seriesIndex++;
-                }
-            }
-        }
-        // map thresholds only if there is at least one time series to avoid displaying thresholds without any data
-        if (thresholds && thresholds.steps && timeChartData.length > 0) {
-            // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.
-            // These are styled with predefined colors and a dashed style to look different than series from query results.
-            // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.
-            const thresholdsColors = chartsTheme.thresholds;
-            const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;
-            thresholds.steps.forEach((step, index)=>{
-                const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;
-                const thresholdLineColor = step.color ?? stepPaletteColor;
-                const stepOption = {
-                    color: thresholdLineColor,
-                    value: // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis
-                    thresholds.mode === 'percent' ? (0, _datatransform.convertPercentThreshold)(step.value, timeChartData, yAxis?.max, yAxis?.min) : step.value
-                };
-                const thresholdName = step.name ?? `Threshold ${index + 1}`;
-                // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s
-                const thresholdTimeValueTuple = [];
-                let currentTimestamp = timeScale.startMs;
-                while(currentTimestamp <= timeScale.endMs){
-                    thresholdTimeValueTuple.push([
-                        currentTimestamp,
-                        stepOption.value
-                    ]);
-                    // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker
-                    currentTimestamp += 1000 * _timeserieschartmodel.THRESHOLD_PLOT_INTERVAL;
-                }
-                timeChartData.push({
-                    name: thresholdName,
-                    values: thresholdTimeValueTuple
-                });
-                timeSeriesMapping.push((0, _datatransform.getThresholdSeries)(thresholdName, stepOption, seriesIndex));
-                seriesIndex++;
-            });
-        }
-        return {
-            timeScale,
-            timeChartData,
-            timeSeriesMapping,
-            legendItems,
-            seriesFormatMap,
-            maxValuesByFormat
-        };
-    }, [
-        queryResults,
-        thresholds,
-        selectedLegendItems,
-        legend,
-        visual,
-        querySettingsList,
-        yAxis?.max,
-        yAxis?.min,
-        categoricalPalette,
-        chartId,
-        chartsTheme.thresholds,
-        muiTheme.palette.primary.main,
-        formatToYAxisIndex,
-        seriesFormatMap
-    ]);
-    // Create multiple Y axes if there are additional formats
-    // Uses max values from data to compute dynamic offsets that adapt to label widths
-    const multipleYAxes = (0, _react.useMemo)(()=>{
-        if (additionalFormats.length === 0) {
-            return undefined; // Use single Y axis (default behavior)
-        }
-        // Build array of max values for each additional format (in order)
-        const maxValues = additionalFormats.map((fmt)=>{
-            const unitKey = fmt.unit;
-            return unitKey ? maxValuesByFormat?.get(unitKey) ?? 1000 : 1000;
-        });
-        return (0, _components.getFormattedMultipleYAxes)(echartsYAxis, format, additionalFormats, maxValues);
-    }, [
-        echartsYAxis,
-        format,
-        additionalFormats,
-        maxValuesByFormat
-    ]);
-    // Translate the legend values into columns for the table legend.
-    const legendColumns = (0, _react.useMemo)(()=>{
-        if (!legend?.values) {
-            return [];
-        }
-        // Iterating the predefined list of possible values to retain a specific
-        // intended order of values.
-        return _pluginsystem.legendValues.reduce((columns, legendValue)=>{
-            const legendConfig = _pluginsystem.LEGEND_VALUE_CONFIG[legendValue];
-            if (legendConfig && legend?.values?.includes(legendValue)) {
-                columns.push({
-                    accessorKey: `data.${legendValue}`,
-                    header: legendConfig.label,
-                    headerDescription: legendConfig.description,
-                    // Intentionally hardcoding a column width to start based on discussions
-                    // with design around keeping this simple to start. This may need
-                    // revisiting in the future to handle edge cases with very large values.
-                    width: 72,
-                    align: 'right',
-                    cell: ({ getValue })=>{
-                        const cellValue = getValue();
-                        return typeof cellValue === 'number' && format ? (0, _components.formatValue)(cellValue, format) : cellValue;
-                    },
-                    cellDescription: true,
-                    enableSorting: true
-                });
-            }
-            return columns;
-        }, []);
-    }, [
-        legend?.values,
-        format
-    ]);
-    const gridOverrides = (0, _react.useMemo)(()=>{
-        // When Y axes are hidden, disable containLabel to prevent auto-spacing, but add bottom padding for X axis
-        return echartsYAxis.show === false ? {
-            left: 0,
-            right: 0,
-            bottom: 30,
-            containLabel: false
-        } : {
-            left: yAxis && yAxis.label ? 30 : 20,
-            // With containLabel: true in theme, ECharts auto-reserves space for axis labels.
-            // For multiple right axes, add extra padding for the last axis labels that extend beyond the grid.
-            right: additionalFormats.length > 0 ? 10 : 20,
-            bottom: 0,
-            containLabel: true
-        };
-    }, [
-        echartsYAxis.show,
-        yAxis,
-        additionalFormats.length
-    ]);
-    if (adjustedContentDimensions === undefined) {
-        return null;
-    }
-    const handleDataZoom = (event)=>{
-        // TODO: add ECharts transition animation on zoom
-        setTimeRange({
-            start: new Date(event.start),
-            end: new Date(event.end)
-        });
-    };
-    // Used to opt in to ECharts trigger item which show subgroup data accurately.
-    // Derived from the actual series mapping rather than `visual.stack` alone so that
-    // bar charts stacked only via per-query overrides also use the right tooltip mode.
-    const isStackedBar = visual.display === 'bar' && timeSeriesMapping.some((s)=>s?.type === 'bar' && s.stack === 'all');
-    // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec
-    let enablePinning = true;
-    if (isStackedBar) {
-        enablePinning = false;
-    } else if (tooltip?.enablePinning !== undefined) {
-        enablePinning = tooltip.enablePinning;
-    }
-    const tooltipConfig = {
-        ..._components.DEFAULT_TOOLTIP_CONFIG,
-        enablePinning
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
-            padding: `${contentPadding}px`
-        },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ContentWithLegend, {
-            width: adjustedContentDimensions.width,
-            height: adjustedContentDimensions.height,
-            // Making this small enough that the medium size doesn't get
-            // responsive-handling-ed away when in the panel options editor.
-            minChildrenHeight: 50,
-            legendSize: legend?.size,
-            legendProps: legend && {
-                options: legend,
-                data: legendItems || [],
-                selectedItems: selectedLegendItems,
-                onSelectedItemsChange: setSelectedLegendItems,
-                tableProps: {
-                    columns: legendColumns,
-                    sorting: legendSorting,
-                    onSortingChange: setLegendSorting
-                },
-                onItemMouseOver: (e, { id })=>{
-                    chartRef.current?.highlightSeries({
-                        name: id
-                    });
-                },
-                onItemMouseOut: ()=>{
-                    chartRef.current?.clearHighlightedSeries();
-                }
-            },
-            children: ({ height, width })=>{
-                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                    style: {
-                        height,
-                        width
-                    },
-                    children: [
-                        yAxis && yAxis.show && yAxis.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.YAxisLabel, {
-                            name: yAxis.label,
-                            height: height
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesChartBase.TimeSeriesChartBase, {
-                            ref: chartRef,
-                            height: height,
-                            data: timeChartData,
-                            seriesMapping: timeSeriesMapping,
-                            annotations: annotations,
-                            timeScale: timeScale,
-                            yAxis: multipleYAxes ?? echartsYAxis,
-                            format: format,
-                            seriesFormatMap: computedSeriesFormatMap,
-                            grid: gridOverrides,
-                            isStackedBar: isStackedBar,
-                            tooltipConfig: tooltipConfig,
-                            syncGroup: "default-panel-group",
-                            onDataZoom: handleDataZoom,
-                            //  Show an empty chart when there is no data because the user unselected all items in
-                            // the legend. Otherwise, show a "no data" message.
-                            noDataVariant: !timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'
-                        })
-                    ]
-                });
-            }
-        })
-    });
-}

package/lib/cjs/TimeSeriesExportAction.js

@@ -1,124 +0,0 @@
-// 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, "TimeSeriesExportAction", {
-    enumerable: true,
-    get: function() {
-        return TimeSeriesExportAction;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _Download = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Download"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _pluginsystem = require("@perses-dev/plugin-system");
-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, _pluginsystem.extractExportableData)(queryResults);
-    }, [
-        queryResults
-    ]);
-    const canExport = (0, _react.useMemo)(()=>{
-        return (0, _pluginsystem.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, _pluginsystem.exportDataAsCSV)({
-                data: exportableData
-            });
-            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);
-        } catch (error) {
-            console.error('Time series export failed:', error);
-        }
-    }, [
-        exportableData,
-        canExport,
-        definition
-    ]);
-    if (!canExport) {
-        return null;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-        description: "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"
-            })
-        })
-    });
-};