CrossfilterScatter

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.

Import

import { CrossfilterScatter } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/crossfilter.

Usage

export const VentasCruzadas: Story = {
  args: storyArgs,
  render: () => <SalesCrossfilter columns="wide" />,
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
title *	string
x *	string		Numeric dimensions on each axis.
y *	string
xFormat	ValueFormat
yFormat	ValueFormat
pointLabel	((record: never) => string)		Name of the point in tooltips, e.g. the client.
xLabel	string		Names of the axes in the spoken brush range; the dimension ids by default.
yLabel	string
brush	boolean	true	Rectangular brush on both dimensions (drag, or focus the plot and use the keys). On by default.
touchDelay	number		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.
jitter	number		Pixels of deterministic spread for dimensions with few distinct values.
height	number | "fill"
aspectRatio	number
labels	Partial<CrossfilterLabels>
className	string

* marks a required prop.

Storybook stories

• Ventas Cruzadas
• Filtro Inicial
• Narrow
• Brutal Preset
• Pincel Rectangular
• Pincel Inicial
• Pincel Narrow
• Pincel Tactil

Source

packages/ui/src/charts/crossfilter/crossfilter.tsx