66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { AreaChart } from "@mantine/charts";
|
|
import "@mantine/charts/styles.css";
|
|
import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";
|
|
import { Skeleton, Stack } from "@mantine/core";
|
|
import { Total } from "../Total/Total.tsx";
|
|
import styles from "../../../../ui/StatisticsPage.module.css";
|
|
import { formatDate } from "../../../../../../types/utils.ts";
|
|
import { useProfitTabContext } from "../../contexts/ProfitTabContext.tsx";
|
|
|
|
|
|
export const ProfitChart = () => {
|
|
const {
|
|
profitChartData: profitData,
|
|
isChartLoading: isLoading,
|
|
} = useProfitTabContext();
|
|
|
|
const formattedProfitData = profitData.map(
|
|
value => {
|
|
return { ...value, date: formatDate(value.date) };
|
|
},
|
|
);
|
|
|
|
const getChartsSeries = [
|
|
[
|
|
{ name: "profit", label: "Прибыль", color: "indigo.6" },
|
|
{ name: "revenue", label: "Выручка", color: "teal.6" },
|
|
{ name: "expenses", label: "Расходы", color: "red.6" },
|
|
],
|
|
[
|
|
{ name: "cardsCount", label: "Количество сделок", color: "indigo.6" },
|
|
],
|
|
];
|
|
|
|
const units = ["₽", "шт"];
|
|
|
|
const chartSizes = ["47vh", "28vh"];
|
|
|
|
return (
|
|
<div className={styles["profit-chart-container"]}>
|
|
<Total profitData={profitData} />
|
|
<PageBlock style={{ padding: "25px" }}>
|
|
<Skeleton visible={isLoading}>
|
|
<Stack gap="4vh">
|
|
{getChartsSeries.map((series, idx) => {
|
|
return (
|
|
<AreaChart
|
|
my={"sm"}
|
|
w={"98%"}
|
|
h={chartSizes[idx]}
|
|
data={formattedProfitData}
|
|
dataKey="date"
|
|
unit={units[idx]}
|
|
tooltipAnimationDuration={200}
|
|
valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
|
|
series={series}
|
|
fillOpacity={0.5}
|
|
key={idx}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Skeleton>
|
|
</PageBlock>
|
|
</div>
|
|
);
|
|
}; |