Added higher/lower values to each chart

Author: chillbreeze

app/app.py

@@ -163,10 +163,66 @@ def get_sensors():
 
 BASE_URL = 'https://air.siemreap.cloud'
 
+def _aqi_comparison():
+    """Query InfluxDB for period-over-period AQI averages.
+    Returns dict keyed by 'day','week','month' with (direction, delta_pct) tuples.
+    direction is 'up', 'down', 'similar', or None (insufficient data).
+    """
+    measurement, _ = INFLUX_ENTITIES['aqi']
+    periods = [
+        ('day',   '-24h', '-48h', '-24h'),
+        ('week',  '-7d',  '-14d', '-7d'),
+        ('month', '-30d', '-60d', '-30d'),
+    ]
+    results = {}
+    try:
+        with InfluxDBClient(url=INFLUX_URL, token=INFLUX_TOKEN, org=INFLUX_ORG) as client:
+            qapi = client.query_api()
+            for period, curr_start, prev_start, prev_stop in periods:
+                curr_q = f'''from(bucket: "{INFLUX_BUCKET}")
+  |> range(start: {curr_start})
+  |> filter(fn: (r) => r["_measurement"] == "{measurement}")
+  |> filter(fn: (r) => r["_field"] == "value")
+  |> mean()'''
+                prev_q = f'''from(bucket: "{INFLUX_BUCKET}")
+  |> range(start: {prev_start}, stop: {prev_stop})
+  |> filter(fn: (r) => r["_measurement"] == "{measurement}")
+  |> filter(fn: (r) => r["_field"] == "value")
+  |> mean()'''
+                curr_val = next((r.get_value() for t in qapi.query(curr_q) for r in t.records), None)
+                prev_val = next((r.get_value() for t in qapi.query(prev_q) for r in t.records), None)
+                if curr_val is None or prev_val is None or prev_val == 0:
+                    results[period] = (None, None)
+                else:
+                    pct = (curr_val - prev_val) / prev_val * 100
+                    if abs(pct) < 2:
+                        results[period] = ('similar', None)
+                    elif pct > 0:
+                        results[period] = ('up', round(abs(pct)))
+                    else:
+                        results[period] = ('down', round(abs(pct)))
+    except Exception as e:
+        app.logger.error(f'AQI comparison error: {e}')
+        for period, *_ in periods:
+            results.setdefault(period, (None, None))
+    return results
+
+
 @app.route('/metric/<entity_key>/')
 def metric(entity_key):
     """Serve the metric history graph page with server-rendered OG tags."""
     meta = METRIC_META.get(entity_key, {'label': 'Air Quality', 'description': 'Live air quality readings for Siem Reap, Cambodia.'})
+
+    aqi_day_dir = aqi_day_delta = None
+    aqi_week_dir = aqi_week_delta = None
+    aqi_month_dir = aqi_month_delta = None
+
+    if entity_key == 'aqi':
+        cmp = _aqi_comparison()
+        aqi_day_dir,   aqi_day_delta   = cmp.get('day',   (None, None))
+        aqi_week_dir,  aqi_week_delta  = cmp.get('week',  (None, None))
+        aqi_month_dir, aqi_month_delta = cmp.get('month', (None, None))
+
     template_path = os.path.join(app.root_path, 'static', 'metric', 'index.html')
     with open(template_path) as f:
         template_str = f.read()
@@ -176,6 +232,12 @@ def metric(entity_key):
         og_description=meta['description'],
         og_url=f"{BASE_URL}/metric/{entity_key}/",
         og_image=f"{BASE_URL}/images/og-{entity_key}.png",
+        aqi_day_direction=aqi_day_dir,
+        aqi_day_delta=aqi_day_delta,
+        aqi_week_direction=aqi_week_dir,
+        aqi_week_delta=aqi_week_delta,
+        aqi_month_direction=aqi_month_dir,
+        aqi_month_delta=aqi_month_delta,
     )
 
 

app/static/css/metric.css

@@ -77,6 +77,12 @@ nav {
     height: 400px;
 }
 
+.comparison-line {
+    font-size: 0.8rem;
+    letter-spacing: 0.02em;
+    margin-bottom: 1rem;
+}
+
 /* Desktop height breakpoints — independent of width */
 
 /* Shorter desktop monitors ~1080px tall */

app/static/metric/index.html

@@ -90,6 +90,13 @@ <h1><a href="/">Air Quality Monitor</a></h1>
                         <span id="mm-low">--</span> &middot; Avg <span id="mm-avg">--</span>
                     </div>
                 </div>
+                {% if aqi_day_direction == 'up' %}
+                <div class="comparison-line"><span style="color:#ef4444;">▲ {{ aqi_day_delta }}%</span> higher than the past 24h</div>
+                {% elif aqi_day_direction == 'down' %}
+                <div class="comparison-line"><span style="color:#22c55e;">▼ {{ aqi_day_delta }}%</span> lower than the past 24h</div>
+                {% elif aqi_day_direction == 'similar' %}
+                <div class="comparison-line" style="color:#888;">≈ similar to the past 24h</div>
+                {% endif %}
                 <div class="chart-container">
                     <canvas id="chart"></canvas>
                 </div>
@@ -103,6 +110,13 @@ <h1><a href="/">Air Quality Monitor</a></h1>
                         <span id="mm7d-low">--</span> &middot; Avg <span id="mm7d-avg">--</span>
                     </div>
                 </div>
+                {% if aqi_week_direction == 'up' %}
+                <div class="comparison-line"><span style="color:#ef4444;">▲ {{ aqi_week_delta }}%</span> higher than the past 7d</div>
+                {% elif aqi_week_direction == 'down' %}
+                <div class="comparison-line"><span style="color:#22c55e;">▼ {{ aqi_week_delta }}%</span> lower than the past 7d</div>
+                {% elif aqi_week_direction == 'similar' %}
+                <div class="comparison-line" style="color:#888;">≈ similar to the past 7d</div>
+                {% endif %}
                 <div class="chart-container">
                     <canvas id="chart7d"></canvas>
                 </div>
@@ -115,6 +129,13 @@ <h1><a href="/">Air Quality Monitor</a></h1>
                         High <span id="mm30d-high">--</span> &middot; Low <span id="mm30d-low">--</span> &middot; Avg <span id="mm30d-avg">--</span>
                     </div>
                 </div>
+                {% if aqi_month_direction == 'up' %}
+                <div class="comparison-line"><span style="color:#ef4444;">▲ {{ aqi_month_delta }}%</span> higher than the past 30d</div>
+                {% elif aqi_month_direction == 'down' %}
+                <div class="comparison-line"><span style="color:#22c55e;">▼ {{ aqi_month_delta }}%</span> lower than the past 30d</div>
+                {% elif aqi_month_direction == 'similar' %}
+                <div class="comparison-line" style="color:#888;">≈ similar to the past 30d</div>
+                {% endif %}
                 <div class="chart-container">
                     <canvas id="chart30d"></canvas>
                 </div>