@perses-dev/components 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-datasource-browser-test-28cbb71

package/dist/cjs/Dialog/Dialog.js

@@ -0,0 +1,85 @@
+// 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, "Dialog", {
+    enumerable: true,
+    get: ()=>Dialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const Header = ({ children , onClose , ...props })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                ...props,
+                children: children
+            }),
+            onClose && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: onClose,
+                sx: dialogCloseIconButtonStyle,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            })
+        ]
+    });
+};
+const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+        dividers: true,
+        ...props,
+        sx: (0, _utils.combineSx)({
+            width: `${width}px`
+        }, sx),
+        children: children
+    });
+const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        type: "submit",
+        ...props,
+        children: children
+    });
+const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "outlined",
+        color: "secondary",
+        ...props,
+        children: children
+    });
+/**
+ * Render the CSS of the dialog's close button, according to the given material theme.
+ * @param theme material theme
+ */ const dialogCloseIconButtonStyle = (theme)=>{
+    return {
+        position: 'absolute',
+        top: theme.spacing(0.5),
+        right: theme.spacing(0.5)
+    };
+};
+const Dialog = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
+        ...props,
+        children: children
+    });
+Dialog.Header = Header;
+Dialog.Content = Content;
+Dialog.PrimaryButton = PrimaryButton;
+Dialog.SecondaryButton = SecondaryButton;
+Dialog.Actions = _material.DialogActions;

package/dist/cjs/{Tooltip → Dialog}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,8 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Tooltip"), exports);
-_exportStar(require("./SeriesMarker"), exports);
+_exportStar(require("./Dialog"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Drawer/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/EChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -22,13 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
-const _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
-const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+const _lodashEs = require("lodash-es");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -114,7 +108,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     // Update chart data when option changes
     (0, _react.useEffect)(()=>{
-        if (prevOption.current === undefined || (0, _isEqual.default)(prevOption.current, option)) return;
+        if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
         if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
@@ -123,7 +117,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     // Resize chart, cleanup listener on unmount
     (0, _react.useLayoutEffect)(()=>{
-        const updateSize = (0, _debounce.default)(()=>{
+        const updateSize = (0, _lodashEs.debounce)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
@@ -149,7 +143,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
         onEvents
     ]);
     (0, _react.useEffect)(()=>{
-        const updateSize = (0, _debounce.default)(()=>{
+        const updateSize = (0, _lodashEs.debounce)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);

package/dist/cjs/ErrorAlert.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/ErrorBoundary.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -205,7 +205,8 @@ function GaugeChart(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
         sx: {
             width: width,
-            height: height
+            height: height,
+            padding: `${chartsTheme.container.padding.default}px`
         },
         option: option,
         theme: chartsTheme.echartsTheme

package/dist/cjs/GaugeChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,15 +14,9 @@
 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, {
-    TooltipPlacement: ()=>TooltipPlacement,
-    InfoTooltip: ()=>InfoTooltip
+Object.defineProperty(exports, "InfoTooltip", {
+    enumerable: true,
+    get: ()=>InfoTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
@@ -32,18 +26,11 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-var TooltipPlacement;
-(function(TooltipPlacement) {
-    TooltipPlacement["Top"] = 'top';
-    TooltipPlacement["Left"] = 'left';
-    TooltipPlacement["Right"] = 'right';
-    TooltipPlacement["Bottom"] = 'bottom';
-})(TooltipPlacement || (TooltipPlacement = {}));
 const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : TooltipPlacement.Top,
+        placement: placement !== null && placement !== void 0 ? placement : 'top',
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
             title: title,
             description: description

package/dist/cjs/InfoTooltip/InfoTooltip.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/InfoTooltip/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/JSONEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/CompactLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/Legend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
 function Legend({ width , height , options , data  }) {
-    if (options.position === 'right') {
+    if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
                 width: width,
@@ -39,8 +39,19 @@ function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-        items: data,
-        height: height
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            width: width,
+            height: height,
+            position: 'absolute',
+            bottom: 0
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+                items: data,
+                height: height
+            }),
+            ";"
+        ]
     });
 }

package/dist/cjs/Legend/LegendColorBadge.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/ListLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/ListLegendItem.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -20,21 +20,10 @@ Object.defineProperty(exports, "LegendOptionsEditor", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _errorAlert = require("../ErrorAlert");
 const _model = require("../model");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
-const LEGEND_POSITIONS = [
-    'bottom',
-    'right'
-];
-const LEGEND_POSITIONS_CONFIG = {
-    bottom: {
-        label: 'Bottom'
-    },
-    right: {
-        label: 'Right'
-    }
-};
-const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -54,11 +43,17 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
-    var ref;
-    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : _model.DEFAULT_LEGEND.position];
-    var ref1;
+    const isValidLegend = (0, _model.validateLegendSpec)(value);
+    const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
+    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
+            !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Show",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
@@ -71,7 +66,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
                         ...legendConfig,
-                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : _model.DEFAULT_LEGEND.position
+                        id: currentPosition
                     },
                     options: POSITION_OPTIONS,
                     isOptionEqualToValue: (option, value)=>option.id === value.id,

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -37,12 +37,33 @@ describe('LegendOptionsEditor', ()=>{
             name: 'Show'
         });
     };
+    const getLegendPositionSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Position'
+        });
+    };
     it('can change legend visibility by clicking', ()=>{
         const onChange = jest.fn();
         renderLegendOptionsEditor(undefined, onChange);
+        expect(getLegendPositionSelector()).toBeDisabled();
         _userEvent.default.click(getLegendShowSwitch());
         expect(onChange).toHaveBeenCalledWith({
-            position: 'bottom'
+            position: 'Bottom'
+        });
+    });
+    it('should allow changing legend position', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor({
+            position: 'Bottom'
+        }, onChange);
+        expect(getLegendPositionSelector()).toBeEnabled();
+        _userEvent.default.click(getLegendPositionSelector());
+        const positionRightOption = _react.screen.getByRole('option', {
+            name: 'Right'
+        });
+        _userEvent.default.click(positionRightOption);
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'Right'
         });
     });
 });

