@perses-dev/components 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-test-internal-dep-dd238ac

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/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
@@ -19,7 +19,7 @@ Object.defineProperty(exports, "LineChart", {
     get: ()=>LineChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
@@ -28,9 +28,48 @@ 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");
+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 _interopRequireWildcard(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 = {};
+    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;
+}
 (0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
@@ -176,7 +215,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
@@ -47,7 +47,7 @@ const OptionsEditorControl = ({ label , control  })=>{
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
-                        width: '160px',
+                        width: '150px',
                         textAlign: 'right'
                     },
                     children: [

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
@@ -20,16 +20,33 @@ Object.defineProperty(exports, "OptionsEditorGroup", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const OptionsEditorGroup = ({ title , children  })=>{
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const OptionsEditorGroup = ({ title , children , icon  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                variant: "overline",
-                component: "h4",
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
                 borderBottom: 1,
                 borderColor: "grey.300",
                 marginBottom: (theme)=>theme.spacing(1),
-                children: title
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "overline",
+                        component: "h4",
+                        children: title
+                    }),
+                    icon && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: icon
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
                 spacing: 1,

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
@@ -19,9 +19,9 @@ Object.defineProperty(exports, "StatChart", {
     get: ()=>StatChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = 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,52 +29,7 @@ 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();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(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 = {};
-    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;
-}
 (0, _core.use)([
-    _charts.GaugeChart,
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -82,7 +37,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 +58,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 +97,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/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/ThresholdsEditor/ThresholdColorPicker.js

@@ -0,0 +1,87 @@
+// 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, "ThresholdColorPicker", {
+    enumerable: true,
+    get: ()=>ThresholdColorPicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _colorPicker = require("../ColorPicker");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ThresholdColorPicker({ color , onColorChange , label  }) {
+    const [anchorEl, setAnchorEl] = _react.default.useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openColorPicker = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const closeColorPicker = ()=>{
+        setAnchorEl(null);
+    };
+    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(ColorIconButton, {
+                size: "small",
+                "aria-label": `change threshold ${label} color`,
+                isSelected: isOpen,
+                iconColor: color,
+                onClick: openColorPicker,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_circle.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+                "data-testid": "threshold color picker",
+                open: isOpen,
+                anchorEl: anchorEl,
+                onClose: closeColorPicker,
+                PaperProps: {
+                    sx: {
+                        padding: (theme)=>theme.spacing(2)
+                    }
+                },
+                anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+                    color: color,
+                    onChange: onColorChange,
+                    palette: [
+                        defaultColor,
+                        ...palette
+                    ]
+                })
+            })
+        ]
+    });
+}
+const ColorIconButton = (0, _material.styled)(_material.IconButton, {
+    shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
+})(({ iconColor , isSelected  })=>({
+        backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
+        color: iconColor
+    }));

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -0,0 +1,72 @@
+// 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, "ThresholdInput", {
+    enumerable: true,
+    get: ()=>ThresholdInput
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
+const _thresholdColorPicker = require("./ThresholdColorPicker");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ThresholdInput({ inputRef , label , color , value , onChange , onColorChange , onBlur , onDelete  }) {
+    const [key, setKey] = (0, _react.useState)(0); // use key to cause input to lose focus when pressing enter
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        flex: 1,
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_thresholdColorPicker.ThresholdColorPicker, {
+                label: label,
+                color: color,
+                onColorChange: onColorChange
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                htmlFor: label,
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                id: label,
+                inputRef: inputRef,
+                type: "number",
+                value: value === 0 ? undefined : value,
+                placeholder: "0",
+                onChange: onChange,
+                onBlur: onBlur,
+                onKeyDown: (e)=>{
+                    if (e.key === 'Enter') {
+                        onBlur();
+                        setKey(key + 1);
+                    }
+                }
+            }, key),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": `delete threshold ${label}`,
+                size: "small",
+                onClick: onDelete,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
+            })
+        ]
+    });
+}