Brush
Basic Configuration​
Brush is designed to work inside an XYContainer alongside an XYChart. The basic configuration looks like:
- React
- Angular
- Svelte
- Vue
- Solid
- 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 { VisXYContainer, VisArea, VisBrush } from '@unovis/solid'
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>
)
}
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
- Solid
- TypeScript
<VisBrush selection={[3,6]}/>
<vis-brush [selection]="[3,6]"></vis-brush>
<VisBrush selection={[3,6]}/>
<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
- Solid
- TypeScript
<VisBrush selectionMinLength={5}/>
<vis-brush [selectionMinLength]="5"></vis-brush>
<VisBrush selectionMinLength={5}/>
<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
- Solid
- 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"
/>
<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
- Solid
- TypeScript
<VisBrush handlePosition="outside"/>
<vis-brush handlePosition="outside"></vis-brush>
<VisBrush handlePosition="outside"/>
<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
- Solid
- TypeScript
<VisBrush handleWidth={20}/>
<vis-brush [handleWidth]="20"></vis-brush>
<VisBrush handleWidth={20}/>
<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
- Solid
- TypeScript
<VisBrush selection={[2,5]}/>
<vis-brush [selection]="[2,5]"></vis-brush>
<VisBrush selection={[2,5]}/>
<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 |