website: redesign part 23

website_next/learn/charts/format.js

@@ -5,7 +5,7 @@ const suffixes = ["M", "B", "T", "P", "E", "Z", "Y"];
  * @param {number} digits
  */
 function formatNumber(value, digits) {
-  return value.toLocaleString("en-us", {
+  return value.toLocaleString("en-US", {
     maximumFractionDigits: digits,
     minimumFractionDigits: digits,
   });

website_next/learn/charts/legend/index.js

@@ -5,7 +5,7 @@
 export function createLegend(chart) {
   const legend = document.createElement("figcaption");
   const header = document.createElement("header");
-  const title = document.createElement("span");
+  const title = document.createElement("h4");
   const separator = document.createElement("span");
   const unit = document.createElement("span");
   const time = document.createElement("time");

website_next/learn/charts/legend/style.css

@@ -10,6 +10,14 @@ main.learn {
         gap: 1rem;
       }
 
+      h4 {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+
       time {
         color: var(--off-color);
       }
@@ -102,8 +110,17 @@ main.learn {
     }
 
     &:fullscreen {
-      figcaption menu {
-        padding-bottom: 0.5rem;
+      figcaption {
+        h4 {
+          color: var(--white);
+          font-family: var(--font-serif);
+          font-size: 2rem;
+          text-transform: none;
+        }
+
+        menu {
+          padding-bottom: 0.5rem;
+        }
       }
     }
 

website_next/learn/charts/scrubber/index.js

@@ -12,6 +12,15 @@ const dateFormat = new Intl.DateTimeFormat("en-US", {
   year: "numeric",
 });
 
+const markerRadiusPx = 4;
+
+/** @param {SVGSVGElement} svg */
+function getMarkerRadiusInViewBox(svg) {
+  const width = svg.getBoundingClientRect().width;
+
+  return width ? (markerRadiusPx * VIEWBOX_WIDTH) / width : markerRadiusPx;
+}
+
 /**
  * @param {ScrubberSeries} series
  * @param {number} ratio
@@ -114,13 +123,14 @@ export function createScrubber(svg, readout, highlight) {
     series = nextSeries;
     height = nextHeight;
     stepCount = Math.max(...series.map(({ points }) => points.length - 1));
+    const radius = getMarkerRadiusInViewBox(svg);
     markers = series.map(({ color }, index) => {
       const marker = createSvgElement("circle");
 
       marker.dataset.series = index.toString();
       marker.dataset.scrubber = "marker";
       marker.style.setProperty("--color", color);
-      marker.setAttribute("r", "3");
+      marker.setAttribute("r", radius.toString());
       highlight.addNode(marker, index);
 
       return marker;

website_next/learn/charts/style.css

@@ -52,6 +52,12 @@ main.learn {
       padding: 1rem;
       background: var(--black);
 
+      > div[data-chart="plot"] {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+      }
+
       svg {
         flex: 1;
         height: auto;