feat: 🎨 enhance data visualizations and filter recent data

- Add a 30-day data filter to daily_metrics.csv.sh for more relevant insights.
- Redesign plots in index.md with titles, subtitles, and tooltips for better clarity and interactivity.

src/data/daily_metrics.csv.sh

@@ -9,5 +9,6 @@ COPY (
     providers_with_active_deals,
     providers_with_power,
   FROM read_parquet('https://data.filecoindataportal.xyz/filecoin_daily_metrics.parquet')
+  WHERE date >= CURRENT_DATE() - INTERVAL '30 days'
 ) TO STDOUT (FORMAT 'CSV');
 EOF

src/index.md

@@ -14,26 +14,67 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
 <div class="grid grid-cols-3">
 
   <div class="card">
-  <h1>Unique Deal Making Providers</h1>
-
 
   ```js
-  Plot.lineY(daily_metrics, {x: "date", y: "unique_deal_making_providers"}).plot({y: {grid: true}})
+  resize((width) => Plot.plot({
+    title: "Deal Making Providers",
+    subtitle: "How many providers are making deals.",
+    x: {label: "Date"},
+    y: {grid: true, label: "Providers"},
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.lineY(daily_metrics, {
+        x: "date",
+        y: "unique_deal_making_providers",
+        tip: true
+      })
+    ]
+  }))
   ```
 
   </div>
 
-  <div class="card"><h1>Providers With Active Deals</h1>
+  <div class="card">
 
   ```js
-  Plot.lineY(daily_metrics, {x: "date", y: "providers_with_active_deals"}).plot({y: {grid: true}})
+  resize((width) => Plot.plot({
+    title: "Providers With Active Deals",
+    subtitle: "How many providers have active deals.",
+    x: { label: "Date" },
+    y: { grid: true, label: "Providers", zero: true },
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.lineY(daily_metrics, {
+        x: "date",
+        y: "providers_with_active_deals",
+        tip: true
+      })
+    ]
+  }))
   ```
 
   </div>
-  <div class="card"><h1>Providers With Power</h1>
+
+  <div class="card">
 
   ```js
-  Plot.lineY(daily_metrics, {x: "date", y: "providers_with_power"}).plot({y: {grid: true}})
+  resize((width) => Plot.plot({
+    title: "Providers With Power",
+    subtitle: "How many providers are with power.",
+    x: { label: "Date" },
+    y: { grid: true, label: "Providers", zero: true },
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.lineY(daily_metrics, {
+        x: "date",
+        y: "providers_with_power",
+        tip: true
+      })
+    ]
+  }))
   ```
 
   </div>