From 60c2b4c4d43efaf365ff6315f9851f2a9fde0cde Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Fri, 2 Jan 2026 16:40:08 +0100
Subject: [PATCH] refactor: replace AreaChart with CustomAreaChart in
 AnalyticsDashboard and add CustomAreaChart component

---
 .../dashboard/AnalyticsDashboard.tsx          |  21 +--
 .../dashboard/CustomAreaChart.tsx             | 126 ++++++++++++++++++
 2 files changed, 133 insertions(+), 14 deletions(-)
 create mode 100644 web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx

diff --git a/web/oss/src/components/pages/observability/dashboard/AnalyticsDashboard.tsx b/web/oss/src/components/pages/observability/dashboard/AnalyticsDashboard.tsx
index ad48f34ac..e77a56296 100644
--- a/web/oss/src/components/pages/observability/dashboard/AnalyticsDashboard.tsx
+++ b/web/oss/src/components/pages/observability/dashboard/AnalyticsDashboard.tsx
@@ -1,7 +1,6 @@
 import {useMemo, type ComponentProps} from "react"
 
 import {ChartLine} from "@phosphor-icons/react"
-import {AreaChart} from "@tremor/react"
 import {Spin} from "antd"
 import {createUseStyles} from "react-jss"
 
@@ -9,6 +8,7 @@ import {formatCompactNumber, formatCurrency, formatNumber} from "@/oss/lib/helpe
 import {JSSTheme} from "@/oss/lib/Types"
 import {useObservabilityDashboard} from "@/oss/state/observability"
 
