fix(charts): единый стиль AreaChart с градиентом

Общий AreaTrendChart для мониторинга и daily-графиков, StatisticSparklineCard на дашборде.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/monitoring/MonitoringPage.tsx

@@ -1,18 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Card, Col, Row, Select, Table, Tabs } from 'antd';
-import {
-    LineChart,
-    Line,
-    XAxis,
-    YAxis,
-    CartesianGrid,
-    Tooltip,
-    Legend,
-    ResponsiveContainer,
-} from 'recharts';
 import dayjs from 'dayjs';
 import { useMetricsStore, NodeMetric } from '../../store/metricsStore';
 import { monitoringApi } from '../../api/monitoringApi';
+import AreaTrendChart from '../../components/AreaTrendChart';
 
 const NODE_COLORS = ['#1677ff', '#52c41a', '#fa8c16', '#eb2f96', '#722ed1', '#13c2c2'];
 const TIME_RANGES = [
@@ -51,18 +42,7 @@ const MetricChart: React.FC<{
     data: ReturnType<typeof buildChartData>;
     lines: Array<{ key: string; color: string; name: string }>;
 }> = ({ data, lines }) => (
-    <ResponsiveContainer width="100%" height={280}>
-        <LineChart data={data}>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="time" minTickGap={30} />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            {lines.map((line) => (
-                <Line key={line.key} type="monotone" dataKey={line.key} stroke={line.color} name={line.name} dot={false} />
-            ))}
-        </LineChart>
-    </ResponsiveContainer>
+    <AreaTrendChart data={data} xKey="time" series={lines} />
 );
 
 const MonitoringPage: React.FC = () => {