Example package for remote perspective

finos · texodus · May 26, 2019 · May 25, 2019 · May 26, 2019 · May 26, 2019
commit 3c529528fb15c08764ead40c5b67d7ca0d3d5426
diff --git a/examples/remote/index.css b/examples/remote/index.css
@@ -0,0 +1,31 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+ perspective-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@media (max-width: 600px) {
+    html {
+        overflow: hidden;
+    }
+
+    body {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+        touch-action: none;
+    }
+}
diff --git a/examples/remote/index.html b/examples/remote/index.html
@@ -0,0 +1,58 @@
+<!--
+
+   Copyright (c) 2017, the Perspective Authors.
+
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!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="perspective.view.js"></script>
+    <script src="hypergrid.plugin.js"></script>
+    <script src="d3fc.plugin.js"></script>
+
+    <script src="perspective.js"></script>
+
+    <link rel='stylesheet' href="index.css">
+    <link rel='stylesheet' href="material.css">
+
+</head>
+
+<body>
+
+    <perspective-viewer 
+        id="view1"
+        view="d3_heatmap"
+        row-pivots='["client"]'
+        columns='["chg"]'
+        column-pivots='["name"]'>
+
+    </perspective-viewer>
+
+    <script>
+
+
+
+        window.addEventListener('WebComponentsReady', async function() {
+            var elem = document.getElementById('view1');
+            var client = perspective.worker(window.location.origin.replace('http', 'ws'));
+            var view = client.open_view('data_source_one');
+            let arrow = await view.to_arrow();
+            elem.load(arrow, {limit: 10000});
+            view.on_update(x => {
+                elem.update(x);
+            }, {mode: "row"});
+
+        });
+    </script>
+
+</body>
+
+</html>
diff --git a/examples/remote/package.json b/examples/remote/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "remote",
+    "private": true,
+    "version": "0.3.0-rc.2",
+    "description": "An example of 2 Perspectives, one client and one server, streaming via Apache Arrow.",
+    "scripts": {
+        "start": "node server.js"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.3.0-rc.2",
+        "@finos/perspective-viewer": "^0.3.0-rc.2",
+        "@finos/perspective-viewer-highcharts": "^0.3.0-rc.2",
+        "@finos/perspective-viewer-hypergrid": "^0.3.0-rc.2"
+    }
+}
diff --git a/examples/remote/server.js b/examples/remote/server.js
@@ -0,0 +1,77 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const {WebSocketHost, table} = require("@finos/perspective");
+
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+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"];
+var CACHE_INPUT = false;
+var CACHE_ENTRIES = 200;
+var TABLE_SIZE = 10000;
+
+var __CACHE__ = {};
+
+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
+        });
+    }
+    return rows;
+}
+
+async function newArrow() {
+    var tbl = table(newRows());
+    var vw = tbl.view();
+    var arrow = await vw.to_arrow();
+    vw.delete();
+    tbl.delete();
+    return arrow;
+}
+
+const host = new WebSocketHost({assets: [__dirname]});
+
+async function init() {
+    if (CACHE_INPUT) {
+        for (let x = 0; x < CACHE_ENTRIES; x++) {
+            let arrow = await newArrow();
+            __CACHE__[x] = arrow;
+        }
+    }
+    var tbl = table(CACHE_INPUT ? __CACHE__[0] : newRows(), {
+        limit: TABLE_SIZE
+    });
+    host.host_view("data_source_one", tbl.view());
+    (function postRow() {
+        if (CACHE_INPUT) {
+            tbl.update(__CACHE__[Math.floor(Math.random() * __CACHE__.length)]);
+        } else {
+            tbl.update(newRows());
+        }
+        setTimeout(postRow, 20);
+    })();
+}
+
+init();