Add industry CO2 breakdown section to homepage

Backend:
- New Lambda handler: industryStats.ts
  Finds most recent valid scan date, paginates all rows,
  groups by industry computing avgCO2 / siteCount / greenPercent,
  returns sorted cleanest-first with overall average
- New SST route: GET /industry-stats
- New fetchIndustryStats() in src/lib/api.ts

Frontend:
- IndustryBreakdown.tsx: Recharts horizontal BarChart
  Bars colored green (below avg) or amber (above avg)
  Dashed ReferenceLine at overall average
  Custom tooltip shows CO2 / site count / green %
  Chart height scales with number of industries
- Mounted in HomepageStats.tsx after the 30-Day Trend section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ctrimm

packages/functions/src/industryStats.ts

@@ -0,0 +1,84 @@
+import { createClient } from '@supabase/supabase-js';
+import { Resource } from "sst";
+
+const supabase = createClient(
+  Resource.MySupabaseUrl.value,
+  Resource.MySupabaseAnonRoleKey.value
+);
+
+// Returns avg CO2, site count, and green % broken down by industry,
+// computed from the most recent date that has valid (non-zero) CO2 data.
+export async function handler(_evt) {
+  try {
+    // Find the most recent date with at least one valid CO2 reading.
+    const { data: latestDateRow, error: dateError } = await supabase
+      .from('website_emissions')
+      .select('date')
+      .gt('estimated_co2_grams', 0)
+      .order('date', { ascending: false })
+      .limit(1)
+      .single();
+
+    if (dateError) throw dateError;
+
+    const latestDate = latestDateRow?.date;
+
+    // Paginate through all rows for that date.
+    const PAGE_SIZE = 1000;
+    const allRows: { industry: string | null; estimated_co2_grams: number; is_green: boolean }[] = [];
+    let from = 0;
+    while (true) {
+      const { data, error } = await supabase
+        .from('website_emissions')
+        .select('industry, estimated_co2_grams, is_green')
+        .eq('date', latestDate)
+        .gt('estimated_co2_grams', 0)
+        .range(from, from + PAGE_SIZE - 1);
+      if (error) throw error;
+      if (!data || data.length === 0) break;
+      allRows.push(...data);
+      if (data.length < PAGE_SIZE) break;
+      from += PAGE_SIZE;
+    }
+
+    // Aggregate by industry in Lambda.
+    const byIndustry: Record<string, { sum: number; count: number; greenCount: number }> = {};
+    for (const row of allRows) {
+      const key = row.industry?.trim() || 'Other';
+      if (!byIndustry[key]) byIndustry[key] = { sum: 0, count: 0, greenCount: 0 };
+      byIndustry[key].sum += row.estimated_co2_grams;
+      byIndustry[key].count++;
+      if (row.is_green) byIndustry[key].greenCount++;
+    }
+
+    const industries = Object.entries(byIndustry)
+      .map(([industry, { sum, count, greenCount }]) => ({
+        industry,
+        avgCO2: parseFloat((sum / count).toFixed(3)),
+        siteCount: count,
+        greenPercent: parseFloat(((greenCount / count) * 100).toFixed(1)),
+      }))
+      .sort((a, b) => a.avgCO2 - b.avgCO2);  // cleanest first
+
+    const overallSum = allRows.reduce((s, r) => s + r.estimated_co2_grams, 0);
+    const overallAvgCO2 = allRows.length > 0
+      ? parseFloat((overallSum / allRows.length).toFixed(3))
+      : 0;
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ industries, overallAvgCO2, scanDate: latestDate }),
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=300",
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching industry stats:', error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: error.message }),
+      headers: { "Content-Type": "application/json" },
+    };
+  }
+}

src/components/HomepageStats.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { fetchStats, fetchTrend } from '@/lib/api';
+import { IndustryBreakdown } from '@/components/IndustryBreakdown';
 import {
   Card,
   CardContent,
@@ -119,6 +120,9 @@ export function HomepageStats() {
           )}
         </div>
       </section>
+
+      {/* Industry Breakdown */}
+      <IndustryBreakdown />
     </>
   );
 }

