perspective-examples/examples/perspective_server/python/index.html at main · ProspectiveCo/perspective-examples · 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
70
71
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective@3.4.3/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="preload" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@3.4.3/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@3.4.3/dist/css/themes.css" />

        <title>Perspective Python Server</title>

        <style>
            perspective-viewer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>

        <perspective-viewer id="viewer" theme="Pro Dark"></perspective-viewer>

        <script type="module">
            import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@3.4.3/dist/cdn/perspective-viewer.js";
            import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@3.4.3/dist/cdn/perspective-viewer-datagrid.js";
            import "https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@3.4.3/dist/cdn/perspective-viewer-d3fc.js";

            import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@3.4.3/dist/cdn/perspective.js";

            // get perspective-viewer element
            const viewer = document.getElementById("viewer");

            // connect to pserpective server websocket and retrieve table
            const tableName     = "stock_values";
            const websocket     = await perspective.websocket("ws://localhost:8080/websocket");
            const server_table  = await websocket.open_table(tableName)
            const server_view   = await server_table.view();

            const worker        = await perspective.worker();
            const client_table  = await worker.table(server_view);
            await viewer.load(client_table);

            // pre-configure the perspective viewer
            const viewer_config = {
                plugin: "Datagrid",
                plugin_config: {
                    columns: {},
                    edit_mode: "READ_ONLY",
                    scroll_lock: false
                },
                columns_config: {},
                settings: true,
                theme: "Pro Dark",
                title: "trades",
                group_by: ["ticker"],
                split_by: [],
                columns: ["client", "open", "high", "low", "close", "lastUpdate"],
                filter: [],
                sort: [["lastUpdate", "desc"]],
                expressions: {},
                aggregates: { high: "max", lastUpdate: "last", low: "min", open: "mean", ticker: "dominant", close: "mean" }
            };
            await viewer.restore(viewer_config);
        </script>

    </body>
</html>