From 68d91529cc35c0f1d90505ea5b01539699ddbc0c Mon Sep 17 00:00:00 2001
From: ericj <eric.jaekel@web.de>
Date: Mon, 9 Sep 2024 14:52:34 +0200
Subject: [PATCH] add visualization component
---
src/components/Visualization.tsx | 21 +++++++++++++++++++++
src/screens/InsightsScreen.tsx | 26 +++++++++++---------------
2 files changed, 32 insertions(+), 15 deletions(-)
create mode 100644 src/components/Visualization.tsx
diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx
new file mode 100644
index 0000000..0fea59a
--- /dev/null
+++ b/src/components/Visualization.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+ Typography
+} from '@mui/material';
+import "../style/style.scss"
+
+const Visualization: React.FC<{ title: string, children: React.ReactNode}> = (
+ {
+ title,
+ children ,
+ }) => {
+
+ return (<>
+ <div className="graphContainer">
+ <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>{title}</Typography>
+ {children}
+ </div>
+ </>);
+};
+
+export default Visualization;
diff --git a/src/screens/InsightsScreen.tsx b/src/screens/InsightsScreen.tsx
index cf246e1..a452a39 100644
--- a/src/screens/InsightsScreen.tsx
+++ b/src/screens/InsightsScreen.tsx
@@ -6,6 +6,7 @@ import {calculateInsights} from "../utils/userServices.ts";
import {StarFilled} from "@ant-design/icons";
import "../style/style.scss"
import NoRecipes from "../components/NoRecipes.tsx";
+import Visualization from "../components/Visualization.tsx";
const starColors = ["#ffad35", "#bdbdbd", "#bf876b"]
@@ -17,8 +18,7 @@ const InsightsScreen: React.FC = () => {
return (
<Container sx={{width: "100%", display: "flex", justifyContent: "stretch", flexDirection: "column"}}>
- <div className="graphContainer">
- <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>Your Favorite Meals</Typography>
+ <Visualization title={"Your Favorite Meals"}>
{insights.favoriteRecipes.map((recipe, i) =>
<Container key={i}
sx={{display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 3}}>
@@ -32,9 +32,8 @@ const InsightsScreen: React.FC = () => {
<Typography variant={"body2"}>Views: {recipe.viewCount}</Typography>
</Container>
)}
- </div>
- <div className="graphContainer">
- <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>Ratio of Custom Recipes</Typography>
+ </Visualization>
+ <Visualization title={"Ratio of Custom Recipes"}>
<PieChart
series={[{
arcLabel: (item) => `${(item.value * 100).toFixed(0)}%`,
@@ -47,9 +46,8 @@ const InsightsScreen: React.FC = () => {
margin={{left: -100}}
height={200}
/>
- </div>
- <div className="graphContainer">
- <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>Your Favorite Meal Categories</Typography>
+ </Visualization>
+ <Visualization title={"Your Favorite Meal Categories"}>
<BarChart
xAxis={[{
scaleType: 'band',
@@ -63,9 +61,8 @@ const InsightsScreen: React.FC = () => {
}]}
height={200}
/>
- </div>
- <div className="graphContainer">
- <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>Your Favorite Ingredients</Typography>
+ </Visualization>
+ <Visualization title={"Your Favorite Ingredients"}>
<BarChart
xAxis={[{
scaleType: 'band',
@@ -79,9 +76,8 @@ const InsightsScreen: React.FC = () => {
}]}
height={200}
/>
- </div>
- <div className="graphContainer">
- <Typography align={"center"} sx={{margin: 2}} variant={"h5"}>Vegan / Vegetarian Meals</Typography>
+ </Visualization>
+ <Visualization title={"Vegan / Vegetarian Meals"}>
<Gauge
value={insights.veganVegetarianCount}
valueMax={insights.recipeCount}
@@ -97,7 +93,7 @@ const InsightsScreen: React.FC = () => {
text={`${insights.veganVegetarianCount} / ${insights.recipeCount}`}
height={200}
/>
- </div>
+ </Visualization>
</Container>
);
};
--
GitLab