Add chart for vetted member count

webclient/src/Charts.js

@@ -63,6 +63,10 @@ export function Charts(props) {
 						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>
+						The vetted member count is {memberCount.slice().reverse()[0].vetted_count} members,
+						compared to {memberCount.slice().reverse()[30].vetted_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.
@@ -149,7 +153,44 @@ export function Charts(props) {
 
 			<p>Member Count: same as above.</p>
 
-			<p>Six Months+: number of memberships older than six months.</p>
+			<p>Six Months+: number of active memberships older than six months.</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='vetted_count'
+								name='Vetted Count'
+								stroke='purple'
+								strokeWidth={2}
+								dot={false}
+								animationDuration={1500}
+							/>
+						</LineChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>Member Count: same as above.</p>
+
+			<p>Vetted Count: number of active vetted members.</p>
 
 			<Header size='medium'>Space Activity</Header>