diff --git a/ts/src/stats/AxisTicks.svelte b/ts/src/stats/AxisTicks.svelte
index c89a61198..790c102ad 100644
--- a/ts/src/stats/AxisTicks.svelte
+++ b/ts/src/stats/AxisTicks.svelte
@@ -7,3 +7,6 @@
class="x-ticks no-domain-line"
transform={`translate(0,${bounds.height - bounds.marginBottom})`} />
+
diff --git a/ts/src/stats/added.ts b/ts/src/stats/added.ts
index 88881b74d..b68160320 100644
--- a/ts/src/stats/added.ts
+++ b/ts/src/stats/added.ts
@@ -97,5 +97,8 @@ export function buildHistogram(
return `${day}:
${cards}
${total}: ${totalCards}`;
}
- return [{ scale, bins, total, hoverText, colourScale, showArea: true }, tableData];
+ return [
+ { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+ tableData,
+ ];
}
diff --git a/ts/src/stats/graphs.ts b/ts/src/stats/graphs.ts
index 3c3908f8f..29e0194a5 100644
--- a/ts/src/stats/graphs.ts
+++ b/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,
};
diff --git a/ts/src/stats/histogram-graph.ts b/ts/src/stats/histogram-graph.ts
index d37c3d336..de5bac32d 100644
--- a/ts/src/stats/histogram-graph.ts
+++ b/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(".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(".y2-ticks")
+ .transition(trans)
+ .call(
+ axisRight(yAreaScale)
+ .ticks(bounds.height / 50)
+ .tickSizeOuter(0)
+ );
+
svg.select("path.area")
.datum(areaData as any)
.attr(
diff --git a/ts/src/stats/intervals.ts b/ts/src/stats/intervals.ts
index 69ac73f56..f13ba2b55 100644
--- a/ts/src/stats/intervals.ts
+++ b/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,
+ ];
}