@dexteel/mesf-core 7.20.1 → 7.22.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.20.1"
+  ".": "7.22.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [7.22.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.21.0...@dexteel/mesf-core-v7.22.0) (2026-05-09)
+
+
+### Features
+
+* **trendings-v2:** simplify chart layout ([114ea8f](https://github.com/dexteel/mesf-core-frontend/commit/114ea8fd2f5495f8ccc2d52bcff0bdb6d5202999))
+
+## [7.21.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.20.1...@dexteel/mesf-core-v7.21.0) (2026-04-24)
+
+
+### Features
+
+* **trendings-v2:** add stepped mode and URL state sync ([d87f8b6](https://github.com/dexteel/mesf-core-frontend/commit/d87f8b6f1e22b46d2a32b7e59017a4f62a9b0323))
+
 ## [7.20.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.20.0...@dexteel/mesf-core-v7.20.1) (2026-04-20)
 
 

package/dist/index.esm.js

@@ -25,7 +25,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import FindInPageIcon from '@mui/icons-material/FindInPage';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
-import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group as Group$1, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
+import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group as Group$1, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, KeyboardDoubleArrowLeft, KeyboardArrowLeft, KeyboardArrowRight, KeyboardDoubleArrowRight, Update, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import FormatListBulletedSharpIcon from '@mui/icons-material/FormatListBulletedSharp';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
@@ -11851,19 +11851,21 @@ const dateNavigator = (startDate, endDate, scope, operator, current = false) =>
     return { newStartDate, newEndDate };
 };
 
-const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setChartOptions, chartInstance }) => {
+const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setChartOptions, setAggregationMode, chartInstance, }) => {
     const queryClient = useQueryClient();
     const { state: { timeScopeStart, timeScopeEnd, scope, viewSelected, views }, actions: { setTotalScope, setViewSelected }, } = useTrendingContextV2();
     const [customOptions, setCustomOptions] = useState({
         showGridLines: true,
         showSymbols: false,
-        smoothLines: true,
+        smoothLines: false,
+        steppedLines: true,
         showLegend: false,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     });
+    const [aggregationMode, setAggregationModeState] = useState("avg");
     // View management state
     const [viewModalMode, setViewModalMode] = useState(null);
     const [viewForModal, setViewForModal] = useState(null);
@@ -11980,6 +11982,11 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
             setChartOptions(customOptions);
         }
     }, [customOptions, setChartOptions]);
