@perses-dev/components 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

package/dist/cjs/LineChart/LineChart.js

@@ -43,9 +43,7 @@ const _utils = require("../utils");
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
@@ -58,7 +56,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         return {
             highlightSeries ({ id  }) {
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not highlight series when hovering over legend
                     return;
                 }
                 chartRef.current.dispatchAction({
@@ -68,7 +66,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             },
             clearHighlightedSeries: ()=>{
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not clear highlight series
                     return;
                 }
                 (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
@@ -179,7 +177,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         },
         onClick: (e)=>{
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -257,11 +255,13 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{
                     setTooltipPinnedCoords(null);
-                }
+                },
+                containerId: chartsTheme.tooltipPortalContainerId
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {

package/dist/cjs/ModeSelector/ModeSelector.js

@@ -0,0 +1,49 @@
+// 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, "ModeSelector", {
+    enumerable: true,
+    get: ()=>ModeSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const MODE_OPTIONS = [
+    {
+        id: 'value',
+        label: 'Value'
+    },
+    {
+        id: 'percentage',
+        label: 'Percentage'
+    }
+];
+function ModeSelector({ disablePercentageMode , onChange , value ='value'  }) {
+    const handleModeChange = (_, { id  })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+        label: "Mode",
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+            value: MODE_OPTIONS.find((o)=>o.id === value),
+            options: MODE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            getOptionDisabled: (o)=>o.id === 'percentage' && disablePercentageMode,
+            onChange: handleModeChange,
+            disableClearable: true
+        })
+    });
+}

package/dist/cjs/ModeSelector/index.js

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./ModeSelector"), 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/SortSelector/SortSelector.js

@@ -0,0 +1,48 @@
+// 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, "SortSelector", {
+    enumerable: true,
+    get: ()=>SortSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const SORT_OPTIONS = [
+    {
+        id: 'asc',
+        label: 'Ascending'
+    },
+    {
+        id: 'desc',
+        label: 'Descending'
+    }
+];
+function SortSelector({ onChange , value ='desc'  }) {
+    const handleSortChange = (_, { id  })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+        label: "Sort",
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+            value: SORT_OPTIONS.find((o)=>o.id === value),
+            options: SORT_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleSortChange,
+            disableClearable: true
+        })
+    });
+}

package/dist/cjs/SortSelector/index.js

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./SortSelector"), 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/StatChart/StatChart.js

@@ -49,7 +49,7 @@ const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
     var ref, ref1;
