examples/kafka/prsp-viewer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Viewer</title>
    <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/pro.css" />
</head>
<body>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/cdn/perspective.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>

    <style>
        #viewer-container {
            height: 95vh;
            width: 95vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        perspective-viewer {
            height: 100%;
            width: 100%;
        }
    </style>

    <script type="module">
        import perspective from "https://cdn.jsdelivr.net/npm/@finos/perspective@3.1.3/dist/cdn/perspective.js";

        document.addEventListener("DOMContentLoaded", function() {
            async function load_viewer() {

                const table_name = "stock_values";
                const viewer = document.getElementById("prsp-viewer");
                // Connect to the perspective websocket server
                const websocket = await perspective.websocket("ws://localhost:8080/websocket");

                // Bind the viewer to the perspective table on the server.
                // Data transfer between the server and the viewer is optimized via apache arrow; 
                // exchanging delta changes only.
                const server_table = await websocket.open_table(table_name);
                await viewer.load(server_table);
            }
            load_viewer();
        });
    </script>

    <div id="viewer-container">
        <perspective-viewer id="prsp-viewer" theme="Pro Dark"></perspective-viewer>
    </div>
</body>
</html>