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);