From 9156bcdba30f3c41ee424637b03192c06155bd8b Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Thu, 19 Nov 2020 00:17:26 +0000
Subject: [PATCH] Add chart for older than six months member count

---
 webclient/src/Charts.js | 43 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/webclient/src/Charts.js b/webclient/src/Charts.js
index 7a9aca9..650df43 100644
--- a/webclient/src/Charts.js
+++ b/webclient/src/Charts.js
@@ -59,6 +59,10 @@ export function Charts(props) {
 						The green member count is {memberCount.slice().reverse()[0].green_count} members,
 						compared to {memberCount.slice().reverse()[30].green_count} members 30 days ago.
 					</p>
+					<p>
+						The older than six months member count is {memberCount.slice().reverse()[0].six_month_plus_count} members,
+						compared to {memberCount.slice().reverse()[30].six_month_plus_count} members 30 days ago.
+					</p>
 					<p>
 						There were {signupCount.slice().reverse()[0].signup_count} signups so far this month,
 						and {signupCount.slice().reverse()[1].signup_count} signups last month.
@@ -106,10 +110,47 @@ export function Charts(props) {
 				}
 			</p>
 
-			<p>Member Count: number of Prepaid, Current, Due, and Overdue members on Spaceport.</p>
+			<p>Member Count: number of active paying members on Spaceport.</p>
 
 			<p>Green Count: number of Prepaid and Current members.</p>
 
+			<p>
+				{memberCount &&
+					<ResponsiveContainer width='100%' height={300}>
+						<LineChart data={memberCount}>
+							<XAxis dataKey='date' minTickGap={10} />
+							<YAxis />
+							<CartesianGrid strokeDasharray='3 3'/>
+							<Tooltip />
+							<Legend />
+
+							<Line
+								type='monotone'
+								dataKey='member_count'
+								name='Member Count'
+								stroke='#8884d8'
+								strokeWidth={2}
+								dot={false}
+								animationDuration={1000}
+							/>
+							<Line
+								type='monotone'
+								dataKey='six_month_plus_count'
+								name='Six Months+'
+								stroke='red'
+								strokeWidth={2}
+								dot={false}
+								animationDuration={1500}
+							/>
+						</LineChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>Member Count: same as above.</p>
+
+			<p>Six Months+: number of memberships older than six months.</p>
+
 			<Header size='medium'>Space Activity</Header>
 
 			<p>Daily since March 7th, 2020, updates hourly.</p>