CrossfilterProvider

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.

Import

import { CrossfilterProvider } 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
data *	readonly T[]
dimensions *	Readonly<Record<string, Accessor<T>>>		How to read each dimension from a record. Keep the object stable (module level or memoized).
initialFilters	Readonly<Record<string, CrossfilterFilter>>	NO_FILTERS	Filters when the page loads.
children *	ReactNode

* 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