@wger-project/react-components 25.10.16

package/src/components/Nutrition/widgets/MealDetailDropdown.tsx

@@ -0,0 +1,117 @@
+import HistoryEduIcon from "@mui/icons-material/HistoryEdu";
+import InfoIcon from '@mui/icons-material/Info';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { Alert, IconButton, Menu, MenuItem, Snackbar } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
+import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { Meal } from "components/Nutrition/models/meal";
+import { useDeleteMealQuery } from "components/Nutrition/queries";
+import { useAddDiaryEntriesQuery } from "components/Nutrition/queries/diary";
+import { MealForm } from "components/Nutrition/widgets/forms/MealForm";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SNACKBAR_AUTO_HIDE_DURATION } from "utils/consts";
+
+
+export const MealDetailDropdown = (props: {
+    meal: Meal,
+    planId: number,
+    onlyLogging: boolean,
+    isExpanded: boolean,
+    handleExpanded: () => void,
+}) => {
+
+    const addDiaryEntriesQuery = useAddDiaryEntriesQuery(props.planId);
+    const deleteMealQuery = useDeleteMealQuery(props.planId);
+
+    const [t] = useTranslation();
+    const [openSnackbar, setOpenSnackbar] = React.useState(false);
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const [openEditModal, setOpenEditModal] = useState(false);
+    const [openDeleteModal, setOpenDeleteModal] = useState(false);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleEdit = () => {
+        handleClose();
+        handleOpenEditModal();
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleDelete = () => {
+        handleOpenDeleteModal();
+        setAnchorEl(null);
+    };
+
+    const performDelete = () => {
+        deleteMealQuery.mutate(props.meal.id!);
+    };
+
+
+    const handleOpenEditModal = () => setOpenEditModal(true);
+    const handleCloseEditModal = () => setOpenEditModal(false);
+    const handleOpenDeleteModal = () => setOpenDeleteModal(true);
+    const handleCloseDeleteModal = () => setOpenDeleteModal(false);
+
+    const handleCloseSnackbar = (event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setOpenSnackbar(false);
+    };
+
+
+    const handleAddDiaryEntry = () => {
+        const diaryEntries = props.meal.items.map(item => item.diaryEntry(props.planId));
+        addDiaryEntriesQuery.mutate(diaryEntries);
+        setOpenSnackbar(true);
+    };
+
+
+    return <>
+        {props.meal.isRealMeal && !props.onlyLogging && <Tooltip title={t('nutrition.logThisMeal')}>
+            <IconButton aria-label="settings" onClick={handleAddDiaryEntry}>
+                <HistoryEduIcon />
+            </IconButton>
+        </Tooltip>}
+        {props.meal.isRealMeal && <IconButton aria-label="settings" onClick={handleClick}>
+            <MoreVertIcon />
+        </IconButton>}
+        <IconButton aria-label="settings" onClick={props.handleExpanded}>
+            {props.isExpanded ? <InfoIcon /> : <InfoOutlinedIcon />}
+        </IconButton>
+        <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+        >
+            <MenuItem onClick={handleEdit}>{t("edit")}</MenuItem>
+            <MenuItem onClick={handleDelete}>{t("delete")}</MenuItem>
+        </Menu>
+
+        <WgerModal title={t('edit')} isOpen={openEditModal} closeFn={handleCloseEditModal}>
+            <MealForm meal={props.meal} closeFn={handleCloseEditModal} planId={props.planId} />
+        </WgerModal>
+
+        <DeleteConfirmationModal
+            title={t('deleteConfirmation', { name: props.meal.name })}
+            message={t('nutrition.mealDeleteInfo')}
+            isOpen={openDeleteModal}
+            closeFn={handleCloseDeleteModal}
+            deleteFn={performDelete}
+        />
+
+        <Snackbar open={openSnackbar} autoHideDuration={SNACKBAR_AUTO_HIDE_DURATION} onClose={handleCloseSnackbar}>
+            <Alert onClose={handleCloseSnackbar} severity="success" sx={{ width: '100%' }}>
+                {t('nutrition.diaryEntrySaved')}
+            </Alert>
+        </Snackbar>
+    </>;
+};

package/src/components/Nutrition/widgets/NutritionalValuesTable.tsx

@@ -0,0 +1,103 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { useTranslation } from "react-i18next";
+import { numberGramLocale, numberLocale, numberPercentLocale } from "utils/numbers";
+
+export const NutritionalValuesTable = (props: { values: NutritionalValues }) => {
+    const [t, i18n] = useTranslation();
+
+    return <TableContainer>
+        <Table size="small">
+            <TableHead>
+                <TableRow>
+                    <TableCell>{t('nutrition.macronutrient')}</TableCell>
+                    <TableCell align="right">{t('total')}</TableCell>
+                    <TableCell align="right">{t('nutrition.percentEnergy')}</TableCell>
+                    {/*<TableCell align="right">{t('nutrition.gPerBodyKg')}</TableCell>*/}
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                <TableRow>
+                    <TableCell>{t('nutrition.energy')}</TableCell>
+                    <TableCell align="right">
+                        {t('nutrition.valueEnergyKcalKj', {
+                            kcal: numberLocale(props.values.energy, i18n.language),
+                            kj: numberLocale(props.values.energyKj, i18n.language)
+                        })}
+                    </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.protein')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.protein, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberPercentLocale(props.values.percent.protein, i18n.language)}
+                    </TableCell>
+                    {/*<TableCell align="right">...</TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.carbohydrates')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.carbohydrates, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberPercentLocale(props.values.percent.carbohydrates, i18n.language)}
+                    </TableCell>
+                    {/*<TableCell align="right">...</TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell sx={{ pl: 5 }}>{t('nutrition.ofWhichSugars')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.carbohydratesSugar, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.fat')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.fat, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right">
+                        {numberPercentLocale(props.values.percent.fat, i18n.language)}
+                    </TableCell>
+                    {/*<TableCell align="right">...</TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell sx={{ pl: 5 }}>{t('nutrition.ofWhichSaturated')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.fatSaturated, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+
+                <TableRow>
+                    <TableCell>{t('nutrition.others')}</TableCell>
+                    <TableCell> </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.fibres')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.fiber, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+                <TableRow>
+                    <TableCell>{t('nutrition.sodium')}</TableCell>
+                    <TableCell align="right">
+                        {numberGramLocale(props.values.sodium, i18n.language)}
+                    </TableCell>
+                    <TableCell align="right"></TableCell>
+                    {/*<TableCell align="right"></TableCell>*/}
+                </TableRow>
+            </TableBody>
+        </Table>
+    </TableContainer>;
+};

package/src/components/Nutrition/widgets/PlanDetailDropdown.tsx

@@ -0,0 +1,82 @@
+import MenuIcon from '@mui/icons-material/Menu';
+import { Button, Menu, MenuItem } from "@mui/material";
+import { DeleteConfirmationModal } from "components/Core/Modals/DeleteConfirmationModal";
+import { WgerModal } from "components/Core/Modals/WgerModal";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import { useDeleteNutritionalPlanQuery } from "components/Nutrition/queries";
+import { PlanForm } from "components/Nutrition/widgets/forms/PlanForm";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { makeLink, WgerLink } from "utils/url";
+
+
+export const PlanDetailDropdown = (props: { plan: NutritionalPlan }) => {
+
+    const deletePlanQuery = useDeleteNutritionalPlanQuery(props.plan.id!);
+    const navigate = useNavigate();
+
+    const [t, i18n] = useTranslation();
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [openEditModal, setOpenEditModal] = React.useState(false);
+    const [openDeleteModal, setOpenDeleteModal] = React.useState(false);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleEdit = () => {
+        handleClose();
+        handleOpenEditModal();
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleDelete = () => {
+        handleOpenDeleteModal();
+        setAnchorEl(null);
+    };
+
+    const performDelete = () => {
+        deletePlanQuery.mutate(props.plan.id!);
+        navigate((makeLink(WgerLink.NUTRITION_OVERVIEW)));
+    };
+
+    const navigateToPdfDownload = () => window.location.href = makeLink(WgerLink.NUTRITION_PLAN_PDF, i18n.language, { id: props.plan.id! });
+    const navigateToCopyPlan = () => window.location.href = makeLink(WgerLink.NUTRITION_PLAN_COPY, i18n.language, { id: props.plan.id! });
+
+    const handleOpenEditModal = () => setOpenEditModal(true);
+    const handleCloseEditModal = () => setOpenEditModal(false);
+    const handleOpenDeleteModal = () => setOpenDeleteModal(true);
+    const handleCloseDeleteModal = () => setOpenDeleteModal(false);
+
+    return <>
+        <Button onClick={handleClick}>
+            <MenuIcon />
+        </Button>
+        <Menu
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+        >
+            <MenuItem onClick={handleEdit}>{t("edit")}</MenuItem>
+            <MenuItem onClick={navigateToPdfDownload}>{t("downloadAsPdf")}</MenuItem>
+            <MenuItem onClick={navigateToCopyPlan}>{t("nutrition.copyPlan")}</MenuItem>
+            <MenuItem onClick={handleDelete}>{t("delete")}</MenuItem>
+        </Menu>
+
+        <WgerModal title={t('edit')} isOpen={openEditModal} closeFn={handleCloseEditModal}>
+            <PlanForm plan={props.plan} closeFn={handleCloseEditModal} />
+        </WgerModal>
+
+        <DeleteConfirmationModal
+            title={t('deleteConfirmation', { name: props.plan.description })}
+            message={t('nutrition.planDeleteInfo')}
+            isOpen={openDeleteModal}
+            closeFn={handleCloseDeleteModal}
+            deleteFn={performDelete}
+        />
+    </>;
+};

package/src/components/Nutrition/widgets/PlanSidebar.tsx

@@ -0,0 +1,44 @@
+import { Stack, Typography } from "@mui/material";
+import { NutritionalPlan } from "components/Nutrition/models/nutritionalPlan";
+import { LinearPlannedLoggedChart } from "components/Nutrition/widgets/charts/LinearPlannedLoggedChart";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+
+export const PlanSidebar = (props: { plan: NutritionalPlan }) => {
+    const [t] = useTranslation();
+
+    const planned = props.plan.plannedNutritionalValues;
+    const loggedToday = props.plan.loggedNutritionalValuesToday;
+    const percentages = props.plan.percentageValuesLoggedToday;
+
+
+    return <>
+        <Stack direction="column" spacing={1}>
+            <Typography gutterBottom variant="h6">
+                {t('nutrition.goalsTitle')}
+            </Typography>
+
+            <LinearPlannedLoggedChart
+                title={t('nutrition.protein')}
+                percentage={percentages.protein}
+                logged={loggedToday.protein}
+                planned={planned.protein}
+            />
+
+            <LinearPlannedLoggedChart
+                title={t('nutrition.carbohydrates')}
+                percentage={percentages.carbohydrates}
+                logged={loggedToday.carbohydrates}
+                planned={planned.carbohydrates}
+            />
+
+            <LinearPlannedLoggedChart
+                title={t('nutrition.fat')}
+                percentage={percentages.fat}
+                logged={loggedToday.fat}
+                planned={planned.fat}
+            />
+        </Stack>
+    </>;
+};

package/src/components/Nutrition/widgets/charts/LinearPlannedLoggedChart.tsx

@@ -0,0 +1,27 @@
+import { LinearProgress, Typography } from "@mui/material";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { numberGramLocale } from "utils/numbers";
+
+export const LinearPlannedLoggedChart = (props: {
+    percentage: number,
+    logged: number,
+    title: string,
+    planned: number
+}) => {
+    const { i18n } = useTranslation();
+
+    const hasPlanned = props.planned > 0;
+
+    return <>
+        <LinearProgress
+            variant="determinate"
+            value={props.percentage < 100 ? props.percentage : 100}
+        />
+        <Typography variant={"caption"}>
+            {props.title} — {numberGramLocale(props.logged, i18n.language)}
+            {hasPlanned && <>&nbsp;/ {numberGramLocale(props.planned, i18n.language)}</>}
+        </Typography>
+    </>;
+
+};

package/src/components/Nutrition/widgets/charts/MacrosPieChart.tsx

@@ -0,0 +1,66 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Cell, Legend, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { generateChartColors } from "utils/colors";
+import { numberGramLocale } from "utils/numbers";
+
+export const MacrosPieChart = (props: { data: NutritionalValues }) => {
+    const [t, i18n] = useTranslation();
+    const colorGenerator = generateChartColors(3);
+
+    const data = [
+        { name: t('nutrition.carbohydrates'), value: props.data.carbohydrates },
+        { name: t('nutrition.protein'), value: props.data.protein },
+        { name: t('nutrition.fat'), value: props.data.fat },
+    ];
+
+    const RADIAN = Math.PI / 180;
+    const renderCustomizedLabel = (
+        {
+            cx,
+            cy,
+            midAngle,
+            innerRadius,
+            outerRadius,
+            payload,
+        }:
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        any) => {
+
+
+        const radius = innerRadius + (outerRadius - innerRadius) * 0.4;
+        const x = cx + radius * Math.cos(-midAngle * RADIAN);
+        const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+        return <text
+            x={x}
+            y={y}
+            fill="white"
+            textAnchor="middle"
+            dominantBaseline="central"
+        >
+            {numberGramLocale(payload.value, i18n.language)}
+        </text>;
+    };
+
+
+    return <ResponsiveContainer width={"100%"} height={300}>
+        <PieChart>
+            <Pie
+                data={data}
+                labelLine={false}
+                // outerRadius={80}
+                label={renderCustomizedLabel}
+                fill="#8884d8"
+                dataKey="value"
+            >
+                {data.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={colorGenerator.next().value!} />
+                ))}
+            </Pie>
+            {/*<Tooltip />*/}
+            <Legend />
+        </PieChart>
+    </ResponsiveContainer>;
+};