package/dist/cjs/LegendOptionsEditor/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -28,7 +28,7 @@ const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
 const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _tooltip = require("../Tooltip/Tooltip");
+const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
 (0, _core.use)([
@@ -176,7 +176,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: true,

package/dist/cjs/LineChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LineChart/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -27,14 +27,9 @@ _export(exports, {
     getFormattedDate: ()=>getFormattedDate,
     getYAxes: ()=>getYAxes
 });
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _lodashEs = require("lodash-es");
 const _model = require("../model");
 const _utils = require("../utils");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -95,6 +90,6 @@ function getYAxes(yAxis, unit) {
         }
     };
     return [
-        (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
+        (0, _lodashEs.merge)(Y_AXIS_DEFAULT, yAxis)
     ];
 }

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/StatChart/StatChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -21,7 +21,7 @@ Object.defineProperty(exports, "StatChart", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
-const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _lodashEs = require("lodash-es");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
@@ -29,11 +29,6 @@ const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _units = require("../model/units");
 const _echart = require("../EChart");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -82,7 +77,6 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const PANEL_PADDING = 32;
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 function StatChart(props) {
@@ -104,7 +98,7 @@ function StatChart(props) {
                 animation: false,
                 silent: true
             };
-            const mergedSeries = (0, _merge.default)(lineSeries, sparkline);
+            const mergedSeries = (0, _lodashEs.merge)(lineSeries, sparkline);
             statSeries.push(mergedSeries);
         }
         const option = {
@@ -143,27 +137,37 @@ function StatChart(props) {
     // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
     const charactersAdjust = formattedValue.length;
     const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    const containerPadding = `${chartsTheme.container.padding.default}px`;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+        },
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h3",
                 sx: (theme)=>({
                         color: theme.palette.text.primary,
-                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`
+                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
+                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
-            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                 sx: {
-                    width: width + PANEL_PADDING,
-                    height: height,
-                    position: 'absolute',
-                    bottom: 0,
-                    left: 0
+                    flex: 1
                 },
-                option: option,
-                theme: chartsTheme.echartsTheme,
-                renderer: "svg"
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                    sx: {
+                        width: '100%',
+                        height: '100%'
+                    },
+                    option: option,
+                    theme: chartsTheme.echartsTheme,
+                    renderer: "svg"
+                })
             })
         ]
     });

package/dist/cjs/StatChart/StatChart.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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