@perses-dev/components 0.49.0 → 0.50.0-rc.1

package/dist/cjs/FormEditor/FormActions.js

@@ -0,0 +1,83 @@
+// Copyright 2024 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, "FormActions", {
+    enumerable: true,
+    get: function() {
+        return FormActions;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function FormActions({ action, submitText = 'Save', cancelText = 'Cancel', isReadonly, isValid, onActionChange, onSubmit, onDelete, onCancel, ...props }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        direction: "row",
+        gap: 1,
+        sx: {
+            marginLeft: 'auto'
+        },
+        ...props,
+        children: action === 'read' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                onActionChange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    disabled: isReadonly,
+                    variant: "contained",
+                    onClick: ()=>onActionChange('update'),
+                    children: "Edit"
+                }),
+                onDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    color: "error",
+                    disabled: isReadonly,
+                    variant: "outlined",
+                    onClick: onDelete,
+                    children: "Delete"
+                }),
+                onCancel && (onSubmit || onDelete) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    orientation: "vertical",
+                    flexItem: true,
+                    sx: {
+                        borderColor: (theme)=>theme.palette.grey['500'],
+                        '&.MuiDivider-root': {
+                            marginLeft: 2,
+                            marginRight: 1
+                        }
+                    }
+                }),
+                onCancel && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    color: "secondary",
+                    variant: "outlined",
+                    onClick: onCancel,
+                    children: cancelText
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                onSubmit && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    variant: "contained",
+                    disabled: !isValid,
+                    onClick: onSubmit,
+                    children: submitText
+                }),
+                onCancel && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    color: "secondary",
+                    variant: "outlined",
+                    onClick: onCancel,
+                    children: cancelText
+                })
+            ]
+        })
+    });
+}

package/dist/cjs/FormEditor/index.js

@@ -0,0 +1,30 @@
+// Copyright 2024 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
+});
+_export_star(require("./FormActions"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/FormatControls/FormatControls.js

@@ -74,7 +74,7 @@ function FormatControls({ value, onChange, disabled = false }) {
             unit: newValue.id
         });
     };
