Loading

Without a Framework

Integrating Discovery component to a project without a JavaScript framework is straight forward. If you're using a simple HTML page, you can add Discovery component via a script tag.

<html>
<head>
    <title>Test</title>
</head>
<body>
<discovery-dashboard url="https://sandbox.senx.io/api/v0/exec" dashboard-title="Test">
{
  'title' 'Test'
  'description' 'Dashboard test'
  'tiles' [
    {
      'title' 'test'
      'options' { 'autoRefresh' 1 }
      'x' 0 'y' 0 'w' 12 'h' 2
      'type' 'area' 'macro' <%
        1 4 <% DROP
          NEWGTS 'g' STORE
          1 10 <%
            'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
          %> FOR
          $g
        %> FOR
      %>
    }
  ] 
}
</discovery-dashboard>
<script nomodule src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.js"></script>
<script type="module" src="https://unpkg.com/@senx/discovery-widgets/dist/discovery/discovery.esm.js"></script>
</body>
</html>

Passing object props

Setting the prop manually

<discovery-dashboard url="https://sandbox.senx.io/api/v0/exec" dashboard-title="Test" id="dash">...</discovery-dashboard>
<script>
  const dash = document.querySelector('#dash');
  dash.options = {};
  dash.url = 'https://localhost:8080/api/v0/exec';
</script>