@perses-dev/components 0.29.1 → 0.31.0

package/dist/cjs/LineChart/LineChart.js

@@ -26,7 +26,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
@@ -85,12 +84,12 @@ function _interopRequireWildcard(obj, nodeInterop) {
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
-    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const [isTooltipPinned, setIsTooltipPinned] = (0, _react.useState)(false);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
@@ -98,7 +97,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setPinTooltip(false);
+                        setIsTooltipPinned(false);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -122,13 +121,13 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     }, [
         data,
         onDataZoom,
-        setPinTooltip
+        setIsTooltipPinned
     ]);
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
     const handleOnDoubleClick = (e)=>{
-        setPinTooltip(false);
+        setIsTooltipPinned(false);
         // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
         if (onDoubleClick === undefined) {
             if (chartRef.current !== undefined) {
@@ -141,9 +140,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
-        // show symbols and axisPointer dashed line on hover
-        const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -161,13 +160,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: !isOptimizedMode,
+                show: true,
                 trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: isOptimizedMode ? 'none' : 'line',
-                    z: 0
-                }
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
             },
             toolbox: {
                 feature: {
@@ -192,17 +195,21 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         legend,
         noDataOption,
         timeZone,
-        __experimentalEChartsOptionsOverride
+        __experimentalEChartsOptionsOverride,
+        noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
-        onClick: ()=>{
-            setPinTooltip((current)=>!current);
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setIsTooltipPinned((current)=>!current);
+            }
         },
         onMouseDown: (e)=>{
-            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+            // Hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels.
             if (e.target instanceof HTMLCanvasElement) {
                 setShowTooltip(false);
             }
@@ -212,7 +219,6 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         },
         onMouseLeave: ()=>{
             setShowTooltip(false);
-            setPinTooltip(false);
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -226,10 +232,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                pinTooltip: pinTooltip,
-                unit: unit
+                isTooltipPinned: isTooltipPinned,
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setIsTooltipPinned(false);
+                }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,

package/dist/cjs/StatChart/StatChart.js

@@ -117,11 +117,15 @@ function StatChart(props) {
                 sx: (theme)=>({
                         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
+                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 renderer: "svg"

package/dist/cjs/Table/InnerTable.js

@@ -0,0 +1,44 @@
+// 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, "InnerTable", {
+    enumerable: true,
+    get: ()=>InnerTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
+        // This value is needed to have a consistent table layout when scrolling.
+        tableLayout: 'fixed',
+        borderCollapse: 'separate',
+        backgroundColor: theme.palette.background.paper
+    }));
+const TABLE_DENSITY_CONFIG = {
+    compact: 'small',
+    standard: 'medium'
+};
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , width , ...otherProps }, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTable, {
+        ...otherProps,
+        tabIndex: -1,
+        size: TABLE_DENSITY_CONFIG[density],
+        ref: ref,
+        sx: {
+            width: width
+        }
+    });
+});

package/dist/cjs/Table/Table.js

@@ -0,0 +1,102 @@
+// 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, "Table", {
+    enumerable: true,
+    get: ()=>Table
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactTable = require("@tanstack/react-table");
+const _material = require("@mui/material");
+const _react = require("react");
+const _virtualizedTable = require("./VirtualizedTable");
+const _tableCheckbox = require("./TableCheckbox");
+const _tableModel = require("./model/table-model");
+const DEFAULT_GET_ROW_ID = (data, index)=>{
+    return `${index}`;
+};
+function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const handleRowSelectionChange = (rowSelectionUpdater)=>{
+        const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
+        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+    };
+    const checkboxColumn = (0, _react.useMemo)(()=>{
+        return {
+            id: 'checkboxRowSelect',
+            size: 32,
+            header: ({ table  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: table.getIsAllRowsSelected(),
+                    indeterminate: table.getIsSomeRowsSelected(),
+                    onChange: table.getToggleAllRowsSelectedHandler(),
+                    color: theme.palette.text.primary,
+                    density: density
+                });
+            },
+            cell: ({ row  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: row.getIsSelected(),
+                    indeterminate: row.getIsSomeSelected(),
+                    onChange: (e)=>{
+                        row.getToggleSelectedHandler()(e);
+                    },
+                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    density: density
+                });
+            }
+        };
+    }, [
+        density,
+        getCheckboxColor,
+        theme.palette.text.primary
+    ]);
+    const tableColumns = (0, _react.useMemo)(()=>{
+        const initTableColumns = (0, _tableModel.persesColumnsToTanstackColumns)(columns);
+        if (checkboxSelection) {
+            initTableColumns.unshift(checkboxColumn);
+        }
+        return initTableColumns;
+    }, [
+        checkboxColumn,
+        checkboxSelection,
+        columns
+    ]);
+    const table = (0, _reactTable.useReactTable)({
+        data,
+        columns: tableColumns,
+        getRowId,
+        getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+        enableRowSelection: !!checkboxSelection,
+        onRowSelectionChange: handleRowSelectionChange,
+        state: {
+            rowSelection
+        }
+    });
+    const handleRowClick = (0, _react.useCallback)((rowId)=>{
+        table.getRow(rowId).toggleSelected();
+    }, [
+        table
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_virtualizedTable.VirtualizedTable, {
+        ...otherProps,
+        density: density,
+        onRowClick: handleRowClick,
+        rows: table.getRowModel().rows,
+        columns: table.getAllFlatColumns(),
+        headers: table.getHeaderGroups()
+    });
+}

