event$

• In the design of OrbCharts, most of the graphics drawn through data mapping can obtain data and related information by listening to mouse events. The main events include:

  • mouseover
  • mousemove
  • mouseout
  • click

• Regardless of which plugin binds the event, the data format obtained will be consistent according to 6 types of data formats.

TIP

Through the Playground page, you can operate the chart through the Preview interface and obtain the data transmitted by the listening event from the Console interface.

Syntax

The syntax for listening to events is

event$.subscribe(event => {
  // your code
})

Example:

chart.event$.subscribe(event => {
  console.log(event)
})

Series

• Type: EventSeries

interface EventSeries {
  type: 'series'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumTypeMap<T> | null
  data: ComputedDataTypeMap<T>
  tween?: number
  series: ComputedDatumTypeMap<'series'>[]
  seriesIndex: number
  seriesLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'series' | 'datum' | 'none' are valid in this data type

interface ComputedDatumSeries {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  seriesIndex: number
  seriesLabel: string
  seq: number
}

Grid

• Type: EventGrid

interface EventGrid {
  type: 'grid'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumGrid | null
  data: ComputedDatumGrid[][]
  tween?: number
  gridIndex: number
  series: ComputedDatumGrid[]
  seriesIndex: number
  seriesLabel: string
  group: ComputedDatumGrid[]
  groupIndex: number
  groupLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'series' | 'group' | 'datum' | 'none' are valid in this data type

interface ComputedDatumGrid {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  gridIndex: number
  seriesIndex: number
  seriesLabel: string
  groupIndex: number
  groupLabel: string
}

MultiGrid

• Type: EventMultiGrid

interface EventMultiGrid {
  type: 'multiGrid'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumGrid | null
  data: ComputedDatumGrid[][]
  tween?: number
  gridIndex: number
  series: ComputedDatumGrid[]
  seriesIndex: number
  seriesLabel: string
  group: ComputedDatumGrid[]
  groupIndex: number
  groupLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'series' | 'group' | 'datum' | 'none' are valid in this data type

interface ComputedDatumGrid {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  gridIndex: number
  seriesIndex: number
  seriesLabel: string
  groupIndex: number
  groupLabel: string
}

MultiValue

• Type: EventMultiValue

interface EventMultiValue {
  type: 'multiValue'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDatumMultiValue | null
  data: ComputedDatumMultiValue[][]
  tween?: number
  category: ComputedDatumMultiValue[]
  categoryIndex: number
  categoryLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'category' | 'datum' | 'none' are valid in this data type

interface ComputedDatumMultiValue {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  datumIndex: number
  value: number[]
  color: string
  categoryIndex: number
  categoryLabel: string
}

Relationship

• Type: EventRelationship

interface EventRelationship {
  type: 'relationship'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedNode | null
  data: ComputedDataRelationship
  tween?: number
  category: ComputedNode[]
  categoryIndex: number
  categoryLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'category' | 'datum' | 'none' are valid in this data type

interface ComputedNode {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  categoryIndex: number
  categoryLabel: string
}

interface ComputedDataRelationship {
  nodes: ComputedNode[]
  edges: ComputedEdge[]
}

Tree

• Type: EventTree

interface EventTree {
  type: 'tree'
  eventName: EventName
  pluginName: string
  event: MouseEvent | undefined
  highlightTarget: HighlightTarget
  datum: ComputedDataTree
  data: ComputedDataTree
  tween?: number
  category: ComputedDataTree
  categoryIndex: number
  categoryLabel: string
}

Detailed Types

type EventName = 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'

type HighlightTarget = 'series' | 'group' | 'category' | 'datum' | 'none' // Only 'category' | 'datum' | 'none' are valid in this data type

interface ComputedDataTree {
  level: number
  seq: number
  children?: ComputedDataTree[]
}