Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено состояние для сворачивания графика в компонент SalesTab. Реализована кнопка для управления отображением графика с иконками Chevron. Обновлены стили и структура кода для улучшения взаимодействия с пользователем.

Browse Source
This commit is contained in:
Bivekich
2025-07-22 14:56:42 +03:00
parent 970da6979f
commit 0c0ee9db37
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/seller-statistics/sales-tab.tsx
View File

@ -7,7 +7,7 @@ import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { Skeleton } from '@/components/ui/skeleton'
import { TrendingUp, Info, BarChart3 } from 'lucide-react'
import { TrendingUp, Info, BarChart3, ChevronDown, ChevronUp } from 'lucide-react'
import {
ChartConfig,
ChartContainer,
@ -330,6 +330,9 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
const [sortField, setSortField] = useState<string>('')
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
// Состояние для сворачивания графика
const [isChartCollapsed, setIsChartCollapsed] = useState(false)
// Функция сортировки
const handleSort = (field: string) => {
if (sortField === field) {
@ -455,11 +458,27 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
return (
<div className="h-full flex flex-col space-y-2">
{/* График с фильтрами */}
<Card className="glass-card p-3 flex-shrink-0 overflow-hidden" style={{ height: '380px' }}>
<Card
className="glass-card p-3 flex-shrink-0 overflow-hidden transition-all duration-300"
style={{ height: isChartCollapsed ? 'auto' : '380px' }}
>
<div className="h-full flex flex-col min-h-0">
{/* Заголовок с переключателями периода */}
<div className="flex items-center justify-between mb-2">
<h3 className="text-white font-semibold">Динамика показателей</h3>
<div className="flex items-center gap-2">
<h3 className="text-white font-semibold">Динамика показателей</h3>
<button
onClick={() => setIsChartCollapsed(!isChartCollapsed)}
className="text-white/60 hover:text-white/80 hover:bg-white/10 p-1 rounded transition-all"
title={isChartCollapsed ? "Развернуть график" : "Свернуть график"}
>
{isChartCollapsed ? (
<ChevronDown className="w-4 h-4" />
) : (
<ChevronUp className="w-4 h-4" />
)}
</button>
</div>
{/* Переключатели периода */}
<div className="flex items-center gap-2">
@ -511,8 +530,11 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
</div>
</div>
{/* Компактные чекбоксы для фильтрации */}
<div className="mb-2 pb-2 border-b border-white/10">
{/* Контент графика - показывается только если не свернут */}
{!isChartCollapsed && (
<>
{/* Компактные чекбоксы для фильтрации */}
<div className="mb-2 pb-2 border-b border-white/10">
<div className="flex items-center justify-between mb-1">
<span className="text-xs text-white/60">Показать на графике:</span>
<span className="text-xs text-blue-400 flex items-center gap-1">
@ -640,6 +662,8 @@ export function SalesTab({ selectedPeriod, useCustomDates, startDate, endDate, o
</BarChart>
</ChartContainer>
</div>
</>
)}
</div>
</Card>