feat: Show value counts and highlight bar on histogram hover (#44)

* add percentFormatter

* Prop drill arrow field

* Support highlighting and value count on hover

* update histogram bin highlight/row-count hover  to only work on axes hover

* align lint with base repo

* fix tabs

* Update lib/utils/formatting.ts

Author: jwilber

lib/clients/DataTable.ts

@@ -287,6 +287,7 @@ export class DataTable extends MosaicClient {
 				vis = new Histogram({
 					table: this.#meta.table,
 					column: field.name,
+					field: field,
 					type: info.type,
 					filterBy: this.filterBy!,
 				});

lib/clients/Histogram.ts

@@ -20,6 +20,8 @@ import { assert } from "../utils/assert.ts";
 interface HistogramOptions {
 	/** The table to query. */
 	table: string;
+	/** An arrow Field containing the column info to use for the histogram. */
+	field: arrow.Field;
 	/** The column to use for the histogram. */
 	column: string;
 	/** The type of the column. Must be "number" or "date". */
@@ -32,7 +34,12 @@ type BinTable = arrow.Table<{ x1: arrow.Int; x2: arrow.Int; y: arrow.Int }>;
 
 /** Represents a Cross-filtered Histogram */
 export class Histogram extends MosaicClient implements Mark {
-	#source: { table: string; column: string; type: "number" | "date" };
+	#source: {
+		table: string;
+		column: string;
+		field: arrow.Field;
+		type: "number" | "date";
+	};
 	#el: HTMLElement = document.createElement("div");
 	#select: {
 		x1: ColumnField;
@@ -47,7 +54,12 @@ export class Histogram extends MosaicClient implements Mark {
 
 	constructor(options: HistogramOptions) {
 		super(options.filterBy);
-		this.#source = options;
+		this.#source = {
+			table: options.table,
+			column: options.field.name,
+			field: options.field,
+			type: options.type,
+		};
 		// calls this.channelField internally
 		let bin = mplot.bin(options.column)(this, "x");
 		this.#select = { x1: bin.x1, x2: bin.x2, y: count() };
@@ -102,7 +114,7 @@ export class Histogram extends MosaicClient implements Mark {
 			bins.splice(nullBinIndex, 1);
 		}
 		if (!this.#initialized) {
-			this.svg = CrossfilterHistogramPlot(bins, {
+			this.svg = CrossfilterHistogramPlot(bins, this.#source.field, {
 				nullCount,
 				type: this.#source.type,
 			});

lib/utils/CrossfilterHistogramPlot.ts

@@ -4,6 +4,8 @@ import * as d3 from "d3";
 import { assert } from "../utils/assert.ts";
 import { tickFormatterForBins } from "./tick-formatter-for-bins.ts";
 import type { Bin, Scale } from "../types.ts";
+import type * as arrow from "apache-arrow";
+import { formatDataType, percentFormatter } from "./formatting.ts";
 
 interface HistogramOptions {
 	type: "number" | "date";
@@ -27,6 +29,7 @@ interface HistogramOptions {
  */
 export function CrossfilterHistogramPlot(
 	bins: Array<Bin>,
+	field: arrow.Field,
 	{
 		type = "number",
 		width = 125,
@@ -44,7 +47,10 @@ export function CrossfilterHistogramPlot(
 	scale: (type: string) => Scale<number, number>;
 	update(bins: Array<Bin>, opts: { nullCount: number }): void;
 } {
+	const fieldType = formatDataType(field.type);
+	const total = bins.reduce((sum, bin) => sum + bin.length, 0);
 	let hovered = signal<number | Date | undefined>(undefined);
+	let countLabel = signal<string>(fieldType);
 	let nullBinWidth = nullCount === 0 ? 0 : 5;
 	let spacing = nullBinWidth ? 4 : 0;
 	let extent = /** @type {const} */ ([
@@ -148,6 +154,13 @@ export function CrossfilterHistogramPlot(
 			)
 			.attr("width", bbox.width + 5)
 			.attr("height", bbox.height + 5);
+
+		const labelElement = svg
+			.node()
+			?.parentElement?.parentElement?.querySelector(".gray");
+		if (labelElement) {
+			labelElement.textContent = countLabel.value;
+		}
 	});
 
 	/** @type {typeof foregroundBarGroup | undefined} */
@@ -215,7 +228,8 @@ export function CrossfilterHistogramPlot(
 			.attr("x", (d) => x(d.x0) + 1.5)
 			.attr("width", (d) => x(d.x1) - x(d.x0) - 1.5)
 			.attr("y", (d) => y(d.length))
-			.attr("height", (d) => y(0) - y(d.length));
+			.attr("height", (d) => y(0) - y(d.length))
+			.attr("opacity", 1);
 		foregroundNullGroup
 			?.select("rect")
 			.attr("y", y(nullCount))
@@ -237,10 +251,64 @@ export function CrossfilterHistogramPlot(
 	let node = svg.node();
 	assert(node, "Infallable");
 
+	// Function to find the closest rect to a given x-coordinate
+	function findClosestRect(x: number): SVGRectElement | null {
+		let closestRect: SVGRectElement | null = null;
+		let minDistance = Infinity;
+
+		foregroundBarGroup.selectAll("rect").each(function () {
+			const rect = d3.select(this);
+			const rectX = parseFloat(rect.attr("x"));
+			const rectWidth = parseFloat(rect.attr("width"));
+			const rectCenter = rectX + rectWidth / 2;
+			const distance = Math.abs(x - rectCenter);
+
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestRect = this as SVGRectElement;
+			}
+		});
+
+		return closestRect;
+	}
+
+	axes.on("mousemove", (event) => {
+		const relativeX = event.clientX - node.getBoundingClientRect().left;
+		const hoveredX = x.invert(relativeX);
+		hovered.value = clamp(hoveredX, xmin, xmax);
+
+		const closestRect = findClosestRect(relativeX);
+
+		foregroundBarGroup.selectAll("rect").attr("opacity", function () {
+			return this === closestRect ? 1 : 0.3;
+		});
+
+		const hoveredValue = hovered.value;
+
+		const hoveredBin = hoveredValue !== undefined
+			? bins.find((bin) => hoveredValue >= bin.x0 && hoveredValue < bin.x1)
+			: undefined;
+		const hoveredValueCount = hoveredBin?.length;
+
+		countLabel.value =
+			hoveredValue !== undefined && hoveredValueCount !== undefined
+				? `${hoveredValueCount} row${hoveredValueCount === 1 ? "" : "s"} (${
+					percentFormatter(hoveredValueCount / total)
+				})`
+				: fieldType;
+	});
+
 	node.addEventListener("mousemove", (event) => {
 		const relativeX = event.clientX - node.getBoundingClientRect().left;
 		hovered.value = clamp(x.invert(relativeX), xmin, xmax);
 	});
+
+	axes.on("mouseleave", () => {
+		hovered.value = undefined;
+		foregroundBarGroup.selectAll("rect").attr("opacity", 1);
+		countLabel.value = fieldType;
+	});
+
 	node.addEventListener("mouseleave", () => {
 		hovered.value = undefined;
 	});

lib/utils/ValueCountsPlot.ts

@@ -3,7 +3,7 @@ import type * as arrow from "apache-arrow";
 // @ts-types="npm:@types/d3"
 import * as d3 from "d3";
 import { assert } from "./assert.ts";
-import { formatDataType } from "./formatting.ts";
+import { formatDataType, percentFormatter } from "./formatting.ts";
 
 type CountTableData = arrow.Table<{
 	key: arrow.Utf8;
@@ -98,7 +98,7 @@ export function ValueCountsPlot(
 		countLabel.value =
 			hoveredValue !== undefined && hoveredValueCount !== undefined
 				? `${hoveredValueCount} row${hoveredValueCount === 1 ? "" : "s"} (${
-					d3.format(".1%")(hoveredValueCount / total)
+					percentFormatter(hoveredValueCount / total)
 				})`
 				: fieldType;
 	});

lib/utils/formatting.ts

@@ -1,5 +1,6 @@
 import { Temporal } from "@js-temporal/polyfill";
 import * as arrow from "apache-arrow";
+import { format } from "d3";
 
 /**
  * A utility function to create a formatter for a given data type.
@@ -223,3 +224,18 @@ function durationFromTimeUnit(value: number | bigint, unit: arrow.TimeUnit) {
 	}
 	throw new Error("Invalid TimeUnit");
 }
+
+/**
+ * Formats a number as a percentage string with varying precision based on the value's magnitude.
+ * @param {number} value - The value to be formatted as a percentage.
+ * @returns {string} A formatted percentage string.
+ */
+export function percentFormatter(value: number): string {
+	if (value >= 0.1) {
+		return format(".0%")(value);
+	} else if (value >= 0.01) {
+		return format(".1%")(value);
+	} else {
+		return format(".2%")(value);
+	}
+}