website: redesign part 16

website_next/learn/charts/bar/index.js

@@ -69,7 +69,7 @@ export function renderBarPlot(
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createBarPathData(points, getBarWidth(points)));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   }
 
@@ -81,7 +81,7 @@ export function renderBarPlot(
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createLinePathData(points));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   }
 

website_next/learn/charts/dots/index.js

@@ -33,7 +33,7 @@ export function renderDotsPlot(group, loadedSeries, height, highlight, scale) {
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createDotsPathData(points));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   });
 

website_next/learn/charts/fullscreen.js

@@ -1,15 +1,3 @@
-/**
- * @param {HTMLElement} target
- * @param {() => void} onChange
- */
-function listen(target, onChange) {
-  document.addEventListener("fullscreenchange", () => {
-    if (document.fullscreenElement === target || !document.fullscreenElement) {
-      onChange();
-    }
-  });
-}
-
 /** @param {HTMLElement} target */
 export function createFullscreenButton(target) {
   const button = document.createElement("button");
@@ -30,7 +18,7 @@ export function createFullscreenButton(target) {
       void target.requestFullscreen();
     }
   });
-  listen(target, update);
+  target.addEventListener("fullscreenchange", update);
   update();
 
   return button;

website_next/learn/charts/highlight.js

@@ -8,6 +8,8 @@ function createSeriesNode() {
  */
 export function createSeriesHighlight(items) {
   const seriesNodes = items.map(createSeriesNode);
+  /** @type {number | undefined} */
+  let previewIndex;
 
   /** @param {number} index */
   function scrollToItem(index) {
@@ -37,17 +39,25 @@ export function createSeriesHighlight(items) {
     for (const nodes of seriesNodes) {
       for (const node of nodes) clearState(node);
     }
+
+    previewIndex = undefined;
   }
 
   /** @param {number} index */
   function previewItem(index) {
+    if (index === previewIndex) return;
+
+    clearPreview();
     scrollToItem(index);
     items[index].dataset.preview = "";
+    previewIndex = index;
   }
 
-  /** @param {number} index */
-  function clearPreview(index) {
-    delete items[index].dataset.preview;
+  function clearPreview() {
+    if (previewIndex === undefined) return;
+
+    delete items[previewIndex].dataset.preview;
+    previewIndex = undefined;
   }
 
   items.forEach((item, index) => {
@@ -61,7 +71,7 @@ export function createSeriesHighlight(items) {
    * @param {SVGPathElement | SVGCircleElement} node
    * @param {number} index
    */
-  function add(node, index) {
+  function addNode(node, index) {
     seriesNodes[index].push(node);
   }
 
@@ -74,7 +84,7 @@ export function createSeriesHighlight(items) {
   }
 
   return {
-    add,
+    addNode,
     clearPreview,
     clearNodes,
     preview: previewItem,
@@ -106,8 +116,8 @@ function clearState(element) {
 
 /**
  * @typedef {Object} SeriesHighlight
- * @property {(node: SVGPathElement | SVGCircleElement, index: number) => void} add
- * @property {(index: number) => void} clearPreview
+ * @property {(node: SVGPathElement | SVGCircleElement, index: number) => void} addNode
+ * @property {() => void} clearPreview
  * @property {() => void} clearNodes
  * @property {(index: number) => void} preview
  */

website_next/learn/charts/line/index.js

@@ -19,7 +19,7 @@ export function renderLinePlot(group, loadedSeries, height, highlight, scale) {
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createLinePathData(points));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   });
 

website_next/learn/charts/radio.js

@@ -15,6 +15,11 @@ export function createRadioGroup(args) {
 
   legend.append(args.legend);
   fieldset.append(legend);
+  fieldset.addEventListener("change", (event) => {
+    const input = /** @type {HTMLInputElement} */ (event.target);
+
+    args.onChange(/** @type {T} */ (input.value));
+  });
 
   for (const option of args.options) {
     const label = document.createElement("label");
@@ -25,9 +30,6 @@ export function createRadioGroup(args) {
     input.name = name;
     input.value = option.value;
     input.checked = option.value === args.currentValue;
-    input.addEventListener("change", () => {
-      if (input.checked) args.onChange(option.value);
-    });
 
     text.append(option.label);
     label.append(input, text);

website_next/learn/charts/scrubber.js

@@ -63,8 +63,6 @@ export function createScrubber(svg, readout, highlight) {
   let markers = [];
   let height = 0;
   let stepCount = 0;
-  /** @type {number | undefined} */
-  let previewIndex;
 
   group.dataset.scrubber = "root";
   guide.dataset.scrubber = "guide";
@@ -110,28 +108,12 @@ export function createScrubber(svg, readout, highlight) {
   function clear() {
     series = [];
     markers = [];
-    clearPreview();
+    highlight.clearPreview();
     group.replaceChildren(guide);
     delete svg.dataset.index;
     delete svg.dataset.scrubbing;
   }
 
-  /** @param {number} index */
-  function preview(index) {
-    if (index === previewIndex) return;
-
-    if (previewIndex !== undefined) highlight.clearPreview(previewIndex);
-    highlight.preview(index);
-    previewIndex = index;
-  }
-
-  function clearPreview() {
-    if (previewIndex === undefined) return;
-
-    highlight.clearPreview(previewIndex);
-    previewIndex = undefined;
-  }
-
   /**
    * @param {ScrubberSeries[]} nextSeries
    * @param {number} nextHeight
@@ -147,7 +129,7 @@ export function createScrubber(svg, readout, highlight) {
       marker.dataset.scrubber = "marker";
       marker.style.setProperty("--color", color);
       marker.setAttribute("r", "3");
-      highlight.add(marker, index);
+      highlight.addNode(marker, index);
 
       return marker;
     });
@@ -164,19 +146,19 @@ export function createScrubber(svg, readout, highlight) {
       /** @type {SVGElement} */ (event.target).dataset.series,
     );
 
-    if (Number.isInteger(index)) preview(index);
-    else clearPreview();
+    if (Number.isInteger(index)) highlight.preview(index);
+    else highlight.clearPreview();
     update(x / VIEWBOX_WIDTH);
   }
 
   svg.addEventListener("pointermove", updateFromPointer);
   svg.addEventListener("pointerleave", () => {
-    clearPreview();
+    highlight.clearPreview();
     hide();
   });
   svg.addEventListener("focus", () => update(1));
   svg.addEventListener("blur", () => {
-    clearPreview();
+    highlight.clearPreview();
     hide();
   });
   svg.addEventListener("keydown", (event) => {

website_next/learn/charts/stacked/index.js

@@ -33,7 +33,7 @@ export function renderStackedPlot(
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createAreaPathData(points));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   }
 
@@ -45,7 +45,7 @@ export function renderStackedPlot(
     path.dataset.series = index.toString();
     path.style.setProperty("--color", color);
     path.setAttribute("d", createLinePathData(points));
-    highlight.add(path, index);
+    highlight.addNode(path, index);
     group.append(path);
   }