@perses-dev/components 0.31.0 → 0.32.0

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/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -20,9 +20,10 @@ Object.defineProperty(exports, "TimeSeriesTooltip", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
+const _tooltipHeader = require("./TooltipHeader");
 const _nearbySeries = require("./nearby-series");
 const _tooltipModel = require("./tooltip-model");
 const _utils = require("./utils");
@@ -31,59 +32,20 @@ function _interopRequireDefault(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 _interopRequireWildcard(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 = {};
-    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 TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
-    const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
+    const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const focusedSeries = (0, _nearbySeries.getNearbySeriesData)({
+    const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
         mousePos,
         chartData,
         pinnedPos,
@@ -91,27 +53,25 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
         unit,
         showAllSeries
     });
-    if (focusedSeries.length === 0) {
+    if (nearbySeries.length === 0) {
         return null;
     }
-    if (isTooltipPinned === true && pinnedPos === null) {
-        setPinnedPos(mousePos);
-    }
-    // Option for user to see all series instead of only the nearby focused series.
-    // Only relevant when there are more total series than are visible.
-    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
+    const totalSeries = chartData.timeSeries.length;
+    var ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             ref: tooltipRef,
-            sx: (theme)=>({
+            sx: (theme)=>{
+                var ref;
+                return {
                     minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
-                    padding: theme.spacing(0.5, 2),
+                    padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: '#2E313E',
+                    backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : _tooltipModel.TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -123,45 +83,28 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                }),
+                };
+            },
             style: {
                 transform: cursorTransform
             },
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-                    series: focusedSeries,
-                    wrapLabels: wrapLabels,
-                    isTooltipPinned: isTooltipPinned,
-                    onUnpinClick: ()=>{
-                        setPinnedPos(null);
-                        if (onUnpinClick !== undefined) {
-                            onUnpinClick();
-                        }
-                    }
-                }),
-                showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                    direction: "row",
-                    gap: 1,
-                    alignItems: "center",
-                    sx: {
-                        textAlign: 'right'
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            children: "Show All?"
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                            checked: showAllSeries,
-                            onChange: (_, checked)=>setShowAllSeries(checked),
-                            sx: (theme)=>({
-                                    '& .MuiSwitch-switchBase': {
-                                        color: theme.palette.common.white
-                                    }
-                                })
-                        })
-                    ]
-                })
-            ]
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        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

@@ -20,118 +20,37 @@ Object.defineProperty(exports, "TooltipContent", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
-const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
-const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
 const _material = require("@mui/material");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function TooltipContent(props) {
-    const { series , wrapLabels , isTooltipPinned , onUnpinClick  } = props;
-    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
-    const seriesTime = series && series[0] && series[0].date ? series[0].date : 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
-                    })
-                })
-            ]
-        });
-    };
+    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 (sortedFocusedSeries === null || seriesTime === null) {
+    if (series === null || sortedFocusedSeries === null) {
         return null;
     }
     // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        py: 1,
-        spacing: 0.5,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'flex',
-                    justifyContent: 'start',
-                    alignItems: 'center'
-                },
-                children: [
-                    formatTimeSeriesHeader(seriesTime),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                                sx: {
-                                    fontSize: 11
-                                },
-                                children: [
-                                    "Click to ",
-                                    isTooltipPinned ? 'Unpin' : 'Pin'
-                                ]
-                            }),
-                            isTooltipPinned ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pin.default, {
-                                onClick: onUnpinClick,
-                                sx: {
-                                    fontSize: 16,
-                                    cursor: 'pointer'
-                                }
-                            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {
-                                sx: {
-                                    fontSize: 16
-                                }
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
-                sx: (theme)=>({
-                        borderColor: theme.palette.grey['500']
-                    })
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: (theme)=>({
+                display: 'table',
+                padding: theme.spacing(0.5, 2)
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                    display: 'table'
-                },
-                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);
-                })
-            })
-        ]
+        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);
+        })
     });
 }