Brush
Basic Configuration
Brush is designed to work inside an XYContainer alongside an XYChart. The basic configuration looks like:
- React
- Angular
- Svelte
- Vue
- TypeScript
import { VisXYContainer, VisArea, VisBrush } from '@unovis/react'
function Component(props) {
const data: DataRecord[] = props.data
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y
return (
<VisXYContainer data={data}>
<VisArea x={x} y={y}/>
<VisBrush/>
</VisXYContainer>
)
}
@Component({
templateUrl: 'template.html'
})
export class Component {
@Input data: DataRecord[];
x = (d: DataRecord) => d.x
y = (d: DataRecord) => d.y
}
<vis-xy-container [data]="data">
<vis-area [x]="x" [y]="y"></vis-area>
<vis-brush></vis-brush>
</vis-xy-container>
<script lang='ts'>
import { VisXYContainer, VisArea, VisBrush } from '@unovis/svelte'
export let data: DataRecord[]
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y
</script>
<VisXYContainer {data}>
<VisArea {x} {y}/>
<VisBrush/>
</VisXYContainer>
<script setup lang="ts">
import { VisXYContainer, VisArea, VisBrush } from '@unovis/vue'
const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y
</script>
<template>
<VisXYContainer :data="data">
<VisArea :x="x" :y="y" />
<VisBrush />
</VisXYContainer>
</template>
import { XYContainer, Area, Brush } from '@unovis/ts'
import { data, DataRecord } from './data'
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y
const brush = new Brush<DataRecord>({ })
const container = new XYContainer<DataRecord>(node, {
components: [brush, new Area({ x, y })]
}, data)
Usage
The Brush component has four event listener properties:
onBrushStart
onBrushMove
onBrushEnd
onBrush
, which encapsulates all the above.
Each callback has the following parameters:
- selection: type
[number, number]
, the range of data current being displayed - event - the brush event instance
- userDriven: type
boolean
, to indicate whether the event was triggered by the user
Selections
Manual Selection
You can explicitly define the default selection range using the selection
property:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush selection={[3,6]}/>
<vis-brush [selection]="[3,6]"></vis-brush>
<VisBrush selection={[3,6]}/>
<VisBrush :selection="[3,6]" />
const brush = new Brush<DataRecord>({ selection: [3,6] })
Selection Min Length
You can set a constraint for the minimum selection
value with the selectionMinLength
property:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush selectionMinLength={5}/>
<vis-brush [selectionMinLength]="5"></vis-brush>
<VisBrush selectionMinLength={5}/>
<VisBrush :selectionMinLength="5" />
const brush = new Brush<DataRecord>({ selectionMinLength: 5 })
Draggable
By default, setting the desired the range relies on moving both start and end Brush handles. You can adjust the entire range with one click by enabling the draggable
proprerty:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>
<vis-brush
[selectionMinLength]="2"
[selection]="[3,6]"
[draggable]="true"
></vis-brush>
<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>
<VisBrush
:selectionMinLength="2"
:selection="[3,6]"
:draggable="true"
/>
const brush = new Brush<DataRecord>({
selectionMinLength: 2,
selection: [3,6],
draggable: true
})
Brush Appearance
Handle Position
handlePosition
changes the placement of the Brush handle with respect to the XYChart.
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush handlePosition="outside"/>
<vis-brush handlePosition="outside"></vis-brush>
<VisBrush handlePosition="outside"/>
<VisBrush handlePosition="outside" />
const brush = new Brush<DataRecord>({ handlePosition: "outside" })
Handle Width
handleWidth
sets the width in pixels of the Brush's handle:
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush handleWidth={20}/>
<vis-brush [handleWidth]="20"></vis-brush>
<VisBrush handleWidth={20}/>
<VisBrush :handleWidth="20" />
const brush = new Brush<DataRecord>({ handleWidth: 20 })
Selection
You can change the appearance of the selection by changing the corresponding CSS variables. For example, here's how you can modify the appearance of the selected and unselected areas:
--vis-brush-selection-fill-color: #0b1640;
--vis-brush-selection-opacity: 0.6;
--vis-brush-unselected-fill-color: #fff;
--vis-brush-unselected-opacity: 0.9;
- React
- Angular
- Svelte
- Vue
- TypeScript
<VisBrush selection={[2,5]}/>
<vis-brush [selection]="[2,5]"></vis-brush>
<VisBrush selection={[2,5]}/>
<VisBrush :selection="[2,5]" />
const brush = new Brush<DataRecord>({ selection: [2,5] })
CSS Variables
Supported CSS variables and their default values
--vis-brush-selection-fill-color: none;
--vis-brush-selection-stroke-color: none;
--vis-brush-selection-stroke-width: 0;
--vis-brush-selection-opacity: 0;
--vis-brush-unselected-fill-color: #0b1640;
--vis-brush-unselected-stroke-color: #acb2b9;
--vis-brush-unselected-stroke-width: 0;
--vis-brush-unselected-opacity: 0.4;
--vis-brush-handle-fill-color: #6d778c;
--vis-brush-handle-stroke-color: #eee;
--vis-dark-brush-selection-fill-color: none;
--vis-dark-brush-selection-stroke-color: none;
--vis-dark-brush-selection-stroke-width: 0;
--vis-dark-brush-selection-opacity: 0;
--vis-dark-brush-unselected-fill-color: #acb2b9;
--vis-dark-brush-unselected-stroke-color: #0b1640;
--vis-dark-brush-unselected-stroke-width: 0;
--vis-dark-brush-unselected-opacity: 0.4;
--vis-dark-brush-handle-fill-color: #acb2b9;
--vis-dark-brush-handle-stroke-color: var(--vis-color-grey);
Component Props
Name | Type | Description |
---|---|---|
* required property |