Merge pull request #267 from jpmorganchase/new-examples

New examples
finos · Oct 6, 2018 · b33ff2c · b33ff2c
2 parents 9be7e22 + 451aadd
commit b33ff2c
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 12 deletions.
diff --git a/examples/cli/README.md b/examples/cli/README.md
@@ -0,0 +1,7 @@
+An example of Remote Perspective as a CLI tool.  Reads from STDIN, loads a
+Perspective instance via node.js, and opens a web browser to display the data.
+Can infer CSV, JSON and Apache Arrow data.  Example:
+
+```bash
+cat example.arrow | perspective-cli
+```
diff --git a/examples/cli/index.css b/examples/cli/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/cli/index.html b/examples/cli/index.html
@@ -0,0 +1,45 @@
+<!--
+   
+   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="highcharts.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">
+
+    </perspective-viewer>
+
+    <script>
+        window.addEventListener('WebComponentsReady', function() {
+            var elem = document.getElementById('view1');
+            var worker = perspective.worker(window.location.origin.replace('http', 'ws'));
+            elem.load(worker.open('data_source_one'));
+        });
+    </script>
+
+</body>
+
+</html>
diff --git a/examples/cli/package.json b/examples/cli/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "cli",
+    "private": true,
+    "version": "0.2.1",
+    "description": "An example of Remote Perspective as a CLI tool.",
+    "scripts": {
+        "start": "node server.js"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "bin": {
+        "perspective-cli": "server.js"
+    },
+    "dependencies": {
+        "@jpmorganchase/perspective": "^0.2.1",
+        "@jpmorganchase/perspective-viewer": "^0.2.1",
+        "@jpmorganchase/perspective-viewer-highcharts": "^0.2.1",
+        "@jpmorganchase/perspective-viewer-hypergrid": "^0.2.1"
+    }
+}
diff --git a/examples/cli/server.js b/examples/cli/server.js
@@ -0,0 +1,62 @@
+/******************************************************************************
+ *
+ * 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} = require("@jpmorganchase/perspective/build/perspective.node.js");
+const exec = require("child_process").exec;
+
+const OPEN = `
+if which xdg-open > /dev/null
+then
+  xdg-open http://localhost:8080/
+elif which gnome-open > /dev/null
+then
+  gnome-open http://localhost:8080/
+elif which open > /dev/null
+then
+  open http://localhost:8080/
+fi`;
+
+function execute(command, callback) {
+    exec(command, function(error, stdout) {
+        if (callback) {
+            callback(stdout);
+        }
+    });
+}
+const host = new WebSocketHost({assets: [__dirname]});
+
+let ret = [],
+    len = 0;
+
+process.stdin
+    .on("readable", function() {
+        let chunk;
+        while ((chunk = process.stdin.read())) {
+            ret.push(new Buffer(chunk));
+            len += chunk.length;
+        }
+    })
+    .on("end", function() {
+        const buf = Buffer.concat(ret, len);
+        if (buf.slice(0, 6).toString() === "ARROW1") {
+            host.open("data_source_one", buf.buffer);
+            console.log("Loaded Arrow");
+        } else {
+            let text = buf.toString();
+            try {
+                let json = JSON.parse(text);
+                host.open("data_source_one", json);
+                console.log("Loaded JSON");
+            } catch (e) {
+                host.open("data_source_one", text);
+                console.log("Loaded CSV");
+            }
+        }
+        execute(OPEN, console.log);
+    });
diff --git a/examples/simple/citibike.html b/examples/simple/citibike.html
@@ -13,31 +13,90 @@
 <head>
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-
+
+    <script src="perspective.js"></script>
     <script src="perspective.view.js"></script>
     <script src="hypergrid.plugin.js"></script>
     <script src="highcharts.plugin.js"></script>
 
     <script src="perspective.js"></script>
 
     <link rel='stylesheet' href="index.css">
-    <link rel='stylesheet' href="material.css">
+    <link rel='stylesheet' href="material.dark.css">
+
 
 </head>
 
 <body>
 
-    <perspective-viewer view='xy_scatter' columns='["longitude","latitude","availableBikes"]'></perspective-viewer>
+    <perspective-viewer>
+
+    </perspective-viewer>
 
     <script>
-        window.addEventListener('WebComponentsReady', function() {
-            var xhr = new XMLHttpRequest();
-            xhr.open('GET', 'citibike.json', true);
-            xhr.onload = function() {
-                document.getElementsByTagName('perspective-viewer')[0].load(JSON.parse(xhr.response).stationBeanList);
+
+        function get(url) {
+            return new Promise(resolve => {
+                const xhr = new XMLHttpRequest();
+                xhr.open("GET", url, true);
+                xhr.responseType = "json";
+                xhr.onload = () => resolve(xhr.response);
+                xhr.send(null);
+            });
+        }
+
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        async function get_feed(feedname, callback) {
+            const url = `https://gbfs.citibikenyc.com/gbfs/en/${feedname}.json`;
+            const {data: {stations}, ttl} = await get(url);
+            if (typeof callback === "function") {
+                callback(stations);
+                await sleep(ttl * 1000);
+                get_feed(feedname, callback);
+            } else {
+                return stations;
+            }
+        }
+
+        const worker = perspective.worker();
+
+        async function get_schema(feed) {
+            const table = worker.table(feed);
+            const schema = await table.schema();
+            table.delete();
+            return schema;
+        }
+
+        async function merge_schemas(feeds) {
+            const schemas = await Promise.all(feeds.map(get_schema));
+            return Object.assign({}, ...schemas);
+        }
+
+        async function main() {
+            const feednames = ["station_status", "station_information"];
+            const feeds = await Promise.all(feednames.map(get_feed));
+            const schema = await merge_schemas(feeds);
+
+            const table = worker.table(schema, {index: "station_id"});
+            for (let feed of feeds) {
+                table.update(feed);
             }
-            xhr.send(null);
-        });
+
+            get_feed("station_status", table.update);
+
+            const viewers = document.getElementsByTagName("perspective-viewer");
+            for (viewer of viewers) {
+                viewer.load(table);
+            }
+
+            viewers[0]._toggle_config();
+        }
+
+        main();
+
     </script>
 
 </body>

diff --git a/examples/simple/citibike.json b/examples/simple/citibike.json
diff --git a/packages/perspective/src/js/perspective.node.js b/packages/perspective/src/js/perspective.node.js
@@ -89,7 +89,9 @@ function create_http_server(assets, host_psp) {
             if (host_psp || typeof host_psp === "undefined") {
                 for (let rootDir of DEFAULT_ASSETS) {
                     try {
-                        let filePath = RESOLVER(rootDir + url, {paths: [LOCAL_PATH]});
+                        let paths = RESOLVER.paths(rootDir + url);
+                        paths = [...paths, ...assets.map(x => path.join(x, "node_modules")), LOCAL_PATH];
+                        let filePath = RESOLVER(rootDir + url, {paths});
                         let content = await read_promise(filePath);
                         if (typeof content !== "undefined") {
                             console.log(`200 ${url}`);