20250105 plm dash (#1)

* factor to component

* delete unused tempalte files.

observablehq.config.js

@@ -17,7 +17,7 @@ export default {
   // ],
 
   // Content to add to the head of the page, e.g. for a favicon:
-  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
+  head: '<link rel="icon" href="app.png" type="image/png" sizes="30x30">',
 
   // The path to the source root.
   root: "src",
@@ -26,9 +26,9 @@ export default {
   // theme: "default", // try "light", "dark", "slate", etc.
   // header: "", // what to show in the header (HTML)
   // footer: "Built with Observable.", // what to show in the footer (HTML)
-  // sidebar: true, // whether to show the sidebar
+  sidebar: false, // whether to show the sidebar
   // toc: true, // whether to show the table of contents
-  // pager: true, // whether to show previous & next links in the footer
+  pager: false, // whether to show previous & next links in the footer
   // output: "dist", // path to the output root for build
   // search: true, // activate search
   // linkify: true, // convert URLs in Markdown to links

src/components/hardware.js

@@ -0,0 +1,72 @@
+import * as Plot from "npm:@observablehq/plot";
+import * as d3 from "npm:d3";
+
+const parseDate = d3.timeParse("%b %Y");
+
+function parseMemorySize(str) {
+  if (!str) return null;
+
+  const match = str.match(/^(\d+)\s*(KB|MB|GB|TB|PB)?$/i);
+  if (!match) return null;
+
+  const [, value, unit = "GB"] = match;
+  const multipliers = {
+    KB: 1 / 1024 / 1024, // Convert to GB
+    MB: 1 / 1024, // Convert to GB
+    GB: 1, // Already in GB
+    TB: 1024, // Convert to GB
+    PB: 1024 * 1024, // Convert to GB
+  };
+
+  return Number(value) * multipliers[unit.toUpperCase()];
+}
+
+function munge_hardware(hardware) {
+  return hardware
+    .map((d) => {
+      const parsedDate = parseDate(d["Release Date"]);
+      const parsedRam = parseMemorySize(d["Base RAM"]);
+
+      return {
+        y: parsedDate,
+        x: parsedRam,
+        model: d.Model,
+      };
+    })
+    .filter((d) => {
+      const isValid = d.x != null && d.y != null;
+      if (!isValid) {
+        console.log("Filtered out entry:", d);
+      }
+      return isValid;
+    });
+}
+
+export function hardware_plot(hardware, { width, height } = {}) {
+  let data = munge_hardware(hardware);
+
+  return Plot.plot({
+    y: {
+      grid: true,
+      label: "Release Date",
+      type: "time",
+      nice: true,
+    },
+    x: {
+      grid: true,
+      label: "RAM (GB)",
+      nice: true,
+    },
+    marks: [
+      Plot.dot(data),
+      Plot.text(data, {
+        x: "x",
+        y: "y",
+        text: "model",
+        dy: -8,
+      }),
+    ],
+    height: 400,
+    width: 800,
+  });
+}