average interval

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 @@
     <div class="subtitle">{subtitle}</div>
 
     <HistogramGraph data={histogramData} {i18n} />
+
+    <TableData {i18n} {tableData} />
 </div>

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}<br>${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];
 }