@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.6

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -1,282 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ThresholdsEditor", {
-    enumerable: true,
-    get: function() {
-        return ThresholdsEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _immer = require("immer");
-const _material = require("@mui/material");
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
-const _system = require("@mui/system");
-const _ChartsProvider = require("../context/ChartsProvider");
-const _OptionsEditorLayout = require("../OptionsEditorLayout");
-const _InfoTooltip = require("../InfoTooltip");
-const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
-const _ThresholdInput = require("./ThresholdInput");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const DEFAULT_STEP = 10;
-function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    const { thresholds: { defaultColor, palette } } = chartsTheme;
-    const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
-    const steps = thresholds?.steps;
-    // every time a new threshold is added, we want to focus the recently added input
-    const recentlyAddedInputRef = (0, _react.useRef)(null);
-    const focusRef = (0, _react.useRef)(false);
-    (0, _react.useEffect)(()=>{
-        if (!recentlyAddedInputRef.current || !focusRef.current) return;
-        recentlyAddedInputRef.current?.focus();
-        focusRef.current = false;
-    }, [
-        steps?.length
-    ]);
-    const handleThresholdValueChange = (e, i)=>{
-        if (thresholds !== undefined) {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                const step = draft.steps?.[i];
-                if (step) {
-                    step.value = Number(e.target.value);
-                }
-            }));
-        }
-    };
-    const handleThresholdColorChange = (color, i)=>{
-        if (thresholds !== undefined) {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                if (draft.steps !== undefined) {
-                    const step = draft.steps[i];
-                    if (step) {
-                        step.color = color;
-                    }
-                }
-            }));
-        }
-    };
-    const handleDefaultColorChange = (color)=>{
-        if (thresholds !== undefined) {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                draft.defaultColor = color;
-            }));
-        } else {
-            onChange({
-                defaultColor: color
-            });
-        }
-    };
-    // sort thresholds in ascending order every time an input blurs
-    const handleThresholdBlur = ()=>{
-        if (steps !== undefined) {
-            const sortedSteps = [
-                ...steps
-            ];
-            sortedSteps.sort((a, b)=>a.value - b.value);
-            if (thresholds !== undefined) {
-                onChange((0, _immer.produce)(thresholds, (draft)=>{
-                    draft.steps = sortedSteps;
-                }));
-            }
-        }
-    };
-    const deleteThreshold = (i)=>{
-        if (thresholds !== undefined) {
-            const updatedThresholds = (0, _immer.produce)(thresholds, (draft)=>{
-                if (draft.steps) {
-                    draft.steps.splice(i, 1);
-                }
-            });
-            onChange(updatedThresholds);
-        }
-    };
-    const addThresholdInput = ()=>{
-        focusRef.current = true;
-        if (thresholds === undefined) {
-            onChange({
-                steps: [
-                    {
-                        value: DEFAULT_STEP
-                    }
-                ]
-            });
-        } else if (thresholds && thresholds.steps === undefined) {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                draft.steps = [
-                    {
-                        value: DEFAULT_STEP
-                    }
-                ];
-            }));
-        } else {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                const steps = draft.steps;
-                if (steps?.length) {
-                    const lastStep = steps[steps.length - 1];
-                    const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color
-                    steps.push({
-                        color,
-                        value: (lastStep?.value ?? 0) + DEFAULT_STEP
-                    }); // set new threshold value to last step value + 10
-                } else if (steps) {
-                    steps.push({
-                        value: DEFAULT_STEP
-                    });
-                }
-            }));
-        }
-    };
-    const handleModeChange = (event, value)=>{
-        const mode = value === 'percent' ? 'percent' : undefined;
-        if (thresholds !== undefined) {
-            onChange((0, _immer.produce)(thresholds, (draft)=>{
-                draft.mode = mode;
-            }));
-        } else {
-            onChange({
-                mode
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_OptionsEditorLayout.OptionsEditorGroup, {
-        title: "Thresholds",
-        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
-            description: "Add threshold",
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                size: "small",
-                "aria-label": "add threshold",
-                onClick: addThresholdInput,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-            })
-        }),
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
-                label: "Mode",
-                description: "Percentage means thresholds relative to min & max",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
-                    exclusive: true,
-                    disabled: disablePercentMode,
-                    value: thresholds?.mode ?? 'absolute',
-                    onChange: handleModeChange,
-                    sx: {
-                        height: '36px',
-                        marginLeft: 'auto'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                            "aria-label": "absolute",
-                            value: "absolute",
-                            sx: {
-                                fontWeight: 500
-                            },
-                            children: "Absolute"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
-                            "aria-label": "percent",
-                            value: "percent",
-                            sx: {
-                                fontWeight: 500
-                            },
-                            children: "Percent"
-                        })
-                    ]
-                })
-            }),
-            steps && steps.map((step, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_ThresholdInput.ThresholdInput, {
-                    inputRef: i === steps.length - 1 ? recentlyAddedInputRef : undefined,
-                    label: `T${i + 1}`,
-                    color: step.color ?? palette[i] ?? defaultThresholdColor,
-                    value: step.value,
-                    mode: thresholds?.mode,
-                    onColorChange: (color)=>handleThresholdColorChange(color, i),
-                    onChange: (e)=>{
-                        handleThresholdValueChange(e, i);
-                    },
-                    onDelete: ()=>{
-                        deleteThreshold(i);
-                    },
-                    onBlur: handleThresholdBlur
-                }, i)).reverse(),
-            !hideDefault && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_system.Stack, {
-                flex: 1,
-                direction: "row",
-                alignItems: "center",
-                spacing: 1,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
-                        label: "default",
-                        color: defaultThresholdColor,
-                        onColorChange: handleDefaultColorChange
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        children: "Default"
-                    })
-                ]
-            })
-        ]
-    });
-}
-// https://www.paulirish.com/2009/random-hex-color-code-snippets/
-const getRandomColor = ()=>{
-    return '#' + Math.floor(Math.random() * 16777216).toString(16).padStart(6, '0');
-};

