From 92fab356d03015d74ec7fc0bb914fb5a72fe77ae Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Sun, 10 Sep 2023 21:33:06 -0600
Subject: [PATCH 1/4] Pie Chart Testing

---
 client/package-lock.json                    | 31 +++++++++++++++++++++
 client/package.json                         |  1 +
 client/src/App.js                           | 31 ++++++++++++++++++++-
 client/src/modules/Generic/StrengthCount.js |  7 +++++
 4 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 6299861..e845a7b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^17.0.2",
         "react-collapsible": "^2.8.4",
         "react-dom": "^17.0.2",
+        "react-minimal-pie-chart": "^8.4.0",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -3470,6 +3471,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/svg-path-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
+      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -12952,6 +12958,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-minimal-pie-chart": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
+      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
+      "dependencies": {
+        "@types/svg-path-parser": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -18237,6 +18255,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/svg-path-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
+      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -25001,6 +25024,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-minimal-pie-chart": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
+      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
+      "requires": {
+        "@types/svg-path-parser": "^1.1.3"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/client/package.json b/client/package.json
index c0e7092..4f617be 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-collapsible": "^2.8.4",
     "react-dom": "^17.0.2",
+    "react-minimal-pie-chart": "^8.4.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/App.js b/client/src/App.js
index bdacb6b..81b8b03 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -5,6 +5,7 @@ import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
 import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
+import { PieChart } from 'react-minimal-pie-chart';
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -74,6 +75,10 @@ function MilpacRequest() {
     });
   }, []);
 
+  var piechartArray = [];
+
+  var testnumber = 500
+
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -464,9 +469,9 @@ function MilpacRequest() {
                 triggerOpenedClassName="Title"
                 open={true}
               >
-                {/* We need to do a count for combined, 1-7, 2-7 and acd in that order*/}
                 <div className="OneSevenStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.oneSevenCommand,
@@ -477,32 +482,46 @@ function MilpacRequest() {
                     subtitle={"First Battalion"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.oneSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha1]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo1]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie1]}
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
+                <div className="OneSevenBreakdown">
+                <PieChart
+                 data={[
+                    { title: 'One', value: 2, color: '#E38627' },
+                    { title: 'Two', value: 3, color: '#C13C37' },
+                    { title: 'Three', value: 3, color: '#6A2135' },
+                  ]}
+                />
+                </div>
                 <div className="TwoSevenStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.twoSevenCommand,
@@ -513,24 +532,28 @@ function MilpacRequest() {
                     subtitle={"Second Battalion"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.twoSevenCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha2]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo2]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie2]}
