@dexteel/mesf-core 7.20.1 → 7.21.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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

@@ -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,
         showToolbox: true,
         showYAxisNames: true,
     });
+    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" },
@@ -12061,17 +12068,20 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                         ...(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") })));
+                                        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) => {
                                         const labels = {
                                             grid: "Grid",
                                             symbols: "Symbols",
                                             smooth: "Smooth",
+                                            stepped: "Stepped",
                                             tooltip: "Tooltip",
                                             toolbox: "Toolbox",
                                             yAxisNames: "Y-Axis Names",
@@ -12089,6 +12099,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,6 +12111,15 @@ 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"
+                                        ? "Aggregation: Last value"
+                                        : "Aggregation: Average" },
+                                    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 })));
@@ -14513,7 +14535,8 @@ 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,
@@ -15057,7 +15080,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 +15150,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;
                     },
@@ -15499,9 +15538,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 +15551,7 @@ const useSearchSeries = ({ start, end, tagIds, autoRefresh = false, }) => {
                     end: end || new Date().getTime(),
                     tagIds,
                     sampleCount: 1000,
+                    aggregationMode,
                 }, {
                     signal,
                 });
@@ -15528,14 +15568,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: false,
+        showToolbox: true,
+        showYAxisNames: true,
+    });
+    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 +15666,7 @@ const TrendingsPageV2 = () => {
         start: timeScopeStart.getTime(),
         end: timeScopeEnd.getTime(),
         tagIds: queryTagIds,
+        aggregationMode,
         autoRefresh,
     });
     // Filter and reorder series to match current viewTags order
@@ -15634,6 +15721,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 +15744,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 +15771,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 +15942,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,