0.9.0 • Published 5 years ago

pro-widgets v0.9.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Angular Pro Widgets

Build Status npm npm NPM GitHub repo size Github code size code style: prettier

This library provides animated and highly customizable SVG widgets for use with IoT or other data visualization tasks. It has an easy to use interface as you will see in this description. See the library in action while reading the documentation and live-play with all the parameters.

This is currently in an early stage. API changes are likely. It follows semantic versioning.

Currently available widgets are Gauge, Digital Gauge, Linear Gauge, Analog Stick and Space Tracker. More widgets coming soon. Widget ideas/implementations/issue reporting/PRs welcome.

Installation

Install the library with

npm install pro-widgets

Importing the module and use the components

At first you have to import the ProModule into the module in which you want to use the widgets. For example in the root module.

import { ProModule } from 'pro-widgets';

@NgModule({
  import: [ProModule]
})
export class AppModule {}

You can import each widget manually by importing e.g. LinearGaugeModule. Use the widgets in your components template by

<pro-gauge [value]="stream$ | async"></pro-gauge>
<pro-digital-gauge></pro-digital-gauge>
<pro-analog-stick></pro-analog-stick>
<pro-linear-gauge></pro-linear-gauge>
<pro-space-tracker></pro-space-tracker>

See the docs to get to know the full list of input parameters for customizing the widgets to your needs.

Input value shapes

Some widgets require a different shape of data input for the value input property. Most of them are requiring a primitive number or an array of numbers. The space-tracker requires the following type

interface MultiDimensional {
  [id: string]: number[];
}

Here is an overview of all widget value inputs

WidgetValue type
Gaugenumber
Digital Gaugenumber
Linear Gaugenumber
Analog Sticknumber2
Space TrackerMultipleInputs

Contributing

Contributions in all forms are welcome. Widget ideas, feature requests, bug reports, etc. PR contributors will be mentioned in here.

Get in touch

twitter github

Hi, I am Felix, Software developer and Angular, NgRX contributor

avatar

If you like this library, think about giving it a star or follow me on twitter or github or check out my personal the website.

0.9.0

5 years ago

0.8.4

5 years ago

0.8.3

5 years ago

0.8.2

5 years ago

0.8.1

5 years ago

0.8.0

5 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.4

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.0

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.0

5 years ago

0.2.1

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago