@perses-dev/components 0.31.0 → 0.33.0

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -0,0 +1,100 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TABLE_LEGEND_SIZE: ()=>TABLE_LEGEND_SIZE,
+    getContentWithLegendLayout: ()=>getContentWithLegendLayout
+});
+const _table = require("../../Table");
+const _legend = require("../../model/legend");
+const TABLE_LEGEND_SIZE = {
+    // 5 rows plus header. Value to be multiplied by row height in pixels.
+    Bottom: 6,
+    // Pixel value
+    Right: 250
+};
+const PANEL_HEIGHT_LG_BREAKPOINT = 300;
+const LEGEND_HEIGHT_SM = 40;
+const LEGEND_HEIGHT_LG = 100;
+function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const hasLegend = !!legendOptions;
+    const noLegendLayout = {
+        legend: {
+            show: false,
+            width: 0,
+            height: 0
+        },
+        content: {
+            width,
+            height
+        },
+        margin: {
+            right: 0,
+            bottom: 0
+        }
+    };
+    if (!hasLegend) {
+        return noLegendLayout;
+    }
+    const { position  } = legendOptions;
+    const mode = (0, _legend.getLegendMode)(legendOptions.mode);
+    let legendWidth;
+    let legendHeight;
+    if (mode === 'List') {
+        // TODO: normalize list to share similar height options as the table
+        // when we add more size options.
+        legendWidth = position === 'Right' ? 200 : width;
+        // TODO: account for number of legend items returned when adjusting legend spacing
+        legendHeight = LEGEND_HEIGHT_SM;
+        if (position === 'Right') {
+            legendHeight = height;
+        } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {
+            legendHeight = LEGEND_HEIGHT_LG;
+        }
+    } else {
+        // Table mode
+        const tableLayout = (0, _table.getTableCellLayout)(theme, 'compact');
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
+        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+    }
+    const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
+    const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;
+    if (position === 'Right' && contentWidth < minChildrenWidth || position === 'Bottom' && contentHeight < minChildrenHeight) {
+        // Legend does not fit. Just show the content.
+        return noLegendLayout;
+    }
+    return {
+        legend: {
+            width: legendWidth,
+            height: legendHeight,
+            show: true
+        },
+        content: {
+            width: contentWidth,
+            height: contentHeight
+        },
+        margin: {
+            right: position === 'Right' ? spacing : 0,
+            bottom: position === 'Bottom' ? spacing : 0
+        }
+    };
+}

package/dist/cjs/EChart/EChart.js

@@ -142,11 +142,19 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     }, [
         onEvents
     ]);
+    // TODO: re-evaluate how this is triggered. It's technically working right
+    // now because the sx prop is an object that gets re-created, but that also
+    // means it runs unnecessarily some of the time and theoretically might
+    // not run in some other cases. Maybe it should use a resize observer?
     (0, _react.useEffect)(()=>{
+        // TODO: fix this debouncing. This likely isn't working as intended because
+        // the debounced function is re-created every time this useEffect is called.
         const updateSize = (0, _lodashEs.debounce)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
-        }, 200);
+        }, 200, {
+            leading: true
+        });
         updateSize();
     }, [
         sx

package/dist/cjs/Legend/Legend.js

@@ -21,8 +21,10 @@ Object.defineProperty(exports, "Legend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _immer = require("immer");
+const _model = require("../model");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
+const _tableLegend = require("./TableLegend");
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a
 // format (list) that allows for virtualization to minimize the performance impact.
@@ -62,12 +64,37 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         });
         onSelectedItemsChange(newSelected);
     };
+    const mode = (0, _model.getLegendMode)(options.mode);
+    // The bottom legend is displayed as a list when the number of items is too
+    // large and requires virtualization. Otherwise, it is rendered more compactly.
+    // We do not need this check for the right-side legend because it is always
+    // a virtualized list.
+    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
     const commonLegendProps = {
         height,
         items: data,
         selectedItems,
         onLegendItemClick
     };
+    let legendContent;
+    if (mode === 'Table') {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
+            ...commonLegendProps,
+            onSelectedItemsChange: onSelectedItemsChange,
+            width: width
+        });
+    } else if (options.position === 'Right' || needsVirtualization) {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+            ...commonLegendProps,
+            width: width,
+            onLegendItemClick: onLegendItemClick
+        });
+    } else {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+            ...commonLegendProps,
+            onLegendItemClick: onLegendItemClick
+        });
+    }
     if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
@@ -77,17 +104,10 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
                 top: 0,
                 right: 0
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-                ...commonLegendProps,
-                width: width
-            })
+            children: legendContent
         });
     }
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
-    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    // Position bottom
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
             width: width,
@@ -95,11 +115,6 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
             position: 'absolute',
             bottom: 0
         },
-        children: needsVirtualization ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-            ...commonLegendProps,
-            width: width
-        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-            ...commonLegendProps
-        })
+        children: legendContent
     });
 }

package/dist/cjs/Legend/ListLegend.js

