react-sigplot

SigPlot wrapper component for ReactJS.

Install: npm install --save react-sigplot

What is it?

Provides a component that wraps the SigPlot library.

Properties

<SigPlot />

Property	Type	Default	Explanation
height	number	300	Height of the div wrapping SigPlot
width	number	300	Width of the div wrapping SigPlot
display	string	inline-block	CSS display type for div wrapping SigPlot
styles	object	undefined	any other CSS Styles as JS object
options	object	{all: true, expand: true, autol: 100, autohide_panbars: true}	SigPlot Plot options

<ArrayLayer />

Property	Type	Default	Explanation
data	array(number)	undefined	Array of values to plot
options	object	undefined	SigPlot data header
layerOptions	object	undefined	SigPlot Layer options

<PipeLayer />

Property	Type	Default	Explanation
data	array(number)	undefined	Array of values to plot
options	object	undefined	SigPlot Layer options

<HrefLayer />

Property	Type	Default	Explanation
href	string	''	URL or path to a bluefile or MATLAB file
onload	function	null	Function that will get executed when file is loaded
options	object	undefined	SigPlot Layer options

<WebsocketLayer />

Property	Type	Default	Explanation
wsurl	string	''	URL to the websocket server
overrides	object	undefined	SigPlot Layer overrides
options	object	undefined	SigPlot Layer options

<WPipeLayer />

Property	Type	Default	Explanation
wsurl	string	''	URL to the websocket server
overrides	object	undefined	SigPlot Layer overrides
options	object	undefined	SigPlot Layer options
fps	number	undefined	Frames per second for WPIPE

Usage

Basic

/** Default plot an array three different ways
 * 1. As a standard array
 * 2. As a pipe
 * 3. As a file/url
 */
<div>
  <SigPlot options={{autol:1}}>
    <ArrayLayer data={this.state.rasterData}/>
  </SigPlot>
  <SigPlot>
    <PipeLayer options={{type: 2000, subsize: 1000}}
      data={this.state.rasterData}/>
  </SigPlot>
  <SigPlot>
    <HrefLayer
      href={this.state.href}/>
  </SigPlot>
</div>

Example Preview

If you run

$ npm run build
$ python -m SimpleHTTPServer 8888

and in a browser, navigate to http://0.0.0.0:8888, you should see the following