@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/use-index-navigation.js

@@ -0,0 +1,47 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useIndexNavigation(count, { wrap = false } = {}) {
+  const ref = useRef(null);
+  const [active, setActive] = useState(null);
+  const [pointer, setPointer] = useState(null);
+  useEffect(() => {
+    setActive((current) => current != null && current >= count ? null : current);
+  }, [count]);
+  const hover = useCallback((index, event) => {
+    const box = ref.current?.getBoundingClientRect();
+    if (!box) return;
+    setActive(index);
+    setPointer({ x: event.clientX - box.left, y: event.clientY - box.top });
+  }, []);
+  const leave = useCallback(() => {
+    setActive(null);
+    setPointer(null);
+  }, []);
+  const onKeyDown = (event) => {
+    if (count === 0) return;
+    const last = count - 1;
+    let move;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      move = (current) => current == null ? 0 : wrap ? (current + 1) % count : Math.min(last, current + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      move = (current) => current == null ? last : wrap ? (current - 1 + count) % count : Math.max(0, current - 1);
+    } else if (event.key === "Home") move = () => 0;
+    else if (event.key === "End") move = () => last;
+    else if (event.key === "Escape") {
+      leave();
+      return;
+    } else return;
+    event.preventDefault();
+    setPointer(null);
+    setActive(move);
+  };
+  const sliderProps = {
+    onKeyDown,
+    onFocus: () => setActive((current) => current ?? 0),
+    onBlur: leave
+  };
+  return { ref, active, pointer, setActive, hover, leave, sliderProps };
+}
+export {
+  useIndexNavigation
+};

package/dist/charts/core/use-pan-zoom.d.ts

@@ -0,0 +1,56 @@
+import { type PointerEvent } from "react";
+/** Scale `k` and translation of a pannable stage: screen = content * k + (x, y). */
+export interface PanZoomView {
+    k: number;
+    x: number;
+    y: number;
+}
+/** Scales `view` by `factor` keeping the screen point `px, py` fixed. */
+export declare function zoomAround(view: PanZoomView, factor: number, px: number, py: number, minZoom: number, maxZoom: number): PanZoomView;
+/**
+ * View that shows a `contentWidth` x `contentHeight` drawing centred in a
+ * `width` x `height` viewport, `padding` from the edges, never enlarged past `maxFit`.
+ */
+export declare function fitView(contentWidth: number, contentHeight: number, width: number, height: number, { padding, minZoom, maxFit }?: {
+    padding?: number | undefined;
+    minZoom?: number | undefined;
+    maxFit?: number | undefined;
+}): PanZoomView;
+export interface UsePanZoomOptions {
+    minZoom?: number;
+    maxZoom?: number;
+    /**
+     * Wheel zoom: `modifier` (default) only with Ctrl/⌘ or a trackpad pinch, so
+     * the page keeps scrolling; `always` captures the wheel; `off` ignores it.
+     */
+    wheel?: "modifier" | "always" | "off";
+}
+/**
+ * Pan (drag), zoom (wheel, pinch, buttons) for an element that holds a
+ * transformed stage. Pointer capture starts only once a drag passes a few
+ * pixels, so clicks on content inside the stage still work; `wasDrag()` tells
+ * a click handler to ignore the click that ends a drag.
+ */
+export declare function usePanZoom<T extends HTMLElement>({ minZoom, maxZoom, wheel, }?: UsePanZoomOptions): {
+    ref: import("react").RefObject<T | null>;
+    view: PanZoomView;
+    setView: (next: PanZoomView, { user }?: {
+        user?: boolean;
+    }) => void;
+    zoomBy: (factor: number, around?: {
+        x: number;
+        y: number;
+    }) => void;
+    /** True while dragging, pinching or wheel zooming: transitions should be off. */
+    interacting: boolean;
+    /** The user moved the view since the last automatic fit. */
+    userMoved: import("react").RefObject<boolean>;
+    /** The last pointer gesture was a drag, not a click. */
+    wasDrag: () => boolean;
+    handlers: {
+        onPointerDown: (event: PointerEvent<T>) => void;
+        onPointerMove: (event: PointerEvent<T>) => void;
+        onPointerUp: (event: PointerEvent<T>) => void;
+        onPointerCancel: (event: PointerEvent<T>) => void;
+    };
+};

package/dist/charts/core/use-pan-zoom.js

