search

LGSInnovations / react-sigplot

React wrapper for SigPlot.js
https://sigplot.lgsinnovations.com
Apache License 2.0
4 stars 10 forks source link
canvas charting dsp javascript plot react sdr signal-processing sigplot software-defined-radio

readme

react-sigplot

License Build Status PRs Welcome npm version codecov

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

\

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

\

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

\

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

\

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

\

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

React Sigplot