2023-08-07 15:13:41 +03:00
|
|
|
/* eslint-disable */
|
2023-06-06 18:32:48 +03:00
|
|
|
"use client";
|
2023-08-07 15:13:41 +03:00
|
|
|
import { useTranslation } from "react-i18next";
|
2023-06-06 18:32:48 +03:00
|
|
|
import {
|
|
|
|
VictoryContainer,
|
|
|
|
VictoryPie,
|
|
|
|
VictoryPieProps,
|
|
|
|
VictoryTheme,
|
|
|
|
} from "victory";
|
|
|
|
|
|
|
|
interface BrainSpaceChartProps extends VictoryPieProps {
|
|
|
|
current_brain_size: number;
|
|
|
|
max_brain_size: number;
|
|
|
|
}
|
|
|
|
|
2023-06-15 12:52:46 +03:00
|
|
|
const BrainSpaceChart = ({
|
2023-06-06 18:32:48 +03:00
|
|
|
current_brain_size,
|
|
|
|
max_brain_size,
|
|
|
|
...props
|
2023-06-15 12:52:46 +03:00
|
|
|
}: BrainSpaceChartProps): JSX.Element => {
|
2023-10-05 18:50:02 +03:00
|
|
|
const { t } = useTranslation(["translation", "user"]);
|
2023-08-07 15:13:41 +03:00
|
|
|
|
2023-06-06 18:32:48 +03:00
|
|
|
return (
|
2023-06-15 12:52:46 +03:00
|
|
|
<>
|
|
|
|
<VictoryPie
|
|
|
|
data={[
|
2023-10-05 18:50:02 +03:00
|
|
|
{ x: t("Used", { ns: "user" }), y: current_brain_size },
|
|
|
|
{
|
|
|
|
x: t("Unused", { ns: "user" }),
|
|
|
|
y: max_brain_size - current_brain_size,
|
|
|
|
},
|
2023-06-15 12:52:46 +03:00
|
|
|
]}
|
|
|
|
containerComponent={
|
|
|
|
<VictoryContainer
|
2023-10-05 18:50:02 +03:00
|
|
|
className="bg-white dark:bg-black rounded-md w-full h-full"
|
2023-06-15 12:52:46 +03:00
|
|
|
responsive={true}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
{...props}
|
|
|
|
theme={VictoryTheme.material}
|
|
|
|
/>
|
|
|
|
</>
|
2023-06-06 18:32:48 +03:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BrainSpaceChart;
|