Merge pull request #794 from finos/promo-example

Added `promo` example project

examples/promo/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "promo",
+    "private": true,
+    "version": "0.4.0-rc.2",
+    "description": "An puppeteer-guided demo of Perspective's functionality, as seen on Github.",
+    "scripts": {
+        "dev": "webpack-dev-server --open",
+        "start": "webpack && npm run _server",
+        "_server": "http-server dist & npm run _promo",
+        "_promo": "sleep 1 && node ./script.js",
+        "webpack": "webpack --colour"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.0-rc.2",
+        "@finos/perspective-phosphor": "^0.4.0-rc.2",
+        "@finos/perspective-viewer": "^0.4.0-rc.2",
+        "@finos/perspective-viewer-d3fc": "^0.4.0-rc.2",
+        "@finos/perspective-viewer-hypergrid": "^0.4.0-rc.2"
+    },
+    "devDependencies": {
+        "@finos/perspective-webpack-plugin": "^0.4.0-rc.2",
+        "css-loader": "^0.28.7",
+        "file-loader": "^4.2.0",
+        "html-webpack-plugin": "^3.2.0",
+        "http-server": "^0.11.1",
+        "less-loader": "^4.0.5",
+        "npm-run-all": "^4.1.3",
+        "rimraf": "^2.5.2",
+        "style-loader": "^0.18.2",
+        "webpack-cli": "^3.3.7",
+        "webpack-dev-server": "^3.8.0"
+    }
+}

examples/promo/script.js

@@ -0,0 +1,222 @@
+const puppeteer = require("puppeteer");
+
+async function script(page) {
+    await page.goto("http://localhost:8080/");
+    await page.waitForSelector("perspective-viewer:not([updating])");
+    const viewer = await page.$("perspective-viewer");
+
+    const make_poke = viewer => async (...args) => {
+        await page.evaluate(
+            async (viewer, args) => {
+                for (let i = 0; i < args.length; i += 2) {
+                    const props = typeof args[i + 1] !== "string" ? JSON.stringify(args[i + 1]) : args[i + 1];
+                    viewer.setAttribute(args[i], props);
+                    await viewer.flush();
+                }
+            },
+            viewer,
+            args
+        );
+    };
+
+    const poke = make_poke(viewer);
+
+    const peek = async (name, json = true) => {
+        const result = await page.evaluate((viewer, name) => viewer.getAttribute(name), viewer, name);
+        if (json) {
+            return JSON.parse(result);
+        } else {
+            return result;
+        }
+    };
+
+    // open config
+
+    await page.waitFor(3000);
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer);
+    await page.waitFor(1000);
+
+    // make a blotter
+
+    await poke("aggregates", {
+        lastUpdate: "last",
+        name: "last",
+        client: "last"
+    });
+    await poke("sort", [["lastUpdate", "asc"]]);
+    await page.waitFor(200);
+    await poke("sort", [["lastUpdate", "desc"]]);
+    await page.waitFor(1000);
+
+    // make a pivot table
+
+    let cols = await peek("columns");
+    cols = cols.filter(x => x != "name");
+    await poke("columns", cols);
+    await page.waitFor(200);
+    cols = cols.filter(x => x != "symbol");
+    await poke("columns", cols);
+    await poke("row-pivots", ["symbol"]);
+    await page.waitFor(1000);
+
+    cols = cols.filter(x => x != "client");
+    await poke("columns", cols);
+    await poke("column-pivots", ["client"]);
+    await page.waitFor(1000);
+
+    cols = cols.filter(x => x != "lastUpdate");
+    await poke("columns", cols);
+    await page.waitFor(200);
+    cols = cols.filter(x => x != "bid");
+    await poke("columns", cols);
+    await page.waitFor(200);
+    cols = cols.filter(x => x != "ask");
+    await poke("columns", cols);
+    await page.waitFor(200);
+    cols = cols.filter(x => x != "vol");
+    await poke("columns", cols);
+    await page.waitFor(200);
+
+    // Split
+
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer);
+    await page.waitFor(200);
+    await page.mouse.click(300, 300, {button: "right"});
+    await page.waitFor(200);
+    await page.mouse.click(320, 320);
+    await page.waitFor(1000);
+    const viewer2 = (await page.$$("perspective-viewer"))[1];
+    const poke2 = make_poke(viewer2);
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer2);
+
+    // make a bar chart
+
+    await poke2("column-pivots", [], "row-pivots", ["client"]);
+    await page.waitFor(200);
+    await poke2("plugin", "y_bar");
+    await page.waitFor(500);
+    await poke2("plugin", "x_bar");
+    await page.waitFor(200);
+
+    await poke2("columns", ["chg"]);
+    await page.waitFor(200);
+    await poke2("sort", [["chg", "desc"]]);
+    await page.waitFor(200);
+    await poke2("sort", [["chg", "asc"]]);
+    await page.waitFor(1000);
+
+    // create filter
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer);
+    await page.waitFor(200);
+    await poke("plugin", "hypergrid");
+    await page.waitFor(200);
+    await poke("column-pivots", [], "columns", ["chg", "vol"]);
+    await page.waitFor(200);
+    await poke("row-pivots", ["client"]);
+    await page.waitFor(200);
+    await poke("sort", []);
+    await page.waitFor(200);
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer);
+    await page.waitFor(200);
+    await page.mouse.click(300, 300, {button: "right"});
+    await page.waitFor(200);
+    await page.mouse.click(320, 340);
+    await page.waitFor(200);
+
+    await poke2("column-pivots", ["symbol"]);
+    await page.waitFor(500);
+    await poke2("column-pivots", ["client"], "row-pivots", ["symbol"]);
+    await page.waitFor(1500);
+
+    await page.mouse.move(100, 200);
+    await page.mouse.click(100, 200);
+    await page.waitFor(500);
+    await page.mouse.move(100, 170);
+    await page.mouse.click(100, 170);
+    await page.waitFor(500);
+    await page.mouse.move(100, 150);
+    await page.mouse.click(100, 150);
+    await page.waitFor(500);
+
+    await poke2("column-pivots", [], "plugin", "treemap");
+    await page.waitFor(500);
+    await poke2("columns", ["vol", "chg"]);
+    await page.waitFor(500);
+    await poke2("sort", [["vol", "desc"]]);
+    await page.waitFor(200);
+
+    await page.mouse.move(100, 150);
+    await page.mouse.click(100, 150);
+    await page.waitFor(500);
+
+    // close filter
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer2);
+    await page.waitFor(200);
+    await page.mouse.click(200, 200, {button: "right"});
+    await page.waitFor(100);
+    await page.mouse.click(220, 220);
+    await page.waitFor(200);
+    await page.evaluate(viewer => viewer.toggleConfig(), viewer);
+    await page.waitFor(200);
+    //await page.mouse.click(700, 40);
+    await page.evaluate(() => window.reset());
+    await page.waitFor(200);
+
+    // time series
+
+    await poke("computed-columns", [
+        {
+            name: "second_bucket(lastUpdate)",
+            inputs: ["lastUpdate"],
+            func: "second_bucket"
+        }
+    ]);
+    await poke("plugin", "y_line");
+    await page.waitFor(200);
+    await poke("columns", ["chg"]);
+    await page.waitFor(200);
+
+    await poke("sort", []);
+    await page.waitFor(200);
+    await poke("row-pivots", ["lastUpdate"]);
+
+    await page.waitFor(1000);
+
+    await poke("row-pivots", ["second_bucket(lastUpdate)"]);
+    await page.waitFor(1000);
+    await poke("column-pivots", ["client"]);
+    await page.waitFor(3000);
+
+    await poke("plugin", "heatmap");
+    await page.waitFor(3000);
+
+    await poke("filters", [["vol", ">", 107]]);
+    await page.waitFor(200);
+    await poke("filters", [["vol", ">", 108]]);
+    await page.waitFor(200);
+    await poke("filters", [["vol", ">", 109]]);
+    await page.waitFor(200);
+    await poke("filters", [["vol", ">", 109.5]]);
+    await page.waitFor(200);
+    await poke("filters", [["vol", ">", 109.7]]);
+    await page.waitFor(200);
+
+    await poke("columns", ["bid"]);
+    await page.waitFor(3000);
+
+    script(page);
+}
+
+async function main() {
+    const browser = await await puppeteer.launch({
+        headless: false,
+        defaultViewport: null,
+        args: [`--window-size=${1200},${800}`]
+    });
+
+    const page = await browser.newPage();
+
+    script(page);
+}
+
+main();

