sc1f · August 12, 2021 20:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-datagrid"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>

    <link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material-dense.css">
    <style>
        perspective-viewer{position:absolute;top:0;left:0;right:0;bottom:0;}
    </style>

 </head>

 <body>

    <perspective-viewer id="viewer"></perspective-viewer>

    <script>
      var SECURITIES = ["AAPL.N", "AMZN.N", "QQQ.N", "NVDA.N", "TSLA.N", "FB.N", "MSFT.N", "TLT.N", "XIV.N", "YY.N", "CSCO.N", "GOOGL.N", "PCLN.N"];

      var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Moe", "Lenny", "Carl", "Krusty"];

      // Create 5 random rows of data.
      function newRows() {
          var rows = [];
          for (var x = 0; x < 50; x++) {
              rows.push({
                  name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
                  client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
                  lastUpdate: new Date(),
                  chg: Math.random() * 20 - 10,
                  bid: Math.random() * 10 + 90,
                  ask: Math.random() * 10 + 100,
                  vol: Math.random() * 10 + 100,
                  idx: SECURITIES[Math.floor(Math.random() * SECURITIES.length)]
              });
          }
          return rows;
      }

      window.addEventListener("DOMContentLoaded", async function() {
          // Get element from the DOM.
          var elem = document.getElementsByTagName("perspective-viewer")[0];

          // Create a new Perspective WebWorker instance.
          var worker = perspective.worker();

          // Create a new Perspective table in our `worker`, and limit it it 500 rows.
          var table = await worker.table(newRows(), {
              index: "idx"
          });

          // Load the `table` in the `<perspective-viewer>` DOM reference.
          elem.load(table);

          await elem.restore({
              "plugin": "Datagrid",
              "columns": [
                  "client",
                  "bid"
              ],
              "row-pivots": [
                  "name"
              ],
              "aggregates": {
                  "client": "last",
                  "bid": "last"
              },
              "selectable": null,
              "editable": null,
              "expressions": null,
              "column-pivots": null,
              "filters": null,
              "sort": null,
              "plugin_config": {}
          });

          // Add more rows every 50ms using the `update()` method on the `table` directly.
          (function postRow() {
              table.update(newRows());
              setTimeout(postRow, 50);
          })();
      });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

	<script src="https://unpkg.com/@finos/perspective/dist/umd/perspective.js"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-datagrid"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>

	<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material-dense.css">
	<style>
	perspective-viewer{position:absolute;top:0;left:0;right:0;bottom:0;}
	</style>

	</head>

	<body>

	<perspective-viewer id="viewer"></perspective-viewer>

	<script>
	var SECURITIES = ["AAPL.N", "AMZN.N", "QQQ.N", "NVDA.N", "TSLA.N", "FB.N", "MSFT.N", "TLT.N", "XIV.N", "YY.N", "CSCO.N", "GOOGL.N", "PCLN.N"];

	var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Moe", "Lenny", "Carl", "Krusty"];

	// Create 5 random rows of data.
	function newRows() {
	var rows = [];
	for (var x = 0; x < 50; x++) {
	rows.push({
	name: SECURITIES[Math.floor(Math.random() * SECURITIES.length)],
	client: CLIENTS[Math.floor(Math.random() * CLIENTS.length)],
	lastUpdate: new Date(),
	chg: Math.random() * 20 - 10,
	bid: Math.random() * 10 + 90,
	ask: Math.random() * 10 + 100,
	vol: Math.random() * 10 + 100,
	idx: SECURITIES[Math.floor(Math.random() * SECURITIES.length)]
	});
	}
	return rows;
	}

	window.addEventListener("DOMContentLoaded", async function() {
	// Get element from the DOM.
	var elem = document.getElementsByTagName("perspective-viewer")[0];

	// Create a new Perspective WebWorker instance.
	var worker = perspective.worker();

	// Create a new Perspective table in our `worker`, and limit it it 500 rows.
	var table = await worker.table(newRows(), {
	index: "idx"
	});

	// Load the `table` in the `<perspective-viewer>` DOM reference.
	elem.load(table);

	await elem.restore({
	"plugin": "Datagrid",
	"columns": [
	"client",
	"bid"
	],
	"row-pivots": [
	"name"
	],
	"aggregates": {
	"client": "last",
	"bid": "last"
	},
	"selectable": null,
	"editable": null,
	"expressions": null,
	"column-pivots": null,
	"filters": null,
	"sort": null,
	"plugin_config": {}
	});

	// Add more rows every 50ms using the `update()` method on the `table` directly.
	(function postRow() {
	table.update(newRows());
	setTimeout(postRow, 50);
	})();
	});
	</script>
	</body>

	</html>