Kog-panels NPM

kog-panels

Package install

npm install kog-panels

Usage 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.js

Demo

<!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/vue@2.6.12/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

KOG panels

@microsoft/signalr core-js dayjs echarts element-ui kog-common plotly.js-basic-dist vue vue-resize-directive

@infinitebrahmanuniverse/nolb-kog @everything-registry/sub-chunk-2026

2 years ago

2 years ago

2 years ago

2 years ago