Brush

Basic Configuration

Brush is designed to work inside an XYContainer alongside an XYChart. The basic configuration looks like:

React

component.tsx

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>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = (d: DataRecord) =>  d.y
}

template.html

<vis-xy-container [data]="data">
  <vis-area [x]="x" [y]="y"></vis-area>
  <vis-brush></vis-brush>
</vis-xy-container>

Svelte

component.svelte

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

Vue

component.vue

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

Solid

component.tsx

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>
  )
}

TypeScript

component.ts

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)

Loading...

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

<VisBrush selection={[3,6]}/>

Angular

<vis-brush [selection]="[3,6]"></vis-brush>

Svelte

<VisBrush selection={[3,6]}/>

Vue

<VisBrush :selection="[3,6]" />

Solid

<VisBrush selection={[3,6]}/>

TypeScript

const brush = new Brush<DataRecord>({ selection: [3,6] })

Loading...

Selection Min Length

You can set a constraint for the minimum selection value with the selectionMinLength property:

React

<VisBrush selectionMinLength={5}/>

Angular

<vis-brush [selectionMinLength]="5"></vis-brush>

Svelte

<VisBrush selectionMinLength={5}/>

Vue

<VisBrush :selectionMinLength="5" />

Solid

<VisBrush selectionMinLength={5}/>

TypeScript

const brush = new Brush<DataRecord>({ selectionMinLength: 5 })

Loading...

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

<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>

Angular

<vis-brush
  [selectionMinLength]="2" 
  [selection]="[3,6]" 
  [draggable]="true"
></vis-brush>

Svelte

<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>

Vue

<VisBrush
  :selectionMinLength="2" 
  :selection="[3,6]" 
  :draggable="true"
 />

Solid

<VisBrush selectionMinLength={2} selection={[3,6]} draggable={true}/>

TypeScript

const brush = new Brush<DataRecord>({
  selectionMinLength: 2, 
  selection: [3,6], 
  draggable: true
})

Loading...

Brush Appearance

Handle Position

handlePosition changes the placement of the Brush handle with respect to the XYChart.

handlePosition: outsideinside

React

<VisBrush handlePosition="outside"/>

Angular

<vis-brush handlePosition="outside"></vis-brush>

Svelte

<VisBrush handlePosition="outside"/>

Vue

<VisBrush handlePosition="outside" />

Solid

<VisBrush handlePosition="outside"/>

TypeScript

const brush = new Brush<DataRecord>({ handlePosition: "outside" })

Loading...

Handle Width

handleWidth sets the width in pixels of the Brush's handle:

handleWidth:

React

<VisBrush handleWidth={20}/>

Angular

<vis-brush [handleWidth]="20"></vis-brush>

Svelte

<VisBrush handleWidth={20}/>

Vue

<VisBrush :handleWidth="20" />

Solid

<VisBrush handleWidth={20}/>

TypeScript

const brush = new Brush<DataRecord>({ handleWidth: 20 })

Loading...

Brush Height Extend

brushHeightExtend extends the brush height by the specified number of pixels. This can be useful when you have thick lines at the bottom of the chart and want to ensure they stay fully covered by the brush.

brushHeightExtend:

React

<VisBrush selection={[3,6]} brushHeightExtend={4}/>

Angular

<vis-brush [selection]="[3,6]" [brushHeightExtend]="4"></vis-brush>

Svelte

<VisBrush selection={[3,6]} brushHeightExtend={4}/>

Vue

<VisBrush :selection="[3,6]" :brushHeightExtend="4" />

Solid

<VisBrush selection={[3,6]} brushHeightExtend={4}/>

TypeScript

const brush = new Brush<DataRecord>({ selection: [3,6], brushHeightExtend: 4 })

Loading...

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

<VisBrush selection={[2,5]}/>

Angular

<vis-brush [selection]="[2,5]"></vis-brush>

Svelte

<VisBrush selection={[2,5]}/>

Vue

<VisBrush :selection="[2,5]" />

Solid

<VisBrush selection={[2,5]}/>

TypeScript

const brush = new Brush<DataRecord>({ selection: [2,5] })

Loading...

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