Skip to main content

Design Dashboard

react-grid layout
{
"i": "",
"x": 0,
"y": 0,
"w": 0,
"h": 0,
"minW": null,
"maxW": null,
"minH": null,
"maxH": null,
"static": false, // true = isDraggable=false && isResizable=false
"isDraggable": true,
"isResizable": true,
"resizeHandles": [], // 控制 resize 的位置
"isBounded": false // 是否允许超出 grid 范围
}
react-grid 响应式
{
"lg": [],
"md": [],
"sm": []
}

grafana

dashboard.json
{
"id": null,
"uid": "cLV5GDCkz",
"title": "New dashboard",
"tags": [],
"style": "dark",
"timezone": "browser",
"editable": true,
"hideControls": false,
"graphTooltip": 1,
"panels": [],
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {
"time_options": [],
"refresh_intervals": []
},
"templating": {
"enable": true,
"list": []
},
"annotations": {
"list": []
},
"refresh": "5s",
"schemaVersion": 17,
"version": 0,
"links": []
}
panel.json
{
"id": 4,
"type": "text", // plugin type id
"title": "Panel Title",
"description": "",
"transparent": false,
"datasource": "",
"mode": "markdown",
"content": "# title",
"gridPos": {
"x": 0,
"y": 0,
"w": 12,
"h": 9,
"static": false
}
}