mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
feat(sales-stats): читаемые разбивки и stacked-бары, иконки платёжек, выручка
Полировка статистики продаж (читаемее/информативнее): - BreakdownList — категорийные разбивки списком (иконка/цвет + значение + доля % + пропорциональный мини-бар) вместо bar-графика. В «Депозиты → по методам» теперь с иконками платёжек (PaymentMethodIcon), в «Продажи → по тарифам» — с долями. - StackedBarChart — «по дням разбивкой» теперь stacked-бар вместо наслаивающихся полупрозрачных area (читалось плохо); тултип по дню показывает все серии. - Продажи: добавлена карточка «Выручка» (total_revenue бэк отдавал, но не показывался).
This commit is contained in:
@@ -9,9 +9,11 @@ import { SALES_STATS } from '../../constants/salesStats';
|
||||
import { useCurrency } from '../../hooks/useCurrency';
|
||||
import { StatCard } from '../stats';
|
||||
|
||||
import { MultiSeriesAreaChart } from './MultiSeriesAreaChart';
|
||||
import PaymentMethodIcon from '../PaymentMethodIcon';
|
||||
|
||||
import { BreakdownList } from './BreakdownList';
|
||||
import { SimpleAreaChart } from './SimpleAreaChart';
|
||||
import { SimpleBarChart } from './SimpleBarChart';
|
||||
import { StackedBarChart } from './StackedBarChart';
|
||||
|
||||
interface DepositsTabProps {
|
||||
params: SalesStatsParams;
|
||||
@@ -29,11 +31,13 @@ export function DepositsTab({ params }: DepositsTabProps) {
|
||||
|
||||
const formatValue = useCallback((v: number) => formatWithCurrency(v), [formatWithCurrency]);
|
||||
|
||||
const methodBarData = useMemo(
|
||||
const methodBreakdown = useMemo(
|
||||
() =>
|
||||
data?.by_method.map((item) => ({
|
||||
name: METHOD_LABELS[item.method] || item.method,
|
||||
key: item.method,
|
||||
label: METHOD_LABELS[item.method] || item.method,
|
||||
value: item.amount_kopeks / SALES_STATS.KOPEKS_DIVISOR,
|
||||
icon: <PaymentMethodIcon method={item.method} className="h-5 w-5 shrink-0" />,
|
||||
})) ?? [],
|
||||
[data?.by_method],
|
||||
);
|
||||
@@ -89,9 +93,9 @@ export function DepositsTab({ params }: DepositsTabProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SimpleBarChart
|
||||
data={methodBarData}
|
||||
<BreakdownList
|
||||
title={t('admin.salesStats.deposits.byMethod')}
|
||||
items={methodBreakdown}
|
||||
valueFormatter={formatValue}
|
||||
/>
|
||||
|
||||
@@ -102,11 +106,9 @@ export function DepositsTab({ params }: DepositsTabProps) {
|
||||
valueLabel={t('admin.salesStats.deposits.revenue')}
|
||||
/>
|
||||
|
||||
<MultiSeriesAreaChart
|
||||
<StackedBarChart
|
||||
data={dailyByMethodData}
|
||||
title={t('admin.salesStats.deposits.dailyByMethod')}
|
||||
chartId="deposits-daily-by-method"
|
||||
valueLabel={t('admin.salesStats.deposits.revenue')}
|
||||
valueFormatter={formatValue}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user