Add the calculation of macronutrients from meals

This commit is contained in:
= 2020-12-22 19:44:38 +01:00
parent 693c89c666
commit 64ab7aef58
9 changed files with 82 additions and 20 deletions

View File

@ -2,11 +2,13 @@ import {Grid, Typography, Tooltip} from "@material-ui/core";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React from "react"; import React from "react";
import RadialChart from "components/RadialChart"; import RadialChart from "components/RadialChart";
import {colors} from "utils/theme";
import useStyles from './styles' import useStyles from './styles'
const MacronutrientsChart = ({ max, current, unit, label, color }) => { const MacronutrientsChart = ({ max, current, unit, label }) => {
const classes = useStyles() const classes = useStyles()
const progress = current / max * 100 const progress = current / max * 100
const color = colors[label.toLowerCase()]
return ( return (
<Tooltip title={label} aria-label={label}> <Tooltip title={label} aria-label={label}>
@ -18,8 +20,8 @@ const MacronutrientsChart = ({ max, current, unit, label, color }) => {
<RadialChart <RadialChart
progress={progress} progress={progress}
color={color} color={color}
width={35} width={40}
height={35} height={40}
className={classes.macronutrientsChart} className={classes.macronutrientsChart}
/> />
<Typography variant="caption"> <Typography variant="caption">
@ -34,7 +36,6 @@ MacronutrientsChart.propTypes = {
max: PropTypes.number.isRequired, max: PropTypes.number.isRequired,
current: PropTypes.number.isRequired, current: PropTypes.number.isRequired,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
unit: PropTypes.string.isRequired, unit: PropTypes.string.isRequired,
} }

View File

@ -3,6 +3,7 @@ import {makeStyles} from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
macronutrientsChartWrapper: { macronutrientsChartWrapper: {
width: 'auto', width: 'auto',
paddingRight: theme.spacing(2),
}, },
macronutrientsChart: { macronutrientsChart: {
paddingRight: theme.spacing(1) paddingRight: theme.spacing(1)

View File

@ -1,7 +1,7 @@
import {Typography, Grid} from "@material-ui/core"; import {Typography, Grid} from "@material-ui/core";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React from "react"; import React from "react";
import MacronutrientsChart from "../MacronutrientsChart"; import MacronutrientsChart from "components/MacronutrientsChart";
const MacronutrientsDetails = ({ macronutrients }) => { const MacronutrientsDetails = ({ macronutrients }) => {
return ( return (
@ -15,8 +15,8 @@ const MacronutrientsDetails = ({ macronutrients }) => {
justify="flex-start" justify="flex-start"
alignItems="center" alignItems="center"
> >
{macronutrients.map(({ value, unit }, index) => ( {macronutrients.map(({ value, unit, label }, index) => (
<MacronutrientsChart current={value} unit={unit} max={250} label={'kacl'} color={'red'} key={index} /> <MacronutrientsChart current={value} unit={unit} max={250} label={label} key={index} />
))} ))}
</Grid> </Grid>
</Grid> </Grid>

View File

@ -14,6 +14,22 @@ import MacronutrientsChart from "components/MacronutrientsChart";
import Dish from "components/Dish"; import Dish from "components/Dish";
const Meal = ({ label }) => { const Meal = ({ label }) => {
const calcMealMacronutrients = (dishes) => {
const mealMacronutrients = dishes
.flatMap(({ macronutrients }) => macronutrients)
.reduce((acc, { label, value, unit }) => ({
...acc,
[label]: {
label,
unit,
value: acc[label] ? acc[label].value + value : value
}
}), {})
return Object.entries(mealMacronutrients).map(([_, macronutrients]) => macronutrients)
}
return ( return (
<Accordion> <Accordion>
<AccordionSummary> <AccordionSummary>
@ -23,6 +39,7 @@ const Meal = ({ label }) => {
{label} {label}
</Typography> </Typography>
<IconButton <IconButton
variant="contained"
color="primary" color="primary"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
onFocus={(event) => event.stopPropagation()} onFocus={(event) => event.stopPropagation()}
@ -32,8 +49,8 @@ const Meal = ({ label }) => {
</Grid> </Grid>
<Grid container alignItems="center"> <Grid container alignItems="center">
{ {
MACRONUTRIENTS.map(({ unit, current, max, label, color }, index) => ( calcMealMacronutrients(MEALS_LIST).map(({ unit, value, label }, index) => (
<MacronutrientsChart current={current} unit={unit} max={max} label={label} color={color} key={index} /> <MacronutrientsChart current={value} unit={unit} max={5000} label={label} key={index} />
)) ))
} }
</Grid> </Grid>

View File

@ -2,15 +2,20 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import useStyles from './styles' import useStyles from './styles'
const RadialChart = ({ strokeWidth = 20, circleRadius = 50, progress, color, width, height, className }) => { const RadialChart = ({ strokeWidth = 20, circleRadius = 50, progress, color, width, height }) => {
const classes = useStyles() const classes = useStyles()
const circumference = 2 * Math.PI * circleRadius; const circumference = 2 * Math.PI * circleRadius;
const strokeLength = circumference / 100 * progress; const strokeLength = circumference / 100 * progress;
return ( return (
<div className={`${classes.container} ${className}`}> <div className={classes.chartContainer}>
<svg viewBox="0 0 180 180" width={width} height={height}> <svg
viewBox="0 0 180 180"
className={classes.svg}
width={width}
height={height}
>
<circle <circle
className={classes.chartTotal} className={classes.chartTotal}
stroke={color} stroke={color}

View File

@ -4,7 +4,10 @@ const useStyles = makeStyles((theme) => ({
chartContainer: { chartContainer: {
position: `relative`, position: `relative`,
display: `inline-block`, display: `inline-block`,
transition: `all 0.3s ease-in` transition: `all 0.3s ease-in`,
},
svg: {
marginLeft: theme.spacing(-1),
}, },
chartTotal: { chartTotal: {
opacity: 0.3, opacity: 0.3,

View File

@ -11,7 +11,13 @@ import Meal from "components/Meal";
const HomePage = () => { const HomePage = () => {
return ( return (
<Container > <Container >
<Meal label="dinner" /> <Meal label="Breakfast" />
{/*<Meal label="Snack I" />*/}
{/*<Meal label="Lunch" />*/}
{/*<Meal label="Snack II" />*/}
{/*<Meal label="Dinner" />*/}
{/*<Meal label="Snack III" />*/}
{/*<Meal label="Supper" />*/}
</Container> </Container>
); );
}; };

View File

@ -1,24 +1,26 @@
import purple from "@material-ui/core/colors/purple"; import {green, deepPurple, amber, blue} from "@material-ui/core/colors";
import amber from "@material-ui/core/colors/amber";
import blue from "@material-ui/core/colors/blue";
export const MEALS_LIST = [ export const MEALS_LIST = [
{ {
label: 'eggs', label: 'eggs',
macronutrients: [ macronutrients: [
{ {
label: 'Calories',
value: 1245, value: 1245,
unit: ' kcal', unit: 'kcal',
}, },
{ {
label: 'Carbs',
value: 228.6, value: 228.6,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Fat',
value: 227.0, value: 227.0,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Protein',
value: 127.0, value: 127.0,
unit: 'g', unit: 'g',
}, },
@ -28,18 +30,22 @@ export const MEALS_LIST = [
label: 'bread', label: 'bread',
macronutrients: [ macronutrients: [
{ {
label: 'Calories',
value: 1245, value: 1245,
unit: 'kcal', unit: 'kcal',
}, },
{ {
label: 'Carbs',
value: 228.6, value: 228.6,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Fat',
value: 227.0, value: 227.0,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Protein',
value: 127.0, value: 127.0,
unit: 'g', unit: 'g',
}, },
@ -49,18 +55,22 @@ export const MEALS_LIST = [
label: 'corn flakes', label: 'corn flakes',
macronutrients: [ macronutrients: [
{ {
label: 'Calories',
value: 1245, value: 1245,
unit: ' kcal', unit: 'kcal',
}, },
{ {
label: 'Carbs',
value: 228.6, value: 228.6,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Fat',
value: 227.0, value: 227.0,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Protein',
value: 127.0, value: 127.0,
unit: 'g', unit: 'g',
}, },
@ -72,18 +82,22 @@ export const MENU_LIST = [
{ {
macronutrients: [ macronutrients: [
{ {
label: 'Calories',
value: 1245, value: 1245,
unit: ' kcal', unit: ' kcal',
}, },
{ {
label: 'Carbs',
value: 228.6, value: 228.6,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Fat',
value: 227.0, value: 227.0,
unit: 'g', unit: 'g',
}, },
{ {
label: 'Protein',
value: 127.0, value: 127.0,
unit: 'g', unit: 'g',
}, },
@ -111,12 +125,19 @@ export const MENU_LIST = [
export const CALORIESLEFT = 1234 export const CALORIESLEFT = 1234
export const MACRONUTRIENTS = [ export const MACRONUTRIENTS = [
{
current: 123,
max: 250,
label: 'Calories',
unit: 'kcal',
color: green[600],
},
{ {
current: 123, current: 123,
max: 250, max: 250,
label: 'Carbs', label: 'Carbs',
unit: 'g', unit: 'g',
color: purple[500], color: deepPurple[500],
}, },
{ {
current: 35, current: 35,

View File

@ -1,4 +1,12 @@
import { createMuiTheme } from '@material-ui/core/styles'; import { createMuiTheme } from '@material-ui/core/styles';
import {green, deepPurple, amber, blue} from "@material-ui/core/colors";
export const colors = {
calories: green[600],
carbs: deepPurple[500],
fat: amber[500],
protein: blue[500],
}
const theme = createMuiTheme({ const theme = createMuiTheme({
palette: { palette: {