@perses-dev/components 0.37.2 → 0.39.0

package/dist/cjs/StatChart/calculateFontSize.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "useOptimalFontSize", {
     enumerable: true,
     get: ()=>useOptimalFontSize
 });
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 let canvasContext;
 function getGlobalCanvasContext() {
     if (!canvasContext) {
@@ -31,12 +31,12 @@ function getGlobalCanvasContext() {
 }
 function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
     const ctx = getGlobalCanvasContext();
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const { echartsTheme  } = (0, _chartsProvider.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;
+    const textStyle = echartsTheme.textStyle;
     var ref;
     const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;
     var ref1;

package/dist/cjs/ThresholdsEditor/ThresholdColorPicker.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _material = require("@mui/material");
 const _circle = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Circle"));
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 const _colorPicker = require("../ColorPicker");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -38,7 +38,7 @@ function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsProvider.useChartsTheme)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(ColorIconButton, {

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -24,7 +24,7 @@ const _immer = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _material = require("@mui/material");
 const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _system = require("@mui/system");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _chartsProvider = require("../context/ChartsProvider");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
 const _infoTooltip = require("../InfoTooltip");
 const _thresholdColorPicker = require("./ThresholdColorPicker");
@@ -75,7 +75,8 @@ function _interopRequireWildcard(obj, nodeInterop) {
 }
 const DEFAULT_STEP = 10;
 function ThresholdsEditor({ thresholds , onChange , hideDefault , disablePercentMode  }) {
-    const { thresholds: { defaultColor , palette  } ,  } = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartsTheme = (0, _chartsProvider.useChartsTheme)();
+    const { thresholds: { defaultColor , palette  } ,  } = chartsTheme;
     var ref;
     const defaultThresholdColor = (ref = thresholds === null || thresholds === void 0 ? void 0 : thresholds.default_color) !== null && ref !== void 0 ? ref : defaultColor;
     const [steps, setSteps] = (0, _react.useState)(thresholds === null || thresholds === void 0 ? void 0 : thresholds.steps);

package/dist/cjs/TimeChart/TimeChart.js

@@ -21,6 +21,8 @@ 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 _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
 const _dateFnsTz = require("date-fns-tz");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
@@ -28,12 +30,19 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _model = require("../model");
+const _chartsProvider = require("../context/ChartsProvider");
 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,
@@ -45,14 +54,14 @@ const _timeZoneProvider = require("../context/TimeZoneProvider");
     _components.TooltipComponent,
     _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 { chartsTheme , enablePinning , lastTooltipPinnedCoords , setLastTooltipPinnedCoords  } = (0, _chartsProvider.useChartsContext)();
+    const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
+    const [pinnedCrosshair, setPinnedCrosshair] = (0, _react.useState)(null);
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
@@ -122,19 +131,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;
@@ -161,10 +170,14 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 ]
             });
         });
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
         var _rangeMs;
         const option = {
             dataset: dataset,
-            series: seriesMapping,
+            series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
                 min: isLocalTimeZone ? timeScale.startMs : (0, _dateFnsTz.utcToZonedTime)(timeScale.startMs, timeZone),
@@ -172,14 +185,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),
+            yAxis: (0, _utils.getFormattedAxis)(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: {
@@ -187,7 +206,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 z: 0,
                 triggerEmphasis: false,
                 triggerTooltip: false,
-                snap: true
+                snap: false
             },
             toolbox: {
                 feature: {
@@ -213,36 +232,102 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
-        timeZone
+        timeZone,
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
+    ]);
+    // Update adjacent charts so tooltip is unpinned when current chart is clicked.
+    (0, _react.useEffect)(()=>{
+        // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
+        // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
+        const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
+        if (multipleTooltipsPinned) {
+            if (!(0, _isEqual.default)(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
+                setTooltipPinnedCoords(null);
+                if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
+                    setPinnedCrosshair(null);
+                }
+            }
+        }
+    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        lastTooltipPinnedCoords,
+        seriesMapping
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
+        // onContextMenu={(e) => {
+        //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
+        //   e.preventDefault(); // Prevent the default behaviour when right clicked
+        // }}
         onClick: (e)=>{
+            // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
+            const isControlKeyPressed = e.ctrlKey || e.metaKey;
+            if (isControlKeyPressed) {
+                e.preventDefault();
+            }
+            // 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;
+            }
             // Pin and unpin when clicking on chart canvas but not tooltip text.
-            if (e.target instanceof HTMLCanvasElement) {
+            if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
+                // Pin tooltip and update shared charts context to remember these coordinates.
+                const pinnedPos = {
+                    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
+                };
                 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
-                        };
+                        return pinnedPos;
                     } else {
+                        setPinnedCrosshair(null);
                         return null;
                     }
                 });
+                setPinnedCrosshair((current)=>{
+                    // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                    if (current === null) {
+                        var ref;
+                        const cursorX = pointInGrid[0];
+                        // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+                        const firstTimeSeriesValues = (ref = data[0]) === null || ref === void 0 ? void 0 : ref.values;
+                        const closestTimestamp = (0, _utils.getClosestTimestamp)(firstTimeSeriesValues, cursorX);
+                        // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
+                        const pinnedCrosshair = (0, _merge.default)({}, _model.DEFAULT_PINNED_CROSSHAIR, {
+                            markLine: {
+                                data: [
+                                    {
+                                        xAxis: closestTimestamp
+                                    }
+                                ]
+                            }
+                        });
+                        return pinnedCrosshair;
+                    } else {
+                        // Clear previously set pinned crosshair
+                        return null;
+                    }
+                });
+                if (!isControlKeyPressed) {
+                    setLastTooltipPinnedCoords(pinnedPos);
+                }
             }
         },
         onMouseDown: (e)=>{
@@ -301,10 +386,14 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 data: data,
                 seriesMapping: seriesMapping,
                 wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
                 pinnedPos: tooltipPinnedCoords,
                 unit: unit,
                 onUnpinClick: ()=>{
+                    // Unpins tooltip when clicking Pin icon in TooltipHeader.
                     setTooltipPinnedCoords(null);
+                    // Clear previously set pinned crosshair.
+                    setPinnedCrosshair(null);
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {

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,12 +32,12 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TimeChartTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeChartTooltip({ containerId , 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;
@@ -78,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,8 +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 pinTooltipHelpText = isTooltipPinned ? 'Click to unpin' : 'Click chart to pin';
+    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)=>{
@@ -127,7 +127,7 @@ 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: [