@dexteel/mesf-core 7.21.0 → 7.22.0

package/.release-please-manifest.json

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

package/CHANGELOG.md

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

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';
@@ -11861,9 +11861,9 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
         steppedLines: true,
         showLegend: false,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     });
     const [aggregationMode, setAggregationModeState] = useState("avg");
     // View management state
@@ -11999,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) => {
@@ -12042,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,
@@ -12062,7 +12065,7 @@ 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"] : []),
@@ -12076,20 +12079,10 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                                         const selected = e.target.value;
                                         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",
-                                        };
-                                        return (React__default.createElement("span", { style: { fontSize: "0.75rem" } }, selected
-                                            .map((val) => labels[val])
-                                            .join(", ")));
-                                    } },
+                                    }, 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")),
@@ -12115,16 +12108,14 @@ const HeaderSectionV2 = React__default.memo(({ autoRefresh, setAutoRefresh, setC
                             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" },
+                                    }, 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
@@ -12143,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,
@@ -14539,10 +14534,21 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         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()}`;
@@ -14561,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
@@ -14577,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",
@@ -14623,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 &&
@@ -14754,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",
@@ -14777,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,
@@ -14795,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,
@@ -15023,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
@@ -15239,6 +15227,7 @@ const TrendingChartV2 = ({ series = [], customOptions, isLoading = false, onChar
         timeScopeStart,
         timeScopeEnd,
         buildYAxisConfig,
+        getActiveAxisTag,
         zoomState,
         useSeparateGrids,
     ]);
@@ -15609,9 +15598,9 @@ const TrendingsPageV2 = () => {
         steppedLines: true,
         showLegend: false,
         showTooltip: true,
-        combinedView: false,
+        combinedView: true,
         showToolbox: true,
-        showYAxisNames: true,
+        showYAxisNames: false,
     });
     const [aggregationMode, setAggregationMode] = useState("avg");
     const [error, setError] = useState("");