@@ -539,6 +562,7 @@ function MilpacRequest() {
                 </div>
                 <div className="ACDStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.acdCommand,
@@ -550,24 +574,28 @@ function MilpacRequest() {
                     subtitle={"ACD"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.acdCommand]}
                     subSubtitle={"Headquarters"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.alpha3]}
                     subSubtitle={"Alpha Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.bravo3]}
                     subSubtitle={"Bravo Co"}
                   />
                   <StrengthCount
+                    piechartArray={piechartArray}
                     useCompanyLevelLogic={true}
                     milpacArray={milpacArray}
                     billetIDs={[lists.charlie3]}
@@ -576,6 +604,7 @@ function MilpacRequest() {
                 </div>
                 <div className="CombinedStrength">
                   <StrengthCount
+                    piechartArray={piechartArray}
                     milpacArray={milpacArray}
                     billetIDs={[
                       lists.regiCommand,
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
index 8e53629..6c77d35 100644
--- a/client/src/modules/Generic/StrengthCount.js
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -2,6 +2,7 @@ import React from "react";
 
 function StrengthCount(props) {
   var useCompanyLevelLogic = props.useCompanyLevelLogic;
+  var piechartArray=props.piechartArray;
 
   if (useCompanyLevelLogic !== true) {
     var combinedArray = [];
@@ -19,6 +20,9 @@ function StrengthCount(props) {
       }
     }
 
+    piechartArray.push(combinedArray.length)
+    console.log(piechartArray)
+
     return (
       <div className="Response Container">
         <div className="Header Container">
@@ -46,6 +50,9 @@ function StrengthCount(props) {
       }
     }
 
+    piechartArray.push(combinedArray.length)
+    console.log(piechartArray)
+
     return (
       <div className="Response Container">
         <div className="SubsubtitleAndCount">

From 5112564d662bbe1775aab979bc25fc79f65b9955 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:36:17 -0600
Subject: [PATCH 2/4] Bugged Array

---
 client/package-lock.json                    | 238 +++++++++++++++++---
 client/package.json                         |   3 +-
 client/src/App.js                           |  24 +-
 client/src/modules/Generic/MilpacParse.js   |  10 +-
 client/src/modules/Generic/Piechart.js      |  50 ++++
 client/src/modules/Generic/StrengthCount.js |   7 +-
 6 files changed, 283 insertions(+), 49 deletions(-)
 create mode 100644 client/src/modules/Generic/Piechart.js

diff --git a/client/package-lock.json b/client/package-lock.json
index e845a7b..8682fbf 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,11 +11,12 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "apexcharts": "^3.42.0",
         "express": "^4.17.2",
         "react": "^17.0.2",
+        "react-apexcharts": "^1.4.1",
         "react-collapsible": "^2.8.4",
         "react-dom": "^17.0.2",
-        "react-minimal-pie-chart": "^8.4.0",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -3471,11 +3472,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
-    "node_modules/@types/svg-path-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
-      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
-    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -3865,6 +3861,11 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "node_modules/abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -4116,6 +4117,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.42.0.tgz",
+      "integrity": "sha512-hYhzZqh2Efny9uiutkGU2M/EarJ4Nn8s6dxZ0C7E7N+SV4d1xjTioXi2NLn4UKVJabZkb3HnpXDoumXgtAymwg==",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -12793,6 +12808,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "apexcharts": "^3.41.0",
+        "react": ">=0.13"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -12958,18 +12985,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-minimal-pie-chart": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
-      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
-      "dependencies": {
-        "@types/svg-path-parser": "^1.1.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14176,6 +14191,89 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -18255,11 +18353,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
-    "@types/svg-path-parser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.3.tgz",
-      "integrity": "sha512-F1Y6lQIto5b2sKCseVUsFfY5J+8PIhhX4jrDVxpth4m7hwM2OdySh3iTLeR35lEhl/K4ZMEF+GDAwTl7yJcO5Q=="
-    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.2",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.2.tgz",
@@ -18546,6 +18639,11 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -18724,6 +18822,20 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.42.0.tgz",
+      "integrity": "sha512-hYhzZqh2Efny9uiutkGU2M/EarJ4Nn8s6dxZ0C7E7N+SV4d1xjTioXi2NLn4UKVJabZkb3HnpXDoumXgtAymwg==",
+      "requires": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "arg": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
@@ -24899,6 +25011,14 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-apexcharts": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
+      "integrity": "sha512-G14nVaD64Bnbgy8tYxkjuXEUp/7h30Q0U33xc3AwtGFijJB9nHqOt1a6eG0WBn055RgRg+NwqbKGtqPxy15d0Q==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -25024,14 +25144,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "react-minimal-pie-chart": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-8.4.0.tgz",
-      "integrity": "sha512-A0wG+6mRjboyMxMDrzQNWp+2+GSn2ai4ERzRFHLp/OCC45PwIR1DpDVjwedawO+5AtFpzBRQKSFm3ZUxrqIEzA==",
-      "requires": {
-        "@types/svg-path-parser": "^1.1.3"
-      }
-    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -25924,6 +26036,70 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
diff --git a/client/package.json b/client/package.json
index 4f617be..e67c333 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,11 +6,12 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "apexcharts": "^3.42.0",
     "express": "^4.17.2",
     "react": "^17.0.2",
+    "react-apexcharts": "^1.4.1",
     "react-collapsible": "^2.8.4",
     "react-dom": "^17.0.2",
-    "react-minimal-pie-chart": "^8.4.0",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/client/src/App.js b/client/src/App.js
index 81b8b03..a5ff53d 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,11 +1,11 @@
-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";
 import MilpacParse from "./modules/Generic/MilpacParse";
 import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
-import { PieChart } from 'react-minimal-pie-chart';
+import Piechart from "./modules/Generic/Piechart"
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -77,8 +77,6 @@ function MilpacRequest() {
 
   var piechartArray = [];
 
-  var testnumber = 500
-
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -510,15 +508,15 @@ function MilpacRequest() {
                     subSubtitle={"Charlie Co"}
                   />
                 </div>
-                <div className="OneSevenBreakdown">
-                <PieChart
-                 data={[
-                    { title: 'One', value: 2, color: '#E38627' },
-                    { title: 'Two', value: 3, color: '#C13C37' },
-                    { title: 'Three', value: 3, color: '#6A2135' },
-                  ]}
-                />
-                </div>
+                 {/*<div className="OneSevenBreakdown">
+                  <Piechart
+                  piechartArray = {piechartArray}
+                  useSelector0={false}
+                  useSelector2={true}
+                  useSelector4={true}
+                  useSelector6={true}
+                  />
+                  </div> */}
                 <div className="TwoSevenStrength">
                   <StrengthCount
                     piechartArray={piechartArray}
diff --git a/client/src/modules/Generic/MilpacParse.js b/client/src/modules/Generic/MilpacParse.js
index 3a8ac66..4d19474 100644
--- a/client/src/modules/Generic/MilpacParse.js
+++ b/client/src/modules/Generic/MilpacParse.js
@@ -1,6 +1,7 @@
 import React from "react";
 
 function MilpacParse(props) {
+  const uniqueNamesSet = new Set();
   var array = [];
   var milpacArray = props.milpacArray;
   var billetIDs = props.billetIDs;
@@ -25,6 +26,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: primarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
 
       for (var index in milpacArray[0].combat.profiles[milpacIdCombat]
@@ -47,6 +49,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: secondarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
     }
 
@@ -68,6 +71,7 @@ function MilpacParse(props) {
           itemKey: milpacIdReserve,
           listKey: rPrimarySortKey + milpacIdReserve,
         });
+        uniqueNamesSet.add(rFullName);
       }
 
       for (var rIndex in milpacArray[0].reserve.profiles[milpacIdReserve]
@@ -90,6 +94,7 @@ function MilpacParse(props) {
           itemKey: milpacIdReserve,
           listKey: rSecondarySortKey + milpacIdReserve,
         });
+        uniqueNamesSet.add(rFullName);
       }
     }
 
@@ -104,7 +109,7 @@ function MilpacParse(props) {
       <div className="ResponseContainer">
         <div className="HeaderContainer">
           <div className="Subtitle">{subtitle}</div>
-          <div className="Counter">Unit Strength: {array.length}</div>
+          <div className="Counter">Unit Strength: {uniqueNamesSet.size}</div>
         </div>
         <div className="ItemList">
           <table>
@@ -152,6 +157,7 @@ function MilpacParse(props) {
           itemKey: milpacIdCombat,
           listKey: primarySortKey + milpacIdCombat,
         });
+        uniqueNamesSet.add(fullName);
       }
     }
 
@@ -166,7 +172,7 @@ function MilpacParse(props) {
       <div className="ResponseContainer">
         <div className="HeaderContainer">
           <div className="Subtitle">{subtitle}</div>
-          <div className="Counter">Unit Strength: {array.length}</div>
+          <div className="Counter">Unit Strength: {uniqueNamesSet.size}</div>
         </div>
         <div className="ItemList">
           <table>
diff --git a/client/src/modules/Generic/Piechart.js b/client/src/modules/Generic/Piechart.js
new file mode 100644
index 0000000..fe00f1e
--- /dev/null
+++ b/client/src/modules/Generic/Piechart.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts'
+
+class Donut extends Component {
+
+  constructor(props) {
+    super(props);
+
+    //for the love of god, this is terrible. If you are reading this, DONT DO THIS! this is so unbelievibly bad. This will be reworked once the duplicated pieChartArray items are fixed 
+
+    var piechartObject = props.piechartObject;
+    var useSelector0 = props.useSelector0
+    var useSelector2 = props.useSelector2
+    var useSelector4 = props.useSelector4
+    var useSelector6 = props.useSelector6
+    var useSelector8 = props.useSelector8
+    var finalInput = [];
+    
+    if (useSelector0 !== false) {
+      finalInput.push(piechartObject[0])
+    }if (useSelector2 !== false) {
+      finalInput.push(piechartObject[2])
+    }if (useSelector4 !== false) {
+      finalInput.push(piechartObject[4])
+    }if (useSelector6 !== false) {
+      finalInput.push(piechartObject[6])
+    }if (useSelector8 !== false) {
+      finalInput.push(piechartObject[8])
+    };
+
+    console.log (finalInput);
+
+    this.state = {
+      options: {},
+      series: finalInput,
+      labels: ['A', 'B', 'C', 'D', 'E']
+    }
+  }
+
+  render() {
+
+    return (
+      <div className="donut">
+        <Chart options={this.state.options} series={this.state.series} type="donut" width="380" />
+      </div>
+    );
+  }
+}
+
+export default Donut;
\ No newline at end of file
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
index 6c77d35..fdf489a 100644
--- a/client/src/modules/Generic/StrengthCount.js
+++ b/client/src/modules/Generic/StrengthCount.js
@@ -2,8 +2,8 @@ import React from "react";
 
 function StrengthCount(props) {
   var useCompanyLevelLogic = props.useCompanyLevelLogic;
-  var piechartArray=props.piechartArray;
-
+  var piechartArray = props.piechartArray;
+  
   if (useCompanyLevelLogic !== true) {
     var combinedArray = [];
     var milpacArray = props.milpacArray;
@@ -21,6 +21,7 @@ function StrengthCount(props) {
     }
 
     piechartArray.push(combinedArray.length)
+
     console.log(piechartArray)
 
     return (
@@ -51,7 +52,9 @@ function StrengthCount(props) {
     }
 
     piechartArray.push(combinedArray.length)
+
     console.log(piechartArray)
+    
 
     return (
       <div className="Response Container">

From b21c5b60840be40c260f3bcf8ae63252943e450c Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Tue, 12 Sep 2023 14:40:55 -0600
Subject: [PATCH 3/4] Statistics Rework

---
 client/src/App.js                           | 219 +++++---------------
 client/src/modules/Generic/Piechart.js      |  50 -----
 client/src/modules/Generic/Statistics.js    |  85 ++++++++
 client/src/modules/Generic/StrengthCount.js |  71 -------
 4 files changed, 142 insertions(+), 283 deletions(-)
 delete mode 100644 client/src/modules/Generic/Piechart.js
 create mode 100644 client/src/modules/Generic/Statistics.js
 delete mode 100644 client/src/modules/Generic/StrengthCount.js

diff --git a/client/src/App.js b/client/src/App.js
index a5ff53d..43c2010 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,9 +3,9 @@ import "./App.css";
 import Collapsible from "react-collapsible";
 import lists from "./modules/Generic/BilletBank";
 import MilpacParse from "./modules/Generic/MilpacParse";
-import StrengthCount from "./modules/Generic/StrengthCount";
 import ErrorMessage from "./errorMessage";
-import Piechart from "./modules/Generic/Piechart"
+import Statistics from "./modules/Generic/Statistics";
+
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
 const reserveApiUrl = process.env.REACT_APP_RESERVE_API_URL;
@@ -74,9 +74,7 @@ function MilpacRequest() {
       setLoading(false);
     });
   }, []);
-
-  var piechartArray = [];
-
+  
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -467,162 +465,59 @@ function MilpacRequest() {
                 triggerOpenedClassName="Title"
                 open={true}
               >
-                <div className="OneSevenStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.oneSevenCommand,
-                      lists.alpha1,
-                      lists.bravo1,
-                      lists.charlie1,
-                    ]}
-                    subtitle={"First Battalion"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.oneSevenCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha1]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo1]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie1]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                 {/*<div className="OneSevenBreakdown">
-                  <Piechart
-                  piechartArray = {piechartArray}
-                  useSelector0={false}
-                  useSelector2={true}
-                  useSelector4={true}
-                  useSelector6={true}
-                  />
-                  </div> */}
-                <div className="TwoSevenStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.twoSevenCommand,
-                      lists.alpha2,
-                      lists.bravo2,
-                      lists.charlie2,
-                    ]}
-                    subtitle={"Second Battalion"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.twoSevenCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha2]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo2]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie2]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                <div className="ACDStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    billetIDs={[
-                      lists.acdCommand,
-                      lists.alpha3,
-                      lists.bravo3,
-                      lists.charlie3,
-                      lists.delta3,
-                    ]}
-                    subtitle={"ACD"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.acdCommand]}
-                    subSubtitle={"Headquarters"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.alpha3]}
-                    subSubtitle={"Alpha Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.bravo3]}
-                    subSubtitle={"Bravo Co"}
-                  />
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    useCompanyLevelLogic={true}
-                    milpacArray={milpacArray}
-                    billetIDs={[lists.charlie3]}
-                    subSubtitle={"Charlie Co"}
-                  />
-                </div>
-                <div className="CombinedStrength">
-                  <StrengthCount
-                    piechartArray={piechartArray}
-                    milpacArray={milpacArray}
-                    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.delta3,
-                    ]}
-                    subtitle={"Overall Strength"}
-                  />
-                </div>
+              <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>
               </Collapsible>
             </div>
           </div>
