feat: add tooltip support for exact X & Y values on hover (#31)

* feat: add tooltip support for exact X & Y values on hover

* update package-lock.json

* fix lint

* `npm install`

* fix unit

* fix unit

* ttfb

* deduplicate

* unify

* show tips for both lines

* label

* label

---------

Co-authored-by: Julian Gruber <julian@juliangruber.com>

Author: Winter-Soren

src/components/histogram.js

@@ -40,6 +40,13 @@ export function Histogram(events, { width, title, thresholds }) {
         y: 'count',
         x: 'type',
         fill: 'type',
+        tip: {
+          format: {
+            threshold: (v) => `Range: ${v}%`,
+            count: (v) => `Count: ${v} miners`,
+            type: true,
+          },
+        },
       }),
     ],
     y: { grid: true },

src/components/line-graph.js

@@ -23,6 +23,15 @@ export function LineGraph(
     })),
   ]
 
+  // Format functions for tooltip values
+  const formatDate = (d) =>
+    new Date(d).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  const formatPercent = (v) => (v ? `${v.toFixed(2)}%` : 'N/A')
+
   return Plot.plot({
     title,
     width,
@@ -42,12 +51,26 @@ export function LineGraph(
         y: 'success_rate',
         stroke: 'type',
         curve: 'linear',
+        tip: {
+          format: {
+            x: formatDate,
+            y: formatPercent,
+            type: true,
+          },
+        },
       }),
       Plot.lineY(combinedData, {
         x: 'day',
         y: 'success_rate_http',
         stroke: 'type',
         curve: 'linear',
+        tip: {
+          format: {
+            x: formatDate,
+            y: formatPercent,
+            type: true,
+          },
+        },
       }),
     ],
   })

src/index.md

@@ -155,21 +155,43 @@ const percentiles = Object.entries(SparkMinerRsrSummaries).flatMap(
       ${Plot.plot({
       title: '# of Filecoin SPs with a non-zero Spark Retrieval Success Rate',
       x: { label: null },
-      y: { grid: true, label: null },
+      y: { grid: true, label: '# Non-Zero SPs' },
       color: { legend: true },
       marks: [
         Plot.ruleY([0]),
-        Plot.line(nonZeroMinersOverTime, {
+        Plot.lineY(nonZeroMinersOverTime, {
           x: 'day',
           y: 'count_succes_rate',
           stroke: "type",
           curve: 'catmull-rom',
+          tip: {
+            format: {
+              x: d => new Date(d).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+              }),
+              y: v => `${v} SPs`,
+              type: true
+            }
+          }
         }),
-        Plot.line(nonZeroMinersOverTime, {
+        Plot.lineY(nonZeroMinersOverTime, {
           x: 'day',
           y: 'count_succes_rate_http',
           stroke: "type",
           curve: 'catmull-rom',
+          tip: {
+            format: {
+              x: d => new Date(d).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+              }),
+              y: v => v ? `${v} SPs` : 'N/A',
+              type: true
+            }
+          }
         })
       ]
     })}
@@ -178,7 +200,7 @@ const percentiles = Object.entries(SparkMinerRsrSummaries).flatMap(
     ${Plot.plot({
       title: '# of Filecoin SPs with Spark Retrieval Success Rate above x%',
       x: { label: null },
-      y: { grid: true, label: null },
+      y: { grid: true, label: '# SPs above x%' },
       color: {
         scheme: "Paired",
         legend: "swatches"
@@ -189,7 +211,18 @@ const percentiles = Object.entries(SparkMinerRsrSummaries).flatMap(
           x: 'day',
           y: 'count_succes_rate',
           stroke: 'label',
-          curve: 'catmull-rom'
+          curve: 'catmull-rom',
+          tip: {
+            format: {
+              x: d => new Date(d).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+              }),
+              y: v => `${v} SPs`,
+              label: true
+            }
+          }
         })
       ]
     })}
@@ -275,7 +308,7 @@ const tidy = clone(SparkRetrievalResultCodes).flatMap(({ day, rates }) => {
         color: {
           scheme: "Accent",
           legend: "swatches",
-          label: "Codes"
+          label: "code"
         },
         marks: [
           Plot.rectY(tidy, {
@@ -284,7 +317,18 @@ const tidy = clone(SparkRetrievalResultCodes).flatMap(({ day, rates }) => {
             fill: "code",
             offset: "normalize",
             sort: {color: null, x: "-y" },
-            interval: 'day'
+            interval: 'day',
+            tip: {
+              format: {
+                x: d => new Date(d).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric'
+                }),
+                y: v => v.toFixed(2),
+                code: true
+              }
+            }
           })
         ]
       })}
@@ -297,12 +341,22 @@ const tidy = clone(SparkRetrievalResultCodes).flatMap(({ day, rates }) => {
         ${Plot.plot({
         title: 'Time to First Byte (ms)',
         x: { type: 'utc', ticks: 'month' },
-        y: { grid: true, zero: true},
+        y: { grid: true, zero: true, label: 'ttfb (ms)' },
         marks: [
           Plot.lineY(SparkRetrievalTimes, {
             x: 'day',
             y: 'ttfb_ms',
             stroke: "#FFBD3F",
+            tip: {
+              format: {
+                x: d => new Date(d).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric'
+                }),
+                y: v => v.toFixed(0)
+              }
+            }
           })
         ]
       })}