Skip to content
Snippets Groups Projects
Commit 3b3027e3 authored by Shrey Patel's avatar Shrey Patel
Browse files

added dropdown for create org and added pie chart

parent d94bb818
No related branches found
No related tags found
No related merge requests found
......@@ -18,6 +18,7 @@
"axios": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-charts": "^4.0.1",
"react-router-dom": "^6.18.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
......@@ -15234,6 +15235,15 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-google-charts": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.1.tgz",
"integrity": "sha512-V/hcMcNuBgD5w49BYTUDye+bUKaPmsU5vy/9W/Nj2xEeGn+6/AuH9IvBkbDcNBsY00cV9OeexdmgfI5RFHgsXQ==",
"peerDependencies": {
"react": ">=16.3.0",
"react-dom": ">=16.3.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
......
......@@ -13,6 +13,7 @@
"axios": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-charts": "^4.0.1",
"react-router-dom": "^6.18.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
......
......@@ -26,6 +26,7 @@ import OrganizationItemCreate from "./components/myorg/item/OrganizationItemCrea
import OrganizationLocations from "./components/myorg/location/OrganizationLocations";
import OrganizationRequests from "./components/myorg/request/OrganizationRequests";
import MyRequests from "./components/myrequests/MyRequests";
import OrgChart from "./components/stats/OrgChart";
function App() {
// const [token, setToken] = useState();
......@@ -118,6 +119,7 @@ function App() {
path="/listallorganizations"
element={<ListAllOrganizations />}
/>
<Route path="/allorganizationstatistics" element={<OrgChart />} />
</Routes>
</div>
);
......
......@@ -34,15 +34,15 @@ export const Navbar = ({ token }) => {
<li>
<NavLink to="/accountinfo">Account Information</NavLink>
</li>
<li>
<li>
<NavLink to="/myorganizations">My Organizations</NavLink>
</li>
</li>
<li>
<NavLink to="/createorganization">Create Organization</NavLink>
</li>
<li>
<NavLink to="/myrequests">My Requests</NavLink>
</li>
</li>
<li>
<NavLink to="/createrequest">Create Request</NavLink>
</li>
......@@ -51,6 +51,11 @@ export const Navbar = ({ token }) => {
List All Organizations
</NavLink>
</li>
<li>
<NavLink to="/allorganizationstatistics">
Organziation Statistics
</NavLink>
</li>
<li>
<NavLink
to="/"
......
import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Chart } from "react-google-charts";
export const OrgChart = () => {
const [info, setInfo] = useState();
useEffect(() => {
// Fetch user information when the component mounts
getOrgStats();
}, []); // Empty dependency array ensures the effect runs once
const getOrgStats = async () => {
try {
const response = await Axios.get(
"http://localhost:8080/organization/all/stats"
);
const some = [["Task", "Hours per Day"], ...response.data.data];
setInfo(some);
} catch (error) {
console.error("Error fetching stats:", error);
}
};
const options = {
title: "My Daily Activities",
};
return (
<Chart
chartType="PieChart"
data={info}
options={options}
width={"100%"}
height={"400px"}
/>
);
};
export default OrgChart;
......@@ -47,6 +47,14 @@ export const CreateOrganization = ({ token }) => {
window.location.reload(false);
};
const categories = [
"GREEKLIFE",
"ACADEMIC",
"RECREATION",
"TECHNOLOGY",
"POLITICS",
];
return (
<div className="creation-form-container">
<h2>Create Organization</h2>
......@@ -80,13 +88,18 @@ export const CreateOrganization = ({ token }) => {
/>
<label htmlFor="category">Category</label>
<input
<select
value={category}
onChange={(e) => setCategory(e.target.value)}
id="category"
name="category"
placeholder="Category"
/>
name="category">
<option value="">Select a category</option>
{categories.map((cat, index) => (
<option key={index} value={cat}>
{cat}
</option>
))}
</select>
<button type="submit">Create</button>
</form>
......
package com.example.accessingdatamysql.org;
import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import jakarta.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.List;
import java.util.Map;
@Repository
public class CustomOrganizationRepository
{
@Autowired
private EntityManager entityManager;
@Transactional
public List<Object[]> countOrganizationsByCategory()
{
String query = "SELECT category, COUNT(*) FROM Organization GROUP BY category";
Query q = this.entityManager.createNativeQuery(query);
return (List<Object[]>)q.getResultList();
}
}
\ No newline at end of file
......@@ -6,18 +6,27 @@ import com.example.accessingdatamysql.myorg.OrganizationRoster;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@CrossOrigin
@RestController // This means that this class is a Controller
@RequestMapping(path="/organization") // This means URL's start with /demo (after Application path)
public class OrgController {
@Autowired // This means to get the bean called userRepository
// Which is auto-generated by Spring, we will use it to handle the data
@Autowired
private OrgRepository orgRepository;
@Autowired // This means to get the bean called userRepository
// Which is auto-generated by Spring, we will use it to handle the data
@Autowired
private OrgRosterRepository orgRosterRepository;
@Autowired
private CustomOrganizationRepository customOrganizationRepository;
@PostMapping(path = "/add") // Map ONLY POST Requests
@ResponseBody
public Organization addJsonOrg(@RequestBody Organization org) {
......@@ -35,11 +44,18 @@ public class OrgController {
return orgRepository.findAll();
}
// @GetMapping(path = "/org")
// public @ResponseBody Optional<User> getOrganization(@RequestBody Map<String, String> json)
// {
// String email = json.get("email");
// return userRepository.findById(email);
// }
@GetMapping(path="/all/stats")
public @ResponseBody Map<String, Object> getAllOrgStats() {
// This returns a JSON with statistics about how many organziations are in each category
List<Object[]> categoryCounts = customOrganizationRepository.countOrganizationsByCategory();
Map<String, Object> response = new HashMap<>();
// for (Object[] row : categoryCounts) {
// Organization.Category category = (Organization.Category) row[0];
// Long count = (Long) row[1];
// stats.put(category.toString(), count);
// }
response.put("data", categoryCounts);
return response;
}
}
......@@ -12,7 +12,6 @@ public class Organization {
RECREATION,
TECHNOLOGY,
POLITICS,
GREEKLIFE
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment