perspective/examples/remote-express/index.html at a64a69f3f21e14ec864c0db9cb6e9e3cd9b8b174 · perspective-dev/perspective · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!--

   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-viewer.js"></script>
    <script src="perspective-viewer-hypergrid.js"></script>
    <script src="perspective-viewer-d3fc.js"></script>

    <script src="perspective.js"></script>

    <link rel='stylesheet' href="index.css">
    <link rel='stylesheet' href="material.dark.css">

</head>

<body>

    <perspective-viewer
        id="view1"
        plugin="d3_heatmap"
        row-pivots='["client"]'
        columns='["chg"]'
        column-pivots='["name"]'>

    </perspective-viewer>

    <script>

        window.addEventListener('WebComponentsReady', async function() {

            // Create two perspective interfaces, one remotely via WebSocket,
            // and one local via WebWorker.

            const websocket = perspective.websocket(`${window.location.origin.replace("http", "ws")}/subscribe`);
            const worker = perspective.worker();
            worker.initialize_profile_thread();

            // Get a proxy for a view named "data_source_one", registered on
            // the server with a reciprocal call to `host_view()`.
            // No data is transferred, `view` is a virtual handle for data on
            // the server.
            const table = websocket.open_table('remote_table');

            // Create a `table` from this, owned by the local WebWorker.
            // Data is transferred from `view` to the local WebWorker, both
            // the current state and all future updates, as Arrows.
            // const table = worker.table(view, {limit: 10000});

            // Load this in the `<perspective-viewer>`.
            document.getElementById('view1').load(table);
        });

    </script>

</body>

</html>