-    const handleDecimalPlacesChange = (_, { decimalPlaces })=>{
+    const handleDecimalPlacesChange = ({ decimalPlaces })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,
@@ -121,7 +121,7 @@ function FormatControls({ value, onChange, disabled = false }) {
                     value: getOptionByDecimalPlaces(value.decimalPlaces),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    onChange: handleDecimalPlacesChange,
+                    onChange: (_, value)=>handleDecimalPlacesChange(value),
                     disabled: !hasDecimalPlaces,
                     disableClearable: true
                 })

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -34,7 +34,7 @@ const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _EChart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
@@ -48,7 +48,7 @@ const PROGRESS_WIDTH = 16;
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
     const { width, height, data, format, axisLine, max } = props;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const chartsTheme = (0, _context.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
         var _chartsTheme_echartsTheme_textStyle;

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -21,13 +21,7 @@ Object.defineProperty(exports, "InfoTooltip", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:
     //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.

package/dist/cjs/Legend/Legend.js

@@ -102,9 +102,11 @@ function Legend({ width, height, options, data, selectedItems, onSelectedItemsCh
     }
     if (options.position === 'right') {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            sx: {
+            style: {
                 width: width,
-                height: height,
+                height: height
+            },
+            sx: {
                 position: 'absolute',
                 top: 0,
                 right: 0
@@ -114,9 +116,11 @@ function Legend({ width, height, options, data, selectedItems, onSelectedItemsCh
     }
     // Position bottom
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             position: 'absolute',
             bottom: 0
         },

package/dist/cjs/Legend/LegendColorBadge.js

@@ -21,15 +21,10 @@ Object.defineProperty(exports, "LegendColorBadge", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color, sx, ...others }) {
+const LegendColorBadge = /*#__PURE__*/ (0, _react.memo)(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         sx: (0, _utils.combineSx)({

package/dist/cjs/Legend/ListLegendItem.js

@@ -21,51 +21,10 @@ Object.defineProperty(exports, "ListLegendItem", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 const _LegendColorBadge = require("./LegendColorBadge");
-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 ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleTextMouseOver() {
@@ -83,16 +42,14 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         onClick(e, item.id);
         (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
     };
-    return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ListItemButton, {
         ...others,
-        component: "div",
         role: "listitem",
         sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
         }, sx),
         dense: true,
-        key: item.id,
         onClick: handleClick,
         onMouseOver: (e)=>onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
                 id: item.id,
@@ -125,4 +82,4 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         ]
     });
 });
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(ListLegendItemBase);
+const ListLegendItem = /*#__PURE__*/ (0, _react.memo)(ListLegendItemBase);

package/dist/cjs/Legend/TableLegend.js

@@ -75,6 +75,7 @@ function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsCh
         data: items,
         columns: columns,
         density: "compact",
+        defaultColumnWidth: "auto",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
         checkboxSelection: true,

package/dist/cjs/LineChart/LineChart.js

@@ -28,9 +28,8 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _EChart = require("../EChart");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _TimeSeriesTooltip = require("../TimeSeriesTooltip");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
@@ -47,11 +46,11 @@ const _utils = require("../utils");
 ]);
 const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = _TimeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     var _option_tooltip;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const chartsTheme = (0, _context.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
-    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
+    const { timeZone } = (0, _context.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     (0, _react.useImperativeHandle)(ref, ()=>{
@@ -172,7 +171,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
+        style: {
             height
         },
         onClick: (e)=>{

package/dist/cjs/LinksEditor/LinksEditor.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "LinksEditor", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _reacthookform = require("react-hook-form");
 const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
@@ -31,47 +31,6 @@ function _interop_require_default(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;
-}
 function LinksEditor({ control, ...props }) {
     const { fields, append, remove } = (0, _reacthookform.useFieldArray)({
         control: control,

package/dist/cjs/PieChart/PieChart.js

@@ -81,9 +81,11 @@ function PieChart(props) {
         }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             overflow: 'auto'
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -39,7 +39,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         getOptionLabel: getOptionLabel,
         options: options,
         renderInput: renderInput,
-        renderOption: (props, option)=>{
+        renderOption: ({ key, ...props }, option)=>{
             return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                 ...props,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -52,12 +52,14 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
                         option.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "body2",
                             component: "div",
-                            color: (theme)=>theme.palette.text.secondary,
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            },
                             children: option.description
                         })
                     ]
                 })
-            });
+            }, key);
         },
         filterOptions: (0, _material.createFilterOptions)({
             // Include the label and the description in search.

package/dist/cjs/SortSelector/SortSelectorButtons.js

@@ -28,9 +28,6 @@ function SortSelectorButtons({ onChange, value, ...props }) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
         "aria-label": "Sort",
-        sx: {
-            margin: 1
-        },
         ...props,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
@@ -41,12 +38,12 @@ function SortSelectorButtons({ onChange, value, ...props }) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 onClick: ()=>handleSortChange('asc'),
                 variant: value === 'asc' ? 'contained' : 'outlined',
-                children: "Ascending"
+                children: "Asc"
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 onClick: ()=>handleSortChange('desc'),
                 variant: value === 'desc' ? 'contained' : 'outlined',
-                children: "Descending"
+                children: "Desc"
             })
         ]
     });

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -0,0 +1,157 @@
+// Copyright 2024 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, "StatusHistoryChart", {
+    enumerable: true,
+    get: function() {
+        return StatusHistoryChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _core = require("echarts/core");
+const _renderers = require("echarts/renderers");
+const _react = require("react");
+const _context = require("../context");
+const _EChart = require("../EChart");
+const _getcolor = require("./utils/get-color");
+const _getformattedaxislabel = require("./get-formatted-axis-label");
+const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
+(0, _core.use)([
+    _charts.HeatmapChart,
+    _components.VisualMapComponent,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+function StatusHistoryChart(props) {
+    const { height, data, xAxisCategories, yAxisCategories, timeScale } = props;
+    const { timeZone } = (0, _context.useTimeZone)();
+    const chartsTheme = (0, _context.useChartsTheme)();
+    const theme = (0, _material.useTheme)();
+    const uniqueValues = (0, _react.useMemo)(()=>[
+            ...new Set(data.map((item)=>item[2]))
+        ].filter((value)=>value !== undefined), [
+        data
+    ]);
+    // get colors from theme and generate colors if not provided
+    const pieces = (0, _react.useMemo)(()=>{
+        const themeColors = Array.isArray(chartsTheme.echartsTheme.color) ? chartsTheme.echartsTheme.color.filter((color)=>typeof color === 'string') : [];
+        return uniqueValues.map((value, index)=>({
+                value,
+                color: (0, _getcolor.getColorsForValues)(uniqueValues, themeColors)[index]
+            }));
+    }, [
+        uniqueValues,
+        chartsTheme.echartsTheme.color
+    ]);
+    var _timeScale_rangeMs;
+    const option = {
+        tooltip: {
+            appendToBody: true,
+            formatter: (params)=>{
+                return (0, _StatusHistoryTooltip.generateTooltipHTML)({
+                    data: params.data,
+                    marker: params.marker,
+                    xAxisCategories,
+                    yAxisCategories,
+                    theme
+                });
+            }
+        },
+        grid: {
+            top: '5%',
+            bottom: '5%'
+        },
+        xAxis: {
+            type: 'category',
+            data: xAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false
+            },
+            axisLabel: {
+                hideOverlap: true,
+                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)((_timeScale_rangeMs = timeScale === null || timeScale === void 0 ? void 0 : timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0, timeZone)
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: yAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false,
+                interval: 0
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                interval: 0
+            }
+        },
+        visualMap: {
+            show: false,
+            type: 'piecewise',
+            pieces
+        },
+        series: [
+            {
+                name: 'Status history',
+                type: 'heatmap',
+                coordinateSystem: 'cartesian2d',
+                data: data,
+                label: {
+                    show: false
+                },
+                itemStyle: {
+                    borderWidth: 1,
+                    borderType: 'solid',
+                    borderColor: '#ffffff'
+                },
+                emphasis: {
+                    itemStyle: {
+                        opacity: 0.5
+                    }
+                }
+            }
+        ]
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        style: {
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
+            sx: {
+                width: '100%',
+                height: height
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}

package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js

@@ -0,0 +1,55 @@
+// Copyright 2024 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, "generateTooltipHTML", {
+    enumerable: true,
+    get: function() {
+        return generateTooltipHTML;
+    }
+});
+const _material = require("@mui/material");
+const _utils = require("../utils");
+function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y, value] = data;
+    const xAxisLabel = xAxisCategories[x];
+    const { formattedDate, formattedTime } = (0, _utils.getDateAndTime)(xAxisLabel);
+    const tooltipHeader = (0, _material.css)`
+    border-bottom: 1px solid ${theme.palette.grey[500]};
+    padding-bottom: 8px;
+  `;
+    const tooltipContentStyles = (0, _material.css)`
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+  `;
+    const labelStyles = (0, _material.css)`
+    margin-right: 16px;
+  `;
+    return `
+    <div>
+      <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
+      <div style="${tooltipContentStyles.styles}">
+        <div style="${labelStyles.styles}">
+          ${marker}
+          <strong>${yAxisCategories[y]}</strong>
+        </div>
+        <div>
+          ${value}
+        </div>
+      </div>
+    </div>
+  `;
+}