website: redesign part 11

website_next/learn/charts/stacked/index.js

@@ -0,0 +1,53 @@
+import { createAreaPathData, createLinePathData } from "../path.js";
+import { createSvgElement } from "../svg.js";
+import { createStackedSeries } from "./series.js";
+
+/**
+ * @param {SVGGElement} group
+ * @param {LoadedSeries[]} loadedSeries
+ * @param {number} height
+ * @param {SeriesHighlight} highlight
+ * @param {{ reversed: boolean }} options
+ */
+export function renderStackedPlot(
+  group,
+  loadedSeries,
+  height,
+  highlight,
+  options,
+) {
+  const { lineIndexes, plottedSeries, stackIndexes } = createStackedSeries(
+    loadedSeries,
+    height,
+    options.reversed,
+  );
+
+  for (const index of stackIndexes) {
+    const { color, points } = plottedSeries[index];
+    const path = createSvgElement("path");
+
+    path.dataset.chart = "stacked";
+    path.dataset.series = index.toString();
+    path.style.setProperty("--color", color);
+    path.setAttribute("d", createAreaPathData(points));
+    highlight.add(path, index);
+    group.append(path);
+  }
+
+  for (const index of lineIndexes) {
+    const { color, points } = plottedSeries[index];
+    const path = createSvgElement("path");
+
+    path.dataset.chart = "line";
+    path.dataset.series = index.toString();
+    path.style.setProperty("--color", color);
+    path.setAttribute("d", createLinePathData(points));
+    highlight.add(path, index);
+    group.append(path);
+  }
+
+  return plottedSeries;
+}
+
+/** @typedef {import("../highlight.js").SeriesHighlight} SeriesHighlight */
+/** @typedef {import("../index.js").LoadedSeries} LoadedSeries */