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

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -1,199 +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 assembleTransform () {
-        return assembleTransform;
-    },
-    get calculateBarBandwidth () {
-        return calculateBarBandwidth;
-    },
-    get calculateBarSegmentBounds () {
-        return calculateBarSegmentBounds;
-    },
-    get calculateBarYBounds () {
-        return calculateBarYBounds;
-    },
-    get calculateVisualYForSeries () {
-        return calculateVisualYForSeries;
-    },
-    get getPixelXFromGrid () {
-        return getPixelXFromGrid;
-    },
-    get getTooltipStyles () {
-        return getTooltipStyles;
-    }
-});
-const _tooltipmodel = require("./tooltip-model");
-function assembleTransform(mousePos, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
-    if (mousePos === null) {
-        return undefined;
-    }
-    const cursorPaddingX = 32;
-    const cursorPaddingY = 16;
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-    }
-    if (mousePos.plotCanvas.x === undefined) return undefined;
-    // Fall back to max size before the resize observer reports a real measurement.
-    const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT;
-    const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : _tooltipmodel.TOOLTIP_MAX_WIDTH;
-    let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor
-    let y = mousePos.page.y + cursorPaddingY;
-    // If containerElement is defined, adjust coordinates relative to the container
-    if (containerElement) {
-        const containerRect = containerElement.getBoundingClientRect();
-        x = x - containerRect.left + containerElement.scrollLeft;
-        y = y - containerRect.top + containerElement.scrollTop;
-        // Ensure tooltip does not go out of the container's bottom
-        const containerBottom = containerRect.top + containerElement.scrollHeight;
-        if (y + effectiveHeight > containerBottom) {
-            y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
-        }
-    } else {
-        // Ensure tooltip does not go out of the screen on the bottom
-        if (y + effectiveHeight > window.innerHeight + window.scrollY) {
-            y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, _tooltipmodel.TOOLTIP_PADDING / 2);
-        }
-    }
-    // Ensure tooltip does not go out of the screen on the right
-    if (x + effectiveWidth > window.innerWidth) {
-        x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor
-    }
-    // Ensure tooltip does not go out of the screen on the left
-    if (x < cursorPaddingX) {
-        x = cursorPaddingX;
-    }
-    // Ensure tooltip does not go out of the screen on the top
-    if (y < _tooltipmodel.TOOLTIP_PADDING / 2) {
-        y = _tooltipmodel.TOOLTIP_PADDING / 2;
-    }
-    return `translate3d(${x}px, ${y}px, 0)`;
-}
-function getTooltipStyles(theme, pinnedPos, maxHeight) {
-    const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipmodel.TOOLTIP_PADDING : undefined;
-    return {
-        minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
-        maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-        maxHeight: adjustedMaxHeight ?? _tooltipmodel.TOOLTIP_MAX_HEIGHT,
-        padding: 0,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
-        borderRadius: '6px',
-        color: '#fff',
-        fontSize: '11px',
-        visibility: 'visible',
-        opacity: 1,
-        // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.
-        transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',
-        // Pinned tooltip should not float above the drawer/sticky header.
-        zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
-        overflow: 'hidden',
-        '&:hover': {
-            overflowY: 'auto'
-        }
-    };
-}
-function getPixelXFromGrid(timestamp, chart) {
-    try {
-        const pixelCoords = chart.convertToPixel('grid', [
-            timestamp,
-            0
-        ]);
-        return pixelCoords?.[0] ?? null;
-    } catch  {
-        return null;
-    }
-}
-function calculateVisualYForSeries(seriesIdx, yValue, seriesMapping, stackTotals) {
-    const currentSeries = seriesMapping[seriesIdx];
-    if (!currentSeries) return yValue;
-    const stackId = currentSeries.stack;
-    if (!stackId) {
-        return yValue;
-    }
-    const stackIdStr = stackId.toString();
-    const currentTotal = stackTotals.get(stackIdStr) ?? 0;
-    const newTotal = currentTotal + yValue;
-    stackTotals.set(stackIdStr, newTotal);
-    return newTotal;
-}
-function calculateBarBandwidth(timestamp, sortedTimestamps, chart) {
-    const currentIdx = sortedTimestamps.indexOf(timestamp);
-    if (currentIdx === -1) {
-        return 20;
-    }
-    const prevTimestamp = currentIdx > 0 ? sortedTimestamps[currentIdx - 1] ?? null : null;
-    const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? sortedTimestamps[currentIdx + 1] ?? null : null;
-    const currentPixelX = getPixelXFromGrid(timestamp, chart);
-    if (currentPixelX === null) return 20;
-    let leftBound;
-    let rightBound;
-    if (prevTimestamp !== null && nextTimestamp !== null) {
-        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
-        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
-        leftBound = (currentPixelX + prevPixelX) / 2;
-        rightBound = (currentPixelX + nextPixelX) / 2;
-    } else if (prevTimestamp !== null) {
-        const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;
-        leftBound = (currentPixelX + prevPixelX) / 2;
-        rightBound = currentPixelX + (currentPixelX - leftBound);
-    } else if (nextTimestamp !== null) {
-        const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;
-        rightBound = (currentPixelX + nextPixelX) / 2;
-        leftBound = currentPixelX - (rightBound - currentPixelX);
-    } else {
-        return 20;
-    }
-    return Math.max(1, rightBound - leftBound);
-}
-function calculateBarSegmentBounds(barRelativeIdx, bandwidth, centerPixelX, barCount) {
-    const count = Math.max(1, barCount);
-    const segmentWidth = bandwidth / count;
-    const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;
-    return {
-        left: segmentLeft,
-        right: segmentLeft + segmentWidth
-    };
-}
-function calculateBarYBounds(visualYBottom, visualYTop, chart) {
-    try {
-        const bottomPixel = chart.convertToPixel('grid', [
-            0,
-            visualYBottom
-        ]);
-        const topPixel = chart.convertToPixel('grid', [
-            0,
-            visualYTop
-        ]);
-        if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;
-        // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.
-        return {
-            top: Math.min(topPixel[1], bottomPixel[1]),
-            bottom: Math.max(topPixel[1], bottomPixel[1])
-        };
-    } catch  {
-        return null;
-    }
-}

