@perses-dev/components 0.14.0 → 0.16.0

package/dist/cjs/{TimeRangeSelector → DateTimeRangePicker}/AbsoluteTimePicker.js

@@ -61,10 +61,10 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
         dateAdapter: _adapterDateFns.AdapterDateFns,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 3,
-            sx: {
-                padding: (theme)=>theme.spacing(1, 2, 3)
-            },
+            spacing: 2,
+            sx: (theme)=>({
+                    padding: theme.spacing(1, 0, 2)
+                }),
             children: [
                 showStartCalendar && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: (theme)=>({
@@ -80,7 +80,9 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             }
                         }),
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("h3", {
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h3",
+                            padding: 1,
                             children: "Select Start Time"
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
@@ -119,7 +121,9 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             }
                         }),
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("h3", {
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h3",
+                            padding: 1,
                             children: "Select End Time"
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_xDatePickers.StaticDateTimePicker, {
@@ -147,33 +151,34 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                    fullWidth: true,
-                    onChange: (event)=>{
-                        // TODO: add helperText, fix validation after we decide on form state solution
-                        updateDateRange(event.target.value, true);
-                    },
-                    value: (0, _dateFns.format)(timeRange.start, DATE_TIME_FORMAT),
-                    label: "Start Time",
-                    placeholder: "mm/dd/yyyy hh:mm",
-                    // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
-                    type: "tel"
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
-                    sx: (theme)=>({
-                            margin: theme.spacing(2, 0),
-                            borderColor: theme.palette.grey['500']
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    gap: 1,
+                    pl: 1,
+                    pr: 1,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            onChange: (event)=>{
+                                // TODO: add helperText, fix validation after we decide on form state solution
+                                updateDateRange(event.target.value, true);
+                            },
+                            value: (0, _dateFns.format)(timeRange.start, DATE_TIME_FORMAT),
+                            label: "Start Time",
+                            placeholder: "mm/dd/yyyy hh:mm",
+                            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
+                            type: "tel"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            onChange: (event)=>{
+                                updateDateRange(event.target.value, false);
+                            },
+                            value: (0, _dateFns.format)(timeRange.end, DATE_TIME_FORMAT),
+                            label: "End Time",
+                            placeholder: "mm/dd/yyyy hh:mm",
+                            type: "tel"
                         })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                    fullWidth: true,
-                    onChange: (event)=>{
-                        updateDateRange(event.target.value, false);
-                    },
-                    value: (0, _dateFns.format)(timeRange.end, DATE_TIME_FORMAT),
-                    label: "End Time",
-                    placeholder: "mm/dd/yyyy hh:mm",
-                    type: "tel"
+                    ]
                 })
             ]
         })

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,83 @@
+// Copyright 2022 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, "DateTimeRangePicker", {
+    enumerable: true,
+    get: ()=>DateTimeRangePicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _absoluteTimePicker = require("./AbsoluteTimePicker");
+const _timeRangeSelector = require("./TimeRangeSelector");
+function DateTimeRangePicker(props) {
+    const { value , onChange , timeOptions  } = props;
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    const anchorEl = (0, _react.useRef)();
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(value) ? (0, _core.toAbsoluteTimeRange)(value) : value;
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_absoluteTimePicker.AbsoluteTimePicker, {
+                    initialTimeRange: convertedTimeRange,
+                    onChange: (value)=>{
+                        onChange(value);
+                        setShowCustomDateSelector(false);
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeSelector.TimeRangeSelector, {
+                        timeOptions: timeOptions,
+                        value: value,
+                        onSelectChange: (event)=>{
+                            const duration = event.target.value;
+                            const relativeTimeInput = {
+                                pastDuration: duration,
+                                end: new Date()
+                            };
+                            onChange(relativeTimeInput);
+                            setShowCustomDateSelector(false);
+                        },
+                        onCustomClick: ()=>{
+                            setShowCustomDateSelector(true);
+                        }
+                    })
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/{TimeRangeSelector → DateTimeRangePicker}/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_exportStar(require("./DateTimeRangePicker"), exports);
 _exportStar(require("./TimeRangeSelector"), exports);
 _exportStar(require("./AbsoluteTimePicker"), exports);
 function _exportStar(from, to) {

package/dist/cjs/Legend/CompactLegend.js

@@ -21,15 +21,21 @@ Object.defineProperty(exports, "CompactLegend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _listLegendItem = require("./ListLegendItem");
-function CompactLegend({ items  }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-        direction: "row",
-        spacing: 2,
+function CompactLegend({ height , items  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-            flexWrap: 'wrap'
+            width: '100%',
+            height,
+            paddingTop: 1,
+            overflowY: 'scroll'
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                item: item
+                item: item,
+                sx: {
+                    width: 'auto',
+                    float: 'left',
+                    paddingRight: 1.5
+                }
             }, item.id))
     });
 }

package/dist/cjs/Legend/Legend.js

@@ -27,7 +27,7 @@ function Legend({ width , height , options , data  }) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
                 width: width,
-                height: height,
+                height: '100%',
                 position: 'absolute',
                 top: 0,
                 right: 0,
@@ -38,13 +38,8 @@ function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-            height: 50,
-            overflowY: 'scroll'
-        },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-            items: data
-        })
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+        items: data,
+        height: height
     });
 }