+import CustomAreaChart from "./CustomAreaChart"
 import WidgetCard from "./widgetCard"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -79,22 +79,15 @@ const AnalyticsDashboard = ({layout = "grid-2"}: AnalyticsDashboardProps) => {
     const chartData = useMemo(() => (data?.data?.length ? data.data : []), [data])
     const hasData = (data?.total_count ?? 0) > 0
 
-    const defaultGraphProps = useMemo<ComponentProps<typeof AreaChart>>(
+    const defaultGraphProps = useMemo<ComponentProps<typeof CustomAreaChart>>(
         () => ({
             className: "h-[140px]",
             colors: ["cyan-600", "rose"],
-            connectNulls: true,
-            tickGap: 20,
-            curveType: "monotone",
-            showGridLines: true,
-            showLegend: false,
+            tickCount: 5,
             index: "timestamp",
             data: chartData,
             categories: [],
             valueFormatter: (value) => formatCompactNumber(value),
-            yAxisWidth: 48,
-            showXAxis: true,
-            showYAxis: true,
         }),
         [chartData],
     )
@@ -128,7 +121,7 @@ const AnalyticsDashboard = ({layout = "grid-2"}: AnalyticsDashboardProps) => {
                     }
                 >
                     {hasData ? (
-                        <AreaChart
+                        <CustomAreaChart
                             {...defaultGraphProps}
                             categories={
                                 (data?.failure_rate ?? 0) > 0
@@ -153,7 +146,7 @@ const AnalyticsDashboard = ({layout = "grid-2"}: AnalyticsDashboardProps) => {
                     }
                 >
                     {hasData ? (
-                        <AreaChart
+                        <CustomAreaChart
                             {...defaultGraphProps}
                             categories={["latency"]}
                             valueFormatter={(value) => `${formatCompactNumber(value)}ms`}
@@ -183,7 +176,7 @@ const AnalyticsDashboard = ({layout = "grid-2"}: AnalyticsDashboardProps) => {
                     }
                 >
                     {hasData ? (
-                        <AreaChart
+                        <CustomAreaChart
                             {...defaultGraphProps}
                             categories={["cost"]}
                             colors={["cyan-600"]}
@@ -214,7 +207,7 @@ const AnalyticsDashboard = ({layout = "grid-2"}: AnalyticsDashboardProps) => {
                     }
                 >
                     {hasData ? (
-                        <AreaChart
+                        <CustomAreaChart
                             {...defaultGraphProps}
                             categories={["total_tokens"]}
                             colors={["cyan-600"]}
diff --git a/web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx b/web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx
new file mode 100644
index 000000000..c7869bdfa
--- /dev/null
+++ b/web/oss/src/components/pages/observability/dashboard/CustomAreaChart.tsx
@@ -0,0 +1,126 @@
+import React from "react"
+
+import {theme} from "antd"
+import {
+    Area,
+    CartesianGrid,
+    AreaChart as ReAreaChart,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from "recharts"
+
+import {formatCompactNumber} from "@/oss/lib/helpers/formatters"
+
+interface CustomAreaChartProps {
+    data: any[]
+    categories: string[]
+    index: string
+    colors?: string[]
+    valueFormatter?: (value: number) => string
+    tickCount?: number
+    allowDecimals?: boolean
+    className?: string
+}
+
+// Map Tremor-like color names to hex values (simplified for this specific use case)
+// You might want to expand this or import from a central theme file if available
+const colorMap: Record<string, string> = {
+    "cyan-600": "#0891b2",
+    rose: "#e11d48",
+    gray: "#6b7280",
+}
+
+const CustomAreaChart: React.FC<CustomAreaChartProps> = ({
+    data,
+    categories,
+    index,
+    colors = ["cyan-600"],
+    valueFormatter = (value: number) => formatCompactNumber(value),
+    tickCount = 5,
+    allowDecimals = false,
+    className,
+}) => {
+    const {token} = theme.useToken()
+
+    return (
+        <div className={`w-full ${className}`}>
+            <ResponsiveContainer width="100%" height="100%">
+                <ReAreaChart data={data} margin={{top: 5, right: 5, left: -20, bottom: 0}}>
+                    <defs>
+                        {categories.map((category, idx) => {
+                            const colorKey = colors[idx % colors.length]
+                            const color = colorMap[colorKey] || colorKey
+                            return (
+                                <linearGradient
+                                    key={category}
+                                    id={`color-${category}`}
+                                    x1="0"
+                                    y1="0"
+                                    x2="0"
+                                    y2="1"
+                                >
+                                    <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                                    <stop offset="95%" stopColor={color} stopOpacity={0} />
+                                </linearGradient>
+                            )
+                        })}
+                    </defs>
+                    <CartesianGrid
+                        strokeDasharray="3 3"
+                        vertical={false}
+                        stroke={token.colorBorderSecondary}
+                    />
+                    <XAxis
+                        dataKey={index}
+                        tickLine={false}
+                        axisLine={false}
+                        tick={{fontSize: 12, fill: token.colorTextSecondary}}
+                        tickMargin={10}
+                        minTickGap={20}
+                    />
+                    <YAxis
+                        tickLine={false}
+                        axisLine={false}
+                        tick={{fontSize: 12, fill: token.colorTextSecondary}}
+                        tickFormatter={valueFormatter}
+                        tickCount={tickCount}
+                        interval={0}
+                        domain={[0, "auto"]}
+                        allowDecimals={allowDecimals}
+                    />
+                    <Tooltip
+                        contentStyle={{
+                            backgroundColor: token.colorBgElevated,
+                            borderColor: token.colorBorder,
+                            borderRadius: token.borderRadius,
+                            boxShadow: token.boxShadowSecondary,
+                            fontSize: 12,
+                        }}
+                        itemStyle={{color: token.colorText}}
+                        labelStyle={{color: token.colorTextSecondary, marginBottom: 8}}
+                        formatter={(value: number) => [valueFormatter(value), ""]}
+                    />
+                    {categories.map((category, idx) => {
+                        const colorKey = colors[idx % colors.length]
+                        const color = colorMap[colorKey] || colorKey
+                        return (
+                            <Area
+                                key={category}
+                                type="monotone"
+                                dataKey={category}
+                                stroke={color}
+                                fillOpacity={1}
+                                fill={`url(#color-${category})`}
+                                strokeWidth={2}
+                            />
+                        )
+                    })}
+                </ReAreaChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
+
+export default CustomAreaChart