ChartBrush

Overview of the whole series with a draggable window. Drag the window to pan, its handles to resize, or anywhere outside to draw a new window. Keyboard: arrows pan, Shift+arrows resize the end, Home/End jump.

Import

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

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

Usage

export const Default: Story = {
  render: (args) => {
    const [range, setRange] = useState<IndexRange>(args.range);
    return (
      <ChartBrush
        {...args}
        range={range}
        onChange={setRange}
        valueText={`Día ${range[0] + 1} al día ${range[1] + 1}`}
      />
    );
  },
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
count *	number		Total number of categories (the full, un-zoomed data).
series *	readonly { id: string; color: string; data: ReadonlyArray<number | null>; }[]		Full-length series drawn as the overview.
indices	readonly number[]		Original category index of each entry of series when the series were downsampled.
range *	IndexRange		Selected window, inclusive indices.
onChange *	(range: IndexRange) => void
width *	number
left *	number		Align with the plot above.
right *	number
height	number	52
label *	string
valueText *	string		Text for screen readers describing the window, e.g. “6 oct – 20 oct”.
className	string

* marks a required prop.

Storybook stories

• Default
• Full Range

Source

packages/ui/src/charts/core/cartesian/brush.tsx