package/src/components/Nutrition/widgets/charts/NutritionDiaryChart.tsx

@@ -0,0 +1,95 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { generateChartColors } from "utils/colors";
+import { numberLocale } from "utils/numbers";
+
+type NutritionDiaryChartProps = {
+    showPlanned: boolean,
+    planned: NutritionalValues;
+    today: NutritionalValues;
+    avg7Days: NutritionalValues;
+}
+
+export const NutritionDiaryChart = ({ showPlanned, planned, today, avg7Days }: NutritionDiaryChartProps) => {
+    const [t, i18n] = useTranslation();
+    const colorGenerator = generateChartColors(3);
+
+    const data = [
+        {
+            name: t('nutrition.protein'),
+            planned: planned.protein,
+            today: today.protein,
+            avg7Days: avg7Days.protein,
+        },
+        {
+            name: t('nutrition.carbohydrates'),
+            planned: planned.carbohydrates,
+            today: today.carbohydrates,
+            avg7Days: avg7Days.carbohydrates,
+        },
+        {
+            name: t('nutrition.sugar'),
+            planned: planned.carbohydratesSugar,
+            today: today.carbohydratesSugar,
+            avg7Days: avg7Days.carbohydratesSugar,
+        },
+        {
+            name: t('nutrition.fat'),
+            planned: planned.fat,
+            today: today.fat,
+            avg7Days: avg7Days.fat,
+        },
+        {
+            name: t('nutrition.saturatedFat'),
+            planned: planned.fatSaturated,
+            today: today.fatSaturated,
+            avg7Days: avg7Days.fatSaturated,
+        },
+    ];
+
+    return (
+        <ResponsiveContainer width={"100%"} height={300}>
+            <BarChart
+                data={data}
+                margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 5,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 4" />
+                <XAxis dataKey="name" />
+                <YAxis
+                    type="number"
+                    orientation="left"
+                    unit={t('nutrition.gramShort')}
+                />
+                <Tooltip formatter={(value: number) => numberLocale(value, i18n.language)} />
+                <Legend />
+                {showPlanned &&
+                    <Bar
+                        dataKey="planned"
+                        unit={t('nutrition.gramShort')}
+                        name={t('nutrition.planned')}
+                        fill={colorGenerator.next().value!}
+                    />
+                }
+                <Bar
+                    dataKey="today"
+                    unit={t('nutrition.gramShort')}
+                    name={t('nutrition.today')}
+                    fill={colorGenerator.next().value!}
+                />
+                <Bar
+                    dataKey="avg7Days"
+                    unit={t('nutrition.gramShort')}
+                    name={t('nutrition.7dayAvg')}
+                    fill={colorGenerator.next().value!}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+};

package/src/components/Nutrition/widgets/charts/NutritionalValuesDashboardChart.tsx

@@ -0,0 +1,84 @@
+import { Stack, useTheme } from "@mui/material";
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import { LinearPlannedLoggedChart } from "components/Nutrition/widgets/charts/LinearPlannedLoggedChart";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { numberLocale } from "utils/numbers";
+
+
+export const NutritionalValuesDashboardChart = (props: {
+    percentage: NutritionalValues,
+    logged: NutritionalValues,
+    planned: NutritionalValues,
+}) => {
+
+    const energyPercentage = props.planned.energy > 0 ? props.logged.energy / props.planned.energy * 100 : 100;
+    const energyDiff = props.planned.energy > 0 ? props.planned.energy - props.logged.energy : props.logged.energy;
+
+    const theme = useTheme();
+    const [t, i18n] = useTranslation();
+    const data = [
+        {
+            name: '',
+            value: energyPercentage,
+        },
+        {
+            name: '',
+            value: energyPercentage < 100 ? 100 - energyPercentage : 0,
+        },
+    ];
+    const COLORS = [theme.palette.primary.main, '#C5C5C5'];
+
+
+    return <Stack direction={'row'}>
+        <ResponsiveContainer width={'50%'} height={140}>
+            <PieChart>
+                <Pie
+                    // cx={0}
+                    // cy={'10'}
+                    height={100}
+                    data={data}
+                    startAngle={200}
+                    endAngle={-20}
+                    innerRadius={60}
+                    outerRadius={70}
+                    paddingAngle={2}
+                    dataKey="value"
+                >
+                    {data.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                    ))}
+                </Pie>
+                <g>
+                    <text x={'50%'} y={'45%'} fontSize="1.25em" textAnchor="middle">{/*fill="#333"*/}
+                        {t('nutrition.valueEnergyKcal', { value: numberLocale(energyDiff, i18n.language) })}
+                    </text>
+                    <text x={'50%'} y={'60%'} fontSize="1em" textAnchor="middle">
+                        {props.planned.energy > 0 && t(energyPercentage < 100 ? 'nutrition.valueRemaining' : 'nutrition.valueTooMany')}
+                    </text>
+                </g>
+            </PieChart>
+        </ResponsiveContainer>
+        <Stack width={'50%'} spacing={1}>
+            <LinearPlannedLoggedChart
+                title={t('nutrition.protein')}
+                percentage={props.percentage.protein}
+                logged={props.logged.protein}
+                planned={props.planned.protein}
+            />
+            <LinearPlannedLoggedChart
+                title={t('nutrition.carbohydrates')}
+                percentage={props.percentage.carbohydrates}
+                logged={props.logged.carbohydrates}
+                planned={props.planned.carbohydrates}
+            />
+            <LinearPlannedLoggedChart
+                title={t('nutrition.fat')}
+                percentage={props.percentage.fat}
+                logged={props.logged.fat}
+                planned={props.planned.fat}
+            />
+        </Stack>
+    </Stack>;
+};

