fix: improve bar chart mobile UX, hide savings, custom tooltip, better sizing

src/components/finance/FinanceAnalytics.jsx

@@ -1,32 +1,83 @@
 import { useState, useEffect } from "react"
 import {
   BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
-  PieChart, Pie, Cell, LineChart, Line,
+  PieChart, Pie, Cell, LineChart, Line, LabelList,
 } from "recharts"
 import { financeApi } from "../../api/finance"
 
-const COLORS = [
-  "#0D4F4F", "#F7B538", "#6366f1", "#22c55e", "#ef4444",
-  "#8b5cf6", "#0ea5e9", "#f97316", "#ec4899", "#14b8a6",
-  "#64748b", "#a855f7", "#78716c",
+const CATEGORY_COLORS = {
+  "Жильё": "#ef4444",
+  "Еда": "#f97316",
+  "Транспорт": "#6366f1",
+  "Одежда": "#8b5cf6",
+  "Здоровье": "#22c55e",
+  "Развлечения": "#ec4899",
+  "Связь / Подписки": "#0ea5e9",
+  "Путешествия": "#14b8a6",
+  "Подарки": "#a855f7",
+  "Бытовое": "#64748b",
+  "Маркетплейсы": "#F7B538",
+  "Накопления": "#0D4F4F",
+  "Другое": "#78716c",
+  "Красота": "#f472b6",
+}
+
+const COLORS_FALLBACK = [
+  "#6366f1", "#22c55e", "#ef4444", "#f97316", "#8b5cf6",
+  "#0ea5e9", "#ec4899", "#14b8a6", "#64748b", "#a855f7",
 ]
 
+const getColor = (name, i) => {
+  const clean = name.replace(/^[\p{Emoji}\s]+/u, "").trim()
+  return CATEGORY_COLORS[clean] || COLORS_FALLBACK[i % COLORS_FALLBACK.length]
+}
+
 const fmt = (n) => Number(n).toLocaleString("ru-RU") + " ₽"
+const fmtShort = (n) => {
+  if (n >= 1000) return Math.round(n / 1000).toLocaleString("ru-RU") + "к"
+  return n.toLocaleString("ru-RU")
+}
 
 const MONTH_NAMES = [
   "", "Янв", "Фев", "Мар", "Апр", "Май", "Июн",
   "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек",
 ]
 
+const SAVINGS_NAMES = ["накопления"]
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="bg-gray-900 text-white text-xs px-3 py-2 rounded-lg shadow-lg">
+      {payload.map((p, i) => (
+        <div key={i}>
+          <span className="font-medium">{p.name || label}: </span>
+          <span>{fmt(p.value)}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const BarLabel = ({ x, y, width, height, value }) => {
+  if (!value) return null
+  return (
+    <text x={x + width + 6} y={y + height / 2} dy={4} fontSize={11} fill="#94a3b8">
+      {fmtShort(value)}
+    </text>
+  )
+}
+
 export default function FinanceAnalytics({ month, year }) {
   const [analytics, setAnalytics] = useState(null)
   const [summary, setSummary] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [showSavings, setShowSavings] = useState(false)
 
   useEffect(() => {
     setLoading(true)
     Promise.all([
-      financeApi.getAnalytics({ months: 6 }),
+      financeApi.getAnalytics({ months: 6, month, year }),
       financeApi.getSummary({ month, year }),
     ])
       .then(([a, s]) => {
@@ -51,15 +102,33 @@ export default function FinanceAnalytics({ month, year }) {
 
   if (!analytics || !summary) return null
 
-  const expenseCategories = (summary.by_category || []).filter(
+  const allExpenseCategories = (summary.by_category || []).filter(
     (c) => c.type === "expense"
   )
-  const barData = expenseCategories.map((c) => ({
-    name: c.category_emoji + " " + c.category_name,
-    value: c.amount,
-  }))
+  const isSavings = (c) =>
+    SAVINGS_NAMES.includes(c.category_name?.toLowerCase?.())
+  
+  const expenseCategories = showSavings
+    ? allExpenseCategories
+    : allExpenseCategories.filter((c) => !isSavings(c))
+  
+  const hasSavings = allExpenseCategories.some(isSavings)
+
+  const barData = expenseCategories
+    .sort((a, b) => b.amount - a.amount)
+    .map((c, i) => ({
+      name: (c.category_emoji || "") + " " + c.category_name,
+      shortName: c.category_name?.length > 10
+        ? c.category_name.slice(0, 10) + "…"
+        : c.category_name,
+      value: c.amount,
+      fill: getColor(c.category_name, i),
+    }))
+
   const pieData = barData
 
+  const filteredTotal = expenseCategories.reduce((s, c) => s + c.amount, 0)
+
   const monthlyData = (analytics.monthly_trend || []).map((m) => ({
     month: MONTH_NAMES[parseInt(m.month.slice(5))] || m.month,
     income: m.income,
@@ -67,8 +136,10 @@ export default function FinanceAnalytics({ month, year }) {
   }))
 
   const comp = analytics.comparison_prev_month
-  const diffPct = Math.abs(Math.round(comp.diff_percent))
-  const isUp = comp.diff_percent > 0
+  const diffPct = Math.abs(Math.round(comp?.diff_percent || 0))
+  const isUp = (comp?.diff_percent || 0) > 0
+
+  const barChartHeight = Math.max(400, barData.length * 44)
 
   return (
     <div className="space-y-6">
@@ -98,30 +169,41 @@ export default function FinanceAnalytics({ month, year }) {
 
       {barData.length > 0 && (
         <div className="card p-5">
-          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
-            Расходы по категориям
-          </h3>
-          <div className="h-64">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-display font-bold text-gray-900 dark:text-white">
+              Расходы по категориям
+            </h3>
+            {hasSavings && (
+              <button
+                onClick={() => setShowSavings(!showSavings)}
+                className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+              >
+                {showSavings ? "Скрыть" : "Показать"} накопления
+              </button>
+            )}
+          </div>
+          <div style={{ height: barChartHeight }}>
             <ResponsiveContainer>
-              <BarChart data={barData} layout="vertical" margin={{ left: 10 }}>
+              <BarChart data={barData} layout="vertical" margin={{ left: 0, right: 50 }}>
                 <XAxis
                   type="number"
                   tick={{ fontSize: 10 }}
                   stroke="#94a3b8"
-                  tickFormatter={(v) => v / 1000 + "к"}
+                  tickFormatter={fmtShort}
                 />
                 <YAxis
                   type="category"
                   dataKey="name"
                   tick={{ fontSize: 11 }}
                   stroke="#94a3b8"
-                  width={120}
+                  width={130}
                 />
-                <Tooltip formatter={(v) => fmt(v)} />
-                <Bar dataKey="value" radius={[0, 6, 6, 0]}>
-                  {barData.map((_, i) => (
-                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar dataKey="value" radius={[0, 6, 6, 0]} barSize={24}>
+                  {barData.map((entry, i) => (
+                    <Cell key={i} fill={entry.fill} />
                   ))}
+                  <LabelList content={<BarLabel />} />
                 </Bar>
               </BarChart>
             </ResponsiveContainer>
@@ -145,29 +227,28 @@ export default function FinanceAnalytics({ month, year }) {
                     dataKey="value"
                     stroke="none"
                   >
-                    {pieData.map((_, i) => (
-                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                    {pieData.map((entry, i) => (
+                      <Cell key={i} fill={entry.fill} />
                     ))}
                   </Pie>
-                  <Tooltip formatter={(v) => fmt(v)} />
+                  <Tooltip content={<CustomTooltip />} />
                 </PieChart>
               </ResponsiveContainer>
             </div>
-            <div className="space-y-1.5 pt-2">
+            <div className="space-y-1.5 pt-2 min-w-0 flex-1">
               {pieData.map((c, i) => (
                 <div key={i} className="flex items-center gap-2 text-xs">
                   <div
                     className="w-2.5 h-2.5 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: COLORS[i] }}
+                    style={{ backgroundColor: c.fill }}
                   />
-                  <span className="text-gray-600 dark:text-gray-400 truncate max-w-[100px]">
+                  <span className="text-gray-600 dark:text-gray-400 truncate">
                     {c.name}
                   </span>
-                  <span className="ml-auto font-semibold text-gray-900 dark:text-white">
+                  <span className="ml-auto font-semibold text-gray-900 dark:text-white whitespace-nowrap">
                     {Math.round(
-                      (c.value / summary.total_expense) * 100
-                    )}
-                    %
+                      (c.value / filteredTotal) * 100
+                    )}%
                   </span>
                 </div>
               ))}
@@ -192,9 +273,9 @@ export default function FinanceAnalytics({ month, year }) {
                 <YAxis
                   tick={{ fontSize: 10 }}
                   stroke="#94a3b8"
-                  tickFormatter={(v) => v / 1000 + "к"}
+                  tickFormatter={fmtShort}
                 />
-                <Tooltip formatter={(v) => fmt(v)} />
+                <Tooltip content={<CustomTooltip />} />
                 <Line
                   type="monotone"
                   dataKey="income"