@@ -19,23 +19,10 @@ Object.defineProperty(exports, "ListLegend", {
     get: ()=>ListLegend
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
 const _reactVirtuoso = require("react-virtuoso");
 const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
 function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
-    const theme = (0, _material.useTheme)();
-    // Padding value used in the react virtuoso header/footer components to
-    // simulate top/bottom padding based on recommendation in this
-    // issue.
-    // https://github.com/petyosi/react-virtuoso/issues/238
-    const LIST_PADDING = parseInt(theme.spacing(1), 10);
-    const mockPadding = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-            width: '100%',
-            height: `${LIST_PADDING}px`
-        }
-    });
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
@@ -53,20 +40,12 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
-                    width: width - LIST_PADDING,
+                    width: width,
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
             }, item.id);
         },
-        role: "list",
-        components: {
-            Header: ()=>{
-                return mockPadding;
-            },
-            Footer: ()=>{
-                return mockPadding;
-            }
-        }
+        role: "list"
     });
 }

package/dist/cjs/Legend/TableLegend.js

@@ -0,0 +1,67 @@
+// 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, "TableLegend", {
+    enumerable: true,
+    get: ()=>TableLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _table = require("../Table");
+const COLUMNS = [
+    {
+        accessorKey: 'label',
+        header: 'Name',
+        // Starting with `title` attr instead of a tooltip because it is easier to
+        // implement. We should try adding a tooltip in the future, but we'll need
+        // to be very careful about performance when doing so with large tables.
+        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+                title: getValue(),
+                children: getValue()
+            })
+    }
+];
+const getRowId = (data)=>{
+    return data.id;
+};
+const getCheckboxColor = (data)=>{
+    return data.color;
+};
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+    const rowSelection = (0, _react.useMemo)(()=>{
+        return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
+        // TODO: clean this up if we switch to also using checkboxes in list legend.
+        items.reduce((allRowSelection, item, index)=>{
+            allRowSelection[getRowId(item, index)] = true;
+            return allRowSelection;
+        }, {});
+    }, [
+        initRowSelection,
+        items
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
+        height: height,
+        width: width,
+        rowSelection: rowSelection,
+        onRowSelectionChange: onSelectedItemsChange,
+        data: items,
+        columns: COLUMNS,
+        density: "compact",
+        getRowId: getRowId,
+        getCheckboxColor: getCheckboxColor,
+        checkboxSelection: true
+    });
+}

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -29,6 +29,12 @@ const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id
         ...config
     };
 });
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -43,9 +49,18 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            mode: newValue.id
+        });
+    };
     const isValidLegend = (0, _model.validateLegendSpec)(value);
     const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
-    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const currentMode = (0, _model.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
+    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
@@ -65,7 +80,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 label: "Position",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
-                        ...legendConfig,
+                        ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
@@ -77,6 +92,23 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendModeChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
             })
         ]
     });

package/dist/cjs/LineChart/LineChart.js

@@ -89,15 +89,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
-    const [isTooltipPinned, setIsTooltipPinned] = (0, _react.useState)(false);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setIsTooltipPinned(false);
+                        setTooltipPinnedCoords(null);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -121,22 +123,11 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     }, [
         data,
         onDataZoom,
-        setIsTooltipPinned
+        setTooltipPinnedCoords
     ]);
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnDoubleClick = (e)=>{
-        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) {
-                (0, _utils.restoreChart)(chartRef.current);
-            }
-        } else {
-            onDoubleClick(e);
-        }
-    };
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
@@ -205,20 +196,57 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
             if (e.target instanceof HTMLCanvasElement) {
-                setIsTooltipPinned((current)=>!current);
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
             }
         },
         onMouseDown: (e)=>{
-            // Hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels.
-            if (e.target instanceof HTMLCanvasElement) {
-                setShowTooltip(false);
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
             }
         },
         onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
             setShowTooltip(true);
         },
         onMouseLeave: ()=>{
-            setShowTooltip(false);
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -226,16 +254,26 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 (0, _utils.enableDataZoom)(chartRef.current);
             }
         },
-        onDoubleClick: handleOnDoubleClick,
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    (0, _utils.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
         children: [
             showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                isTooltipPinned: isTooltipPinned,
+                pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{
-                    setIsTooltipPinned(false);
+                    setTooltipPinnedCoords(null);
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {

package/dist/cjs/StatChart/StatChart.js

@@ -80,7 +80,14 @@ function StatChart(props) {
             },
             yAxis: {
                 type: 'value',
-                show: false
+                show: false,
+                min: (value)=>{
+                    if (value.min >= 0 && value.min <= 1) {
+                        // helps with PercentDecimal units, or datasets that return 0 or 1 booleans
+                        return 0;
+                    }
+                    return value.min;
+                }
             },
             tooltip: {
                 show: false

package/dist/cjs/Table/InnerTable.js

@@ -25,7 +25,7 @@ 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
+        backgroundColor: theme.palette.background.default
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',

package/dist/cjs/Table/TableCell.js

@@ -27,7 +27,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
             // Important to avoid scrolling behind the header showing through.
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.background.default
         },
         '&:focus-visible': {
             outline: `solid 1px ${theme.palette.primary.main}`,

package/dist/cjs/Table/TableRow.js

@@ -26,9 +26,9 @@ const TableRow = /*#__PURE__*/ (0, _react.forwardRef)(function TableRow(props, r
         ...props,
         ref: ref,
         sx: {
-            backgroundColor: (theme)=>theme.palette.background.paper,
+            backgroundColor: (theme)=>theme.palette.background.default,
             '&:hover': {
-                backgroundColor: (theme)=>theme.palette.primary.light
+                backgroundColor: (theme)=>(0, _material.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             }
         }
     });