diff --git a/ts/src/stats/IntervalsGraph.svelte b/ts/src/stats/IntervalsGraph.svelte index 1a13ebc9d..cfedeb955 100644 --- a/ts/src/stats/IntervalsGraph.svelte +++ b/ts/src/stats/IntervalsGraph.svelte @@ -10,12 +10,15 @@ } from "./intervals"; import pb from "../backend/proto"; import HistogramGraph from "./HistogramGraph.svelte"; + import { TableDatum } from "./graphs"; + import TableData from "./TableData.svelte"; export let sourceData: pb.BackendProto.GraphsOut | null = null; export let i18n: I18n; let intervalData: IntervalGraphData | null = null; let histogramData = null as HistogramData | null; + let tableData: TableDatum[] = []; let range = IntervalRange.Percentile95; $: if (sourceData) { @@ -23,7 +26,7 @@ } $: if (intervalData) { - histogramData = prepareIntervalData(intervalData, range, i18n); + [histogramData, tableData] = prepareIntervalData(intervalData, range, i18n); } const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE); @@ -64,4 +67,6 @@
{subtitle}
+ + diff --git a/ts/src/stats/intervals.ts b/ts/src/stats/intervals.ts index 10529ca77..69ac73f56 100644 --- a/ts/src/stats/intervals.ts +++ b/ts/src/stats/intervals.ts @@ -7,12 +7,14 @@ */ import pb from "../backend/proto"; -import { extent, histogram, quantile, sum } from "d3-array"; +import { extent, histogram, quantile, sum, mean } from "d3-array"; import { scaleLinear, scaleSequential } from "d3-scale"; import { CardQueue } from "../cards"; import { HistogramData } from "./histogram-graph"; import { interpolateBlues } from "d3-scale-chromatic"; import { I18n } from "../i18n"; +import { TableDatum } from "./graphs"; +import { timeSpan } from "../time"; export interface IntervalGraphData { intervals: number[]; @@ -59,11 +61,11 @@ export function prepareIntervalData( data: IntervalGraphData, range: IntervalRange, i18n: I18n -): HistogramData | null { +): [HistogramData | null, TableDatum[]] { // get min/max const allIntervals = data.intervals; if (!allIntervals.length) { - return null; + return [null, []]; } const total = allIntervals.length; @@ -100,7 +102,7 @@ export function prepareIntervalData( // empty graph? if (!sum(bins, (bin) => bin.length)) { - return null; + return [null, []]; } // start slightly darker @@ -120,5 +122,13 @@ export function prepareIntervalData( return `${interval}
${total}: \u200e${percent.toFixed(1)}%`; } - return { scale, bins, total, hoverText, colourScale, showArea: true }; + const meanInterval = Math.round(mean(allIntervals) ?? 0); + const meanIntervalString = timeSpan(i18n, meanInterval * 86400, false); + const tableData = [ + { + label: i18n.tr(i18n.TR.STATISTICS_AVERAGE_INTERVAL), + value: meanIntervalString, + }, + ]; + return [{ scale, bins, total, hoverText, colourScale, showArea: true }, tableData]; }