Add to retrievability graph

ts/routes/graphs/RetrievabilityGraph.svelte

@@ -14,6 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HistogramGraph from "./HistogramGraph.svelte";
     import { gatherData, prepareData } from "./retrievability";
     import TableData from "./TableData.svelte";
+    import PercentageRange from "./PercentageRange.svelte";
+    import { PercentageRangeEnum, PercentageRangeToQuantile } from "./percentageRange";
 
     export let sourceData: GraphsResponse | null = null;
     export let prefs: GraphPrefs;
@@ -22,12 +24,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let histogramData: HistogramData | null = null;
     let tableData: TableDatum[] = [];
+    let range = PercentageRangeEnum.All;
 
     $: if (sourceData) {
         [histogramData, tableData] = prepareData(
             gatherData(sourceData),
             dispatch,
             $prefs.browserLinksSupported,
+            PercentageRangeToQuantile(range),
         );
     }
 
@@ -37,6 +41,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 {#if sourceData?.fsrs}
     <Graph {title} {subtitle}>
+        <PercentageRange bind:range />
+
         <HistogramGraph data={histogramData} />
 
         <TableData {tableData} />

ts/routes/graphs/difficulty.ts

@@ -14,6 +14,7 @@ import { bin, interpolateRdYlGn, scaleLinear, scaleSequential, sum } from "d3";
 import type { SearchDispatch, TableDatum } from "./graph-helpers";
 import { getNumericMapBinValue, numericMap } from "./graph-helpers";
 import type { HistogramData } from "./histogram-graph";
+import { percentageRangeMinMax } from "./percentageRange";
 
 export interface GraphData {
     eases: Map<number, number>;
@@ -57,16 +58,6 @@ function getAdjustedScaleAndTicks(
     ];
 }
 
-export function easeQuantile(data: Map<number, number>, quantile: number) {
-    let count = sum(data.values()) * quantile;
-    for (const [key, value] of data.entries()) {
-        count -= value;
-        if (count <= 0) {
-            return key;
-        }
-    }
-}
-
 export function prepareData(
     data: GraphData,
     dispatch: SearchDispatch,
@@ -78,8 +69,7 @@ export function prepareData(
     if (!allEases.size) {
         return [null, []];
     }
-    const xMin = quantile ? easeQuantile(allEases, 1 - quantile) ?? 0 : 0;
+    const [xMin, xMax] = percentageRangeMinMax(allEases, quantile);
-    const xMax = quantile ? easeQuantile(allEases, quantile) ?? 0 : 100;
     const desiredBars = 20;
 
     const [scale, ticks] = getAdjustedScaleAndTicks(xMin, xMax, desiredBars);

ts/routes/graphs/percentageRange.ts

@@ -1,4 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
+
+import { sum } from "d3";
+
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export enum PercentageRangeEnum {
     All = 0,
@@ -15,3 +18,20 @@ export function PercentageRangeToQuantile(range: PercentageRangeEnum) {
         [PercentageRangeEnum.All]: undefined,
     })[range];
 }
+
+export function easeQuantile(data: Map<number, number>, quantile: number) {
+    let count = sum(data.values()) * quantile;
+    for (const [key, value] of data.entries()) {
+        count -= value;
+        if (count <= 0) {
+            return key;
+        }
+    }
+}
+
+export function percentageRangeMinMax(data: Map<number, number>, range: number | undefined) {
+    const xMin = range ? easeQuantile(data, 1 - range) ?? 0 : 0;
+    const xMax = range ? easeQuantile(data, range) ?? 0 : 100;
+
+    return [xMin, xMax];
+}

ts/routes/graphs/retrievability.ts

@@ -14,6 +14,7 @@ import { bin, interpolateRdYlGn, scaleLinear, scaleSequential, sum } from "d3";
 import type { SearchDispatch, TableDatum } from "./graph-helpers";
 import { getNumericMapBinValue, numericMap } from "./graph-helpers";
 import type { HistogramData } from "./histogram-graph";
+import { percentageRangeMinMax } from "./percentageRange";
 
 export interface GraphData {
     retrievability: Map<number, number>;
@@ -68,14 +69,14 @@ export function prepareData(
     data: GraphData,
     dispatch: SearchDispatch,
     browserLinksSupported: boolean,
+    quantile?: number,
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const allEases = data.retrievability;
     if (!allEases.size) {
         return [null, []];
     }
-    const xMin = 0;
+    const [xMin, xMax] = percentageRangeMinMax(allEases, quantile);
-    const xMax = 100;
     const desiredBars = 20;
 
     const [scale, ticks] = getAdjustedScaleAndTicks(xMin, xMax, desiredBars);