Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lgsinnovations/react-sigplot

React wrapper for SigPlot.js
https://github.com/lgsinnovations/react-sigplot

canvas charting dsp javascript plot react sdr signal-processing sigplot software-defined-radio

Last synced: 9 days ago
JSON representation

React wrapper for SigPlot.js

Host: GitHub
URL: https://github.com/lgsinnovations/react-sigplot
Owner: LGSInnovations
License: apache-2.0
Created: 2018-10-06T12:42:08.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-01-04T21:38:03.000Z (almost 2 years ago)
Last Synced: 2024-10-06T08:38:05.777Z (about 1 month ago)
Topics: canvas, charting, dsp, javascript, plot, react, sdr, signal-processing, sigplot, software-defined-radio
Language: JavaScript
Homepage: https://sigplot.lgsinnovations.com
Size: 14 MB
Stars: 4
Watchers: 7
Forks: 10
Open Issues: 29
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        react-sigplot

===============

[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Build Status](https://travis-ci.org/LGSInnovations/react-sigplot.svg?branch=master)](https://travis-ci.org/LGSInnovations/react-sigplot) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md#pull-requests) [![npm version](https://badge.fury.io/js/react-sigplot.svg)](https://badge.fury.io/js/react-sigplot) [![codecov](https://codecov.io/gh/LGSInnovations/react-sigplot/branch/master/graph/badge.svg)](https://codecov.io/gh/LGSInnovations/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

### \

|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

```js

/** Default plot an array three different ways

 * 1. As a standard array

 * 2. As a pipe

 * 3. As a file/url

 */



  

    

  

  

    

  

  

    

  



```

## 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](docs/example.gif)