Add the calculation of macronutrients from meals
This commit is contained in:
parent
693c89c666
commit
64ab7aef58
@ -2,11 +2,13 @@ import {Grid, Typography, Tooltip} from "@material-ui/core";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import RadialChart from "components/RadialChart";
|
||||
import {colors} from "utils/theme";
|
||||
import useStyles from './styles'
|
||||
|
||||
const MacronutrientsChart = ({ max, current, unit, label, color }) => {
|
||||
const MacronutrientsChart = ({ max, current, unit, label }) => {
|
||||
const classes = useStyles()
|
||||
const progress = current / max * 100
|
||||
const color = colors[label.toLowerCase()]
|
||||
|
||||
return (
|
||||
<Tooltip title={label} aria-label={label}>
|
||||
@ -18,8 +20,8 @@ const MacronutrientsChart = ({ max, current, unit, label, color }) => {
|
||||
<RadialChart
|
||||
progress={progress}
|
||||
color={color}
|
||||
width={35}
|
||||
height={35}
|
||||
width={40}
|
||||
height={40}
|
||||
className={classes.macronutrientsChart}
|
||||
/>
|
||||
<Typography variant="caption">
|
||||
@ -34,7 +36,6 @@ MacronutrientsChart.propTypes = {
|
||||
max: PropTypes.number.isRequired,
|
||||
current: PropTypes.number.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
color: PropTypes.string.isRequired,
|
||||
unit: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
|
@ -3,6 +3,7 @@ import {makeStyles} from "@material-ui/core/styles";
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
macronutrientsChartWrapper: {
|
||||
width: 'auto',
|
||||
paddingRight: theme.spacing(2),
|
||||
},
|
||||
macronutrientsChart: {
|
||||
paddingRight: theme.spacing(1)
|
||||
|
@ -1,7 +1,7 @@
|
||||
import {Typography, Grid} from "@material-ui/core";
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
import MacronutrientsChart from "../MacronutrientsChart";
|
||||
import MacronutrientsChart from "components/MacronutrientsChart";
|
||||
|
||||
const MacronutrientsDetails = ({ macronutrients }) => {
|
||||
return (
|
||||
@ -15,8 +15,8 @@ const MacronutrientsDetails = ({ macronutrients }) => {
|
||||
justify="flex-start"
|
||||
alignItems="center"
|
||||
>
|
||||
{macronutrients.map(({ value, unit }, index) => (
|
||||
<MacronutrientsChart current={value} unit={unit} max={250} label={'kacl'} color={'red'} key={index} />
|
||||
{macronutrients.map(({ value, unit, label }, index) => (
|
||||
<MacronutrientsChart current={value} unit={unit} max={250} label={label} key={index} />
|
||||
))}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
@ -14,6 +14,22 @@ import MacronutrientsChart from "components/MacronutrientsChart";
|
||||
import Dish from "components/Dish";
|
||||
|
||||
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 (
|
||||
<Accordion>
|
||||
<AccordionSummary>
|
||||
@ -23,6 +39,7 @@ const Meal = ({ label }) => {
|
||||
{label}
|
||||
</Typography>
|
||||
<IconButton
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onFocus={(event) => event.stopPropagation()}
|
||||
@ -32,8 +49,8 @@ const Meal = ({ label }) => {
|
||||
</Grid>
|
||||
<Grid container alignItems="center">
|
||||
{
|
||||
MACRONUTRIENTS.map(({ unit, current, max, label, color }, index) => (
|
||||
<MacronutrientsChart current={current} unit={unit} max={max} label={label} color={color} key={index} />
|
||||
calcMealMacronutrients(MEALS_LIST).map(({ unit, value, label }, index) => (
|
||||
<MacronutrientsChart current={value} unit={unit} max={5000} label={label} key={index} />
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
|
@ -2,15 +2,20 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
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 circumference = 2 * Math.PI * circleRadius;
|
||||
const strokeLength = circumference / 100 * progress;
|
||||
|
||||
return (
|
||||
<div className={`${classes.container} ${className}`}>
|
||||
<svg viewBox="0 0 180 180" width={width} height={height}>
|
||||
<div className={classes.chartContainer}>
|
||||
<svg
|
||||
viewBox="0 0 180 180"
|
||||
className={classes.svg}
|
||||
width={width}
|
||||
height={height}
|
||||
>
|
||||
<circle
|
||||
className={classes.chartTotal}
|
||||
stroke={color}
|
||||
|
@ -4,7 +4,10 @@ const useStyles = makeStyles((theme) => ({
|
||||
chartContainer: {
|
||||
position: `relative`,
|
||||
display: `inline-block`,
|
||||
transition: `all 0.3s ease-in`
|
||||
transition: `all 0.3s ease-in`,
|
||||
},
|
||||
svg: {
|
||||
marginLeft: theme.spacing(-1),
|
||||
},
|
||||
chartTotal: {
|
||||
opacity: 0.3,
|
||||
|
@ -11,7 +11,13 @@ import Meal from "components/Meal";
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
@ -1,24 +1,26 @@
|
||||
import purple from "@material-ui/core/colors/purple";
|
||||
import amber from "@material-ui/core/colors/amber";
|
||||
import blue from "@material-ui/core/colors/blue";
|
||||
import {green, deepPurple, amber, blue} from "@material-ui/core/colors";
|
||||
|
||||
export const MEALS_LIST = [
|
||||
{
|
||||
label: 'eggs',
|
||||
macronutrients: [
|
||||
{
|
||||
label: 'Calories',
|
||||
value: 1245,
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
label: 'Carbs',
|
||||
value: 228.6,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Fat',
|
||||
value: 227.0,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Protein',
|
||||
value: 127.0,
|
||||
unit: 'g',
|
||||
},
|
||||
@ -28,18 +30,22 @@ export const MEALS_LIST = [
|
||||
label: 'bread',
|
||||
macronutrients: [
|
||||
{
|
||||
label: 'Calories',
|
||||
value: 1245,
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
label: 'Carbs',
|
||||
value: 228.6,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Fat',
|
||||
value: 227.0,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Protein',
|
||||
value: 127.0,
|
||||
unit: 'g',
|
||||
},
|
||||
@ -49,18 +55,22 @@ export const MEALS_LIST = [
|
||||
label: 'corn flakes',
|
||||
macronutrients: [
|
||||
{
|
||||
label: 'Calories',
|
||||
value: 1245,
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
label: 'Carbs',
|
||||
value: 228.6,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Fat',
|
||||
value: 227.0,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Protein',
|
||||
value: 127.0,
|
||||
unit: 'g',
|
||||
},
|
||||
@ -72,18 +82,22 @@ export const MENU_LIST = [
|
||||
{
|
||||
macronutrients: [
|
||||
{
|
||||
label: 'Calories',
|
||||
value: 1245,
|
||||
unit: ' kcal',
|
||||
},
|
||||
{
|
||||
label: 'Carbs',
|
||||
value: 228.6,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Fat',
|
||||
value: 227.0,
|
||||
unit: 'g',
|
||||
},
|
||||
{
|
||||
label: 'Protein',
|
||||
value: 127.0,
|
||||
unit: 'g',
|
||||
},
|
||||
@ -111,12 +125,19 @@ export const MENU_LIST = [
|
||||
export const CALORIESLEFT = 1234
|
||||
|
||||
export const MACRONUTRIENTS = [
|
||||
{
|
||||
current: 123,
|
||||
max: 250,
|
||||
label: 'Calories',
|
||||
unit: 'kcal',
|
||||
color: green[600],
|
||||
},
|
||||
{
|
||||
current: 123,
|
||||
max: 250,
|
||||
label: 'Carbs',
|
||||
unit: 'g',
|
||||
color: purple[500],
|
||||
color: deepPurple[500],
|
||||
},
|
||||
{
|
||||
current: 35,
|
||||
|
@ -1,4 +1,12 @@
|
||||
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({
|
||||
palette: {
|
||||
|
Loading…
Reference in New Issue
Block a user