@@ -0,0 +1,163 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function zoomAround(view, factor, px, py, minZoom, maxZoom) {
+  const k = clamp(view.k * factor, minZoom, maxZoom);
+  const ratio = k / view.k;
+  return { k, x: px - (px - view.x) * ratio, y: py - (py - view.y) * ratio };
+}
+function fitView(contentWidth, contentHeight, width, height, { padding = 16, minZoom = 0.05, maxFit = 1 } = {}) {
+  const k = clamp(
+    Math.min(
+      (width - padding * 2) / Math.max(1, contentWidth),
+      (height - padding * 2) / Math.max(1, contentHeight),
+      maxFit
+    ),
+    minZoom,
+    Number.POSITIVE_INFINITY
+  );
+  return { k, x: (width - contentWidth * k) / 2, y: (height - contentHeight * k) / 2 };
+}
+const DRAG_THRESHOLD = 4;
+function usePanZoom({
+  minZoom = 0.1,
+  maxZoom = 2.5,
+  wheel = "modifier"
+} = {}) {
+  const ref = useRef(null);
+  const [view, setViewState] = useState({ k: 1, x: 0, y: 0 });
+  const [interacting, setInteracting] = useState(false);
+  const viewRef = useRef(view);
+  const userMoved = useRef(false);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef({
+    dragged: false,
+    startX: 0,
+    startY: 0,
+    distance: 0
+  });
+  const lastDrag = useRef(false);
+  const setView = useCallback((next, { user = true } = {}) => {
+    viewRef.current = next;
+    if (user) userMoved.current = true;
+    setViewState(next);
+  }, []);
+  const zoomBy = useCallback(
+    (factor, around) => {
+      const element = ref.current;
+      const px = around?.x ?? (element ? element.clientWidth / 2 : 0);
+      const py = around?.y ?? (element ? element.clientHeight / 2 : 0);
+      setView(zoomAround(viewRef.current, factor, px, py, minZoom, maxZoom));
+    },
+    [minZoom, maxZoom, setView]
+  );
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || wheel === "off") return;
+    let timer;
+    const onWheel = (event) => {
+      if (wheel === "modifier" && !event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const box = element.getBoundingClientRect();
+      const factor = Math.exp(-event.deltaY * (event.deltaMode === 1 ? 0.05 : 25e-4));
+      setInteracting(true);
+      clearTimeout(timer);
+      timer = setTimeout(() => setInteracting(false), 160);
+      setView(
+        zoomAround(
+          viewRef.current,
+          factor,
+          event.clientX - box.left,
+          event.clientY - box.top,
+          minZoom,
+          maxZoom
+        )
+      );
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      clearTimeout(timer);
+      element.removeEventListener("wheel", onWheel);
+    };
+  }, [wheel, minZoom, maxZoom, setView]);
+  const local = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - box.left, y: event.clientY - box.top };
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    const point = local(event);
+    pointers.current.set(event.pointerId, point);
+    if (pointers.current.size === 1) {
+      gesture.current = { dragged: false, startX: point.x, startY: point.y, distance: 0 };
+    } else if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      gesture.current.distance = Math.hypot(a.x - b.x, a.y - b.y);
+      gesture.current.dragged = true;
+    }
+  };
+  const onPointerMove = (event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    const point = local(event);
+    pointers.current.set(event.pointerId, point);
+    const state = gesture.current;
+    if (pointers.current.size >= 2) {
+      const [a, b] = [...pointers.current.values()];
+      const distance = Math.hypot(a.x - b.x, a.y - b.y);
+      if (state.distance > 0) {
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        setView(
+          zoomAround(viewRef.current, distance / state.distance, mid.x, mid.y, minZoom, maxZoom)
+        );
+      }
+      state.distance = distance;
+      return;
+    }
+    if (!state.dragged) {
+      if (Math.hypot(point.x - state.startX, point.y - state.startY) < DRAG_THRESHOLD) return;
+      state.dragged = true;
+      setInteracting(true);
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    const current = viewRef.current;
+    setView({
+      k: current.k,
+      x: current.x + point.x - previous.x,
+      y: current.y + point.y - previous.y
+    });
+  };
+  const onPointerEnd = (event) => {
+    if (!pointers.current.has(event.pointerId)) return;
+    pointers.current.delete(event.pointerId);
+    if (pointers.current.size === 0) {
+      lastDrag.current = gesture.current.dragged;
+      setInteracting(false);
+    }
+  };
+  return {
+    ref,
+    view,
+    setView,
+    zoomBy,
+    /** True while dragging, pinching or wheel zooming: transitions should be off. */
+    interacting,
+    /** The user moved the view since the last automatic fit. */
+    userMoved,
+    /** The last pointer gesture was a drag, not a click. */
+    wasDrag: () => lastDrag.current,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd
+    }
+  };
+}
+export {
+  fitView,
+  usePanZoom,
+  zoomAround
+};

