@perses-dev/components 0.23.1 → 0.24.0

package/dist/cjs/ColorPicker/ColorPicker.js

@@ -0,0 +1,128 @@
+// 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, "ColorPicker", {
+    enumerable: true,
+    get: ()=>ColorPicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactColorful = require("react-colorful");
+const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
+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;
+}
+const ColorPicker = ({ color , onChange , palette  })=>{
+    // value is the visible value for the controlled text input
+    const [value, setValue] = (0, _react.useState)(color);
+    const handleColorChange = (color)=>{
+        setValue(color);
+        onChange && onChange(color);
+    };
+    // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved
+    const handleInputChange = (e)=>{
+        const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);
+        setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format
+        // only set color if input value is a valid hex color
+        if (isValidHex(e.target.value)) {
+            onChange && onChange(e.target.value);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactColorful.HexColorPicker, {
+                color: color,
+                onChange: handleColorChange
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                direction: "row",
+                flexWrap: "wrap",
+                justifyContent: "space-evenly",
+                width: '200px',
+                children: palette && palette.map((color, i)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                        size: "small",
+                        "aria-label": `change color to ${color}`,
+                        sx: {
+                            color
+                        },
+                        onClick: ()=>handleColorChange(color),
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_circle.default, {})
+                    }, i))
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                inputProps: {
+                    'aria-label': 'enter hex color'
+                },
+                fullWidth: true,
+                value: value,
+                onChange: handleInputChange
+            })
+        ]
+    });
+};
+const isValidHex = (value, alpha)=>{
+    const matcher = /^#?([0-9A-F]{3,8})$/i;
+    const match = matcher.exec(value);
+    const length = match && match[1] ? match[1].length : 0;
+    return length === 3 || // '#rgb' format
+    length === 6 || // '#rrggbb' format
+    !!alpha && length === 4 || // '#rgba' format
+    !!alpha && length === 8 // '#rrggbbaa' format
+    ;
+};

package/dist/cjs/{model/legend.test.js → ColorPicker/index.js}

@@ -14,16 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _legend = require("./legend");
-describe('validateLegendSpec', ()=>{
-    it('should check if a legend spec is valid', ()=>{
-        const invalidLegend = {
-            position: 'bottom'
-        };
-        expect((0, _legend.validateLegendSpec)(invalidLegend)).toEqual(false);
-        expect((0, _legend.validateLegendSpec)({
-            position: 'Bottom'
-        })).toEqual(true);
-        expect((0, _legend.validateLegendSpec)(undefined)).toEqual(true);
+_exportStar(require("./ColorPicker"), exports);
+function _exportStar(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/Legend/Legend.js

@@ -39,19 +39,16 @@ function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
             width: width,
             height: height,
             position: 'absolute',
             bottom: 0
         },
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-                items: data,
-                height: height
-            }),
-            ";"
-        ]
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+            items: data,
+            height: height
+        })
     });
 }

package/dist/cjs/LineChart/LineChart.js

@@ -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");
@@ -31,6 +31,45 @@ const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 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,

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -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/OptionsEditorGroup.js

@@ -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/StatChart/StatChart.js

@@ -19,7 +19,7 @@ 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 _lodashEs = require("lodash-es");
 const _core = require("echarts/core");
@@ -29,47 +29,7 @@ const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _units = require("../model/units");
 const _echart = require("../EChart");
-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,

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, {})
+            })
+        ]
+    });
+}