feat: 🚀 enhance storage providers data visualization

- Refined data selection in `storage_providers.csv.sh` script by defining specific columns and filtering out inactive deals. - Added new grid layout to display visualizations for "Hot Service Conformance" and "Archive Service Conformance" using Plot API. - Updated table in `index.md` to display enhanced column configurations and sorting for storage providers' data.
filecoin-project · Oct 22, 2024 · a66c5c2 · a66c5c2
1 parent e2f8e09
commit a66c5c2
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 2 deletions.
diff --git a/src/data/storage_providers.csv.sh b/src/data/storage_providers.csv.sh
@@ -4,7 +4,20 @@ duckdb :memory: << EOF
 SET enable_progress_bar = false;
 COPY (
   SELECT
-    *
+    provider_id,
+    total_active_deals,
+    total_active_data_uploaded_tibs,
+    total_active_unique_clients,
+    first_deal_at,
+    last_deal_at,
+    raw_power_pibs,
+    quality_adjusted_power_pibs,
+    balance,
+    initial_pledge,
+    locked_funds,
+    provider_collateral,
+    capacity_utilization_ratio
   FROM read_parquet('https://data.filecoindataportal.xyz/filecoin_storage_providers.parquet')
+  WHERE total_active_deals > 0
 ) TO STDOUT (FORMAT 'CSV');
 EOF
diff --git a/src/index.md b/src/index.md
@@ -80,6 +80,71 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
   </div>
 </div>
 
+<div class="grid grid-cols-2">
+  <div class="card">
+
+  ```js
+  resize((width) => Plot.plot({
+    title: "Hot Service Conformance",
+    subtitle: "Percentage of providers conforming to hot SLO standards",
+    x: { label: "Date" },
+    y: {
+      grid: true,
+      label: "Conformance (%)",
+      domain: [0, 100]
+    },
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.ruleY([80]),
+      Plot.text(
+        ["To be implemented"],
+        {
+          x: 0,
+          y: 40,
+          fontSize: 48,
+          fill: "var(--theme-foreground-faint)"
+        }
+      )
+    ]
+  }))
+  ```
+
+  </div>
+
+  <div class="card">
+
+  ```js
+  resize((width) => Plot.plot({
+    title: "Archive Service Conformance",
+    subtitle: "Percentage of providers conforming to archive SLO standards",
+    x: { label: "Date" },
+    y: {
+      grid: true,
+      label: "Conformance (%)",
+      domain: [0, 100]
+    },
+    width,
+    marks: [
+      Plot.ruleY([0]),
+      Plot.ruleY([80]),
+      Plot.text(
+        ["To be implemented"],
+        {
+          x: 0,
+          y: 40,
+          fontSize: 48,
+          fill: "var(--theme-foreground-faint)"
+        }
+      )
+    ]
+  }))
+  ```
+
+  </div>
+
+</div>
+
 ## Storage Providers
 
 The table below lists metrics for Filecoin Storage Providers.
@@ -90,5 +155,43 @@ const storage_providers = FileAttachment("data/storage_providers.csv").csv({type
 ```
 
 ```js
-Inputs.table(storage_providers)
+Inputs.table(storage_providers, {
+  columns: [
+    "provider_id",
+    "total_active_deals",
+    "total_active_data_uploaded_tibs",
+    "total_active_unique_clients",
+    "first_deal_at",
+    "last_deal_at",
+    "raw_power_pibs",
+    "quality_adjusted_power_pibs",
+    "balance",
+    "initial_pledge",
+    "locked_funds",
+    "provider_collateral",
+    "capacity_utilization_ratio"
+  ],
+  header: {
+    provider_id: "Provider ID",
+    total_active_deals: "Active Deals",
+    total_active_data_uploaded_tibs: "Active Data Uploaded (TiB)",
+    total_active_unique_clients: "Active Unique Clients",
+    first_deal_at: "First Deal At",
+    last_deal_at: "Last Deal At",
+    raw_power_pibs: "Raw Power (PiB)",
+    quality_adjusted_power_pibs: "Quality Adjusted Power (PiB)",
+    balance: "Balance",
+    initial_pledge: "Initial Pledge",
+    locked_funds: "Locked Funds",
+    provider_collateral: "Provider Collateral",
+    capacity_utilization_ratio: "Capacity Utilization Ratio"
+  },
+  sort: "total_active_deals",
+  reverse: true,
+  rows: 20,
+  select: false,
+  format: {
+    provider_id: id => htl.html`<a href=/provider/${id} target=_blank>${id}</a>`
+  }
+})
 ```