Skip to content

Commit

Permalink
Pie Charts
Browse files Browse the repository at this point in the history 
Final version of the Pie-Chart-Testing fork. After merging with the 7Cav ADR, this branch will be deleted
  • Loading branch information
@Vercin-G
Vercin-G committed Sep 13, 2023
1 parent b21c5b6 commit 7388916
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 89 deletions.
162 changes: 105 additions & 57 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState} from "react";
import React, { useEffect, useState } from "react";
import "./App.css";
import Collapsible from "react-collapsible";
import lists from "./modules/Generic/BilletBank";
Expand Down Expand Up @@ -28,7 +28,7 @@ function MilpacRequest() {
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "dig85agbqz");
</script>`;
</script>`;

// Reusable API fetching function
async function fetchData(url, setFunction) {
Expand Down Expand Up @@ -74,7 +74,7 @@ function MilpacRequest() {
setLoading(false);
});
}, []);

var milpacArray = [];
milpacArray.push({
combat: milpacList,
Expand Down Expand Up @@ -465,59 +465,107 @@ function MilpacRequest() {
triggerOpenedClassName="Title"
open={true}
>
<div className="Regiment Breakdown">
7th Cavalry Regiment {'('}Active Duty and Line Billets only{')'}
<Statistics
billetIDs={[
lists.oneSevenCommand,
lists.alpha1,
lists.bravo1,
lists.charlie1,
]}
labelArray = {['Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
milpacArray = {milpacArray}
/>
</div>
<div className="OneSevenBreakdown">
First Battalion
<Statistics
billetIDs={[
lists.oneSevenCommand,
lists.alpha1,
lists.bravo1,
lists.charlie1,
]}
labelArray = {['1-7 Headquarters','Alpha Company','Bravo Troop','Charlie Company']}
milpacArray = {milpacArray}
/>
</div>
<div className="TwoSevenBreakdown">
Second Battalion
<Statistics
billetIDs={[
lists.twoSevenCommand,
lists.alpha2,
lists.bravo2,
lists.charlie2,
]}
labelArray = {['2-7 Headquarters','Alpha Company','Bravo Company','Charlie Company']}
milpacArray = {milpacArray}
/>
</div>
<div className="ACDStrength">
Auxillary Combat Division
<Statistics
billetIDs={[
lists.acdCommand,
lists.alpha3,
lists.bravo3,
lists.charlie3,
lists.starterPlatoon,
]}
labelArray = {['ACD Headquarters','Alpha Company','Bravo Company','Charlie Company','Star Citizen Starter Platoon']}
milpacArray = {milpacArray}
/>
</div>
<div className="RegimentBreakdown">
<div className="Subtitle">
7th Cavalry Regiment {"("}Active Duty and Line Billets only
{")"}
</div>
<Statistics
billetIDs={[
lists.regiCommand,
lists.oneSevenCommand,
lists.alpha1,
lists.bravo1,
lists.charlie1,
lists.twoSevenCommand,
lists.alpha2,
lists.bravo2,
lists.charlie2,
lists.acdCommand,
lists.alpha3,
lists.bravo3,
lists.charlie3,
lists.starterPlatoon,
]}
labelArray={[
"General Staff",
"1-7 Headquarters",
"Alpha Company 1-7",
"Bravo Troop 1-7",
"Charlie Company 1-7",
"2-7 Headquarters",
"Alpha Company 2-7",
"Bravo Company 2-7",
"Charlie Company 2-7",
"ACD Headquarters",
"Alpha Company ACD",
"Bravo Company ACD",
"Charlie Company ACD",
"Star Citizen Starter Platoon",
]}
milpacArray={milpacArray}
useRegiLogic={true}
/>
</div>
<div className="OneSevenBreakdown">
<div className="Subtitle">First Battalion</div>
<Statistics
billetIDs={[
lists.oneSevenCommand,
lists.alpha1,
lists.bravo1,
lists.charlie1,
]}
centerLabel={"Total 1-7 Strength"}
labelArray={[
"1-7 Headquarters",
"Alpha Company",
"Bravo Troop",
"Charlie Company",
]}
milpacArray={milpacArray}
/>
</div>
<div className="TwoSevenBreakdown">
<div className="Subtitle">Second Battalion</div>
<Statistics
billetIDs={[
lists.twoSevenCommand,
lists.alpha2,
lists.bravo2,
lists.charlie2,
]}
centerLabel={"Total 2-7 Strength"}
labelArray={[
"2-7 Headquarters",
"Alpha Company",
"Bravo Company",
"Charlie Company",
]}
milpacArray={milpacArray}
/>
</div>
<div className="ACDStrength">
<div className="Subtitle">Auxillary Combat Division</div>
<Statistics
billetIDs={[
lists.acdCommand,
lists.alpha3,
lists.bravo3,
lists.charlie3,
lists.starterPlatoon,
]}
centerLabel={"Total ACD Strength"}
labelArray={[
"ACD Headquarters",
"Alpha Company",
"Bravo Company",
"Charlie Company",
"Star Citizen Starter Platoon",
]}
milpacArray={milpacArray}
/>
</div>
</Collapsible>
</div>
</div>
Expand All @@ -526,4 +574,4 @@ function MilpacRequest() {
</div>
);
}
export default MilpacRequest;
export default MilpacRequest;
153 changes: 121 additions & 32 deletions client/src/modules/Generic/Statistics.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
// This document utilizes Apex charts. If you plan on changing how the pie charts look, you can do it here. Apex charts docs can be found here: https://apexcharts.com/docs/

import React, { Component } from "react";
import Chart from "react-apexcharts";

class Statistics extends Component {
constructor(props) {
super(props);

let useRegiLogic = props.useRegiLogic;
let milpacArray = props.milpacArray;
let billetIDs = props.billetIDs;
let labelArray = props.labelArray;
let piechartData = [];
let combinedArray = Array(billetIDs.length)
.fill()
.map(() => []);

console.log(billetIDs);
console.log(milpacArray);
let centerLabel = props.centerLabel;

for (let milpacIdCombat in milpacArray[0].combat.profiles) {
var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
Expand All @@ -30,42 +31,130 @@ class Statistics extends Component {
piechartData.push(subArray.length);
});

console.log(combinedArray);

this.state = {
options: {
labels: labelArray,
legend: {
show: true,
},
dataLabels: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
value: {
if (useRegiLogic !== true) {
this.state = {
options: {
labels: labelArray,
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
tooltip: {
enabled: false,
},
stroke: {
curve: ["smooth", "monotoneCubic"],
colors: ["#222222"],
width: 1.5,
},
colors: ["#109640", "#b61217", "#2a487c", "#ebc729", "#e68c08"],
plotOptions: {
pie: {
donut: {
size: "85%",
background: "transparent",
labels: {
fontFamily: "Segoe UI",
show: true,
value: {
show: true,
fontFamily: "Segoe UI",
},
name: {
fontFamily: "Segoe UI",
},
value: {
fontFamily: "Segoe UI",
fontWeight: "bold",
color: "#a1a1a1",
},
total: {
color: "#f1f1f1",
show: true,
showAlways: false,
label: centerLabel,
fontFamily: "Segoe UI",
fontWeight: "bold",
},
},
total: {
},
},
},
},
series: piechartData,
};
} else if (useRegiLogic === true) {
this.state = {
options: {
labels: labelArray,
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
tooltip: {
enabled: false,
},
stroke: {
curve: ["smooth", "monotoneCubic"],
colors: ["#222222"],
width: 1.5,
},
colors: [
"#109640",
"#b61217",
"#b61217",
"#b61217",
"#b61217",
"#2a487c",
"#2a487c",
"#2a487c",
"#2a487c",
"#ebc729",
"#ebc729",
"#ebc729",
"#ebc729",
"#ebc729",
],
plotOptions: {
pie: {
donut: {
size: "85%",
background: "transparent",
labels: {
fontFamily: "Segoe UI",
show: true,
showAlways: false,
label: "Total",
value: {
show: true,
fontFamily: "Segoe UI",
},
name: {
fontFamily: "Segoe UI",
},
value: {
fontFamily: "Segoe UI",
fontWeight: "bold",
color: "#a1a1a1",
},
total: {
color: "#f1f1f1",
show: true,
showAlways: false,
label: "Total Active Duty",
fontFamily: "Segoe UI",
fontWeight: "bold",
},
},
},
},
},
},
},
series: piechartData,
};
series: piechartData,
};
}
}

render() {
Expand All @@ -75,7 +164,7 @@ class Statistics extends Component {
options={this.state.options}
series={this.state.series}
type="donut"
width="380"
width="65%"
/>
</div>
);
Expand Down

0 comments on commit 7388916

Please sign in to comment.