react Dashboard component
npm install react-drag-dashboard
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 ${persent}%
CPU
${data} of ${max} reserved
;
}
},
cols: {
value: {
min: 0,
max: 6,
tickInterval: 1,
nice: false
}
}
},
}
];
const error = e => console.log(e);
return (
// without submit button
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
`html
key: 1, [number]
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
``