Add initial docs (#1)

* Added README content

* Add install note needed to follow before running local dev server.

* Artifact from doing npm install I think.  I don't know if this is needed.

* Initial start on getting the help links in place.
There is still more to do, and the destinations need to be created.

README.md

@@ -1,8 +1,30 @@
-# Filecoin Storage Providers Market
+# Filecoin Storage Providers Market Dashboard
 
-A dashboard that provides visibility into the Filecoin market between Storage Clients and Storage Providers.
+## Status
+At least of 2024-10-30, this dasbhoard is a scrappy work-in-progress to help spur discussion at [FDS-5 Bangkok](https://www.fildev.io/FDS-5) and shouldn't be viewed as canonical.  It is being worked on actively by members of the "[PMF Targets Working Group](https://protocollabs.notion.site/Filecoin-PMF-Targets-Working-Group-111837df73d480b6a3a9e5bfd73063de?pvs=4)".
 
-This is an [Observable Framework](https://observablehq.com/framework) app. To start the local preview server, run:
+## Purpose
+
+The purpose of this dashboard currently is to help fascilitate the market between onramps/aggregators and Storage Providers (SPs) so onramps/aggregators can find SPs to use and SPs can understand how they are being evaluated.  This is being done by by exposing SP performance against the service classes with their supporting SLOs as defined in [filecoin-project/service-classes](https://github.com/filecoin-project/service-classes).
+
+## Dasbhaord URL
+https://filecoin-project.github.io/filecoin-storage-providers-market/
+
+> In future, this may house under a different domain.
+
+## Contributing
+If you want to help with data presentation, layout, etc. please see [implementation details](#implementation-details) below and open a PR.
+
+Discussion and improvement proposals around service classes, SLOs, SLIs, and their defitions should occur in [filecoin-project/service-classes](https://github.com/filecoin-project/service-classes).
+
+# Implementation Details
+This is an [Observable Framework](https://observablehq.com/framework) app.  Ensure you have the corresponding dependencies installed with:
+
+```
+npm install
+```
+
+To start the local preview server, run:
 
 ```
 npm run dev

observablehq.config.js

@@ -19,7 +19,8 @@ export default {
   root: "src",
   theme: [
     "parchment",
-    "alt"
+    "alt",
+    "wide", // 2024-10-30: this didn't have the expected impact
   ],
   footer: false,
   sidebar: false,

src/index.md

@@ -1,24 +1,50 @@
-# Filecoin Storage Providers Market
+# Filecoin Storage Providers Market Dashboard
 
-Get visibility into the market between Storage Clients and Storage Providers. The goal is to help Storage Clients find potential Storage Providers, and to help Storage Providers understand how they are evaluated and compared.
+👋 **Welcome!** 🔎 Get visibility into the market between Storage Clients and Storage Providers.  🎯 The goal is to help Storage Clients like onramps and aggregators find potential Storage Providers, and to help Storage Providers understand how they are evaluated and compared.
 
 - Learn more about the [metrics](metrics).
-- Check the [code](https://github.com/davidgasquez/filecoin-storage-providers-market).
+- Check the [code](https://github.com/filecoin-project/filecoin-storage-providers-market).
+
+## Status
+TODO: fill this in about where we're currently at on 2024-10-30.  I'll just pull from theh README.
 
 ```js
 const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true});
+
+// Mutates the provided plotConfig by adding a caption if one doesn't exist
+function addPlotCaption(plotConfig, href) {
+  if (!plotConfig.caption) {
+    plotConfig.caption = html`<a href="./metrics#${createAnchorId(plotConfig.title)}">❓ Learn More</a>`;
+  }
+  return plotConfig;
+}
+
+// Creates an anchor tag id from a string by:
+// - Converting to lowercase
+// - Replacing spaces and non-alphanumeric chars with hyphens
+// - Removing consecutive hyphens
+// - Trimming hyphens from start/end
+function createAnchorId(str) {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
 ```
 
-## Metrics
+## Network-Wide Metrics
+This is an aggregate view looking at all Storage Providers on the network.
 
+### SP Activity
 <div class="grid grid-cols-3">
 
   <div class="card">
 
   ```js
-  resize((width) => Plot.plot({
-    title: "Deal Making Providers",
-    subtitle: "How many providers are making deals.",
+  resize((width) => Plot.plot(addPlotCaption({
+    title: "Providers Making Onchain Deals",
+    subtitle: "On a given day, how many providers made an online deal.",
     x: {label: "Date"},
     y: {grid: true, label: "Providers"},
     width,
@@ -30,15 +56,15 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
         tip: true
       })
     ]
-  }))
+  })))
   ```
 
   </div>
 
   <div class="card">
 
   ```js
-  resize((width) => Plot.plot({
+  resize((width) => Plot.plot(addPlotCaption({
     title: "Providers With Active Deals",
     subtitle: "How many providers have active deals.",
     x: { label: "Date" },
@@ -52,15 +78,15 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
         tip: true
       })
     ]
-  }))
+  })))
   ```
 
   </div>
 
   <div class="card">
 
   ```js
-  resize((width) => Plot.plot({
+  resize((width) => Plot.plot(addPlotCaption({
     title: "Providers With Power",
     subtitle: "How many providers are with power.",
     x: { label: "Date" },
@@ -74,19 +100,20 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
         tip: true
       })
     ]
-  }))
+  })))
   ```
 
   </div>
 </div>
 
+### Service Class Conformance
 <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",
+  resize((width) => Plot.plot(addPlotCaption({
+    title: "\"Warm\" Service Class Conformance",
+    subtitle: html`Percentage of providers conforming to warm service class`,
     x: { label: "Date" },
     y: {
       grid: true,
@@ -107,16 +134,16 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
         }
       )
     ]
-  }))
+  })))
   ```
 
   </div>
 
   <div class="card">
 
   ```js
-  resize((width) => Plot.plot({
-    title: "Archive Service Conformance",
+  resize((width) => Plot.plot(addPlotCaption({
+    title: "\"Cold\" Service Class Conformance",
     subtitle: "Percentage of providers conforming to archive SLO standards",
     x: { label: "Date" },
     y: {
@@ -138,7 +165,7 @@ const daily_metrics = FileAttachment("data/daily_metrics.csv").csv({typed: true}
         }
       )
     ]
-  }))
+  })))
   ```
 
   </div>