@perses-dev/components 0.55.0-beta.3 → 0.55.0-beta.7

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -1,113 +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, "TimeChartTooltip", {
-    enumerable: true,
-    get: function() {
-        return TimeChartTooltip;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
-const _nearbyseries = require("./nearby-series");
-const _tooltipmodel = require("./tooltip-model");
-const _TooltipContent = require("./TooltipContent");
-const _TooltipHeader = require("./TooltipHeader");
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
-    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
-    const transform = (0, _react.useRef)();
-    const tooltipElementRef = (0, _react.useRef)(null);
-    const mousePos = (0, _tooltipmodel.useMousePosition)();
-    const { height, width, ref: tooltipRef } = (0, _useresizeobserver.default)();
-    const isTooltipPinned = pinnedPos !== null && enablePinning;
-    // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.
-    const setTooltipRef = (0, _react.useCallback)((node)=>{
-        tooltipElementRef.current = node;
-        tooltipRef(node);
-    }, [
-        tooltipRef
-    ]);
-    const containerElement = containerId ? document.querySelector(containerId) : undefined;
-    // Synchronously reposition after every render to prevent one-frame viewport overflow.
-    (0, _react.useLayoutEffect)(()=>{
-        if (mousePos === null) return;
-        const node = tooltipElementRef.current;
-        if (!node) return;
-        const rect = node.getBoundingClientRect();
-        if (rect.height === 0 || rect.width === 0) return;
-        const nextTransform = (0, _utils.assembleTransform)(mousePos, pinnedPos, rect.height, rect.width, containerElement);
-        if (nextTransform && nextTransform !== transform.current) {
-            transform.current = nextTransform;
-            node.style.transform = nextTransform;
-        }
-    });
-    if (mousePos === null || mousePos.target === null || data === null) return null;
-    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
-    const chart = chartRef.current;
-    // Cap height to container so the tooltip is not cut off.
-    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
-    transform.current = (0, _utils.assembleTransform)(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
-    const nearbySeries = (0, _nearbyseries.getNearbySeriesData)({
-        mousePos,
-        data,
-        seriesMapping,
-        pinnedPos,
-        chart,
-        format,
-        seriesFormatMap,
-        showAllSeries
-    });
-    if (nearbySeries.length === 0) {
-        return null;
-    }
-    const totalSeries = data.length;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Portal, {
-        container: containerElement,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-            ref: setTooltipRef,
-            sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos, maxHeight),
-            style: {
-                transform: transform.current
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TooltipHeader.TooltipHeader, {
-                        nearbySeries: nearbySeries,
-                        totalSeries: totalSeries,
-                        enablePinning: enablePinning,
-                        isTooltipPinned: isTooltipPinned,
-                        showAllSeries: showAllSeries,
-                        onShowAllClick: (checked)=>setShowAllSeries(checked),
-                        onUnpinClick: onUnpinClick
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_TooltipContent.TooltipContent, {
-                        series: nearbySeries,
-                        wrapLabels: wrapLabels
-                    })
-                ]
-            })
-        })
-    });
-});

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -1,58 +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, "TooltipContent", {
-    enumerable: true,
-    get: function() {
-        return TooltipContent;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _SeriesInfo = require("./SeriesInfo");
-function TooltipContent(props) {
-    const { series, wrapLabels } = props;
-    const sortedFocusedSeries = (0, _react.useMemo)(()=>{
-        if (series === null) return null;
-        return series.sort((a, b)=>a.y > b.y ? -1 : 1);
-    }, [
-        series
-    ]);
-    if (series === null || sortedFocusedSeries === null) {
-        return null;
-    }
-    // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: (theme)=>({
-                display: 'table',
-                padding: theme.spacing(0.5, 2)
-            }),
-        children: sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor })=>{
-            if (datumIdx === null || seriesIdx === null) return null;
-            const key = seriesIdx.toString() + datumIdx.toString();
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesInfo.SeriesInfo, {
-                seriesName: seriesName,
-                y: y,
-                formattedY: formattedY,
-                markerColor: markerColor,
-                totalSeries: sortedFocusedSeries.length,
-                wrapLabels: wrapLabels,
-                emphasizeText: isClosestToCursor
-            }, key);
-        })
-    });
-}

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -1,168 +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, "TooltipHeader", {
-    enumerable: true,
-    get: function() {
-        return TooltipHeader;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _Pin = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pin"));
-const _PinOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PinOutline"));
-const _react = require("react");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
-const _tooltipmodel = require("./tooltip-model");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
-    const { formatWithUserTimeZone } = (0, _TimeZoneProvider.useTimeZone)();
-    const seriesTimeMs = nearbySeries[0]?.date ?? null;
-    if (seriesTimeMs === null) {
-        return null;
-    }
-    const formatTimeSeriesHeader = (timeMs)=>{
-        const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                        children: formattedTime
-                    })
-                })
-            ]
-        });
-    };
-    // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = enablePinning && totalSeries > 5;
-    const pinTooltipHelpText = isTooltipPinned ? _tooltipmodel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipmodel.PIN_TOOLTIP_HELP_TEXT;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: (theme)=>({
-                width: '100%',
-                maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-                padding: theme.spacing(1.5, 2, 0.5, 2),
-                backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
-                position: 'sticky',
-                top: 0,
-                left: 0
-            }),
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    width: '100%',
-                    display: 'flex',
-                    justifyContent: 'start',
-                    alignItems: 'center',
-                    paddingBottom: 0.5
-                },
-                children: [
-                    formatTimeSeriesHeader(seriesTimeMs),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: [
-                            showAllSeriesToggle && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                gap: 0.5,
-                                alignItems: "center",
-                                sx: {
-                                    textAlign: 'right'
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                        sx: {
-                                            fontSize: 11
-                                        },
-                                        children: "Show All"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                        checked: showAllSeries,
-                                        size: "small",
-                                        onChange: (_, checked)=>{
-                                            if (onShowAllClick !== undefined) {
-                                                return onShowAllClick(checked);
-                                            }
-                                        },
-                                        sx: (theme)=>({
-                                                '& .MuiSwitch-switchBase': {
-                                                    color: theme.palette.common.white
-                                                },
-                                                '& .MuiSwitch-track': {
-                                                    backgroundColor: theme.palette.common.white
-                                                }
-                                            })
-                                    })
-                                ]
-                            }),
-                            enablePinning && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                alignItems: "center",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                        sx: {
-                                            marginRight: 0.5,
-                                            fontSize: 11,
-                                            verticalAlign: 'middle'
-                                        },
-                                        children: pinTooltipHelpText
-                                    }),
-                                    isTooltipPinned ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pin.default, {
-                                        onClick: ()=>{
-                                            if (onUnpinClick !== undefined) {
-                                                onUnpinClick();
-                                            }
-                                        },
-                                        sx: {
-                                            fontSize: 16,
-                                            cursor: 'pointer'
-                                        }
-                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_PinOutline.default, {
-                                        sx: {
-                                            fontSize: 16
-                                        }
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                sx: (theme)=>({
-                        width: '100%',
-                        borderColor: theme.palette.grey['500']
-                    })
-            })
-        ]
-    });
-});

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -1,39 +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("./SeriesInfo"), exports);
-_export_star(require("./SeriesLabelsStack"), exports);
-_export_star(require("./SeriesMarker"), exports);
-_export_star(require("./TimeChartTooltip"), exports);
-_export_star(require("./TooltipContent"), exports);
-_export_star(require("./TooltipHeader"), exports);
-_export_star(require("./nearby-series"), exports);
-_export_star(require("./tooltip-model"), exports);
-_export_star(require("./types"), exports);
-_export_star(require("./utils"), 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;
-}