@perses-dev/components 0.55.0-beta.0 → 0.55.0-beta.10

package/dist/cjs/Table/model/table-model.js

@@ -1,138 +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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get DEFAULT_COLUMN_HEIGHT () {
-        return DEFAULT_COLUMN_HEIGHT;
-    },
-    get DEFAULT_COLUMN_MAX_WIDTH () {
-        return DEFAULT_COLUMN_MAX_WIDTH;
-    },
-    get DEFAULT_COLUMN_MIN_WIDTH () {
-        return DEFAULT_COLUMN_MIN_WIDTH;
-    },
-    get DEFAULT_COLUMN_WIDTH () {
-        return DEFAULT_COLUMN_WIDTH;
-    },
-    get getTableCellLayout () {
-        return getTableCellLayout;
-    },
-    get persesColumnsToTanstackColumns () {
-        return persesColumnsToTanstackColumns;
-    }
-});
-const DEFAULT_COLUMN_WIDTH = 150;
-const DEFAULT_COLUMN_MIN_WIDTH = 60;
-const DEFAULT_COLUMN_MAX_WIDTH = 1000;
-const DEFAULT_COLUMN_HEIGHT = 40;
-function calculateTableCellHeight(lineHeight, paddingY) {
-    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
-    // heights based on customization of cell contents.
-    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;
-    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
-    return lineHeightNum + verticalPaddingNum * 2;
-}
-function getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight } = {}) {
-    // Density Standard
-    let paddingY = theme.spacing(1);
-    let basePaddingX = theme.spacing(1.25);
-    let edgePaddingX = theme.spacing(2);
-    let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-    let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-    let lineHeight = theme.typography.body1.lineHeight;
-    let fontSize = theme.typography.body1.fontSize;
-    if (density === 'compact') {
-        paddingY = theme.spacing(0.5);
-        basePaddingX = theme.spacing(0.5);
-        edgePaddingX = theme.spacing(1);
-        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        lineHeight = theme.typography.body2.lineHeight;
-        fontSize = theme.typography.body2.fontSize;
-    }
-    if (density === 'comfortable') {
-        paddingY = theme.spacing(2);
-        basePaddingX = theme.spacing(1.5);
-        edgePaddingX = theme.spacing(2);
-        paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;
-        paddingRight = isLastColumn ? edgePaddingX : basePaddingX;
-        lineHeight = theme.typography.body1.lineHeight;
-        fontSize = theme.typography.body1.fontSize;
-    }
-    const height = isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto' ? calculateTableCellHeight(lineHeight, paddingY) : defaultColumnHeight;
-    return {
-        padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,
-        height: height,
-        fontSize: fontSize,
-        lineHeight: lineHeight
-    };
-}
-function persesColumnsToTanstackColumns(columns, defaultColumnConfig) {
-    return columns.map(({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps })=>{
-        const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;
-        const sizeProps = width === 'auto' || width === undefined ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth) : getUserProvidedSizeProps(isResizingEnabled, width, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth);
-        return {
-            ...otherProps,
-            ...sizeProps,
-            // Default sorting to false, so it is very explicitly set per column.
-            enableSorting: !!enableSorting,
-            enableResizing: isResizingEnabled,
-            // Open-ended store for extra metadata in TanStack Table, so you can bake
-            // in your own features.
-            meta: {
-                align,
-                headerDescription,
-                cellDescription,
-                dataLink
-            }
-        };
-    });
-}
-function getUserProvidedSizeProps(isResizingEnabled, width, minWidth, maxWidth) {
-    // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.
-    return isResizingEnabled ? {
-        size: width,
-        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
-        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
-    } : {
-        size: width
-    };
-}
-function getDefaultSizeProps(isResizingEnabled, minWidth, maxWidth) {
-    return isResizingEnabled ? {
-        // When resizing is enabled, we need to set a default size for the column
-        // so that relative value can be calculated when resizing and column is visible.
-        size: DEFAULT_COLUMN_WIDTH,
-        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,
-        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH
-    } : // the space in a table. We translate our custom "auto" setting to 0 size
-    // for these columns, so it is easy to fall back to auto when rendering.
-    // Taking from a recommendation in this github discussion:
-    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
-    {
-        // All zero values are used as shorthand for "auto" when rendering
-        // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
-        size: 0,
-        minSize: 0,
-        maxSize: 0
-    };
-}

package/dist/cjs/ThresholdsEditor/ThresholdInput.js

@@ -1,80 +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, "ThresholdInput", {
-    enumerable: true,
-    get: function() {
-        return ThresholdInput;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _DeleteOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DeleteOutline"));
-const _OptionsColorPicker = require("../ColorPicker/OptionsColorPicker");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function ThresholdInput({ inputRef, label, color, value, mode, 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)(_OptionsColorPicker.OptionsColorPicker, {
-                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 ? '' : value,
-                placeholder: "0",
-                onChange: onChange,
-                onBlur: onBlur,
-                onKeyDown: (e)=>{
-                    if (e.key === 'Enter') {
-                        onBlur();
-                        setKey(key + 1);
-                    }
-                },
-                InputProps: {
-                    endAdornment: mode === 'percent' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        paddingX: 1,
-                        children: "%"
-                    }) : undefined
-                }
-            }, key),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": `delete threshold ${label}`,
-                size: "small",
-                onClick: onDelete,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteOutline.default, {})
-            })
-        ]
-    });
-}

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;
-}