From bd7fb8f23c4d8229d909e90f4b3b962cbc764e8b Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Sun, 9 Aug 2026 02:33:47 -0600
Subject: [PATCH] fix: disable recharts animation on monitoring charts

---
 .../dashboard/monitoring/free/container/docker-block-chart.tsx  | 2 ++
 .../dashboard/monitoring/free/container/docker-cpu-chart.tsx    | 1 +
 .../dashboard/monitoring/free/container/docker-disk-chart.tsx   | 1 +
 .../dashboard/monitoring/free/container/docker-memory-chart.tsx | 1 +
 .../monitoring/free/container/docker-network-chart.tsx          | 2 ++
 .../monitoring/paid/container/container-block-chart.tsx         | 2 ++
 .../dashboard/monitoring/paid/container/container-cpu-chart.tsx | 1 +
 .../monitoring/paid/container/container-memory-chart.tsx        | 1 +
 .../monitoring/paid/container/container-network-chart.tsx       | 2 ++
 .../components/dashboard/monitoring/paid/servers/cpu-chart.tsx  | 1 +
 .../dashboard/monitoring/paid/servers/memory-chart.tsx          | 1 +
 .../dashboard/monitoring/paid/servers/network-chart.tsx         | 2 ++
 .../dashboard/requests/request-distribution-chart.tsx           | 1 +
 13 files changed, 18 insertions(+)

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 01989753a..15c68b6b9 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
@@ -85,6 +85,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="readMb"
 					stroke="var(--color-readMb)"
 					fill="url(#fillBlockRead)"
@@ -92,6 +93,7 @@ export const DockerBlockChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					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 071c485c1..da8252a56 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
@@ -69,6 +69,7 @@ export const DockerCpuChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					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 ceaa0f0b7..987d956d0 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
@@ -71,6 +71,7 @@ export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					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 2c4ff6da8..bc8d9c3a9 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
@@ -75,6 +75,7 @@ export const DockerMemoryChart = ({
 				/>
 				<Area
 					type="monotone"
+					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 92f23e75b..3bd9c65ce 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
@@ -81,6 +81,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					isAnimationActive={false}
 					dataKey="inMB"
 					stroke="var(--color-inMB)"
 					fill="url(#fillNetIn)"
@@ -88,6 +89,7 @@ export const DockerNetworkChart = ({ accumulativeData }: Props) => {
 				/>
 				<Area
 					type="monotone"
+					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 eca265765..5b378c20d 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
@@ -154,6 +154,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
 							name="Write"
 							dataKey="write"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillWrite)"
 							stroke="hsl(142, 71%, 45%)"
 							strokeWidth={2}
@@ -163,6 +164,7 @@ export const ContainerBlockChart = ({ data }: Props) => {
 							name="Read"
 							dataKey="read"
 							type="monotone"
+							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 5a4996ba2..e4c96df2e 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
@@ -111,6 +111,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
 							name="CPU"
 							dataKey="cpu"
 							type="monotone"
+							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 23d934c06..22a9e4ac7 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
@@ -132,6 +132,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
 							name="Memory"
 							dataKey="memory"
 							type="monotone"
+							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 f9f033b36..de869614d 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
@@ -161,6 +161,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							name="Input"
 							dataKey="input"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillInput)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -169,6 +170,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
 							name="Output"
 							dataKey="output"
 							type="monotone"
+							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 2ac560ce6..4d29c56b9 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
@@ -98,6 +98,7 @@ export function CPUChart({ data }: CPUChartProps) {
 							name="CPU"
 							dataKey="cpu"
 							type="monotone"
+							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 b54208652..920ae9a2d 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
@@ -115,6 +115,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
 							yAxisId="left"
 							dataKey="memUsed"
 							type="monotone"
+							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 11eec853b..249df308b 100644
--- a/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
@@ -120,6 +120,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							name="Network In"
 							dataKey="networkIn"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillNetworkIn)"
 							stroke="hsl(var(--chart-3))"
 							strokeWidth={2}
@@ -128,6 +129,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
 							name="Network Out"
 							dataKey="networkOut"
 							type="monotone"
+							isAnimationActive={false}
 							fill="url(#fillNetworkOut)"
 							stroke="hsl(var(--chart-4))"
 							strokeWidth={2}
diff --git a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
index d9bc17973..cd6a97f5c 100644
--- a/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
+++ b/apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
@@ -91,6 +91,7 @@ export const RequestDistributionChart = ({
 				<Area
 					dataKey="count"
 					type="monotone"
+					isAnimationActive={false}
 					fill="hsl(var(--chart-1))"
 					fillOpacity={0.4}
 					stroke="hsl(var(--chart-1))"