-    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
+    const { width , height , data , unit , color , sparkline , showSeriesName , valueFontSize  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     let formattedValue = '';
     if (data.calculatedValue === null) {
@@ -72,8 +72,10 @@ function StatChart(props) {
     // calculate value font size and height
     const availableWidth = width - containerPadding * 2;
     const availableHeight = height - seriesNameHeight;
-    const valueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+    const optimalValueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
         text: formattedValue,
+        // override the font size if user selects it in the settings
+        fontSizeOverride: valueFontSize,
         fontWeight: VALUE_FONT_WEIGHT,
         // without sparkline, use only 50% of the available width so it looks better for multiseries
         width: sparkline ? availableWidth : availableWidth * 0.5,
@@ -82,9 +84,9 @@ function StatChart(props) {
         height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
         lineHeight: LINE_HEIGHT
     });
-    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
     // make sure the series name font size is slightly smaller than value font size
-    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
+    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
     const option = (0, _react.useMemo)(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -163,7 +165,7 @@ function StatChart(props) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(Value, {
                 variant: "h3",
                 color: color,
-                fontSize: valueFontSize,
+                fontSize: optimalValueFontSize,
                 padding: containerPadding,
                 children: formattedValue
             }),

package/dist/cjs/StatChart/calculateFontSize.js

@@ -29,9 +29,13 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
-function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
     const ctx = getGlobalCanvasContext();
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    // if user has selected a font size in the settings, use it instead of calculating the optimal size
+    if (fontSizeOverride !== undefined) {
+        return Number(fontSizeOverride);
+    }
     const textStyle = chartsTheme.echartsTheme.textStyle;
     var ref;
     const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;

package/dist/cjs/TimeChart/TimeChart.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "TimeChart", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
 const _dateFnsTz = require("date-fns-tz");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
@@ -28,12 +29,19 @@ 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 _utils = require("../utils");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 (0, _core1.use)([
     _charts.LineChart,
+    _charts.BarChart,
     _components.GridComponent,
     _components.DatasetComponent,
     _components.DataZoomComponent,
@@ -43,12 +51,9 @@ const _timeZoneProvider = require("../context/TimeZoneProvider");
     _components.TitleComponent,
     _components.ToolboxComponent,
     _components.TooltipComponent,
-    _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , tooltipConfig ={
-    wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig =_timeSeriesTooltip.DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
@@ -85,7 +90,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         return {
             highlightSeries ({ name  }) {
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not highlight series when hovering over legend
                     return;
                 }
                 chartRef.current.dispatchAction({
@@ -95,7 +100,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             },
             clearHighlightedSeries: ()=>{
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not clear highlight series
                     return;
                 }
                 (0, _utils.clearHighlightedSeries)(chartRef.current, totalSeries);
@@ -123,19 +128,19 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                     };
                     onDataZoom(zoomEvent);
                 }
+            },
+            finished: ()=>{
+                if (chartRef.current !== undefined) {
+                    (0, _utils.enableDataZoom)(chartRef.current);
+                }
             }
         };
     }, [
         onDataZoom,
         setTooltipPinnedCoords
     ]);
-    if (chartRef.current !== undefined) {
-        (0, _utils.enableDataZoom)(chartRef.current);
-    }
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
-        // TODO: fix loading state and noData variants
-        // if (data === undefined) return {};
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data === null || data.length === 0 && noDataVariant === 'message') return noDataOption;
@@ -173,14 +178,20 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 axisLabel: {
                     hideOverlap: true,
                     formatter: (0, _utils.getFormattedAxisLabel)((_rangeMs = timeScale.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : 0)
+                },
+                axisPointer: {
+                    snap: false
                 }
             },
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
                 show: true,
-                trigger: 'axis',
-                showContent: false
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
+                showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
+                appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
@@ -188,7 +199,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 z: 0,
                 triggerEmphasis: false,
                 triggerTooltip: false,
-                snap: true
+                snap: false
             },
             toolbox: {
                 feature: {
@@ -204,6 +215,8 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
             return __experimentalEChartsOptionsOverride(option);
         }
         return option;
+    // tooltipPinnedCoords is needed in dep array so crosshair stays beside pinned tooltip onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         data,
         seriesMapping,
@@ -214,15 +227,40 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
-        timeZone
+        timeZone,
+        tooltipPinnedCoords,
+        isStackedBar
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
         onClick: (e)=>{
+            var ref;
+            // Determine where on chart canvas to plot pinned crosshair as markLine.
+            const pointInGrid = (0, _utils.getPointInGrid)(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
+            if (pointInGrid === null) {
+                return;
+            }
+            // Clear previously set pinned crosshair
+            const isCrosshairPinned = ((ref = seriesMapping[seriesMapping.length - 1]) === null || ref === void 0 ? void 0 : ref.name) === _graph.PINNED_CROSSHAIR_SERIES_NAME;
+            if (tooltipPinnedCoords !== null && isCrosshairPinned) {
+                seriesMapping.pop();
+            } else if (seriesMapping.length !== data.length + 1) {
+                // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                const pinnedCrosshair = (0, _merge.default)(_graph.DEFAULT_PINNED_CROSSHAIR, {
+                    markLine: {
+                        data: [
+                            {
+                                xAxis: pointInGrid[0]
+                            }
+                        ]
+                    }
+                });
+                seriesMapping.push(pinnedCrosshair);
+            }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {
                 setTooltipPinnedCoords((current)=>{
                     if (current === null) {
                         return {
@@ -297,12 +335,19 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         },
         children: [
             showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeChartTooltip, {
+                containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: tooltipConfig.enablePinning,
                 pinnedPos: tooltipPinnedCoords,
-                unit: unit
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setTooltipPinnedCoords(null);
+                    // Clear previously set pinned crosshair
+                    seriesMapping.pop();
+                }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -32,18 +32,18 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartTooltip({ chartRef , chartData , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos , containerId  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
-    const isTooltipPinned = pinnedPos !== null;
+    const transform = (0, _react.useRef)('');
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     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 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 nearbySeries = (0, _nearbySeries.legacyGetNearbySeriesData)({
         mousePos,
@@ -57,8 +57,15 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
         return null;
     }
     const totalSeries = chartData.timeSeries.length;
+    const containerElement = containerId ? document.querySelector(containerId) : undefined;
+    // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
+    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+    if (!isTooltipPinned) {
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
+    }
     var ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+        container: containerElement,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             ref: tooltipRef,
             sx: (theme)=>{
@@ -66,7 +73,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                 return {
                     minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
-                    maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : _tooltipModel.TOOLTIP_MAX_HEIGHT,
                     padding: 0,
                     position: 'absolute',
                     top: 0,
@@ -87,7 +94,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                 };
             },
             style: {
-                transform: cursorTransform
+                transform: transform.current
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                 spacing: 0.5,
@@ -95,6 +102,7 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js

@@ -32,18 +32,24 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ chartRef , data , seriesMapping , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
+const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , chartRef , data , seriesMapping , enablePinning =true , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
+    const transform = (0, _react.useRef)('');
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
-    const isTooltipPinned = pinnedPos !== null;
+    const isTooltipPinned = pinnedPos !== null && enablePinning;
     if (mousePos === null || mousePos.target === null || data === 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 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);
+    const containerElement = containerId ? document.querySelector(containerId) : undefined;
+    // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
+    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+    if (!isTooltipPinned) {
+        transform.current = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0, containerElement);
+    }
     // Get series nearby the cursor and pass into tooltip content children.
     const nearbySeries = (0, _nearbySeries.getNearbySeriesData)({
         mousePos,
@@ -59,11 +65,12 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
     }
     const totalSeries = data.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
+        container: containerElement,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             ref: tooltipRef,
-            sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos),
+            sx: (theme)=>(0, _utils.getTooltipStyles)(theme, pinnedPos, maxHeight),
             style: {
-                transform: cursorTransform
+                transform: transform.current
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                 spacing: 0.5,
@@ -71,6 +78,7 @@ const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartToolti
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipHeader.TooltipHeader, {
                         nearbySeries: nearbySeries,
                         totalSeries: totalSeries,
+                        enablePinning: enablePinning,
                         isTooltipPinned: isTooltipPinned,
                         showAllSeries: showAllSeries,
                         onShowAllClick: (checked)=>setShowAllSeries(checked),

package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js

@@ -30,7 +30,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , enablePinning =true , onShowAllClick , onUnpinClick  }) {
     var ref;
     var ref1;
     const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
@@ -60,7 +60,8 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
         });
     };
     // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = totalSeries > 5;
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? _tooltipModel.UNPIN_TOOLTIP_HELP_TEXT : _tooltipModel.PIN_TOOLTIP_HELP_TEXT;
     var ref2;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: (theme)=>{
@@ -126,20 +127,17 @@ const TooltipHeader = /*#__PURE__*/ (0, _react.memo)(function TooltipHeader({ ne
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            enablePinning && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 alignItems: "center",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                                         sx: {
                                             marginRight: 0.5,
                                             fontSize: 11,
                                             verticalAlign: 'middle'
                                         },
-                                        children: [
-                                            "Click to ",
-                                            isTooltipPinned ? 'Unpin' : 'Pin'
-                                        ]
+                                        children: pinTooltipHelpText
                                     }),
                                     isTooltipPinned ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pin.default, {
                                         onClick: ()=>{