average interval

This commit is contained in:
Damien Elmes 2020-08-04 15:28:41 +10:00
parent c9f9ae532e
commit 25948a328e
2 changed files with 21 additions and 6 deletions

View File

@ -10,12 +10,15 @@
} from "./intervals"; } from "./intervals";
import pb from "../backend/proto"; import pb from "../backend/proto";
import HistogramGraph from "./HistogramGraph.svelte"; import HistogramGraph from "./HistogramGraph.svelte";
import { TableDatum } from "./graphs";
import TableData from "./TableData.svelte";
export let sourceData: pb.BackendProto.GraphsOut | null = null; export let sourceData: pb.BackendProto.GraphsOut | null = null;
export let i18n: I18n; export let i18n: I18n;
let intervalData: IntervalGraphData | null = null; let intervalData: IntervalGraphData | null = null;
let histogramData = null as HistogramData | null; let histogramData = null as HistogramData | null;
let tableData: TableDatum[] = [];
let range = IntervalRange.Percentile95; let range = IntervalRange.Percentile95;
$: if (sourceData) { $: if (sourceData) {
@ -23,7 +26,7 @@
} }
$: if (intervalData) { $: if (intervalData) {
histogramData = prepareIntervalData(intervalData, range, i18n); [histogramData, tableData] = prepareIntervalData(intervalData, range, i18n);
} }
const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE); const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
@ -64,4 +67,6 @@
<div class="subtitle">{subtitle}</div> <div class="subtitle">{subtitle}</div>
<HistogramGraph data={histogramData} {i18n} /> <HistogramGraph data={histogramData} {i18n} />
<TableData {i18n} {tableData} />
</div> </div>

View File

@ -7,12 +7,14 @@
*/ */
import pb from "../backend/proto"; 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 { scaleLinear, scaleSequential } from "d3-scale";
import { CardQueue } from "../cards"; import { CardQueue } from "../cards";
import { HistogramData } from "./histogram-graph"; import { HistogramData } from "./histogram-graph";
import { interpolateBlues } from "d3-scale-chromatic"; import { interpolateBlues } from "d3-scale-chromatic";
import { I18n } from "../i18n"; import { I18n } from "../i18n";
import { TableDatum } from "./graphs";
import { timeSpan } from "../time";
export interface IntervalGraphData { export interface IntervalGraphData {
intervals: number[]; intervals: number[];
@ -59,11 +61,11 @@ export function prepareIntervalData(
data: IntervalGraphData, data: IntervalGraphData,
range: IntervalRange, range: IntervalRange,
i18n: I18n i18n: I18n
): HistogramData | null { ): [HistogramData | null, TableDatum[]] {
// get min/max // get min/max
const allIntervals = data.intervals; const allIntervals = data.intervals;
if (!allIntervals.length) { if (!allIntervals.length) {
return null; return [null, []];
} }
const total = allIntervals.length; const total = allIntervals.length;
@ -100,7 +102,7 @@ export function prepareIntervalData(
// empty graph? // empty graph?
if (!sum(bins, (bin) => bin.length)) { if (!sum(bins, (bin) => bin.length)) {
return null; return [null, []];
} }
// start slightly darker // start slightly darker
@ -120,5 +122,13 @@ export function prepareIntervalData(
return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`; 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];
} }