Add the calculation of macronutrients from meals

src/components/MacronutrientsChart/index.js

@@ -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,
 }
 

src/components/MacronutrientsChart/styles.js

@@ -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)

src/components/MacronutrientsDetails/index.js

@@ -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>

src/components/Meal/index.js

@@ -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>

src/components/RadialChart/index.js

@@ -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}

src/components/RadialChart/styles.js

@@ -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,

src/pages/Home/index.js

@@ -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>
   );
 };

src/utils/mock.js

@@ -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',
+        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',
+        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,

src/utils/theme.js

@@ -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: {