add right axis to histograms; nice y axis

ts/src/stats/AxisTicks.svelte

@@ -7,3 +7,6 @@
     class="x-ticks no-domain-line"
     transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
 <g class="y-ticks no-domain-line" transform={`translate(${bounds.marginLeft}, 0)`} />
+<g
+    class="y2-ticks no-domain-line"
+    transform={`translate(${bounds.width - bounds.marginRight}, 0)`} />

ts/src/stats/added.ts

@@ -97,5 +97,8 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
-    return [{ scale, bins, total, hoverText, colourScale, showArea: true }, tableData];
+    return [
+        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        tableData,
+    ];
 }

ts/src/stats/graphs.ts

@@ -70,7 +70,7 @@ export function defaultGraphBounds(): GraphBounds {
         width: 600,
         height: 250,
         marginLeft: 70,
-        marginRight: 30,
+        marginRight: 70,
         marginTop: 20,
         marginBottom: 40,
     };

ts/src/stats/histogram-graph.ts

@@ -10,7 +10,7 @@ import "d3-transition";
 import { select, mouse } from "d3-selection";
 import { cumsum, max, Bin } from "d3-array";
 import { scaleLinear, ScaleLinear, ScaleSequential } from "d3-scale";
-import { axisBottom, axisLeft } from "d3-axis";
+import { axisBottom, axisLeft, axisRight } from "d3-axis";
 import { area, curveBasis } from "d3-shape";
 import { showTooltip, hideTooltip } from "./tooltip";
 import { GraphBounds, setDataAvailable } from "./graphs";
@@ -57,7 +57,8 @@ export function histogramGraph(
     const yMax = max(data.bins, (d) => binValue(d))!;
     const y = scaleLinear()
         .range([bounds.height - bounds.marginBottom, bounds.marginTop])
-        .domain([0, yMax]);
+        .domain([0, yMax])
+        .nice();
     svg.select<SVGGElement>(".y-ticks")
         .transition(trans)
         .call(
@@ -107,9 +108,17 @@ export function histogramGraph(
     const areaCounts = data.bins.map((d) => binValue(d));
     areaCounts.unshift(0);
     const areaData = cumsum(areaCounts);
-    const yAreaScale = y.copy().domain([0, data.total]);
+    const yAreaScale = y.copy().domain([0, data.total]).nice();
 
     if (data.showArea && data.bins.length && areaData.slice(-1)[0]) {
+        svg.select<SVGGElement>(".y2-ticks")
+            .transition(trans)
+            .call(
+                axisRight(yAreaScale)
+                    .ticks(bounds.height / 50)
+                    .tickSizeOuter(0)
+            );
+
         svg.select("path.area")
             .datum(areaData as any)
             .attr(

ts/src/stats/intervals.ts

@@ -101,7 +101,8 @@ export function prepareIntervalData(
         .thresholds(scale.ticks(desiredBars))(allIntervals);
 
     // empty graph?
-    if (!sum(bins, (bin) => bin.length)) {
+    const totalInPeriod = sum(bins, (bin) => bin.length);
+    if (!totalInPeriod) {
         return [null, []];
     }
 
@@ -130,5 +131,8 @@ export function prepareIntervalData(
             value: meanIntervalString,
         },
     ];
-    return [{ scale, bins, total, hoverText, colourScale, showArea: true }, tableData];
+    return [
+        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        tableData,
+    ];
 }