+    useEffect(() => {
+        if (setAggregationMode) {
+            setAggregationMode(aggregationMode);
+        }
+    }, [aggregationMode, setAggregationMode]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid2, { size: 12, container: true, spacing: 1, justifyContent: "space-between", alignItems: "center", style: { height: "auto" } },
             React__default.createElement(Grid2, { size: { md: 5, sm: 12, xs: 12 }, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
@@ -11992,12 +11999,13 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                         width: "100%",
                     } },
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract"), size: "small" },
-                            React__default.createElement(ChevronLeft, { fontSize: "medium", sx: { color: "black" } }))),
+                        React__default.createElement(Tooltip, { title: "Previous period", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract"), size: "small" },
+                                React__default.createElement(KeyboardDoubleArrowLeft, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(Tooltip, { title: "Navigate backward 20%", arrow: true },
+                        React__default.createElement(Tooltip, { title: "Pan backward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: () => handlePartialDateNavigator("subtract"), size: "small" },
-                                React__default.createElement(FastRewind, { fontSize: "medium", sx: { color: "black" } })))),
+                                React__default.createElement(KeyboardArrowLeft, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
                         React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
                             React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$g(timeScopeStart), onChange: (newValue) => {
@@ -12035,15 +12043,17 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                     },
                                 }, disabled: autoRefresh }))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(Tooltip, { title: "Navigate forward 20%", arrow: true },
+                        React__default.createElement(Tooltip, { title: "Pan forward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: () => handlePartialDateNavigator("add"), size: "small" },
-                                React__default.createElement(FastForward, { fontSize: "medium", sx: { color: "black" } })))),
+                                React__default.createElement(KeyboardArrowRight, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("add"), size: "small" },
-                            React__default.createElement(ChevronRight, { fontSize: "medium", sx: { color: "black" } }))),
+                        React__default.createElement(Tooltip, { title: "Next period", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("add"), size: "small" },
+                                React__default.createElement(KeyboardDoubleArrowRight, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, null,
-                        React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract", true), size: "small" },
-                            React__default.createElement(SkipNext, { fontSize: "medium", sx: { color: "black" } }))))),
+                        React__default.createElement(Tooltip, { title: "Jump to current time", arrow: true },
+                            React__default.createElement(IconButton$1, { onClick: () => handleDateNavigator("subtract", true), size: "small" },
+                                React__default.createElement(Update, { fontSize: "medium", sx: { color: "black" } })))))),
             React__default.createElement(Grid2, { size: { md: 5, sm: 6, xs: 12 } },
                 React__default.createElement(Paper, { elevation: 0, sx: {
                         p: 1,
@@ -12055,31 +12065,24 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                             alignItems: "stretch",
                             justifyContent: "space-between",
                         } },
-                        React__default.createElement(Box, { sx: { width: 230 } },
+                        React__default.createElement(Box, { sx: { width: 155 } },
                             React__default.createElement(FormControl, { fullWidth: true, size: "small" },
                                 React__default.createElement(Select, { multiple: true, value: [
                                         ...(customOptions.showGridLines ? ["grid"] : []),
                                         ...(customOptions.showSymbols ? ["symbols"] : []),
                                         ...(customOptions.smoothLines ? ["smooth"] : []),
+                                        ...(customOptions.steppedLines ? ["stepped"] : []),
                                         ...(customOptions.showTooltip ? ["tooltip"] : []),
                                         ...(customOptions.showToolbox ? ["toolbox"] : []),
                                         ...(customOptions.showYAxisNames ? ["yAxisNames"] : []),
                                     ], onChange: (e) => {
                                         const selected = e.target.value;
-                                        setCustomOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { showGridLines: selected.includes("grid"), showSymbols: selected.includes("symbols"), smoothLines: selected.includes("smooth"), showTooltip: selected.includes("tooltip"), showToolbox: selected.includes("toolbox"), showYAxisNames: selected.includes("yAxisNames") })));
-                                    }, renderValue: (selected) => {
-                                        const labels = {
-                                            grid: "Grid",
-                                            symbols: "Symbols",
-                                            smooth: "Smooth",
-                                            tooltip: "Tooltip",
-                                            toolbox: "Toolbox",
-                                            yAxisNames: "Y-Axis Names",
-                                        };
-                                        return (React__default.createElement("span", { style: { fontSize: "0.75rem" } }, selected
-                                            .map((val) => labels[val])
-                                            .join(", ")));
-                                    } },
+                                        setCustomOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { showGridLines: selected.includes("grid"), showSymbols: selected.includes("symbols"), smoothLines: selected.includes("smooth") &&
+                                                !selected.includes("stepped"), steppedLines: selected.includes("stepped"), showTooltip: selected.includes("tooltip"), showToolbox: selected.includes("toolbox"), showYAxisNames: selected.includes("yAxisNames") })));
+                                    }, renderValue: (selected) => (React__default.createElement("span", { style: { fontSize: "0.75rem" } },
+                                        "Chart: ",
+                                        selected.length,
+                                        " options")) },
                                     React__default.createElement(MenuItem, { value: "grid", style: { padding: 0 } },
                                         React__default.createElement(Checkbox, { checked: customOptions.showGridLines, size: "small" }),
                                         React__default.createElement(ListItemText, null, "Grid")),
@@ -12089,6 +12092,9 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                     React__default.createElement(MenuItem, { value: "smooth", style: { padding: 0 } },
                                         React__default.createElement(Checkbox, { checked: customOptions.smoothLines, size: "small" }),
                                         React__default.createElement(ListItemText, null, "Smooth")),