package/dist/cjs/Table/TableBody.js

@@ -0,0 +1,29 @@
+// 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, "TableBody", {
+    enumerable: true,
+    get: ()=>TableBody
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableBody = /*#__PURE__*/ (0, _react.forwardRef)(function TableBody(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/TableCell.js

@@ -0,0 +1,97 @@
+// 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, "TableCell", {
+    enumerable: true,
+    get: ()=>TableCell
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _tableModel = require("./model/table-model");
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+        padding: 0,
+        backgroundColor: 'inherit',
+        '&.MuiTableCell-head': {
+            // Important to avoid scrolling behind the header showing through.
+            backgroundColor: theme.palette.background.paper
+        },
+        '&:focus-visible': {
+            outline: `solid 1px ${theme.palette.primary.main}`,
+            // Move inward a little to avoid getting cut off when focusing on items
+            // at the edge of the table.
+            outlineOffset: '-1px',
+            borderRadius: 0
+        }
+    }));
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const elRef = (0, _react.useRef)();
+    const isHeader = variant === 'head';
+    (0, _react.useEffect)(()=>{
+        if (focusState === 'trigger-focus' && elRef.current) {
+            elRef.current.focus();
+        }
+    }, [
+        focusState
+    ]);
+    const handleFocus = (e)=>{
+        var ref;
+        // From https://zellwk.com/blog/keyboard-focusable-elements/
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        if (nestedFocusTarget) {
+            // If the cell has a focusable child, focus it instead. Mostly used for
+            // checkbox cells, but could have other uses.
+            nestedFocusTarget.focus();
+        }
+    };
+    const handleInteractionFocusTrigger = (e)=>{
+        // We use `onClick` and `onKeyUp` events instead of `onFocus` because of
+        // some ordering issues with when the browser calls events and how this
+        // plays with the triggering of focus with keyboard interactions.
+        // These report that a focus event happened, so we can adjust the current
+        // tabindex and focuses to the right cell.
+        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTableCell, {
+        ...otherProps,
+        // Modify the tab index based on the currently focused cell. It's important
+        // to avoid having tabindex 0 on everything because it essentially traps
+        // a keyboard user in the table until they hit "tab" for every single
+        // cell.
+        tabIndex: focusState !== 'none' ? 0 : -1,
+        onFocus: handleFocus,
+        onClick: handleInteractionFocusTrigger,
+        onKeyUp: handleInteractionFocusTrigger,
+        sx: {
+            width: width,
+            borderBottom: isHeader ? (theme)=>`solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`
+        },
+        ref: elRef,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+                ...(0, _tableModel.getTableCellLayout)(theme, density),
+                position: 'relative',
+                // Text truncation. Currently enforced on all cells. We may control
+                // this with a prop on column config in the future.
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: children
+        })
+    });
+}

package/dist/cjs/Table/TableCheckbox.js

@@ -0,0 +1,55 @@
+// 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, "TableCheckbox", {
+    enumerable: true,
+    get: ()=>TableCheckbox
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TableCheckbox({ color , density , ...otherProps }) {
+    const isCompact = density === 'compact';
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+        size: isCompact ? 'small' : 'medium',
+        ...otherProps,
+        // Disable ripple and set background color below because of some issues
+        // with re-rendering with the keyboard interactions that causes the ripple
+        // animation to stutter.
+        focusRipple: false,
+        // Tab index is handled by the overall keyboard interactions for the table
+        // to avoid trapping a keyboard user in a table by requiring them to tab
+        // through every single checkbox.
+        tabIndex: -1,
+        sx: {
+            color: color,
+            padding: (theme)=>theme.spacing(isCompact ? 0.25 : 0.5),
+            // Centering.
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            '&.Mui-checked': {
+                color: color
+            },
+            '&.Mui-focusVisible': {
+                background: color ? (0, _material.alpha)(color, 0.5) : undefined
+            },
+            '& .MuiSvgIcon-root': {
+                fontSize: isCompact ? 14 : 16
+            }
+        }
+    });
+}

package/dist/cjs/Table/TableHead.js

@@ -0,0 +1,29 @@
+// 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, "TableHead", {
+    enumerable: true,
+    get: ()=>TableHead
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableHead = /*#__PURE__*/ (0, _react.forwardRef)(function TableHead(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/TableRow.js

@@ -0,0 +1,35 @@
+// 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, "TableRow", {
+    enumerable: true,
+    get: ()=>TableRow
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableRow = /*#__PURE__*/ (0, _react.forwardRef)(function TableRow(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableRow, {
+        ...props,
+        ref: ref,
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.paper,
+            '&:hover': {
+                backgroundColor: (theme)=>theme.palette.primary.light
+            }
+        }
+    });
+});