examples/promo/src/index.js

@@ -0,0 +1,84 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, 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.
+ *
+ */
+
+import perspective from "@finos/perspective";
+import {PerspectiveWorkspace, PerspectiveWidget} from "@finos/perspective-phosphor";
+import {Widget} from "@phosphor/widgets";
+import "@finos/perspective-phosphor/src/theme/material/index.less";
+
+import "@finos/perspective-viewer-hypergrid";
+import "@finos/perspective-viewer-d3fc";
+
+import "./style/index.less";
+
+import SYMBOLS from "./symbols.json";
+
+const worker = perspective.shared_worker();
+
+var CLIENTS = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Moe", "Lenny", "Carl", "Krusty"];
+
+const choose = x => x[Math.floor(Math.random() * x.length)];
+const date = (() => {
+    const start = new Date();
+    let x = 0;
+    return () => {
+        x += 10;
+        return new Date(+start + x);
+    };
+})();
+
+function newRows(n = 5) {
+    var rows = [];
+    for (var x = 0; x < n; x++) {
+        const ticker = choose(SYMBOLS.slice(50));
+        rows.push({
+            client: choose(CLIENTS),
+            bid: Math.random() * 10 + 90,
+            ask: Math.random() * 10 + 100,
+            lastUpdate: date(),
+            chg: Math.random() * 20 - 10,
+            vol: Math.random() * 10 + 100,
+            symbol: ticker.symbol,
+            name: ticker.name
+        });
+    }
+    return rows;
+}
+
+window.addEventListener("load", async () => {
+    const table = worker.table(newRows(3000), {limit: 3000});
+    const workspace = new PerspectiveWorkspace();
+    const widget1 = new PerspectiveWidget("One");
+
+    workspace.addViewer(widget1);
+
+    Widget.attach(workspace, document.body);
+
+    widget1.load(table);
+
+    (function postRow() {
+        widget1.table.update(newRows());
+        setTimeout(postRow, 50);
+    })();
+
+    window.onresize = () => {
+        workspace.update();
+    };
+
+    window.workspace = workspace;
+
+    window.reset = () => {
+        const widgets = workspace.widgets[0].widgets();
+        for (let z = widgets.next(); z; z = widgets.next()) {
+            if (z !== widget1) {
+                z.close();
+            }
+        }
+    };
+});

examples/promo/src/style/index.less

@@ -0,0 +1,41 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, 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.
+ *
+ */
+
+body {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+#menuBar {
+  flex: 0 0 auto;
+}
+
+
+#main {
+  flex: 1 1 auto;
+}
+
+
+#palette {
+  min-width: 300px;
+  border-right: 1px solid #DDDDDD;
+}
+
+
+#dock {
+  padding: 4px;
+}