feat: profit table and division of charts in statistics

src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx

@@ -0,0 +1,55 @@
+import { AreaChart } from "@mantine/charts";
+import "@mantine/charts/styles.css";
+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";
+
+
+export const ProfitChart = () => {
+    const {
+        profitData,
+        form,
+        isLoading,
+    } = useProfitChart();
+
+    const getChartsSeries = [
+        [
+            { name: "profit", label: "Прибыль", color: "indigo.6" },
+            { name: "revenue", label: "Выручка", color: "teal.6" },
+        ],
+        [
+            { name: "dealsCount", label: "Количество сделок", color: "indigo.6" },
+        ],
+    ];
+
+    const units = ["₽", "шт"];
+
+    return (
+        <PageBlock style={{ flex: 3, minWidth: "500px", padding: "25px" }}>
+            <ProfitChartFiltersModal
+                form={form}
+            />
+            <Skeleton visible={isLoading}>
+                <Stack gap={"xl"}>
+                    {getChartsSeries.map((series, idx) => {
+                        return (
+                            <AreaChart
+                                my={"sm"}
+                                w={"98%"}
+                                h={"39vh"}
+                                data={profitData}
+                                dataKey="date"
+                                unit={units[idx]}
+                                tooltipAnimationDuration={200}
+                                valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
+                                series={series}
+                                fillOpacity={0.5}
+                            />
+                        );
+                    })}
+                </Stack>
+            </Skeleton>
+        </PageBlock>
+    );
+};