package/src/components/Nutrition/widgets/charts/NutritionalValuesPlannedLoggedChart.tsx

@@ -0,0 +1,54 @@
+import { NutritionalValues } from "components/Nutrition/helpers/nutritionalValues";
+import React from 'react';
+import { useTranslation } from "react-i18next";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { generateChartColors } from "utils/colors";
+
+
+export const NutritionalValuesPlannedLoggedChart = (props: {
+    logged: NutritionalValues,
+    planned: NutritionalValues
+}) => {
+    const [t] = useTranslation();
+    const colorGenerator = generateChartColors(3);
+    const data = [
+        {
+            name: t('nutrition.energy'),
+            value: props.logged.energy / props.planned.energy * 100,
+        },
+        {
+            name: t('nutrition.protein'),
+            value: props.logged.protein / props.planned.protein * 100,
+        },
+        {
+            name: t('nutrition.carbohydrates'),
+            value: props.logged.carbohydrates / props.planned.carbohydrates * 100,
+        },
+        {
+            name: t('nutrition.fat'),
+            value: props.logged.fat / props.planned.fat * 100,
+        },
+    ];
+
+
+    return (
+        <ResponsiveContainer width={"100%"} height={150}>
+            <BarChart
+                data={data}
+                layout="vertical"
+                margin={{
+                    left: 60,
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 4" />
+                <XAxis type={'number'} unit={'%'} />
+                <YAxis type={'category'} dataKey={'name'} />
+                <Bar
+                    dataKey="value"
+                    unit={'%'}
+                    fill={colorGenerator.next().value!}
+                />
+            </BarChart>
+        </ResponsiveContainer>
+    );
+};