generated from chingu-voyages/voyage-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #27 from chingu-voyages/layout-predrag
minor changes to styling / tailwind theme improvement / navigation improvement / new components / reusability
- Loading branch information
Showing
16 changed files
with
531 additions
and
63 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { PieChart, Pie, Cell } from "recharts"; | ||
|
|
||
| const data = [ | ||
| { name: "Fari", value: 50 }, | ||
| { name: "Luigi", value: 25 }, | ||
| { name: "Mina", value: 25 }, | ||
| ]; | ||
|
|
||
| const COLORS = ["#4F46E5", "blue", "#F97316"]; | ||
|
|
||
| const renderCustomizedLabel = ({ | ||
| cx, | ||
| cy, | ||
| midAngle, | ||
| innerRadius, | ||
| outerRadius, | ||
| percent, | ||
| }) => { | ||
| const radius = innerRadius + (outerRadius - innerRadius) * 0.5; | ||
| const x = cx + radius * Math.cos(-midAngle * (Math.PI / 180)); | ||
| const y = cy + radius * Math.sin(-midAngle * (Math.PI / 180)); | ||
|
|
||
| return ( | ||
| <text | ||
| x={x} | ||
| y={y} | ||
| fill="#FFFFFF" | ||
| textAnchor="middle" | ||
| dominantBaseline="central" | ||
| className=" font-semibold text-xl" | ||
| > | ||
| {(percent * 100).toFixed(0)}% | ||
| </text> | ||
| ); | ||
| }; | ||
|
|
||
| function GroupChart() { | ||
| return ( | ||
| <section className="flex flex-col items-center justify-center w-96 bg-white p-6 rounded-lg shadow"> | ||
| <div className="w-full flex justify-between"> | ||
| <p className="font-semibold text-xl">Budget Split</p> | ||
| <button>Monthly ▼</button> | ||
| </div> | ||
|
|
||
| <PieChart width={300} height={270}> | ||
| <Pie | ||
| data={data} | ||
| cx={150} | ||
| cy={130} | ||
| innerRadius={50} | ||
| outerRadius={100} | ||
| fill="#8884d8" | ||
| paddingAngle={1} | ||
| dataKey="value" | ||
| labelLine={false} | ||
| label={renderCustomizedLabel} | ||
| > | ||
| {data.map((entry, index) => ( | ||
| <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> | ||
| ))} | ||
| </Pie> | ||
| {/* out of the box Legend, ignore for now */} | ||
| {/* <Legend verticalAlign="bottom" align="center" height={50} /> */} | ||
| </PieChart> | ||
|
|
||
| {/* Custom legend */} | ||
| <div className="mb-4 p-4 px-8 shadow w-3/5 "> | ||
| {data.map((entry, index) => ( | ||
| <div key={index} className="flex my-2 items-center space-x-3"> | ||
| <span | ||
| className="w-3 h-3 rounded-full" | ||
| style={{ backgroundColor: COLORS[index] }} | ||
| ></span> | ||
| <span className="text-black">{entry.name}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default GroupChart; | ||
|
|
||
| // CHART EXPLANATION CODE, "RECHARTS" PACKAGE IS USED FOR CHARTS | ||
| // ---------------------------------------------------- | ||
| // <PieChart>: Defines the overall chart's width and height. | ||
|
|
||
| // <Pie>: | ||
| // -This component takes data and builds a donut chart based on the value field of each entry. | ||
| // -cx and cy control the center of the pie chart. | ||
| // -innerRadius and outerRadius control the donut's thickness. | ||
| // -paddingAngle adds space between the slices. | ||
| // -dataKey="value" is the key used to calculate the size of the pie slices (in this case, the value field). | ||
| // -label shows the percentage labels inside the pie slices, using the renderCustomizedLabel function. | ||
| // ---------------------- | ||
| // <Cell>: | ||
| // -Each slice of the pie is rendered as a Cell, and each cell gets a color from the COLORS array. | ||
| // -fill={COLORS[index % COLORS.length]} dynamically applies the color based on the index of each slice. | ||
| // ---------------------- | ||
| // Legend Component (currently): | ||
|
|
||
| // -It’s the built-in Recharts Legend placed at the bottom (verticalAlign="bottom") and center (align="center"). | ||
| // -This is currently active but will be replaced by a custom legend for better control. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| function Friends() { | ||
| return ( | ||
| <div className="text-5xl"> | ||
| Friends | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Friends |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,44 @@ | ||
| import GroupChart from "../components/GroupChart"; | ||
| import ExpenseBar from "../components/GroupExpenseBar"; | ||
| import GroupExpenseTable from "../components/GroupExpenseTable"; | ||
| import GroupMembers from "../components/GroupMembers"; | ||
| import GroupName from "../components/GroupName"; | ||
| import GroupSmallExpenseCard from "../components/GroupSmallExpenseCard"; | ||
| // icons | ||
| import { FaPiggyBank } from "react-icons/fa6"; | ||
| import { FaCartShopping } from "react-icons/fa6"; | ||
| import { GiReceiveMoney } from "react-icons/gi"; | ||
|
|
||
| function Groups() { | ||
| return ( | ||
| <div className="flex flex-col gap-8 m-6"> | ||
| <section className="flex flex-col gap-8 m-6"> | ||
| <GroupName /> | ||
| <GroupSmallExpenseCard /> | ||
| <ExpenseBar expense={300} budget={1000} /> | ||
|
|
||
| <div className="flex gap-6 flex-col xl:flex-row"> | ||
| <GroupSmallExpenseCard | ||
| icon={FaPiggyBank} | ||
| label="Total budget" | ||
| value="1000 $" | ||
| button="Edit" | ||
| ></GroupSmallExpenseCard> | ||
| <GroupSmallExpenseCard | ||
| icon={FaCartShopping} | ||
| label="Total expense" | ||
| value="700 $" | ||
| ></GroupSmallExpenseCard> | ||
| <GroupSmallExpenseCard | ||
| icon={GiReceiveMoney} | ||
| label="Remaining budget" | ||
| value="300 $" | ||
| ></GroupSmallExpenseCard> | ||
| </div> | ||
|
|
||
| <ExpenseBar expense={900} budget={1000} /> | ||
| <GroupChart /> | ||
| <GroupMembers /> | ||
| <GroupExpenseTable /> | ||
| </div> | ||
| </section> | ||
| ); | ||
|
|
||
| } | ||
|
|
||
| export default Groups; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| function Home() { | ||
| return ( | ||
| <div> | ||
| {/* Home */} | ||
| <div className="text-5xl"> | ||
| Home Page | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.