sync updates for mobile

d3-practice/src/App.css

@@ -36,7 +36,7 @@
   padding-left: 20px;
   padding-right: 20px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }

d3-practice/src/App.js

@@ -6,6 +6,8 @@ import Menu from "./components/Menu";
 import MineralList from "./components/MineralList";
 import VitaminList from "./components/VitaminList/VitaminList";
 import profilePic from "./assets/images/Profile_Pic_Deadlift_POP_OFF.png";
+import MineralChart from "./components/MineralChart";
+import VitaminChart from "./components/VitaminChart";
 
 // Convert data object into array
 const foodArray = Object.keys(data).map((foodId) => ({
@@ -111,6 +113,11 @@ function App() {
       <div className="App-chart">
         <RadialBarChart foodData={selectedFood.nutrients} />
       </div>
+
+      <div>
+        <MineralChart foodData={selectedFood.nutrients} />
+        <VitaminChart foodData={selectedFood.nutrients} />
+      </div>
     </div>
   );
 }

d3-practice/src/components/BarChart/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme } from "victory";
-import data from "../transformedData.json";
+import data from "../finalData.json";
 
 const foodId1Data = data.foodId1.nutrients;
 const chartData = Object.keys(foodId1Data).map((nutrient) => ({

d3-practice/src/components/MineralChart/index.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { VictoryBar, VictoryChart, VictoryAxis } from "victory";
+import {
+  getNutrientColor,
+  isVitamin,
+  isMineral,
+} from "../RadialBarChart/getNutrientColor";
+
+function MineralChart({ foodData }) {
+  const mineralsData = foodData.filter(({ nutrient }) => isMineral(nutrient));
+
+  return (
+    <VictoryChart domainPadding={10}>
+      <VictoryAxis />
+      <VictoryAxis dependentAxis />
+      <VictoryBar
+        data={mineralsData}
+        x="nutrient"
+        y="value"
+        style={{
+          data: { fill: ({ datum }) => getNutrientColor(datum.nutrient) },
+        }}
+      />
+    </VictoryChart>
+  );
+}
+
+export default MineralChart;

d3-practice/src/components/VitaminChart/index.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { VictoryBar, VictoryChart, VictoryAxis } from "victory";
+import {
+  getNutrientColor,
+  isVitamin,
+  isMineral,
+} from "../RadialBarChart/getNutrientColor";
+
+function VitaminChart({ foodData }) {
+  const vitaminsData = foodData.filter(({ nutrient }) => isVitamin(nutrient));
+
+  return (
+    <VictoryChart domainPadding={10}>
+      <VictoryAxis />
+      <VictoryAxis dependentAxis />
+      <VictoryBar
+        data={vitaminsData}
+        x="nutrient"
+        y="value"
+        style={{
+          data: { fill: ({ datum }) => getNutrientColor(datum.nutrient) },
+        }}
+      />
+    </VictoryChart>
+  );
+}
+
+export default VitaminChart;