Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev scrum 32 #20

Closed
wants to merge 7 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixed Graphs yay
joesumargo committed Apr 19, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit c47df0cc275d512d0a5793ee22cd3390b7e0afb4
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@types/papaparse": "^5.3.14",
"bootstrap": "^5.3.3",
"firebase": "^10.6.0",
"papaparse": "^5.4.1",
47 changes: 29 additions & 18 deletions src/pages/Graphs/Graphs.tsx
Original file line number Diff line number Diff line change
@@ -5,34 +5,40 @@ import useWindowDimensions from "../../hooks/WindowDimensionsHook.tsx";
import {Link} from "react-router-dom";
import {Header} from "../../components/Header.tsx";
import {Sidebar} from "../../components/Sidebar.tsx";
import Cumulative from "./components/CumulativeChart.tsx"
import React, {useState} from "react";
import Papa from "papaparse";
import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";

export default function Dashboard(){

const [data, setData] = useState([[]]);
const [index, setIndex] = useState(0);
const dataKeys = ["moneyIn", "moneyOut", "sum"];

const tiles = [
{d: data[0], cols:1, rows: 1},
{d: data[1], cols:2, rows: 2},
{d: data[2], cols:3, rows: 3}
{d: data[0], cols:3, rows: 1},
{d: data[1], cols:3, rows: 1},
{d: data[2], cols:3, rows: 1}
];
const tileSize = (tile: typeof tiles[0]) => ({
colSpan: tile.cols,
rowSpan: tile.rows
});
const render: RenderTileFunction<typeof tiles[0]> = ({ data,isDragging }) => (
const render: RenderTileFunction<typeof tiles[0]> = ({ data }) => (
<div style={{ padding: ".75rem", width: "100%" }}>
<div className={`tile card ${isDragging ? "dragging" : ""}`}
style={{ width: "100%", height: "100%" }}>
<Cumulative data={data.d} key="moneyIn"/>
{isDragging ? "AHHH" : null}
<div className={`tile card : ""}`} style={{ width: "100%", height: "100%" }}>
<ResponsiveContainer width={"100%"} height={"100%"}>
<LineChart data={data.d}>
<XAxis dataKey="date"/>
<YAxis/>
<Tooltip/>
<Line type="monotone" dataKey={dataKeys[index]} stroke="#8884d8"/>
</LineChart>
</ResponsiveContainer>
</div>
</div>
);


const cumulate = (data) => {
let total = 0;
return data.map(value => {
@@ -83,12 +89,13 @@ export default function Dashboard(){
})
return(result);
}
const handleFileChange = (e) => {
const handleFileChange = (e: Event) => {
// @ts-ignore
const file = e.target.files[0];
if (file) {
Papa.parse(file, {
complete: (results) => {
const parsedData = results.data.map((row: any) => ({
const parsedData = results.data.map((row) => ({
moneyIn: row['Money In'] ? parseFloat(row['Money In']) : 0,
moneyOut: row['Money Out'] ? parseFloat(row['Money Out']) : 0,
date: String(row['Date'])
@@ -100,9 +107,12 @@ export default function Dashboard(){
});
}
};
const handleIndexChange = (e) => {
setIndex((index + 1) % 3)
}

const {width} = useWindowDimensions();
const columns = Math.max(Math.floor(width / 200), 1);
const columns = Math.max(Math.floor(width / 400), 1);

return (
<div className="vh-100 d-flex flex-column">
@@ -111,20 +121,21 @@ export default function Dashboard(){
<div className="App ps-5 pe-5 mt-3">
<h1>Testing Graph Tiles</h1>
<input type="file" accept=".csv" onChange={handleFileChange}/>
<button onClick={handleIndexChange}>Click to Change Type</button>
<p><Link to={"/"}>Go back</Link></p>
<h1>{dataKeys[index]}</h1>
<TilesContainer
data={tiles}
renderTile={render}
tileSize={tileSize}
ratio={1}
columns={columns}
></TilesContainer>
<Cumulative data={data[0]} key="moneyIn"/>
<div>
<h2>Data:</h2>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</div>
{/*<div>*/}
{/* <h2>Data:</h2>*/}
{/* <pre>{JSON.stringify(data, null, 2)}</pre>*/}
{/*</div>*/}
</Sidebar>
</div>
);
24 changes: 0 additions & 24 deletions src/pages/Graphs/components/CumulativeChart.tsx

This file was deleted.