put reviews at bottom of reviews graph

https://forums.ankiweb.net/t/new-reviews-graph-design-is-worse-than-it-was-in-2-1-40/9807

ts/graphs/reviews.ts

@@ -28,6 +28,7 @@ import {
     sum,
     max,
     cumsum,
+    ScaleSequential,
 } from "d3";
 import type { Bin } from "d3";
 
@@ -99,14 +100,22 @@ export function gatherData(data: Stats.GraphsResponse): GraphData {
     return { reviewCount, reviewTime };
 }
 
+enum BinIndex {
+    Mature = 0,
+    Young = 1,
+    Relearn = 2,
+    Learn = 3,
+    Filtered = 4,
+}
+
 function totalsForBin(bin: BinType): number[] {
     const total = [0, 0, 0, 0, 0];
     for (const entry of bin) {
-        total[0] += entry[1].learn;
+        total[BinIndex.Mature] += entry[1].mature;
-        total[1] += entry[1].relearn;
+        total[BinIndex.Young] += entry[1].young;
-        total[2] += entry[1].young;
+        total[BinIndex.Relearn] += entry[1].relearn;
-        total[3] += entry[1].mature;
+        total[BinIndex.Learn] += entry[1].learn;
-        total[4] += entry[1].filtered;
+        total[BinIndex.Filtered] += entry[1].filtered;
     }
 
     return total;
@@ -228,6 +237,21 @@ export function renderReviews(
         x.domain() as any
     );
 
+    function binColor(idx: BinIndex): ScaleSequential<string> {
+        switch (idx) {
+            case BinIndex.Mature:
+                return darkerGreens;
+            case BinIndex.Young:
+                return lighterGreens;
+            case BinIndex.Learn:
+                return oranges;
+            case BinIndex.Relearn:
+                return reds;
+            case BinIndex.Filtered:
+                return purples;
+        }
+    }
+
     function valueLabel(n: number): string {
         if (showTime) {
             return timeSpan(n / 1000);
@@ -241,17 +265,26 @@ export function renderReviews(
         const totals = totalsForBin(d);
         const dayTotal = valueLabel(sum(totals));
         let buf = `<table><tr><td>${day}</td><td align=right>${dayTotal}</td></tr>`;
-        const lines = [
+        const lines: [BinIndex | null, string][] = [
-            [oranges(1), tr.statisticsCountsLearningCards(), valueLabel(totals[0])],
+            [BinIndex.Filtered, tr.statisticsCountsFilteredCards()],
-            [reds(1), tr.statisticsCountsRelearningCards(), valueLabel(totals[1])],
+            [BinIndex.Learn, tr.statisticsCountsLearningCards()],
-            [lighterGreens(1), tr.statisticsCountsYoungCards(), valueLabel(totals[2])],
+            [BinIndex.Relearn, tr.statisticsCountsRelearningCards()],
-            [darkerGreens(1), tr.statisticsCountsMatureCards(), valueLabel(totals[3])],
+            [BinIndex.Young, tr.statisticsCountsYoungCards()],
-            [purples(1), tr.statisticsCountsFilteredCards(), valueLabel(totals[4])],
+            [BinIndex.Mature, tr.statisticsCountsMatureCards()],
-            ["transparent", tr.statisticsRunningTotal(), valueLabel(cumulative)],
+            [null, tr.statisticsRunningTotal()],
         ];
-        for (const [colour, label, detail] of lines) {
+        for (const [idx, label] of lines) {
+            let color;
+            let detail;
+            if (idx == null) {
+                color = "transparent";
+                detail = valueLabel(cumulative);
+            } else {
+                color = binColor(idx)(1);
+                detail = valueLabel(totals[idx]);
+            }
             buf += `<tr>
-            <td><span style="color: ${colour};">■</span> ${label}</td>
+            <td><span style="color: ${color};">■</span> ${label}</td>
             <td align=right>${detail}</td>
             </tr>`;
         }
@@ -265,20 +298,7 @@ export function renderReviews(
             .attr("x", (d: any) => x(d.x0))
             .attr("y", (d: any) => y(cumulativeBinValue(d, idx))!)
             .attr("height", (d: any) => y(0)! - y(cumulativeBinValue(d, idx))!)
-            .attr("fill", (d: any) => {
+            .attr("fill", (d: any) => binColor(idx)(d.x0));
-                switch (idx) {
-                    case 0:
-                        return oranges(d.x0);
-                    case 1:
-                        return reds(d.x0);
-                    case 2:
-                        return lighterGreens(d.x0);
-                    case 3:
-                        return darkerGreens(d.x0);
-                    case 4:
-                        return purples(d.x0);
-                }
-            });
     };
 
     for (const barNum of [0, 1, 2, 3, 4]) {