1.1.13 • Published 2 years ago
@otosense/multi-time-vis v1.1.13
OtoSense time visualizations
Class TimeChannel
Renders a single-row visualization.
Required props:
- channel An
AudioChannel
,DataChannel
, orWinnersChannel
containing the data to render - from The start timestamp of the channel, in microseconds.
- to The end timestamp of the channel, in microsedonds.
Optional props:
- annotations An array of
Timerange
objects to render as overlays on the chart. - chartType The type of chart to render. Options are
bargraph
,heatmap
,spectrogram
,peaks
, andwinners
(default bargraph) - enablePlayback (audio channels only) Embeds playback controls in the chart: Click to set position, double click to start, spacebar to pause/resume
- height The height of the chart in pixels (default 50)
- menu A JSX element to render to the right of the channel title
- params An object with display parameters (currently only supports
chunkSize
in milliseconds) - renderProgress A JSX element to display after the component has mounted, before the visualization is complete
- subtitle A string to display under the channel title
- title A channel title to display
Optional event handler props
- clickHandler Single click
- contextMenuHandler Context menu (right click or Mac ctrl+click)
- keydownHandler Keydown
- mouseOutHandler Mouse out
- startSelecting Mouse down
- zoomHandler Mouse wheel
- suppressEvents Disables all events including defaults
Advanced props
- getAnnotationColor A function that takes a
Timerange
and returns a color code for drawing overlays - getAnnotationHighlight A function that takes a
Timerange
and returns a boolean value for highlighting overlays - hideTooltips Disables hover tooltips for data charts
Interface AudioChannel
An object representing an audio visualization.
Required keys:
- type Must be 'audio'
Either one of these keys is required (not all three):
- url The URL of a WAV file to visualize
- buffer An ArrayBuffer with WAV data that can be read by the browser (header + PCM)
- image A pre-drawn image data URL
Optional keys:
- from The start timestamp of the audio, in microseconds, if different from the TimeChannel element
- to The start timestamp of the audio, in microseconds, if different from the TimeChannel element
- windowSize The width of windows used for calculating signal peaks when drawing a peaks diagram.
Interface DataChannel
An object representing a time series visualization.
Required keys:
- type Must be 'data'
- data An array of
DataPoint
objects
Optional keys:
- bargraphMax For a bar graph, the numeric value for the top of the chart (defaults to 1 so you'll want to set this unless your data is all under 1)
- bargraphMin The numeric value for the bottom of the chart (defaults to -2)
- chartType Either 'bargraph' or 'heatmap'
- filters An array of functions with the signature
(params: object, data: DataPoint[])
to apply to the data before rendering - getColor A function taking a DataPoint and outputting a color code (must be set for a useful heatmap)
- image A pre-drawn image data URL for the chart
- renderTooltip A function that takes a timestamp in microseconds (based on the position of the mouse cursor) and returns a renderable element (a string or JSX element) to display in a tooltip
Interface WinnersChannel
An object representing a visualization with two or more rows displaying the highest value for each point in time.
Required keys:
- type Must be 'data'
- chartTYpe Must be 'winners'
- categories An array of the categories represented in the data
- data An array of
WinnerDataPoint
objects
Optional keys:
- color A color code for the data points on the chart
- image A pre-drawn image data URL for the chart
Interface Timerange
for annotation overlays
- bt Start time in microseconds
- tt End time in microseconds
- color (optional) A hex code color for drawing an overlay.
- highlighted (optional) A boolean value to add additional emphasis to the element.
Interface DataPoint
for time series data
Data points must either have both bt and tt, or time
- bt Start time in microseconds
- tt End time in microseconds
- time Point in time in microseconds, if representing an instantaneous or chunk-sized event (display width will be determined by the prop
params.chunkSize
passed to the TimeChannel, defaulting to 972ms) - value Any value (should be numeric for a bargraph)
Interface WinnerDataPoint
for category winner time series data
- time Point in time in microseconds (display width will be determined by the prop
params.chunkSize
passed to the TimeChannel, defaulting to 972ms) - winner The category that won this point in time (may be null)
CSS classes
- otv--vis-channel The outermost container of TimeChannel
- otv--channel-title The title displayed above the chart
- otv--canvas-container A div wrapping the visualization image
- otv--data Additional class applied to data channels
- otv--audio Additional class applied to audio channels
- otv--overlay-selections The overlay container
- otv--selection The individual overlay items
- otv--annotation-highlight Highlighted items
- otv--indicator The current position indicator for audio playback
- otv--tooltip The tooltip for data channels
TODO
- Support (bt, tt) for winners
- Add CSS
- More documentation
- More shortcuts
- Examples