From b61bff62d14c4bd7541e472b70ea3098eae31224 Mon Sep 17 00:00:00 2001
From: Maks Pikov <mixelburg@users.noreply.github.com>
Date: Fri, 22 May 2026 22:08:36 +0000
Subject: [PATCH] fix(monitoring): disable animation and use linear
 interpolation in charts

Recharts' default animation morphs Y-values in place instead of scrolling
left as new data arrives. Combined with monotone smoothing, this creates
an artifact where peaks appear larger than they actually are during the
transition. Switch to linear interpolation and disable animation on all
monitoring Area charts so the displayed data is always accurate.

Fixes #4414
---
 .../monitoring/free/container/docker-block-chart.tsx        | 6 ++++--
 .../monitoring/free/container/docker-cpu-chart.tsx          | 3 ++-
 .../monitoring/free/container/docker-disk-chart.tsx         | 3 ++-
 .../monitoring/free/container/docker-memory-chart.tsx       | 3 ++-
 .../monitoring/free/container/docker-network-chart.tsx      | 6 ++++--
 .../monitoring/paid/container/container-block-chart.tsx     | 6 ++++--
 .../monitoring/paid/container/container-cpu-chart.tsx       | 3 ++-
 .../monitoring/paid/container/container-memory-chart.tsx    | 3 ++-
 .../monitoring/paid/container/container-network-chart.tsx   | 6 ++++--
 .../dashboard/monitoring/paid/servers/cpu-chart.tsx         | 3 ++-
 .../dashboard/monitoring/paid/servers/memory-chart.tsx      | 3 ++-
 .../dashboard/monitoring/paid/servers/network-chart.tsx     | 6 ++++--
 12 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
index 8518921027..df7d2aa244 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
@@ -83,14 +83,16 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 					}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="readMb"
 					stroke="var(--color-readMb)"
 					fill="url(#fillBlockRead)"
 					strokeWidth={2}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="writeMb"
 					stroke="var(--color-writeMb)"
 					fill="url(#fillBlockWrite)"
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
index 40d08684fe..4af35e62ca 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
@@ -68,7 +68,8 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
 					}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="usage"
 					stroke="var(--color-usage)"
 					fill="url(#fillCpu)"
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
index 2aa660bf36..45b9f99735 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
@@ -70,7 +70,8 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
 					}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="usedGb"
 					stroke="var(--color-usedGb)"
 					fill="url(#fillDiskUsed)"
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
index 30cf56d4ab..ed9c5d281d 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
@@ -74,7 +74,8 @@ export const DockerMemoryChart = ({
 					}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="usage"
 					stroke="var(--color-usage)"
 					fill="url(#fillMemory)"
diff --git a/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
index fcb959722c..cadaab9053 100644
--- a/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
@@ -79,14 +79,16 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 					}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="inMB"
 					stroke="var(--color-inMB)"
 					fill="url(#fillNetIn)"
 					strokeWidth={2}
 				/>
 				<Area
-					type="monotone"
+					type="linear"
+					isAnimationActive={false}
 					dataKey="outMB"
 					stroke="var(--color-outMB)"
 					fill="url(#fillNetOut)"
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx
index 32e30f62ab..313f3c9f46 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx
@@ -153,7 +153,8 @@ export const ContainerBlockChart = ({ data }: Props) => {
 						<Area
 							name="Write"
 							dataKey="write"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillWrite)"
 							stroke="hsl(142, 71%, 45%)"
 							strokeWidth={2}
@@ -162,7 +163,8 @@ export const ContainerBlockChart = ({ data }: Props) => {
 						<Area
 							name="Read"
 							dataKey="read"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillRead)"
 							stroke="hsl(217, 91%, 60%)"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
index 76b010c7c7..52b45aba6b 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
@@ -110,7 +110,8 @@ export const ContainerCPUChart = ({ data }: Props) => {
 						<Area
 							name="CPU"
 							dataKey="cpu"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillCPU)"
 							stroke="hsl(var(--chart-1))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
index ff5e858432..168c0375ae 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
@@ -131,7 +131,8 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 						<Area
 							name="Memory"
 							dataKey="memory"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillMemory)"
 							stroke="hsl(var(--chart-2))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
index f962e2ae36..dd96cb23e1 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
@@ -160,7 +160,8 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 						<Area
 							name="Input"
 							dataKey="input"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillInput)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -168,7 +169,8 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 						<Area
 							name="Output"
 							dataKey="output"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillOutput)"
 							stroke="hsl(var(--chart-4))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
index efa84ffc48..6b1568a155 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
@@ -97,7 +97,8 @@ export function CPUChart({ data }: CPUChartProps) {
 						<Area
 							name="CPU"
 							dataKey="cpu"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillCPU)"
 							stroke="hsl(var(--chart-1))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
index 1981dace32..dd9d81fbc2 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
@@ -114,7 +114,8 @@ export function MemoryChart({ data }: MemoryChartProps) {
 						<Area
 							yAxisId="left"
 							dataKey="memUsed"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillMemory)"
 							stroke="hsl(var(--chart-2))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx b/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
index bbb522fdc3..6468ba4d63 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
@@ -119,7 +119,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
 						<Area
 							name="Network In"
 							dataKey="networkIn"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillNetworkIn)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -127,7 +128,8 @@ export function NetworkChart({ data }: NetworkChartProps) {
 						<Area
 							name="Network Out"
 							dataKey="networkOut"
-							type="monotone"
+							type="linear"
+							isAnimationActive={false}
 							fill="url(#fillNetworkOut)"
 							stroke="hsl(var(--chart-4))"
 							strokeWidth={2}