react-sigplot

SigPlot wrapper component for ReactJS.

Source: https://lgsinnovations.gitlab.com/axios/react-sigplot

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

Usage

Basic

/** Default plot an array three different ways * 1. As a standard array * 2. As a pipe * 3. As a file/url */<div><SigPlotoptions={{autol:1}}><ArrayLayerdata={this.state.rasterData}/></SigPlot><SigPlot><PipeLayeroptions={{type: 2000,subsize: 1000}}data={this.state.rasterData}/></SigPlot><SigPlot><HrefLayerhref={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