package/dist/charts/core/use-series-state.d.ts

@@ -0,0 +1,13 @@
+export interface SeriesState {
+    /** Ids hidden through the legend. */
+    hidden: ReadonlySet<string>;
+    /** Series under the legend pointer or focus; the others are dimmed. */
+    highlighted: string | null;
+    toggle: (id: string) => void;
+    setHighlighted: (id: string | null) => void;
+    isHidden: (id: string) => boolean;
+    /** True when another series is highlighted. */
+    isDimmed: (id: string) => boolean;
+}
+/** Legend-driven visibility and highlight, shared by every chart type. */
+export declare function useSeriesState(initialHidden?: readonly string[]): SeriesState;

package/dist/charts/core/use-series-state.js

@@ -0,0 +1,26 @@
+"use client";
+import { useCallback, useState } from "react";
+function useSeriesState(initialHidden = []) {
+  const [hidden, setHidden] = useState(() => new Set(initialHidden));
+  const [highlighted, setHighlighted] = useState(null);
+  const toggle = useCallback((id) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+    setHighlighted(null);
+  }, []);
+  return {
+    hidden,
+    highlighted,
+    toggle,
+    setHighlighted,
+    isHidden: (id) => hidden.has(id),
+    isDimmed: (id) => highlighted != null && highlighted !== id && !hidden.has(highlighted)
+  };
+}
+export {
+  useSeriesState
+};

package/dist/charts/crossfilter/crossfilter-engine.d.ts

@@ -0,0 +1,54 @@
+export type DimensionValue = string | number;
+/** How a record exposes a dimension, e.g. `(sale) => sale.barber`. */
+export type Accessor<T> = (record: T) => DimensionValue;
+export type Accessors<T> = Readonly<Record<string, Accessor<T>>>;
+/** One or more categories (clicking bars) or a numeric interval, inclusive (brushing a histogram). */
+export type CrossfilterFilter = {
+    kind: "set";
+    values: readonly DimensionValue[];
+} | {
+    kind: "range";
+    min: number;
+    max: number;
+};
+export type CrossfilterFilters = Readonly<Record<string, CrossfilterFilter>>;
+export declare const NO_FILTERS: CrossfilterFilters;
+export declare function matchesFilter(filter: CrossfilterFilter, value: DimensionValue): boolean;
+/**
+ * Records that pass every filter. `exclude` leaves one dimension's own filter out, which is how
+ * crossfilter keeps a chart stable while you interact with it.
+ */
+export declare function filterRecords<T>(records: readonly T[], accessors: Accessors<T>, filters: CrossfilterFilters, exclude?: string): T[];
+export interface Group {
+    key: DimensionValue;
+    /** Records in the group. */
+    count: number;
+    /** Sum of the `value` accessor (the count when none is given). */
+    sum: number;
+}
+export interface GroupOptions<T> {
+    /** Measure to add up; each record counts 1 by default. */
+    value?: (record: T) => number;
+    /** Keys to report, in this order, even when empty. Otherwise keys in order of first appearance. */
+    keys?: readonly DimensionValue[];
+}
+/** Totals per value of `dimension`, over the records that pass every OTHER filter. */
+export declare function groupRecords<T>(records: readonly T[], accessors: Accessors<T>, filters: CrossfilterFilters, dimension: string, { value, keys }?: GroupOptions<T>): Group[];
+/** Bin edges (`count + 1` of them) that split `[min, max]` evenly. */
+export declare function evenEdges(min: number, max: number, count: number): number[];
+/** Index of the bin of `value`: bins are `[edge i, edge i+1)`, the last one includes its upper edge. -1 outside. */
+export declare function binIndex(edges: readonly number[], value: number): number;
+/** Count per bin of a numeric dimension, over the records that pass every OTHER filter. */
+export declare function binRecords<T>(records: readonly T[], accessors: Accessors<T>, filters: CrossfilterFilters, dimension: string, edges: readonly number[]): number[];
+/** Adds the value to a set filter, or removes it; a set that becomes empty clears the dimension. */
+export declare function toggleValue(filters: CrossfilterFilters, dimension: string, value: DimensionValue): CrossfilterFilters;
+export declare function setRangeFilter(filters: CrossfilterFilters, dimension: string, range: readonly [number, number] | null): CrossfilterFilters;
+/** Clears one dimension, or all of them. */
+export declare function clearFilters(filters: CrossfilterFilters, dimension?: string): CrossfilterFilters;
+/** True when `value` is inside the dimension's filter (or the dimension has none). */
+export declare function isSelected(filters: CrossfilterFilters, dimension: string, value: DimensionValue): boolean;
+/** Indices of the bins a range filter covers (a bin is covered when it overlaps the range). */
+export declare function binsInRange(edges: readonly number[], min: number, max: number): [number, number] | null;
+/** Interval covered by bins `from..to` (inclusive indices), as a range filter value. */
+export declare function rangeOfBins(edges: readonly number[], from: number, to: number): [number, number];
+export declare function activeFilterCount(filters: CrossfilterFilters): number;