+                                    React__default.createElement(MenuItem, { value: "stepped", style: { padding: 0 } },
+                                        React__default.createElement(Checkbox, { checked: customOptions.steppedLines, size: "small" }),
+                                        React__default.createElement(ListItemText, null, "Stepped")),
                                     React__default.createElement(MenuItem, { value: "tooltip", style: { padding: 0 } },
                                         React__default.createElement(Checkbox, { checked: customOptions.showTooltip, size: "small" }),
                                         React__default.createElement(ListItemText, null, "Tooltip")),
@@ -12098,11 +12104,18 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                     React__default.createElement(MenuItem, { value: "yAxisNames", style: { padding: 0 } },
                                         React__default.createElement(Checkbox, { checked: customOptions.showYAxisNames, size: "small" }),
                                         React__default.createElement(ListItemText, null, "Y-Axis Names"))))),
+                        React__default.createElement(Box, { sx: { minWidth: 150 } },
+                            React__default.createElement(FormControl, { fullWidth: true, size: "small" },
+                                React__default.createElement(Select, { value: aggregationMode, onChange: (e) => {
+                                        setAggregationModeState(e.target.value);
+                                    }, renderValue: (selected) => selected === "last" ? "Agg: Last" : "Agg: Avg" },
+                                    React__default.createElement(MenuItem, { value: "avg" }, "Average"),
+                                    React__default.createElement(MenuItem, { value: "last" }, "Last value")))),
                         React__default.createElement(Divider, { orientation: "vertical", flexItem: true }),
                         React__default.createElement(FormControlLabel, { checked: customOptions.combinedView, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Combined"), style: { margin: "0" }, onChange: (e, checked) => {
                                 setCustomOptions((prevOptions) => (Object.assign(Object.assign({}, prevOptions), { combinedView: checked })));
                             } }),
