0.0.19 • Published 5 years ago
react-drag-dashboard v0.0.19
Install
npm i --save react-drag-dashboard
Usage
import Dashboard, {
Polars,
BarSimples,
AreaSimples,
Customizes
} from "react-drag-dashboard";
render(){
const columns = [
{
key: 1,
name: "CPU",
pathname: "/api",
node: Polars,
chartType: "polar",
layouts: {
w: 4,
h: 8,
x: 0,
y: 25
},
source: {
config: {
max: "CPUSUM",
usage: "CPUUsage",
value: "CPU",
autoFresh: 5,
few: 2,
medium: 4,
html: (persent, max, data) => {
return `<div style="width: 300px;margin-top:20px;text-align: center;font-size: 12px!important;">
<p style="font-size: 2em;color: rgba(0,0,0,0.85);margin: 0;">${persent}%</p>
<p style="font-size: 1.6em;color: rgba(0,0,0,0.85);margin: 0;">CPU</p>
<p style="font-size: 1.4em;color: rgba(0,0,0,0.43);margin: 0;">${data} of ${max} reserved</p>
</div>`;
}
},
cols: {
value: {
min: 0,
max: 6,
tickInterval: 1,
nice: false
}
}
},
}
];
const error = e => console.log(e);
return (
// without submit button
<Dashboard
url={"https://127.0.0.1"}
columns={columns}
error={error}
theme="#0086fa"
isAllShow={true}
visibleEdit={true}
margin={[10, 10]}
token="persist:root.auth.token"
gridHeadStyle={{
fontSize: 14,
height: 40
}}
gridStyle={{
borderRadius: "5px",
border: 0
}}
/>
)
}
Dashboard config
url: api url
columns: columns [array]
error: error handle [func]
isAllShow: show all charts [bool]
visibleEdit: is show edit button [bool]
margin: [array]
containerPadding: default = margin
token: [string]
gridHeadStyle: [object]
gridStyle: [object]
columns config
key: 1, <font color="green">[number]</font>
name: "CPU" [string] pathname: "/api" [string] node: Polars form dashboard
chartType: "polar" [string] layouts: {} [object] component: [function]
DataSetTransform: [function] source: [object]
source config
data: fix data
cols: chart params
config:
html: insert html for customize type
Examples
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago
0.0.0
5 years ago
1.0.0
5 years ago