website: redesign part 13

website_next/learn/charts/scale.js

@@ -0,0 +1,74 @@
+import { createRadioGroup } from "./radio.js";
+import { createChartStorage } from "./storage.js";
+
+const storage = createChartStorage("scale");
+/** @type {ChartScale} */
+const defaultScale = "linear";
+/** @type {{ value: ChartScale, label: string }[]} */
+const scales = [
+  { value: "linear", label: "Lin" },
+  { value: "log", label: "Log" },
+];
+
+/** @param {string} chartKey */
+export function getDefaultScale(chartKey) {
+  const value = storage.get(chartKey);
+
+  return scales.find((scale) => scale.value === value)?.value ?? defaultScale;
+}
+
+/**
+ * @param {string} chartKey
+ * @param {ChartScale} scale
+ */
+export function saveScale(chartKey, scale) {
+  storage.set(chartKey, scale);
+}
+
+/**
+ * @param {ChartScale} currentScale
+ * @param {(scale: ChartScale) => void} onChange
+ */
+export function createScaleControl(currentScale, onChange) {
+  return createRadioGroup({
+    legend: "Scale",
+    options: scales,
+    currentValue: currentScale,
+    onChange,
+  });
+}
+
+/**
+ * @param {number} value
+ * @param {ScaleBounds} bounds
+ * @param {number} height
+ * @param {ChartScale} scale
+ */
+export function scaleY(value, bounds, height, scale) {
+  if (bounds.max === bounds.min) return height / 2;
+
+  if (scale === "log") {
+    if (bounds.max <= bounds.minPositive) {
+      return value > 0 ? height / 2 : height;
+    }
+
+    const nextValue = Math.max(value, bounds.minPositive);
+    return (
+      height -
+      ((Math.log10(nextValue) - Math.log10(bounds.minPositive)) /
+        (Math.log10(bounds.max) - Math.log10(bounds.minPositive))) *
+        height
+    );
+  }
+
+  return height - ((value - bounds.min) / (bounds.max - bounds.min)) * height;
+}
+
+/**
+ * @typedef {Object} ScaleBounds
+ * @property {number} min
+ * @property {number} max
+ * @property {number} minPositive
+ */
+
+/** @typedef {"linear" | "log"} ChartScale */