@@ -631,4 +526,4 @@ function MilpacRequest() {
     </div>
   );
 }
-export default MilpacRequest;
+export default MilpacRequest;
\ No newline at end of file
diff --git a/client/src/modules/Generic/Piechart.js b/client/src/modules/Generic/Piechart.js
deleted file mode 100644
index fe00f1e..0000000
--- a/client/src/modules/Generic/Piechart.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { Component } from 'react';
-import Chart from 'react-apexcharts'
-
-class Donut extends Component {
-
-  constructor(props) {
-    super(props);
-
-    //for the love of god, this is terrible. If you are reading this, DONT DO THIS! this is so unbelievibly bad. This will be reworked once the duplicated pieChartArray items are fixed 
-
-    var piechartObject = props.piechartObject;
-    var useSelector0 = props.useSelector0
-    var useSelector2 = props.useSelector2
-    var useSelector4 = props.useSelector4
-    var useSelector6 = props.useSelector6
-    var useSelector8 = props.useSelector8
-    var finalInput = [];
-    
-    if (useSelector0 !== false) {
-      finalInput.push(piechartObject[0])
-    }if (useSelector2 !== false) {
-      finalInput.push(piechartObject[2])
-    }if (useSelector4 !== false) {
-      finalInput.push(piechartObject[4])
-    }if (useSelector6 !== false) {
-      finalInput.push(piechartObject[6])
-    }if (useSelector8 !== false) {
-      finalInput.push(piechartObject[8])
-    };
-
-    console.log (finalInput);
-
-    this.state = {
-      options: {},
-      series: finalInput,
-      labels: ['A', 'B', 'C', 'D', 'E']
-    }
-  }
-
-  render() {
-
-    return (
-      <div className="donut">
-        <Chart options={this.state.options} series={this.state.series} type="donut" width="380" />
-      </div>
-    );
-  }
-}
-
-export default Donut;
\ No newline at end of file
diff --git a/client/src/modules/Generic/Statistics.js b/client/src/modules/Generic/Statistics.js
new file mode 100644
index 0000000..4de8bb8
--- /dev/null
+++ b/client/src/modules/Generic/Statistics.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import Chart from "react-apexcharts";
+
+class Statistics extends Component {
+  constructor(props) {
+    super(props);
+
+    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);
+
+    for (let milpacIdCombat in milpacArray[0].combat.profiles) {
+      var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+
+      for (let billetIdArray in billetIDs) {
+        if (billetIDs[billetIdArray].includes(primary.positionId)) {
+          combinedArray[billetIdArray].push(primary.positionTitle);
+        }
+      }
+    }
+
+    combinedArray.forEach((subArray) => {
+      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: {
+                  show: true,
+                },
+                total: {
+                  show: true,
+                  showAlways: false,
+                  label: "Total",
+                },
+              },
+            },
+          },
+        },
+      },
+      series: piechartData,
+    };
+  }
+
+  render() {
+    return (
+      <div className="donut">
+        <Chart
+          options={this.state.options}
+          series={this.state.series}
+          type="donut"
+          width="380"
+        />
+      </div>
+    );
+  }
+}
+
+export default Statistics;
diff --git a/client/src/modules/Generic/StrengthCount.js b/client/src/modules/Generic/StrengthCount.js
deleted file mode 100644
index fdf489a..0000000
--- a/client/src/modules/Generic/StrengthCount.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-
-function StrengthCount(props) {
-  var useCompanyLevelLogic = props.useCompanyLevelLogic;
-  var piechartArray = props.piechartArray;
-  
-  if (useCompanyLevelLogic !== true) {
-    var combinedArray = [];
-    var milpacArray = props.milpacArray;
-    var billetIDs = props.billetIDs;
-    var subtitle = props.subtitle;
-
-    for (var milpacIdCombat in milpacArray[0].combat.profiles) {
-      var primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-
-      for (var billetIdArray in billetIDs) {
-        if (billetIDs[billetIdArray].includes(primary.positionId)) {
-          combinedArray.push({ position: primary });
-        }
-      }
-    }
-
-    piechartArray.push(combinedArray.length)
-
-    console.log(piechartArray)
-
-    return (
-      <div className="Response Container">
-        <div className="Header Container">
-          <div className="Subtitle">{subtitle}</div>
-          <div className="Combined Counter">
-            Overall Strength{": "}
-            {combinedArray.length}
-          </div>
-        </div>
-      </div>
-    );
-  } else if (useCompanyLevelLogic === true) {
-    combinedArray = [];
-    milpacArray = props.milpacArray;
-    billetIDs = props.billetIDs;
-    var subSubtitle = props.subSubtitle;
-
-    for (milpacIdCombat in milpacArray[0].combat.profiles) {
-      primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
-
-      for (billetIdArray in billetIDs) {
-        if (billetIDs[billetIdArray].includes(primary.positionId)) {
-          combinedArray.push({ position: primary });
-        }
-      }
-    }
-
-    piechartArray.push(combinedArray.length)
-
-    console.log(piechartArray)
-    
-
-    return (
-      <div className="Response Container">
-        <div className="SubsubtitleAndCount">
-          {subSubtitle}
-          {": "}
-          {combinedArray.length}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default StrengthCount;

From 7388916e603e3348f714b01d3bd80b4ab2821080 Mon Sep 17 00:00:00 2001
From: Vercin-G <97210222+Vercin-G@users.noreply.github.com>
Date: Wed, 13 Sep 2023 13:29:23 -0600
Subject: [PATCH 4/4] Pie Charts

Final version of the Pie-Chart-Testing fork. After merging with the 7Cav ADR, this branch will be deleted
---
 client/src/App.js                        | 162 +++++++++++++++--------
 client/src/modules/Generic/Statistics.js | 153 ++++++++++++++++-----
 2 files changed, 226 insertions(+), 89 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 43c2010..da6eee7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -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";
@@ -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) {
@@ -74,7 +74,7 @@ function MilpacRequest() {
       setLoading(false);
     });
   }, []);
-  
+
   var milpacArray = [];
   milpacArray.push({
     combat: milpacList,
@@ -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>
@@ -526,4 +574,4 @@ function MilpacRequest() {
     </div>
   );
 }
-export default MilpacRequest;
\ No newline at end of file
+export default MilpacRequest;
diff --git a/client/src/modules/Generic/Statistics.js b/client/src/modules/Generic/Statistics.js
index 4de8bb8..5472fc0 100644
--- a/client/src/modules/Generic/Statistics.js
+++ b/client/src/modules/Generic/Statistics.js
@@ -1,3 +1,5 @@
+// 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";
 
@@ -5,6 +7,7 @@ class Statistics extends Component {
   constructor(props) {
     super(props);
 
+    let useRegiLogic = props.useRegiLogic;
     let milpacArray = props.milpacArray;
     let billetIDs = props.billetIDs;
     let labelArray = props.labelArray;
@@ -12,9 +15,7 @@ class Statistics extends Component {
     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;
@@ -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() {
@@ -75,7 +164,7 @@ class Statistics extends Component {
           options={this.state.options}
           series={this.state.series}
           type="donut"
-          width="380"
+          width="65%"
         />
       </div>
     );