package/dist/cjs/TimeZoneSelector.js

@@ -1,63 +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, "TimeZoneSelector", {
-    enumerable: true,
-    get: function() {
-        return TimeZoneSelector;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-const _timeZoneOption = require("./model/timeZoneOption");
-function TimeZoneSelector({ value, onChange, timeZoneOptions, variant = 'standard', heightPx, ...selectProps }) {
-    const options = (0, _react.useMemo)(()=>timeZoneOptions ?? (0, _timeZoneOption.getTimeZoneOptions)(), [
-        timeZoneOptions
-    ]);
-    const height = heightPx ? typeof heightPx === 'number' ? `${heightPx}px` : heightPx : undefined;
-    const handleChange = (selectedValue)=>{
-        const selectedOption = options.find((opt)=>opt.value === selectedValue);
-        if (selectedOption && onChange) {
-            onChange(selectedOption);
-        }
-    };
-    const sxStyles = (0, _react.useMemo)(()=>({
-            minWidth: variant === 'compact' ? '80px' : '150px',
-            ...height && {
-                lineHeight: height,
-                paddingY: 0
-            },
-            ...selectProps.sx
-        }), [
-        variant,
-        height,
-        selectProps.sx
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-        ...selectProps,
-        value: value,
-        onChange: (event, _child)=>{
-            handleChange(event.target.value);
-        },
-        sx: sxStyles,
-        size: variant === 'compact' ? 'small' : 'medium',
-        children: options.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                value: option.value,
-                children: option.display
-            }, option.value))
-    });
-}

package/dist/cjs/ToolbarIconButton/ToolbarIconButton.js

@@ -1,40 +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, "ToolbarIconButton", {
-    enumerable: true,
-    get: function() {
-        return ToolbarIconButton;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
-function IconButton(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(StyledIconButton, {
-        ref: ref,
-        variant: "outlined",
-        color: "secondary",
-        ...props
-    });
-}
-const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme })=>({
-        // Using a button with some adjusted styles because it is easier to inherit
-        // styling and variants from themes than with an IconButton.
-        padding: theme.spacing(0.5),
-        minWidth: 'auto'
-    }));
-const ToolbarIconButton = /*#__PURE__*/ (0, _react.forwardRef)(IconButton);

package/dist/cjs/ToolbarIconButton/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("./ToolbarIconButton"), 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/TransformsEditor/TransformEditor.js

@@ -1,297 +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, "TransformEditor", {
-    enumerable: true,
-    get: function() {
-        return TransformEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _controls = require("../controls");
-function JoinByColumnValueTransformEditor({ value, onChange }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
-                freeSolo: true,
-                multiple: true,
-                id: "join-columns",
-                sx: {
-                    width: '100%'
-                },
-                options: [],
-                value: value.spec.columns ?? [],
-                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        variant: "outlined",
-                        label: "Columns",
-                        required: true
-                    }),
-                onChange: (_, columns)=>{
-                    onChange({
-                        ...value,
-                        spec: {
-                            ...value.spec,
-                            columns: columns
-                        }
-                    });
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                label: "Enabled",
-                labelPlacement: "start",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    value: !value.spec.disabled,
-                    checked: !value.spec.disabled,
-                    onChange: (e)=>onChange({
-                            ...value,
-                            spec: {
-                                ...value.spec,
-                                disabled: !e.target.checked
-                            }
-                        })
-                })
-            })
-        ]
-    });
-}
-function MergeColumnsTransformEditor({ value, onChange }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        gap: 1,
-        alignItems: "center",
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
-                freeSolo: true,
-                multiple: true,
-                id: "merge-columns-columns",
-                sx: {
-                    width: '100%'
-                },
-                options: [],
-                value: value.spec.columns ?? [],
-                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...params,
-                        variant: "outlined",
-                        label: "Columns",
-                        required: true
-                    }),
-                onChange: (_, columns)=>{
-                    onChange({
-                        ...value,
-                        spec: {
-                            ...value.spec,
-                            columns: columns
-                        }
-                    });
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
-                id: "merge-columns-name",
-                variant: "outlined",
-                label: "Output Name",
-                value: value.spec.name ?? '',
-                sx: {
-                    width: '100%'
-                },
-                onChange: (name)=>{
-                    onChange({
-                        ...value,
-                        spec: {
-                            ...value.spec,
-                            name: name
-                        }
-                    });
-                },
-                required: true
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                label: "Enabled",
-                labelPlacement: "start",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    value: !value.spec.disabled,
-                    checked: !value.spec.disabled,
-                    onChange: (e)=>onChange({
-                            ...value,
-                            spec: {
-                                ...value.spec,
-                                disabled: !e.target.checked
-                            }
-                        })
-                })
-            })
-        ]
-    });
-}
-function MergeIndexedColumnsTransformEditor({ value, onChange }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
-                id: "merge-indexed-columns",
-                variant: "outlined",
-                label: "Column",
-                placeholder: "Example: 'value' for merging 'value #1', 'value #2' and 'value #...'",
-                value: value.spec.column ?? '',
-                sx: {
-                    width: '100%'
-                },
-                onChange: (column)=>{
-                    onChange({
-                        ...value,
-                        spec: {
-                            ...value.spec,
-                            column: column
-                        }
-                    });
-                },
-                required: true
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                label: "Enabled",
-                labelPlacement: "start",
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                    value: !value.spec.disabled,
-                    checked: !value.spec.disabled,
-                    onChange: (e)=>onChange({
-                            ...value,
-                            spec: {
-                                ...value.spec,
-                                disabled: !e.target.checked
-                            }
-                        })
-                })
-            })
-        ]
-    });
-}
-function MergeSeriesTransformEditor({ value, onChange }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-        direction: "row",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-            label: "Enabled",
-            labelPlacement: "start",
-            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                value: !value.spec.disabled,
-                checked: !value.spec.disabled,
-                onChange: (e)=>onChange({
-                        ...value,
-                        spec: {
-                            ...value.spec,
-                            disabled: !e.target.checked
-                        }
-                    })
-            })
-        })
-    });
-}
-function TransformEditor({ value, onChange, ...props }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        gap: 2,
-        sx: {
-            width: '100%'
-        },
-        mt: 1,
-        ...props,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_controls.TextField, {
-                select: true,
-                label: "Kind",
-                value: value.kind,
-                onChange: (kind)=>onChange({
-                        ...value,
-                        kind: kind
-                    }),
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "JoinByColumnValue",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    children: "Join by column value"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "caption",
-                                    children: "Regroup rows with equal cell value in a column"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "MergeColumns",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    children: "Merge columns"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "caption",
-                                    children: "Multiple columns are merged to one column"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "MergeIndexedColumns",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    children: "Merge indexed columns"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "caption",
-                                    children: "Indexed columns are merged to one column"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        value: "MergeSeries",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    children: "Merge series"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "caption",
-                                    children: "Series will be merged by their labels"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            }),
-            value.kind === 'JoinByColumnValue' && /*#__PURE__*/ (0, _jsxruntime.jsx)(JoinByColumnValueTransformEditor, {
-                value: value,
-                onChange: onChange
-            }),
-            value.kind === 'MergeColumns' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeColumnsTransformEditor, {
-                value: value,
-                onChange: onChange
-            }),
-            value.kind === 'MergeIndexedColumns' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeIndexedColumnsTransformEditor, {
-                value: value,
-                onChange: onChange
-            }),
-            value.kind === 'MergeSeries' && /*#__PURE__*/ (0, _jsxruntime.jsx)(MergeSeriesTransformEditor, {
-                value: value,
-                onChange: onChange
-            })
-        ]
-    });
-}