package/dist/cjs/ThresholdsEditor/index.js

@@ -1,30 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-_export_star(require("./ThresholdsEditor"), 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/TimeRangeSelector/DateTimeRangePicker.js

@@ -1,204 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "DateTimeRangePicker", {
-    enumerable: true,
-    get: function() {
-        return DateTimeRangePicker;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _xdatepickers = require("@mui/x-date-pickers");
-const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
-const _tz = require("@date-fns/tz");
-const _ErrorBoundary = require("../ErrorBoundary");
-const _ErrorAlert = require("../ErrorAlert");
-const _utils = require("./utils");
-const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
-    const stdTimeZone = [
-        'local',
-        'browser'
-    ].includes(timeZone.toLowerCase()) ? Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
-    const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
-    const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
-    const changeTimeRange = (newTime, segment)=>{
-        setTimeRange((prevTimeRange)=>{
-            return {
-                ...prevTimeRange,
-                [segment]: newTime
-            };
-        });
-    };
-    const onChangeStartTime = (newStartTime)=>{
-        changeTimeRange(newStartTime, 'start');
-    };
-    const onChangeEndTime = (newEndTime)=>{
-        changeTimeRange(newEndTime, 'end');
-    };
-    const updateDateRange = ()=>{
-        const newDates = {
-            start: timeRange.start,
-            end: timeRange.end
-        };
-        const isValidDateRange = (0, _utils.validateDateRange)(newDates.start, newDates.end);
-        if (isValidDateRange) {
-            return newDates;
-        }
-    };
-    const onApply = ()=>{
-        const newDates = updateDateRange();
-        if (newDates) {
-            onChange(newDates);
-        }
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.LocalizationProvider, {
-        dateAdapter: _AdapterDateFnsV3.AdapterDateFns,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            spacing: 2,
-            sx: (theme)=>({
-                    padding: theme.spacing(1, 0, 2)
-                }),
-            children: [
-                showStartCalendar && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                    sx: (theme)=>({
-                            // TODO: create separate reusable calendar component
-                            '.MuiPickersLayout-contentWrapper': {
-                                backgroundColor: theme.palette.background.default
-                            }
-                        }),
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                            variant: "h3",
-                            padding: 1,
-                            paddingLeft: 2,
-                            children: "Select Start Time"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
-                            timezone: stdTimeZone,
-                            displayStaticWrapperAs: "desktop",
-                            openTo: "day",
-                            disableHighlightToday: true,
-                            value: new _tz.TZDate(timeRange.start, stdTimeZone),
-                            onChange: (newValue)=>{
-                                if (newValue === null) return;
-                                onChangeStartTime(newValue);
-                            },
-                            onAccept: ()=>{
-                                setShowStartCalendar(false);
-                            }
-                        })
-                    ]
-                }),
-                !showStartCalendar && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                    sx: (theme)=>({
-                            '.MuiPickersLayout-contentWrapper': {
-                                backgroundColor: theme.palette.background.default
-                            }
-                        }),
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                            variant: "h3",
-                            padding: 1,
-                            paddingLeft: 2,
-                            children: "Select End Time"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
-                            timezone: stdTimeZone,
-                            displayStaticWrapperAs: "desktop",
-                            openTo: "day",
-                            disableHighlightToday: true,
-                            value: new _tz.TZDate(timeRange.end, stdTimeZone),
-                            minDateTime: new _tz.TZDate(timeRange.start, stdTimeZone),
-                            onChange: (newValue)=>{
-                                if (newValue === null) return;
-                                onChangeEndTime(newValue);
-                            },
-                            onAccept: (newValue)=>{
-                                if (newValue === null) return;
-                                setShowStartCalendar(true);
-                                onChangeEndTime(newValue);
-                            }
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                    direction: "row",
-                    alignItems: "center",
-                    gap: 1,
-                    pl: 1,
-                    pr: 1,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
-                            FallbackComponent: _ErrorAlert.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
-                                "data-testid": "start_time_input",
-                                timezone: stdTimeZone,
-                                label: "Start Time",
-                                value: new _tz.TZDate(timeRange.start, stdTimeZone),
-                                onChange: (event)=>{
-                                    if (event) {
-                                        onChangeStartTime(event);
-                                    }
-                                },
-                                onBlur: ()=>updateDateRange(),
-                                format: _utils.DATE_TIME_FORMAT
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
-                            FallbackComponent: _ErrorAlert.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
-                                "data-testid": "end_time_input",
-                                timezone: stdTimeZone,
-                                label: "End Time",
-                                value: new _tz.TZDate(timeRange.end, stdTimeZone),
-                                onChange: (event)=>{
-                                    if (event) {
-                                        onChangeEndTime(event);
-                                    }
-                                },
-                                onBlur: ()=>updateDateRange(),
-                                format: _utils.DATE_TIME_FORMAT
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                    direction: "row",
-                    sx: {
-                        padding: (theme)=>theme.spacing(0, 1)
-                    },
-                    gap: 1,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                            variant: "contained",
-                            onClick: ()=>onApply(),
-                            fullWidth: true,
-                            children: "Apply"
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                            variant: "outlined",
-                            onClick: ()=>onCancel(),
-                            fullWidth: true,
-                            children: "Cancel"
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-};