-                        React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Auto Refresh"), style: { margin: "0" }, onChange: (e, checked) => {
+                        React__default.createElement(FormControlLabel, { checked: autoRefresh, control: React__default.createElement(Switch, { color: "primary", size: "small" }), label: React__default.createElement("span", { style: { fontSize: "0.75rem", fontWeight: 600 } }, "Auto"), style: { margin: "0" }, onChange: (e, checked) => {
                                 if (checked) {
                                     // When enabling auto-refresh, set end to now
                                     // and keep the current period to calculate start
@@ -12121,8 +12134,12 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                 setAutoRefresh(checked);
                             } }),
                         React__default.createElement(Divider, { orientation: "vertical", flexItem: true }),
-                        React__default.createElement(Button, { variant: "outlined", size: "small", color: "primary", startIcon: React__default.createElement(ZoomIn, null), onClick: handleZoomIn, style: { fontSize: "0.7rem" } }, "Zoom"),
-                        React__default.createElement(Button, { variant: "outlined", size: "small", color: "primary", startIcon: React__default.createElement(Restore, null), onClick: handleRestoreZoom, style: { fontSize: "0.7rem" } }, "Restore")))),
+                        React__default.createElement(Tooltip, { title: "Area zoom", arrow: true },
+                            React__default.createElement(IconButton$1, { color: "primary", onClick: handleZoomIn, size: "small" },
+                                React__default.createElement(ZoomIn, { fontSize: "small" }))),
+                        React__default.createElement(Tooltip, { title: "Restore zoom", arrow: true },
+                            React__default.createElement(IconButton$1, { color: "primary", onClick: handleRestoreZoom, size: "small" },
+                                React__default.createElement(Restore, { fontSize: "small" })))))),
             React__default.createElement(Grid2, { size: { md: 2, sm: 6, xs: 12 }, container: true, justifyContent: "flex-end", alignItems: "center" },
                 React__default.createElement(Paper, { elevation: 0, sx: {
                         p: 1,
@@ -14513,13 +14530,25 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
     const opts = customOptions || {
         showGridLines: true,
         showSymbols: false,
-        smoothLines: true,
+        smoothLines: false,
+        steppedLines: true,
         showLegend: true,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     };
+    const getTagName = useCallback((tag) => tag.Alias || tag.TagName, []);
+    const getActiveAxisTag = useCallback((tags) => {
+        if (tags.length === 0)
+            return null;
+        if (highlightedSeries) {
+            const highlightedTag = tags.find((tag) => tag.IsVisible && getTagName(tag) === highlightedSeries);
+            if (highlightedTag)
+                return highlightedTag;
+        }
+        return tags.find((tag) => tag.IsVisible) || null;
+    }, [highlightedSeries, getTagName]);
     // Clear zoom state when time scope changes or combined view toggles
     useEffect(() => {
         const currentTimeScope = `${timeScopeStart.getTime()}-${timeScopeEnd.getTime()}`;
@@ -14538,13 +14567,14 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         prevCombinedViewRef.current = opts.combinedView;
     }, [timeScopeStart, timeScopeEnd, opts.combinedView]);
     // Helper to build yAxis config with scale settings
-    const buildYAxisConfig = useCallback((tag, gridIndex, position, offset = 0) => {
+    const buildYAxisConfig = useCallback((tag, gridIndex, position, offset = 0, isAxisVisible = true) => {
         const baseConfig = {
             gridIndex,
             type: "value",
-            name: opts.showYAxisNames ? tag.Alias || tag.TagName : "",
+            show: isAxisVisible,
+            name: isAxisVisible && opts.showYAxisNames ? getTagName(tag) : "",
             nameLocation: "middle",
-            nameGap: 45 + offset,
+            nameGap: 45,
             position,
             offset,
             splitNumber: 8, // Suggest 8 divisions, ECharts will adjust for readability
@@ -14554,21 +14584,24 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 fontWeight: "bold",
             },
             axisLine: {
-                show: true,
+                show: isAxisVisible,
                 lineStyle: {
                     color: tag.Color,
+                    width: 2,
                 },
             },
             axisTick: {
-                show: true,
+                show: isAxisVisible,
             },
             axisLabel: {
-                show: true,
+                show: isAxisVisible,
                 color: tag.Color,
                 fontSize: 10,
             },
             splitLine: {
-                show: position === "left" && offset === 0 ? opts.showGridLines : false,
+                show: isAxisVisible && position === "left" && offset === 0
+                    ? opts.showGridLines
+                    : false,
                 lineStyle: {
                     color: "#e0e0e0",
                     type: "solid",
@@ -14600,7 +14633,7 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
             delete baseConfig.scale;
         }
         return baseConfig;
-    }, [opts.showGridLines, true, opts.showYAxisNames]);
+    }, [opts.showGridLines, opts.showYAxisNames, getTagName]);
     // Determine if we should use separate grids (analog/digital)
     const useSeparateGrids = !opts.combinedView &&
         processedData.analogTags.length > 0 &&
@@ -14731,21 +14764,8 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         isUserDraggingRef.current = false;
     }, [handleCursor2Change]);
     const chartOptions = useMemo(() => {
-        // Calculate dynamic margins based on number of tags to ensure all Y-axes are visible
-        // Formula: Each pair of tags (left + right) needs 60px offset
-        // Base margin is 60px, then add 60px for each additional pair
-        const calculateMargin = (tagCount) => {
-            if (tagCount === 0)
-                return 60;
-            // Number of axes on each side (alternating left/right)
-            const axesPerSide = Math.ceil(tagCount / 2);
-            // Last axis offset = (axesPerSide - 1) * 60
-            // Total margin = last offset + base margin (60px)
-            return (axesPerSide - 1) * 60 + 60;
-        };
-        const analogMargin = calculateMargin(processedData.analogTags.length);
-        const digitalMargin = calculateMargin(processedData.digitalTags.length);
-        const combinedMargin = calculateMargin(processedData.analogTags.length + processedData.digitalTags.length);
+        const chartLeftMargin = opts.showYAxisNames ? 96 : 72;
+        const chartRightMargin = 32;
         return {
             animation: false,
             backgroundColor: "#fff",
@@ -14754,16 +14774,16 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 ? [
                     {
                         id: "analog",
-                        left: `${analogMargin}px`,
-                        right: `${analogMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: opts.showLegend ? "70px" : "50px", // Increased to prevent cursor circle clipping
                         bottom: "55%",
                         containLabel: false,
                     },
                     {
                         id: "digital",
-                        left: `${digitalMargin}px`,
-                        right: `${digitalMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: "55%",
                         bottom: 60,
                         containLabel: false,
@@ -14772,8 +14792,8 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                 : [
                     {
                         id: "combined",
-                        left: `${combinedMargin}px`,
-                        right: `${combinedMargin}px`,
+                        left: `${chartLeftMargin}px`,
+                        right: `${chartRightMargin}px`,
                         top: opts.showLegend ? "70px" : "50px", // Increased to prevent cursor circle clipping
                         bottom: 60,
                         containLabel: false,
@@ -15000,34 +15020,25 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
             yAxis: (() => {
                 const yAxisArray = [];
                 if (useSeparateGrids) {
-                    // Separate view with both analog and digital: analog in grid 0, digital in grid 1
-                    // Add analog axes (grid 0)
+                    const activeAnalogTag = getActiveAxisTag(processedData.analogTags);
+                    const activeDigitalTag = getActiveAxisTag(processedData.digitalTags);
                     processedData.analogTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeAnalogTag));
                     });
-                    // Add digital axes (grid 1)
-                    processedData.digitalTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 1, position, offset));
+                    processedData.digitalTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 1, "left", 0, tag === activeDigitalTag));
                     });
                 }
                 else {
-                    // Combined view or only one type: all axes in grid 0
-                    // Add analog axes
-                    processedData.analogTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const offset = Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                    const activeCombinedTag = getActiveAxisTag([
+                        ...processedData.analogTags,
+                        ...processedData.digitalTags,
+                    ]);
+                    processedData.analogTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeCombinedTag));
                     });
