55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}; |