# 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.

Source: https://ui.jcsoftdev.com/docs/components/crossfilter-scatter

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/charts-crossfilter--ventas-cruzadas)
- [Filtro Inicial](/storybook/?path=/story/charts-crossfilter--filtro-inicial)
- [Narrow](/storybook/?path=/story/charts-crossfilter--narrow)
- [Brutal Preset](/storybook/?path=/story/charts-crossfilter--brutal-preset)
- [Pincel Rectangular](/storybook/?path=/story/charts-crossfilter--pincel-rectangular)
- [Pincel Inicial](/storybook/?path=/story/charts-crossfilter--pincel-inicial)
- [Pincel Narrow](/storybook/?path=/story/charts-crossfilter--pincel-narrow)
- [Pincel Tactil](/storybook/?path=/story/charts-crossfilter--pincel-tactil)

## Source

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