Add search to added graph

ts/graphs/AddedGraph.svelte

@@ -39,7 +39,7 @@
         <GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} />
+    <HistogramGraph data={histogramData} {i18n} on:search />
 
     <TableData {i18n} {tableData} />
 </div>

ts/graphs/HistogramGraph.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import type { HistogramData } from "./histogram-graph";
     import { histogramGraph } from "./histogram-graph";
     import AxisTicks from "./AxisTicks.svelte";
@@ -9,10 +10,12 @@
     export let data: HistogramData | null = null;
     export let i18n: I18n;
 
+    const dispatch = createEventDispatcher();
+
     let bounds = defaultGraphBounds();
     let svg = null as HTMLElement | SVGElement | null;
 
-    $: histogramGraph(svg as SVGElement, bounds, data);
+    $: histogramGraph(svg as SVGElement, bounds, data, dispatch);
 </script>
 
 <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>

ts/graphs/added.ts

@@ -102,8 +102,24 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
+    function makeQuery(
+        data: HistogramData,
+        binIdx: number,
+    ): string {
+        const start = Math.abs(data.bins[binIdx].x0!) + 1;
+        const include = `added:${start}`
+
+        if (start === 1) {
+            return include
+        }
+
+        const end = Math.abs(data.bins[binIdx].x1!) + 1;
+        const exclude = `-added:${end}`
+        return `${include} ${exclude}`
+    }
+
     return [
-        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true },
         tableData,
     ];
 }

ts/graphs/histogram-graph.ts

@@ -25,6 +25,10 @@ export interface HistogramData {
         cumulative: number,
         percent: number
     ) => string;
+    makeQuery?: (
+        data: HistogramData,
+        binIdx: number,
+    ) => string;
     showArea: boolean;
     colourScale: ScaleSequential<string>;
     binValue?: (bin: Bin<any, any>) => number;
@@ -34,7 +38,8 @@ export interface HistogramData {
 export function histogramGraph(
     svgElem: SVGElement,
     bounds: GraphBounds,
-    data: HistogramData | null
+    data: HistogramData | null,
+    dispatch: any,
 ): void {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
@@ -152,10 +157,21 @@ export function histogramGraph(
         .attr("y", () => y(yMax!)!)
         .attr("width", barWidth)
         .attr("height", () => y(0)! - y(yMax!)!)
+        .on("mouseover", function (this: any) {
+            this.style = "cursor: pointer;";
+        })
         .on("mousemove", function (this: any, d: any, idx) {
             const [x, y] = mouse(document.body);
             const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
             showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
         })
-        .on("mouseout", hideTooltip);
+        .on("mouseout", function (this: any) {
+            hideTooltip;
+            this.style = "";
+        })
+        .on('click', function(this: any, d: any, idx: number) {
+            console.log('clicked', this)
+            if (!data.makeQuery) { return }
+            dispatch("search", { query: data.makeQuery(data, idx) })
+        });
 }