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

License

MIT