-                    // Add digital axes
-                    processedData.digitalTags.forEach((tag, idx) => {
-                        const position = idx % 2 === 0 ? "left" : "right";
-                        const baseOffset = Math.ceil(processedData.analogTags.length / 2) * 60;
-                        const offset = baseOffset + Math.floor(idx / 2) * 60;
-                        yAxisArray.push(buildYAxisConfig(tag, 0, position, offset));
+                    processedData.digitalTags.forEach((tag) => {
+                        yAxisArray.push(buildYAxisConfig(tag, 0, "left", 0, tag === activeCombinedTag));
                     });
                 }
                 // If no axes were created at all, add a default one to prevent errors
@@ -15057,7 +15068,8 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                         xAxisIndex: 0,
                         yAxisIndex: idx, // Map to corresponding analog yAxis
                         data: s.data,
-                        smooth: opts.smoothLines,
+                        smooth: opts.steppedLines ? false : opts.smoothLines,
+                        step: opts.steppedLines ? "end" : undefined,
                         symbol: opts.showSymbols ? "circle" : "none",
                         sampling: "lttb",
                         show: s.visible,
@@ -15126,10 +15138,25 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
                         if (!params || params.length === 0)
                             return "";
                         const date = new Date(params[0].value[0]);
+                        const formatTooltipValue = (value) => {
+                            if (value === null || value === undefined || value === "") {
+                                return "-";
+                            }
+                            const numericValue = Number(value);
+                            if (!Number.isFinite(numericValue)) {
+                                return String(value);
+                            }
+                            if (Number.isInteger(numericValue)) {
+                                return numericValue.toString();
+                            }
+                            return numericValue.toLocaleString(undefined, {
+                                maximumFractionDigits: 5,
+                            });
+                        };
                         let content = `<div style="font-weight: bold; margin-bottom: 5px;">${date.toLocaleString()}</div>`;
                         params.forEach((param) => {
                             const marker = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${param.color};margin-right:5px;"></span>`;
-                            content += `<div>${marker}${param.seriesName}: ${param.value[1]}</div>`;
+                            content += `<div>${marker}${param.seriesName}: ${formatTooltipValue(param.value[1])}</div>`;
                         });
                         return content;
                     },
@@ -15200,6 +15227,7 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         timeScopeStart,
         timeScopeEnd,
         buildYAxisConfig,
+        getActiveAxisTag,
         zoomState,
         useSeparateGrids,
     ]);
@@ -15499,9 +15527,9 @@ const useSearchViewTags = ({ viewId }) => {
         enabled: viewId !== null,
     });
 };
-const useSearchSeries = ({ start, end, tagIds, autoRefresh = false, }) => {
+const useSearchSeries = ({ start, end, tagIds, aggregationMode, autoRefresh = false, }) => {
     return useQuery({
-        queryKey: ["series-v2", start, end, tagIds],
+        queryKey: ["series-v2", start, end, tagIds, aggregationMode],
         queryFn: (_a) => __awaiter(void 0, [_a], void 0, function* ({ signal }) {
             try {
                 if (!tagIds || tagIds.length === 0) {
@@ -15512,6 +15540,7 @@ const useSearchSeries = ({ start, end, tagIds, autoRefresh = false, }) => {
                     end: end || new Date().getTime(),
                     tagIds,
                     sampleCount: 1000,
+                    aggregationMode,
                 }, {
                     signal,
                 });
@@ -15528,14 +15557,60 @@ const useSearchSeries = ({ start, end, tagIds, autoRefresh = false, }) => {
         enabled: tagIds.length > 0,
     });
 };
+const VALID_SCOPE_VALUES = [
+    "10 min",
+    "1 hour",
+    "4 hours",
+    "12 hours",
+    "1 day",
+    "10 days",
+    "custom",
+];
+const getInitialUrlParams = () => {
+    if (typeof window === "undefined") {
+        return {
+            viewId: null,
+            start: null,
+            end: null,
+            period: null,
+        };
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    const viewParam = Number(searchParams.get("view"));
+    const startParam = Number(searchParams.get("start"));
+    const endParam = Number(searchParams.get("end"));
+    const periodParam = searchParams.get("period");
+    return {
+        viewId: Number.isInteger(viewParam) ? viewParam : null,
+        start: Number.isFinite(startParam) ? startParam : null,
+        end: Number.isFinite(endParam) ? endParam : null,
+        period: VALID_SCOPE_VALUES.includes(periodParam)
+            ? periodParam
+            : null,
+    };
+};
 const TrendingsPageV2 = () => {
     const [autoRefresh, setAutoRefresh] = useState(false);
-    const [chartOptions, setChartOptions] = useState(null);
+    const [chartOptions, setChartOptions] = useState({
+        showGridLines: true,
+        showSymbols: false,
+        smoothLines: false,
+        steppedLines: true,
+        showLegend: false,
+        showTooltip: true,
+        combinedView: true,
+        showToolbox: true,
+        showYAxisNames: false,
+    });
+    const [aggregationMode, setAggregationMode] = useState("avg");
     const [error, setError] = useState("");
     const [viewId, setViewId] = useState(null);
     const [chartInstance, setChartInstance] = useState(null);
     const [dataLoadedTrigger, setDataLoadedTrigger] = useState(0);
-    const { state: { viewSelected, viewTags, timeScopeStart, timeScopeEnd }, actions: { setViews, setViewTagsAndRefetch, setViewSelected, setSeriesMinMax, resetCursors, }, } = useTrendingContextV2();
+    const { state: { viewSelected, viewTags, timeScopeStart, timeScopeEnd, scope }, actions: { setViews, setViewTagsAndRefetch, setViewSelected, setTotalScope, setSeriesMinMax, resetCursors, }, } = useTrendingContextV2();
+    const initialUrlParamsRef = useRef(getInitialUrlParams());
+    const initialTimeScopeAppliedRef = useRef(false);
+    const initialViewSelectionResolvedRef = useRef(false);
     // Fetch views
     const { data: views, isLoading: viewsLoading, isError: viewsIsError, error: viewsError, isSuccess: viewSuccess, } = useSearchViews({ autoRefresh });
     // Fetch view tags
@@ -15580,6 +15655,7 @@ const TrendingsPageV2 = () => {
         start: timeScopeStart.getTime(),
         end: timeScopeEnd.getTime(),
         tagIds: queryTagIds,
+        aggregationMode,
         autoRefresh,
     });
     // Filter and reorder series to match current viewTags order
@@ -15634,6 +15710,21 @@ const TrendingsPageV2 = () => {
     }, [series, tagIds, queryTagIds, viewTags]);
     // Calculate overall min/max values from filtered series data
     const seriesMinMaxData = useSeriesMinMax(filteredSeries, tagIds);
+    // Apply explicit time range from URL once on initial load
+    useEffect(() => {
+        if (initialTimeScopeAppliedRef.current)
+            return;
+        const { start, end, period } = initialUrlParamsRef.current;
+        initialTimeScopeAppliedRef.current = true;
+        if (start === null || end === null || period === null || start >= end) {
+            return;
+        }
+        setTotalScope({
+            start: new Date(start),
+            end: new Date(end),
+            scope: period,
+        });
+    }, [setTotalScope]);
     // Load initial view when views are fetched
     useEffect(() => {
         if (!viewSuccess || !views || !Array.isArray(views))
@@ -15642,12 +15733,26 @@ const TrendingsPageV2 = () => {
         setViews(views);
         // Only set initial view if none is selected
         if (!viewSelected) {
+            const initialViewId = initialUrlParamsRef.current.viewId;
+            if (!initialViewSelectionResolvedRef.current && initialViewId !== null) {
+                initialViewSelectionResolvedRef.current = true;
+                const urlView = views.find((view) => view.ViewId === initialViewId);
+                if (urlView) {
+                    setViewId(urlView.ViewId);
+                    setViewSelected(urlView);
+                    return;
+                }
+            }
             const lastCreated = views.reduce((prev, current) => prev && prev.ViewId > current.ViewId ? prev : current, null);
             if (lastCreated) {
+                initialViewSelectionResolvedRef.current = true;
                 setViewId(lastCreated.ViewId);
                 setViewSelected(lastCreated);
             }
         }
+        else {
+            initialViewSelectionResolvedRef.current = true;
+        }
     }, [viewSuccess, views, viewSelected, setViews, setViewSelected]);
     // Update viewId when viewSelected changes (e.g., from LoadViewModal)
     useEffect(() => {
@@ -15655,6 +15760,26 @@ const TrendingsPageV2 = () => {
             setViewId(viewSelected.ViewId);
         }
     }, [viewSelected]);
+    useEffect(() => {
+        if (typeof window === "undefined" ||
+            !initialTimeScopeAppliedRef.current ||
+            !initialViewSelectionResolvedRef.current) {
+            return;
+        }
+        const searchParams = new URLSearchParams(window.location.search);
+        if (viewSelected) {
+            searchParams.set("view", String(viewSelected.ViewId));
+        }
+        else {
+            searchParams.delete("view");
+        }
+        searchParams.set("start", String(timeScopeStart.getTime()));
+        searchParams.set("end", String(timeScopeEnd.getTime()));
+        searchParams.set("period", scope);
+        const newSearch = searchParams.toString();
+        const newUrl = `${window.location.pathname}${newSearch ? `?${newSearch}` : ""}${window.location.hash}`;
+        window.history.replaceState(null, "", newUrl);
+    }, [viewSelected, timeScopeStart, timeScopeEnd, scope]);
     // Load view tags when fetched - ONLY when viewId changes, not on every data refetch
     // This preserves local order changes (from drag-and-drop) until a new view is loaded
     const loadedViewIdRef = useRef(null);
@@ -15806,7 +15931,7 @@ const TrendingsPageV2 = () => {
                 } },
                 React__default.createElement(CircularProgress, { size: "3rem" }))),
             React__default.createElement("div", { style: { flexShrink: 0 } },
-                React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, chartInstance: chartInstance })),
+                React__default.createElement(HeaderSectionV2, { autoRefresh: autoRefresh, setAutoRefresh: setAutoRefresh, setChartOptions: setChartOptions, setAggregationMode: setAggregationMode, chartInstance: chartInstance })),
             React__default.createElement(Divider, { sx: { my: 2 } }),
             React__default.createElement("div", { style: {
                     flexGrow: 1,