kog-panels
v1.0.75
Published
Panels for dashboard layout designer.
Downloads
95
Readme
kog-panels
Package install
npm install kog-panelsUsage in Vue.js
main.js
import KogPanels from "kog-panels";
import "kog-panels/lib/KogPanels.css";
Vue.use(KogPanels);component
- domain: domain of API
- id: configuration id
<kog-stat-test domain="VUE_APP_SE_API" id="1" />
<kog-test-data domain="VUE_APP_SE_API" id="10" />
<kog-control-chart domain="VUE_APP_SE_API" id="10" />
<kog-rule-result domain="VUE_APP_SE_API" id="10" />Usage in static HTML
source
|-- lib
| |-- KogPanels.css
| |-- KogPanels.umd.js
| |-- KogPanels.umd.min.jsDemo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Data</title>
<link rel="stylesheet" type="text/css" href="../lib/KogPanels.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript" src="../lib/KogPanels.umd.min.js"></script>
<script>
Vue.use(KogPanels)
var app = new Vue({
el: '#root',
data() {
return {
id: 10,
domain: "VUE_APP_SE_API"
}
},
template: `
<div>
<kog-stat-test :domain="domain" :id="1" />
<kog-test-data :domain="domain" :id="id" />
<kog-control-chart :domain="domain" :id="id" />
<kog-rule-result :domain="domain" :id="id" />
</div>
`
})
</script>
</body>
</html>Generate KOG panels' definitions for report designer
- start project with
yarn serve - copy result from browser console log
- paste the result to
<KOG_PROJECT_DIR>\src\OperatorDashboard\report-designer\src\components\widgets\html\kog-panels\tags.json