feat: 🎨 update charts with new metrics

observablehq.config.js

@@ -21,8 +21,9 @@ export default {
     "parchment",
     "dashboard"
   ],
-  header: ({title, data, path}) => `<a href="/">🏠 Home</a> | <a href="/metrics">📈 Metrics</a> | <a href="/faq">❓ FAQ</a>`,
-  footer: ({path}) => `Data used in this dashboard comes from the <a href="https://filecoindataportal.xyz/">Filecoin Data Portal</a>.  <a href="https://github.com/filecoin-project/filecoin-storage-providers-market/blob/main/src${path}.md?plain=1">View Page Source</a>`,
+  style: "style.css",
+  header: ({ title, data, path }) => `<a href="/">🏠 Home</a> | <a href="/metrics">📈 Metrics</a> | <a href="/faq">❓ FAQ</a>`,
+  footer: ({ path }) => `Data used in this dashboard comes from the <a href="https://filecoindataportal.xyz/">Filecoin Data Portal</a>.  <a href="https://github.com/filecoin-project/filecoin-storage-providers-market/blob/main/src${path}.md?plain=1">View Page Source</a>`,
   sidebar: false,
   toc: false,
   pager: false,

package.json

@@ -9,10 +9,10 @@
     "observable": "observable"
   },
   "dependencies": {
-    "@observablehq/framework": "^1.12.0",
+    "@observablehq/framework": "^1.13.0",
     "d3-dsv": "^3.0.1",
     "d3-time-format": "^4.1.0",
-    "duckdb-async": "^1.1.1"
+    "duckdb-async": "^1.1.3"
   },
   "devDependencies": {
     "rimraf": "^6.0.1"

src/data/daily_providers_metrics.csv.sh

@@ -0,0 +1,31 @@
+
+#!/usr/bin/env bash
+
+duckdb :memory: << EOF
+SET enable_progress_bar = false;
+COPY (
+    with retrieval_rates as (
+    select
+        date,
+        provider_id,
+        case
+            when total_retrieval_requests > 0
+                then successful_retrieval_requests * 1.0 / total_retrieval_requests
+            else 0
+        end as retrieval_rate,
+        sector_health_rate,
+        from read_parquet('https://data.filecoindataportal.xyz/filecoin_daily_storage_providers_metrics.parquet')
+        where date >= current_date() - interval '90 days'
+    )
+
+    select
+        date,
+        count(distinct case when retrieval_rate > 0.9 then provider_id end) as meet_retrieval_sli,
+        count(distinct case when retrieval_rate > 0.9 then provider_id end) * 1.0 / count(distinct provider_id) as meet_retrieval_sli_percent,
+        count(distinct provider_id) filter (where sector_health_rate * 100 > 95) as meet_sector_health_sli,
+        count(distinct provider_id) filter (where sector_health_rate * 100 > 95) * 1.0 / count(distinct provider_id) as meet_sector_health_sli_percent
+    from retrieval_rates r
+    group by date
+    order by date desc
+) TO STDOUT (FORMAT 'CSV');
+EOF

src/index.md

@@ -11,7 +11,7 @@ This dashboard is a scrappy work-in-progress to help spur discussion at [FDS-5 B
 
 ```js
 const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true});
-const daily_retrieval_metrics = FileAttachment("data/daily_retrieval_metrics.csv").csv({typed: true});
+const daily_providers_metrics = FileAttachment("data/daily_providers_metrics.csv").csv({typed: true});
 
 // Mutates the provided plotConfig by adding a caption if one doesn't exist
 function addPlotCaption(plotConfig, href) {
@@ -116,6 +116,7 @@ These are aggregate views looking at all Storage Providers on the network.
 Service Classes and their corresponding Service Level Objectives are defined in [filecoin-project/service-classes](https://github.com/filecoin-project/service-classes).
 
 <div class="grid grid-cols-2">
+
   <div class="card">
 
   ```js
@@ -131,7 +132,7 @@ Service Classes and their corresponding Service Level Objectives are defined in
     width,
     marks: [
       Plot.ruleY([0]),
-      Plot.lineY(daily_retrieval_metrics, {
+      Plot.lineY(daily_providers_metrics, {
         x: "date",
         y: "meet_retrieval_sli",
         tip: true,
@@ -141,7 +142,33 @@ Service Classes and their corresponding Service Level Objectives are defined in
   ```
 
   </div>
+  <div class="card">
+
+  ```js
+  resize((width) => Plot.plot(addPlotCaption({
+    title: "\"Warm\" Service Class Conformance",
+    subtitle: html`Providers conforming to warm service class`,
+    x: { label: "Date" },
+    y: {
+      grid: true,
+      label: "Meet Sector Health SLI",
+    },
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.lineY(daily_providers_metrics, {
+        x: "date",
+        y: "meet_sector_health_sli",
+        tip: true,
+      })
+    ]
+  })))
+  ```
+
+  </div>
+
 
+</div>
   <div class="card">
 
   ```js
@@ -173,8 +200,6 @@ Service Classes and their corresponding Service Level Objectives are defined in
 
   </div>
 
-</div>
-
 ## Storage Providers
 
 The table below lists metrics for Filecoin Storage Providers.

src/style.css

@@ -0,0 +1,20 @@
+@import url("observablehq:default.css");
+@import url("observablehq:theme-parchment.css");
+@import url("observablehq:theme-wide.css");
+
+/* :root {
+    --theme-foreground-focus: #008ffe;
+} */
+
+p,
+table,
+figure,
+figcaption,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    max-width: none;
+}