Design Dashboard
约 1 分钟阅读
- Grafana Dashboard JSON model
- react-grid-layout/react-grid-layoutGitHubreact-grid-layout/react-grid-layoutreact-grid-layout/react-grid-layout · 子项目 · react-draggable · react-resizable · Responsive · lg,md,sm,xs,xxs · memo children 可以提升性能笔记:react-grid-layout
- 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 范围
}{
"lg": [],
"md": [],
"sm": []
}grafana
- columns=24
- height=30
- packages/grafana-schema/src/scuemata/dashboard/dashboard.cueGitHub 文件grafana/grafana/packages/grafana-schema/src/scuemata/dashboard/dashboard.cue
- Panel
- RowPanel
- GraphPanel - legacy graph panels
{
"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": []
}{
"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
}
}关联信息
反向链接、本文链接的其他页面和外部资料。
参考资料
GitHub2 条
- grafana/grafana/packages/grafana-schema/src/scuemata/dashboard/dashboard.cuegithub.com/grafana/grafana/blob/main/packages/grafana-schema/src/scuemata/dashboard/dashboard.cue
- react-grid-layout/react-grid-layoutgithub.com/react-grid-layout/react-grid-layout
其他外链1 条
- grafana.com/docs/grafana/latest/dashboards/json-modelgrafana.com/docs/grafana/latest/dashboards/json-model