package/dist/charts/crossfilter/crossfilter-engine.js

@@ -0,0 +1,125 @@
+const NO_FILTERS = Object.freeze({});
+function matchesFilter(filter, value) {
+  if (filter.kind === "set") return filter.values.includes(value);
+  const numeric = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(numeric) && numeric >= filter.min && numeric <= filter.max;
+}
+function filterRecords(records, accessors, filters, exclude) {
+  const active = Object.entries(filters).filter(([id]) => id !== exclude && accessors[id]);
+  if (active.length === 0) return records.slice();
+  return records.filter(
+    (record) => active.every(([id, filter]) => matchesFilter(filter, accessors[id](record)))
+  );
+}
+function groupRecords(records, accessors, filters, dimension, { value, keys } = {}) {
+  const accessor = accessors[dimension];
+  if (!accessor) return [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const key of keys ?? []) groups.set(key, { key, count: 0, sum: 0 });
+  for (const record of filterRecords(records, accessors, filters, dimension)) {
+    const key = accessor(record);
+    let group = groups.get(key);
+    if (!group) {
+      if (keys) continue;
+      group = { key, count: 0, sum: 0 };
+      groups.set(key, group);
+    }
+    group.count += 1;
+    group.sum += value ? value(record) : 1;
+  }
+  return [...groups.values()];
+}
+function evenEdges(min, max, count) {
+  const bins = Math.max(1, Math.round(count));
+  const span = max - min || 1;
+  return Array.from({ length: bins + 1 }, (_, i) => min + span * i / bins);
+}
+function binIndex(edges, value) {
+  const last = edges.length - 1;
+  if (last < 1 || !Number.isFinite(value) || value < edges[0]) return -1;
+  if (value > edges[last]) return -1;
+  if (value === edges[last]) return last - 1;
+  let lo = 0;
+  let hi = last;
+  while (hi - lo > 1) {
+    const mid = lo + hi >> 1;
+    if (edges[mid] <= value) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function binRecords(records, accessors, filters, dimension, edges) {
+  const accessor = accessors[dimension];
+  const counts = new Array(Math.max(0, edges.length - 1)).fill(0);
+  if (!accessor) return counts;
+  for (const record of filterRecords(records, accessors, filters, dimension)) {
+    const index = binIndex(edges, Number(accessor(record)));
+    if (index >= 0) counts[index] = counts[index] + 1;
+  }
+  return counts;
+}
+function toggleValue(filters, dimension, value) {
+  const current = filters[dimension];
+  const values = current?.kind === "set" ? current.values : [];
+  const next = values.includes(value) ? values.filter((item) => item !== value) : [...values, value];
+  return withFilter(filters, dimension, next.length > 0 ? { kind: "set", values: next } : null);
+}
+function setRangeFilter(filters, dimension, range) {
+  return withFilter(
+    filters,
+    dimension,
+    range ? { kind: "range", min: Math.min(...range), max: Math.max(...range) } : null
+  );
+}
+function clearFilters(filters, dimension) {
+  return dimension == null ? NO_FILTERS : withFilter(filters, dimension, null);
+}
+function withFilter(filters, dimension, filter) {
+  const { [dimension]: _removed, ...rest } = filters;
+  return filter ? { ...rest, [dimension]: filter } : rest;
+}
+function isSelected(filters, dimension, value) {
+  const filter = filters[dimension];
+  return !filter || matchesFilter(filter, value);
+}
+function binsInRange(edges, min, max) {
+  let first = -1;
+  let last = -1;
+  for (let i = 0; i < edges.length - 1; i += 1) {
+    const lo = edges[i];
+    const hi = edges[i + 1];
+    if (hi > min && lo <= max) {
+      if (first < 0) first = i;
+      last = i;
+    }
+  }
+  return first < 0 ? null : [first, last];
+}
+function rangeOfBins(edges, from, to) {
+  const lo = Math.max(0, Math.min(from, to));
+  const hi = Math.min(edges.length - 2, Math.max(from, to));
+  const upper = edges[hi + 1];
+  return [
+    edges[lo],
+    hi === edges.length - 2 ? upper : upper - (upper - edges[hi]) * 1e-9
+  ];
+}
+function activeFilterCount(filters) {
+  return Object.keys(filters).length;
+}
+export {
+  NO_FILTERS,
+  activeFilterCount,
+  binIndex,
+  binRecords,
+  binsInRange,
+  clearFilters,
+  evenEdges,
+  filterRecords,
+  groupRecords,
+  isSelected,
+  matchesFilter,
+  rangeOfBins,
+  setRangeFilter,
+  toggleValue
+};

package/dist/charts/crossfilter/crossfilter.d.ts

@@ -0,0 +1,140 @@
+import { type ReactNode } from "react";
+import type { CartesianChartProps } from "../core/cartesian/types.js";
+import { type ValueFormat } from "../core/format.js";
+import { type Accessors, type CrossfilterFilters, type DimensionValue, type Group, type GroupOptions } from "./crossfilter-engine.js";
+export interface CrossfilterApi<T> {
+    /** Every record, whatever the filters. */
+    records: readonly T[];
+    /** Records that pass every filter: feed this to a table or a DataGrid. */
+    filtered: readonly T[];
+    total: number;
+    filters: CrossfilterFilters;
+    /** Number of dimensions that currently filter. */
+    activeCount: number;
+    toggle: (dimension: string, value: DimensionValue) => void;
+    setRange: (dimension: string, range: readonly [number, number] | null) => void;
+    clear: (dimension?: string) => void;
+    /** Groups of `dimension` over the records that pass every OTHER filter. */
+    group: (dimension: string, options?: GroupOptions<T>) => Group[];
+    /** Totals per group with no filter at all, to compare against. */
+    groupAll: (dimension: string, options?: GroupOptions<T>) => Group[];
+    /** Per-bin counts of a numeric dimension over the records that pass every OTHER filter. */
+    bins: (dimension: string, edges: readonly number[]) => number[];
+    binsAll: (dimension: string, edges: readonly number[]) => number[];
+    /** Records that pass every filter except `dimension`'s own. */
+    inContext: (dimension: string) => T[];
+    accessors: Accessors<T>;
+}
+export interface CrossfilterProviderProps<T> {
+    data: readonly T[];
+    /** How to read each dimension from a record. Keep the object stable (module level or memoized). */
+    dimensions: Accessors<T>;
+    /** Filters when the page loads. */
+    initialFilters?: CrossfilterFilters;
+    children: ReactNode;
+}
+/**
+ * Shares one dataset and its filters with every chart inside: each chart filters by brushing or
+ * clicking, and every other chart (and any table fed from `useCrossfilter().filtered`) follows.
+ */
+export declare function CrossfilterProvider<T>({ data, dimensions, initialFilters, children, }: CrossfilterProviderProps<T>): import("react").JSX.Element;
+/** The shared dataset and filters of the nearest `CrossfilterProvider`. */
+export declare function useCrossfilter<T = unknown>(): CrossfilterApi<T>;
+export interface CrossfilterLabels {
+    /** Series of the unfiltered totals. */
+    total: string;
+    /** Series of what the other charts leave in. */
+    filtered: string;
+    /** "128 of 480" caption; receives both numbers. */
+    count: (filtered: number, total: number) => string;
+    clear: string;
+    clearAll: string;
+    /** Series of points the filters leave out (scatter). */
+    excluded: string;
+    /** Accessible name of the scatter's keyboard brush. */
+    brush: string;
+    /** Spoken range of a scatter brush, given the text of each axis range. */
+    selection: (x: string, y: string) => string;
+}
+export declare const DEFAULT_CROSSFILTER_LABELS: CrossfilterLabels;
+type PassThrough = Pick<CartesianChartProps, "height" | "aspectRatio" | "valueFormat" | "legend" | "animate" | "yAxis">;
+export interface CrossfilterBarChartProps extends PassThrough {
+    title: string;
+    /** Dimension id (a key of the provider's `dimensions`). */
+    dimension: string;
+    /** Categories in display order; otherwise the order of first appearance. */
+    keys?: readonly DimensionValue[];
+    /** Text of a category on the axis. */
+    keyLabel?: (key: DimensionValue) => string;
+    /** Add this instead of counting records, e.g. `(sale) => sale.total` for revenue. */
+    measure?: (record: never) => number;
+    orientation?: "vertical" | "horizontal";
+    labels?: Partial<CrossfilterLabels>;
+    className?: string;
+}
+/**
+ * Bars per category of one dimension. Click a bar to filter by it (click again to undo, several
+ * bars add up). The light bars are the totals, the accent ones what the OTHER charts leave in;
+ * categories outside this chart's own filter are dimmed.
+ */
+export declare function CrossfilterBarChart({ title, dimension, keys, keyLabel, measure, orientation, labels: labelsProp, className, ...chart }: CrossfilterBarChartProps): import("react").JSX.Element;
+export interface CrossfilterHistogramProps extends PassThrough {
+    title: string;
+    /** Numeric dimension to bin. */
+    dimension: string;
+    /** Bin edges; or give `domain` and `bins` to split evenly. */
+    edges?: readonly number[];
+    domain?: readonly [number, number];
+    bins?: number;
+    /** Format of the bin edges in the axis and tooltip. */
+    edgeFormat?: ValueFormat;
+    labels?: Partial<CrossfilterLabels>;
+    className?: string;
+}
+/**
+ * Distribution of a numeric dimension. Drag across the bars to filter by that interval, or click a
+ * bin; the band stays drawn until you click it again or press Clear.
+ */
+export declare function CrossfilterHistogram({ title, dimension, edges: edgesProp, domain, bins, edgeFormat, labels: labelsProp, className, ...chart }: CrossfilterHistogramProps): import("react").JSX.Element;
+export interface CrossfilterScatterProps {
+    title: string;
+    /** Numeric dimensions on each axis. */
+    x: string;
+    y: string;
+    xFormat?: ValueFormat;
+    yFormat?: ValueFormat;
+    /** Name of the point in tooltips, e.g. the client. */
+    pointLabel?: (record: never) => string;
+    /** Names of the axes in the spoken brush range; the dimension ids by default. */
+    xLabel?: string;
+    yLabel?: string;
+    /** Rectangular brush on both dimensions (drag, or focus the plot and use the keys). On by default. */
+    brush?: boolean;
+    /**
+     * Touch: milliseconds a finger must rest before a drag draws the rectangle (350 by default), so a
+     * swipe over the plot still scrolls the page. `0` brushes at once and blocks scrolling on the plot.
+     */
+    touchDelay?: number;
+    /** Pixels of deterministic spread for dimensions with few distinct values. */
+    jitter?: number;
+    height?: number | "fill";
+    aspectRatio?: number;
+    labels?: Partial<CrossfilterLabels>;
+    className?: string;
+}
+/**
+ * One dot per record: accent for the records every filter leaves in, faint for the rest, so the
+ * dots you filtered out stay visible as context. Drag a rectangle to filter both dimensions at
+ * once (a click clears it). From the keyboard, focus the brush after the plot: arrows move the
+ * rectangle, Shift and arrows resize it, Enter applies it and Escape clears it. On touch the page
+ * keeps scrolling: rest a finger on the plot for about 350 ms (`touchDelay`) and then drag to draw.
+ */
+export declare function CrossfilterScatter({ title, x, y, xFormat, yFormat, pointLabel, xLabel, yLabel, brush, touchDelay, labels: labelsProp, className, ...chart }: CrossfilterScatterProps): import("react").JSX.Element;
+/** "128 of 480" plus a button that clears every filter. */
+export declare function CrossfilterSummary({ noun, labels: labelsProp, className, }: {
+    /** What the records are, e.g. "ventas". */
+    noun: string;
+    labels?: Partial<CrossfilterLabels>;
+    className?: string;
+}): import("react").JSX.Element;
+export {};