add separate histogram graph component

ts/src/stats/HistogramGraph.svelte

@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import { HistogramData, histogramGraph } from "./histogram-graph";
+    import AxisLabels from "./AxisLabels.svelte";
+    import AxisTicks from "./AxisTicks.svelte";
+    import { defaultGraphBounds } from "./graphs";
+
+    export let data: HistogramData | null = null;
+    export let xText: string;
+    export let yText: string;
+
+    let bounds = defaultGraphBounds();
+    let svg = null as HTMLElement | SVGElement | null;
+
+    $: if (data) {
+        histogramGraph(svg as SVGElement, bounds, data);
+    }
+</script>
+
+<svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
+    <g class="bars" />
+    <g class="hoverzone" />
+    <path class="area" />
+    <AxisTicks {bounds} />
+    <AxisLabels {bounds} {xText} {yText} />
+</svg>

ts/src/stats/IntervalsGraph.svelte

@@ -1,18 +1,19 @@
 <script lang="typescript">
-    import AxisLabels from "./AxisLabels.svelte";
+    import { HistogramData } from "./histogram-graph";
-    import AxisTicks from "./AxisTicks.svelte";
+    import {
-
+        gatherIntervalData,
-    import { defaultGraphBounds } from "./graphs";
+        IntervalRange,
-    import { gatherIntervalData, intervalGraph, IntervalRange } from "./intervals";
+        prepareIntervalData,
-    import type { IntervalGraphData } from "./intervals";
+        IntervalGraphData,
+    } from "./intervals";
     import pb from "../backend/proto";
+    import HistogramGraph from "./HistogramGraph.svelte";
 
     export let data: pb.BackendProto.GraphsOut | null = null;
 
-    const bounds = defaultGraphBounds();
-
     let svg = null as HTMLElement | SVGElement | null;
     let range = IntervalRange.Percentile95;
+    let histogramData = null as HistogramData | null;
 
     let intervalData: IntervalGraphData | null = null;
     $: if (data) {
@@ -21,7 +22,8 @@
     }
 
     $: if (intervalData) {
-        intervalGraph(svg as SVGElement, bounds, intervalData, range);
+        console.log("preparing data");
+        histogramData = prepareIntervalData(intervalData, range);
     }
 </script>
 
@@ -54,11 +56,8 @@
         </label>
     </div>
 
-    <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
+    <HistogramGraph
-        <g class="bars" />
+        data={histogramData}
-        <g class="hoverzone" />
+        xText="Interval (days)"
-        <path class="area" />
+        yText="Number of cards" />
-        <AxisTicks {bounds} />
-        <AxisLabels {bounds} xText="Interval (days)" yText="Number of cards" />
-    </svg>
 </div>

ts/src/stats/intervals.ts

@@ -10,8 +10,7 @@ import pb from "../backend/proto";
 import { extent, histogram, quantile } from "d3-array";
 import { scaleLinear } from "d3-scale";
 import { CardQueue } from "../cards";
-import { HistogramData, histogramGraph } from "./histogram-graph";
+import { HistogramData } from "./histogram-graph";
-import { GraphBounds } from "./graphs";
 
 export interface IntervalGraphData {
     intervals: number[];
@@ -44,7 +43,7 @@ function hoverText(data: HistogramData, binIdx: number, percent: number): string
     );
 }
 
-function prepareIntervalData(
+export function prepareIntervalData(
     data: IntervalGraphData,
     range: IntervalRange
 ): HistogramData {
@@ -83,13 +82,3 @@ function prepareIntervalData(
 
     return { scale, bins, total, hoverText };
 }
-
-export function intervalGraph(
-    svgElem: SVGElement,
-    bounds: GraphBounds,
-    data: IntervalGraphData,
-    range: IntervalRange
-): void {
-    const histogram = prepareIntervalData(data, range);
-    histogramGraph(svgElem, bounds, histogram);
-}