website: redesign part 13

website_next/learn/charts/line/index.js

@@ -7,9 +7,10 @@ import { createLineSeries } from "./series.js";
  * @param {LoadedSeries[]} loadedSeries
  * @param {number} height
  * @param {SeriesHighlight} highlight
+ * @param {import("../scale.js").ChartScale} scale
  */
-export function renderLinePlot(group, loadedSeries, height, highlight) {
-  const plottedSeries = createLineSeries(loadedSeries, height);
+export function renderLinePlot(group, loadedSeries, height, highlight, scale) {
+  const plottedSeries = createLineSeries(loadedSeries, height, scale);
 
   plottedSeries.forEach(({ color, points }, index) => {
     const path = createSvgElement("path");

website_next/learn/charts/line/series.js

@@ -1,52 +1,52 @@
 import { VIEWBOX_WIDTH } from "../viewbox.js";
+import { scaleY } from "../scale.js";
 
 /** @param {LoadedSeries[]} series */
 function createValueBounds(series) {
   let min = Infinity;
   let max = -Infinity;
+  let minPositive = Infinity;
 
   for (const { entries } of series) {
     for (const { value } of entries) {
       min = Math.min(min, value);
       max = Math.max(max, value);
+      if (value > 0) minPositive = Math.min(minPositive, value);
     }
   }
 
-  return { min, max };
+  return { min, max, minPositive };
 }
 
 /**
  * @param {{ date: Date, value: number }[]} entries
- * @param {{ min: number, max: number }} bounds
+ * @param {import("../scale.js").ScaleBounds} bounds
  * @param {number} height
+ * @param {import("../scale.js").ChartScale} scale
  */
-function createPoints(entries, bounds, height) {
+function createPoints(entries, bounds, height, scale) {
   const xScale = VIEWBOX_WIDTH / (entries.length - 1);
-  const yScale =
-    bounds.max === bounds.min ? 0 : height / (bounds.max - bounds.min);
 
   return entries.map(({ date, value }, index) => ({
     date,
     value,
     x: index * xScale,
-    y:
-      bounds.max === bounds.min
-        ? height / 2
-        : height - (value - bounds.min) * yScale,
+    y: scaleY(value, bounds, height, scale),
   }));
 }
 
 /**
  * @param {LoadedSeries[]} loadedSeries
  * @param {number} height
+ * @param {import("../scale.js").ChartScale} scale
  */
-export function createLineSeries(loadedSeries, height) {
+export function createLineSeries(loadedSeries, height, scale) {
   const bounds = createValueBounds(loadedSeries);
 
   return loadedSeries.map(({ series, color, entries }) => ({
     series,
     color,
-    points: createPoints(entries, bounds, height),
+    points: createPoints(entries, bounds, height, scale),
   }));
 }