src/components/IndustryBreakdown.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react';
+import { fetchIndustryStats } from '@/lib/api';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  Cell,
+  ResponsiveContainer,
+} from 'recharts';
+
+interface IndustryRow {
+  industry: string;
+  avgCO2: number;
+  siteCount: number;
+  greenPercent: number;
+}
+
+interface TooltipPayload {
+  payload: IndustryRow;
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: TooltipPayload[] }) {
+  if (!active || !payload?.length) return null;
+  const d = payload[0].payload;
+  return (
+    <div className="rounded-lg border bg-background px-3 py-2 text-sm shadow-md">
+      <p className="font-semibold mb-1">{d.industry}</p>
+      <p className="text-muted-foreground">Avg CO2: <span className="text-foreground font-medium">{d.avgCO2.toFixed(3)} g</span></p>
+      <p className="text-muted-foreground">Sites: <span className="text-foreground font-medium">{d.siteCount.toLocaleString()}</span></p>
+      <p className="text-muted-foreground">Green hosted: <span className="text-foreground font-medium">{d.greenPercent.toFixed(1)}%</span></p>
+    </div>
+  );
+}
+
+export function IndustryBreakdown() {
+  const [industries, setIndustries] = useState<IndustryRow[]>([]);
+  const [overallAvg, setOverallAvg] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchIndustryStats()
+      .then((data) => {
+        setIndustries(data.industries ?? []);
+        setOverallAvg(data.overallAvgCO2 ?? 0);
+      })
+      .catch((e) => console.error('Failed to load industry stats:', e))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Chart height scales with the number of industries (min 300px).
+  const chartHeight = Math.max(300, industries.length * 40);
+
+  return (
+    <section id="industry-breakdown" className="container py-8 md:py-12 lg:py-12">
+      <div className="mx-auto flex flex-col items-center space-y-4 text-center pb-8">
+        <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
+          By Industry
+        </h2>
+        <p className="max-w-[85%] lg:max-w-[55%] leading-normal text-muted-foreground sm:text-lg sm:leading-7 balance-text">
+          Average CO2 per page view grouped by industry. Dashed line marks the
+          overall average. Hover a bar for site count and green-hosting rate.
+        </p>
+      </div>
+
+      <div className="mx-auto max-w-[64rem] rounded-lg border bg-background p-4">
+        {loading ? (
+          <Skeleton className="rounded-lg" style={{ height: `${chartHeight}px` }} />
+        ) : industries.length === 0 ? (
+          <p className="text-center text-muted-foreground py-12">No industry data available.</p>
+        ) : (
+          <ResponsiveContainer width="100%" height={chartHeight}>
+            <BarChart
+              layout="vertical"
+              data={industries}
+              margin={{ top: 4, right: 48, left: 8, bottom: 4 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" horizontal={false} />
+              <XAxis
+                type="number"
+                tickFormatter={(v) => `${v.toFixed(2)}g`}
+                domain={[0, 'dataMax + 0.05']}
+                tick={{ fontSize: 12 }}
+              />
+              <YAxis
+                type="category"
+                dataKey="industry"
+                width={130}
+                tick={{ fontSize: 12 }}
+              />
+              <Tooltip content={<CustomTooltip />} cursor={{ fill: 'hsl(var(--muted))' }} />
+              <ReferenceLine
+                x={overallAvg}
+                stroke="hsl(var(--muted-foreground))"
+                strokeDasharray="4 3"
+                label={{ value: 'avg', position: 'top', fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+              />
+              <Bar dataKey="avgCO2" radius={[0, 4, 4, 0]} maxBarSize={28}>
+                {industries.map((entry) => (
+                  <Cell
+                    key={entry.industry}
+                    fill={entry.avgCO2 <= overallAvg ? '#10b981' : '#f59e0b'}
+                    fillOpacity={0.85}
+                  />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+    </section>
+  );
+}

src/lib/api.ts

@@ -50,3 +50,11 @@ export async function fetchLeaderboard() {
   }
   return response.json();
 }
+
+export async function fetchIndustryStats() {
+  const response = await fetch(`${API_URL}/industry-stats`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch industry stats');
+  }
+  return response.json();
+}

sst.config.ts

@@ -37,5 +37,6 @@ export default $config({
     api.route("GET /stats", "packages/functions/src/stats.handler");
     api.route("GET /trend", "packages/functions/src/trend.handler");
     api.route("GET /leaderboard", "packages/functions/src/leaderboard.handler");
+    api.route("GET /industry-stats", "packages/functions/src/industryStats.handler");
   }
 });