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, + ]; }