Add drink sales to Charts page

Author: tannercollin

apiserver/apiserver/api/management/commands/run_hourly.py

@@ -30,6 +30,8 @@ def generate_stats(self):
             defaults=dict(signup_count=signup_count),
         )
 
+        utils_stats.calc_drink_sales()
+
         utils_stats.calc_card_scans()
 
         utils.gen_search_strings()

apiserver/apiserver/api/utils_stats.py

@@ -32,6 +32,7 @@
     'closing': {},
     'printer3d': {},
     'solar': {},
+    'drinks_6mo': [],
 }
 
 if secrets.MUMBLE:
@@ -196,6 +197,35 @@ def calc_card_scans():
         defaults=dict(card_scans=count),
     )
 
+def calc_drink_sales():
+    six_months_ago = utils.today_alberta_tz() - timedelta(days=183)
+
+    drinks = {
+        '1': 'Coke',
+        '2': 'Coke Zero',
+        '3': 'Root Beer',
+        '4': 'Iced Tea',
+        '5': 'Crush Pop',
+        '6': 'Dr Pepper',
+        '7': 'Arizona Tea',
+        '8': 'Cherry Coke',
+    }
+    results = []
+
+    txs = models.Transaction.objects
+
+    for number, name in drinks.items():
+        count = txs.filter(
+            category='Snacks',
+            memo__contains='pop vending machine item #' + number,
+            date__gte=six_months_ago,
+        ).count()
+
+        results.append(dict(name=name, count=count))
+
+    cache.set('drinks_6mo', results)
+
+
 def get_progress(request_id):
     return cache.get('request-progress-' + request_id, [])
 

webclient/src/Charts.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Statistic, Button, Container, Header } from 'semantic-ui-react';
 import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } from 'recharts';
-import { requester } from './utils.js';
+import { requester, useIsMobile } from './utils.js';
 import moment from 'moment-timezone';
 
 let memberCountCache = false;
@@ -14,6 +14,8 @@ export function Charts(props) {
 	const [spaceActivity, setSpaceActivity] = useState(spaceActivityCache);
 	const [fullActivity, setFullActivity] = useState(false);
 	const [fullSignups, setFullSignups] = useState(false);
+	const [stats, setStats] = useState(false);
+	const isMobile = useIsMobile();
 
 	useEffect(() => {
 		requester('/charts/membercount/', 'GET')
@@ -42,6 +44,16 @@ export function Charts(props) {
 		.catch(err => {
 			console.log(err);
 		});
+
+		requester('/stats/', 'GET')
+		.then(res => {
+			setStats(res);
+			localStorage.setItem('stats', JSON.stringify(res));
+		})
+		.catch(err => {
+			console.log(err);
+			setStats(false);
+		});
 	}, []);
 
 	return (
@@ -111,6 +123,39 @@ export function Charts(props) {
 				</>
 			}
 
+			<Header size='medium'>Drink Sales</Header>
+
+			<p>Drinks sold over the last six months.</p>
+
+			<p>
+				{stats && stats.drinks_6mo &&
+					<ResponsiveContainer width='100%' height={300}>
+						<BarChart
+							margin={isMobile? {bottom: 50} : {}}
+							data={stats.drinks_6mo.map((x, i) => (
+								{...x, fill: ['#e7223a', 'black', '#9a4423', '#1582ae', '#d77a2d', '#6f0e21', '#3fad96', '#ab316e'][i]}
+							))}
+						>
+							<XAxis dataKey='name' interval={0} angle={isMobile ? -45 : 0} textAnchor={isMobile ? 'end' : 'middle'} />
+							<YAxis />
+							<CartesianGrid strokeDasharray='3 3'/>
+							<Tooltip />
+
+							<Bar
+								type='monotone'
+								dataKey='count'
+								name='Cans'
+								fill='#2185d0'
+								maxBarSize={40}
+								animationDuration={250}
+							/>
+						</BarChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>Count: number of cans of pop sold over the last six months.</p>
+
 			<Header size='medium'>Member Counts</Header>
 
 			<p>Daily since March 2nd, 2020.</p>