Dashboard-widget-library NPM

Dashboard widget library

This is a beta widget library for the NEXPIE IoT dashboard.

📦 Install

npm install dashboard-widget-library

yarn add dashboard-widget-library

🔨 Usage

import { ButtonWidget } from "dashboard-widget-library";

const App = () => (
  <>
    <ButtonWidget title="Button" onClick={() => alert("Button clicked!")}>
      PRESS ME
    </ButtonWidget>
  </>
);

Widget

Property from table below can be use with any widget.

Property	Description	Type	Default
title	Set title of widget card	string	-
description	Set description of widget card	string	-
icon	Set icon of widget card,only works with `progress` `switch` `slider` `status`	ReactNode	-
hideLabel	toggles rendering value label	boolean	false

Button

import { ButtonWidget } from "dashboard-widget-library";

Property	Description	Type	Default
color	Set background color of Button	string	-
onClick	Set the handler to handle `click` event	(event) => void	-
label	Set text on Button	string	-

Status

import { StatusWidget } from "dashboard-widget-library";

Property	Description	Type	Default
color	Set background color of status badge	string	red
label	Set label of status	string	-

Label

import { LabelWidget } from "dashboard-widget-library";

Property	Description	Type	Default
label	set label of widget	string	-

Switch

import { SwitchWidget } from "dashboard-widget-library";

Property	Description	Type	Default
color	Set background color of Button	string	-
labelOn	Set label for switch on	string	'ON'
labelOff	Set label for switch off	string	'OFF'
checked	Determine whether the Switch is checked	boolean	false
onChange	Trigger when the checked state is changing	function(checked: boolean)	-
onClick	Trigger when clicked	function(event: Event)	-

Progress

import { ProgressWidget } from "dashboard-widget-library";

Property	Description	Type	Default
strokeColor	The color of progress bar	string	-
value	To set the completion value	number	-
block	Toggle progress block style	boolean	false
min	Set min value of progress bar	number	0
max	Set max value of progress bar	number	100
thresholdColor	Set threshold color of progress bar	{ min: number, max: number, color: string }	-

Maps

import { MapsWidget } from "dashboard-widget-library";

Property	Description	Type	Default
places	places of marker	array ex: {name: string,color: string(optional), latitude: number, longitude: number}	-

Tabs

import { TabsWidget } from "dashboard-widget-library";

Property	Description	Type	Default
options	options of tabs	array ex "A","B","C"	-
value	current tab value	string ex "A"	-
onTabChange	executed when active tab is changed	function(activeTab, activeIndex)	-

Slider

import { RangeSliderWidget } from "dashboard-widget-library";

Property	Description	Type	Default
strokeColor	The color of Slider	string	-
value	The value of slider	number	0
min	The minimum value the slider can slide to	number	0
max	The maximum value the slider can slide to	number	100
onChange	Callback function that is fired when the user changes the slider's value	function(value, percent)	-
showPercent	toggle rendering percentage instead of value	boolean	false
thresholdColor	Set threshold color of slider	{ min: number, max: number, color: string }	-

Text

import { TextWidget } from "dashboard-widget-library";

Property	Description	Type	Default
label	Set label of widget	string	-
description	Set description of widget	string	-

Text Input

import { InputTextWidget } from "dashboard-widget-library";

Property	Description	Type	Default
defaultValue	Set default value of input	string	-
onClick	Trigger when clicked	function(text: string)	-

Chart Incomplete

import { ChartWidget } from "dashboard-widget-library";

Property	Description	Type	Default	example
series	Data record array to be displayed	array	-	["time", "data1", "data2", ...,"time(n)", "data1(n)", "data2(n)"]

Donut Chart

import { DonutChartWidget } from "dashboard-widget-library";

Property	Description	Type	Default
series	Data record array to be displayed	array ex { name: "Group A", value: 400 },{ name: "Group B", value: 300 },{ name: "Group C", value: 300 },{ name: "Group D", value: 200 }	-
label	Label of donut chart	string	-
colors	Colors of data	array	-
hideLegend	Display legend of chart	boolean	false

Gauge Incomplete

import { GaugeWidget } from "dashboard-widget-library";

Property	Description	Type	Default
value	value of gauge	number	-
unit	unit of value	string	-
strokeColor	Color of stroke	string	-
min	The minimum value of gauge	number	0
max	The maximum value of gauge	number	100
thresholdColor	Set threshold color of slider	{ min: number, max: number, color: string }	-

Table Incomplete

import { TableWidget } from "dashboard-widget-library";

Property	Description	Type	example	Default
columns	columns of table	array	{title: "Name",dataIndex: "name",key: "name",align: "center",},{title: "Operations",dataIndex: "",key: "operations",align:"center",render: ReactNode,},	-
data	data to display	array	{ name: "Jack", age: 28, address: "some where else", key: "1" },{ name: "Rose", age: 36, address: "some where", key: "2" },	-
headerColor	Set table header color	string	-	-
headerTextColor	Set table header text color	string	-	-
oddColor	Set table odd row color	string	-	-
evenColor	Set table even row color	string	-	-
hoverColor	Set table hover color	string	-	-