diff --git a/src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx b/src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx index dc9a16c..79a61f5 100644 --- a/src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx +++ b/src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx @@ -4,6 +4,8 @@ import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx"; import { useProfitChart } from "./hooks/useProfitChart.tsx"; import { Skeleton, Stack } from "@mantine/core"; import { ProfitChartFiltersModal } from "../../modals/ProfitChartFiltersModal.tsx"; +import { Total } from "../Total/Total.tsx"; +import styles from "../../../../ui/StatisticsPage.module.css"; export const ProfitChart = () => { @@ -26,30 +28,33 @@ export const ProfitChart = () => { const units = ["₽", "шт"]; return ( - - - - - {getChartsSeries.map((series, idx) => { - return ( - new Intl.NumberFormat("ru-RU").format(value)} - series={series} - fillOpacity={0.5} - /> - ); - })} - - - +
+ + + + + + {getChartsSeries.map((series, idx) => { + return ( + new Intl.NumberFormat("ru-RU").format(value)} + series={series} + fillOpacity={0.5} + /> + ); + })} + + + +
); }; \ No newline at end of file diff --git a/src/pages/StatisticsPage/tabs/ProfitTab/components/Total/Total.tsx b/src/pages/StatisticsPage/tabs/ProfitTab/components/Total/Total.tsx new file mode 100644 index 0000000..03fdd5a --- /dev/null +++ b/src/pages/StatisticsPage/tabs/ProfitTab/components/Total/Total.tsx @@ -0,0 +1,40 @@ +import { Center, Divider, Group, Text } from "@mantine/core"; +import { ProfitChartDataItem } from "../../../../../../client"; +import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx"; + +type Props = { + profitData: ProfitChartDataItem[]; +}; + +export const Total = ({ profitData }: Props) => { + const totalProfit = profitData.reduce( + (sum, dataItem) => dataItem.profit + sum, + 0, + ); + const totalRevenue = profitData.reduce( + (sum, dataItem) => dataItem.revenue + sum, + 0, + ); + const totalCount = profitData.reduce( + (sum, dataItem) => dataItem.dealsCount + sum, + 0, + ); + + return ( + + +
+ Прибыль: {new Intl.NumberFormat("ru-RU").format(totalProfit)} ₽ +
+ +
+ Выручка: {new Intl.NumberFormat("ru-RU").format(totalRevenue)} ₽ +
+ +
+ Сделок: {new Intl.NumberFormat("ru-RU").format(totalCount)} шт +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/pages/StatisticsPage/ui/StatisticsPage.module.css b/src/pages/StatisticsPage/ui/StatisticsPage.module.css index 2407bc3..b4a440e 100644 --- a/src/pages/StatisticsPage/ui/StatisticsPage.module.css +++ b/src/pages/StatisticsPage/ui/StatisticsPage.module.css @@ -13,6 +13,16 @@ flex-wrap: wrap; } +.profit-chart-container { + display: flex; + flex-direction: column; + gap: rem(10); + height: 96vh; + flex-wrap: nowrap; + flex: 3; + min-width: 600px; +} + .top-panel { padding: rem(5); gap: rem(10);