@perses-dev/components 0.37.2 → 0.38.0

package/dist/cjs/Dialog/DiscardChangesConfirmationDialog.js

@@ -0,0 +1,53 @@
+// 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, "DiscardChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>DiscardChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _dialog = require("./Dialog");
+const DiscardChangesConfirmationDialog = (props)=>{
+    const { description , isOpen , onCancel , onDiscardChanges  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog, {
+        open: isOpen,
+        "aria-labelledby": "discard-dialog",
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Header, {
+                children: "Discard Changes"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Content, {
+                children: description
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog.Actions, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: onDiscardChanges,
+                        children: "Discard Changes"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "outlined",
+                        color: "secondary",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/cjs/Dialog/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Dialog"), exports);
+_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/LineChart/LineChart.js

@@ -261,7 +261,8 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
                 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/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,
@@ -45,7 +53,7 @@ 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 ={
+const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ height , data , seriesMapping , timeScale: timeScaleProp , yAxis , unit , grid , isStackedBar =false , tooltipConfig ={
     wrapLabels: true
 } , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
     var ref1;
@@ -122,19 +130,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;
@@ -172,14 +180,19 @@ 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
+                trigger: isStackedBar ? 'item' : 'axis',
+                // ECharts tooltip content hidden since we use custom tooltip instead
+                showContent: isStackedBar,
+                appendToBody: true
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
@@ -187,7 +200,7 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 z: 0,
                 triggerEmphasis: false,
                 triggerTooltip: false,
-                snap: true
+                snap: false
             },
             toolbox: {
                 feature: {
@@ -203,6 +216,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,
@@ -213,13 +228,38 @@ 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) {
                 setTooltipPinnedCoords((current)=>{
@@ -305,6 +345,8 @@ const TimeChart = /*#__PURE__*/ (0, _react.forwardRef)(function TimeChart({ heig
                 unit: unit,
                 onUnpinClick: ()=>{
                     setTooltipPinnedCoords(null);
+                    // Clear previously set pinned crosshair
+                    seriesMapping.pop();
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {

package/dist/cjs/TimeSeriesTooltip/LineChartTooltip.js

@@ -32,10 +32,11 @@ 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 , 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 transform = (0, _react.useRef)('');
     const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
@@ -43,7 +44,6 @@ const LineChartTooltip = /*#__PURE__*/ (0, _react.memo)(function LineChartToolti
     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,