package/dist/cjs/Legend/ListLegend.js

@@ -22,9 +22,23 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _listLegendItem = require("./ListLegendItem");
 function ListLegend({ items  }) {
+    // show full labels on hover when there are many total series
+    const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.List, {
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                item: item
+                item: item,
+                sx: {
+                    width: 190,
+                    textOverflow: 'ellipsis',
+                    wordBreak: 'break-word',
+                    overflow: truncateLabels ? 'hidden' : 'visible',
+                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
+                    // TODO: add optional hover effect to show unformatted label
+                    '&:hover': {
+                        overflow: 'visible',
+                        whiteSpace: 'normal'
+                    }
+                }
             }, item.id))
     });
 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -19,24 +19,59 @@ Object.defineProperty(exports, "ListLegendItem", {
     get: ()=>ListLegendItem
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
+const _utils = require("../utils");
 const _legendColorBadge = require("./LegendColorBadge");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? 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);
 }
-const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item  }) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.ListItem, {
-        dense: true,
-        sx: {
-            display: 'flex',
-            maxWidth: 270,
+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 ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item , sx , ...others }) {
+    return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
+        ...others,
+        sx: (0, _utils.combineSx)({
             padding: 0,
             cursor: 'pointer'
-        },
+        }, sx),
+        dense: true,
         "data-testid": `legend-item-${item.color}`,
+        key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,
         children: [
@@ -53,5 +88,5 @@ const ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem
                 primary: item.label
             })
         ]
-    }, item.id);
+    });
 });

package/dist/cjs/LineChart/LineChart.js

@@ -187,7 +187,8 @@ function LineChart({ height , data , unit , grid , legend , visualMap , onDataZo
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: true,
-                pinTooltip: pinTooltip
+                pinTooltip: pinTooltip,
+                unit: unit
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -0,0 +1,32 @@
+// Copyright 2022 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, "OptionsEditorColumn", {
+    enumerable: true,
+    get: ()=>OptionsEditorColumn
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorColumn = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 4,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+            spacing: 3,
+            children: children
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -0,0 +1,61 @@
+// Copyright 2022 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, "OptionsEditorControl", {
+    enumerable: true,
+    get: ()=>OptionsEditorControl
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const OptionsEditorControl = ({ label , control  })=>{
+    // Make sure we have a unique ID we can use for associating labels and
+    // controls for a11y.
+    const generatedControlId = (0, _utils.useId)('EditorSectionControl');
+    const controlId = `${generatedControlId}-control`;
+    const controlProps = {
+        id: controlId
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                    htmlFor: controlId,
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        width: '160px',
+                        textAlign: 'right'
+                    },
+                    children: [
+                        " ",
+                        /*#__PURE__*/ _react.default.cloneElement(control, controlProps)
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -0,0 +1,29 @@
+// Copyright 2022 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, "OptionsEditorGrid", {
+    enumerable: true,
+    get: ()=>OptionsEditorGrid
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGrid = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        container: true,
+        spacing: 8,
+        children: children
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -0,0 +1,40 @@
+// Copyright 2022 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, "OptionsEditorGroup", {
+    enumerable: true,
+    get: ()=>OptionsEditorGroup
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGroup = ({ title , children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "overline",
+                component: "h4",
+                borderBottom: 1,
+                borderColor: "grey.300",
+                marginBottom: (theme)=>theme.spacing(1),
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                spacing: 1,
+                children: children
+            })
+        ]
+    });
+};

package/dist/cjs/OptionsEditorLayout/index.js

@@ -0,0 +1,31 @@
+// Copyright 2022 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
+});
+_exportStar(require("./OptionsEditorColumn"), exports);
+_exportStar(require("./OptionsEditorControl"), exports);
+_exportStar(require("./OptionsEditorGrid"), exports);
+_exportStar(require("./OptionsEditorGroup"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/Tooltip/SeriesInfo.js

@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _seriesMarker = require("./SeriesMarker");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , y , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
     // TODO (sjcobb): regex to remove __name__, improve series labels
     const formattedSeriesLabels = seriesName.replace(/[{}"]/g, '');
     if (totalSeries === 1) {
@@ -56,7 +56,7 @@ function SeriesInfo(props) {
                                             fontWeight: 700,
                                             paddingLeft: '2px'
                                         }),
-                                    children: y
+                                    children: formattedY
                                 })
                             ]
                         })
@@ -142,7 +142,7 @@ function SeriesInfo(props) {
                     textAlign: 'right',
                     verticalAlign: 'top'
                 },
-                children: y
+                children: formattedY
             })
         ]
     });

package/dist/cjs/Tooltip/Tooltip.js

@@ -64,14 +64,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip  }) {
+const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     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;
-    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart);
+    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
     var ref1;

package/dist/cjs/Tooltip/TooltipContent.js

@@ -75,12 +75,13 @@ function TooltipContent(props) {
                     sx: {
                         display: 'table'
                     },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , markerColor  })=>{
+                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
                         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