timkpaine/.block

## .block
license: apache-2.0
height: 800

## index.html
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material.css">
    <link rel='stylesheet' href="index.css">

    <script src="https://unpkg.com/@finos/perspective-workspace"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-datagrid"></script>
    <script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>
    <script src="https://unpkg.com/@finos/perspective"></script>

    <style>

        body {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <perspective-workspace id="workspace"></perspective-workspace>

    <perspective-viewer row-pivots='["instrument"]' sort='[["timestamp", "asc"]]' id="viewer"></perspective-viewer>

    <script>
        window.addEventListener("WebComponentsReady", function() {
            async function get_layout() {
                const req = await fetch("layout.json");
                const json = await req.json();
                return json;
            }

            const ORDER_SCHEMA = {
                type: "string",
                id: "integer",
                timestamp: "integer",
                volume: "float",
                price: "float",
                side: "string",
                instrument: "string",
                exchange: "string"
            };

            const TRADE_SCHEMA = {
                type: "string",
                timestamp: "integer",
                volume: "float",
                price: "float",
                side: "string",
                instrument: "string",
                exchange: "string"
            };


            const worker = perspective.worker();

            const order_table = worker.table(ORDER_SCHEMA);
            const trade_table = worker.table(TRADE_SCHEMA);

            window.addEventListener("load", async () => {
                const plugin = window.getPlugin("d3_heatmap");
                plugin.max_cells = 10000;
                plugin.max_columns = 200;

                window.workspace.tables.set("orders", order_table);
                window.workspace.tables.set("trades", trade_table);
                const layout = await get_layout();
                window.workspace.restore(layout);


                var ws = new WebSocket("wss://exchange.dev.nemoulous.com");
                ws.onmessage = (event) => {
                    const data = JSON.parse(event.data);
                    if (data["type"] === "TRADE") {
                        data["timestamp"] = data["target"]["timestamp"];
                        data["volume"] = data["target"]["taker_order"]["volume"];
                        data["price"] = data["target"]["taker_order"]["price"];
                        data["side"] = data["target"]["taker_order"]["side"];
                        data["instrument"] = data["target"]["taker_order"]["instrument"];
                        data["exchange"] = data["target"]["taker_order"]["exchange"];
                        delete data["target"];
                        trade_table.update([data]);
                    } else {
                        data["id"] = data["target"]["id"];
                        data["timestamp"] = data["target"]["timestamp"];
                        data["volume"] = data["target"]["volume"];
                        data["price"] = data["target"]["price"];
                        data["side"] = data["target"]["side"];
                        data["instrument"] = data["target"]["instrument"];
                        data["exchange"] = data["target"]["exchange"];
                        delete data["target"];
                        order_table.update([data]);
                    }
                };
            });
        });
    </script>
</body>
</html>

## layout.json
{
    "sizes": [
        1
    ],
    "detail": {
        "main": {
            "type": "split-area",
            "orientation": "horizontal",
            "children": [
                {
                    "type": "split-area",
                    "children": [
                        {
                            "type": "tab-area",
                            "widgets": [
                                "One",
                                "Two"
                            ],
                            "currentIndex": 0
                        },
                        {
                            "type": "tab-area",
                            "widgets": [
                                "Three"
                            ],
                            "currentIndex": 0
                        }
                    ],
                    "sizes": [
                        0.5,
                        0.5
                    ]
                },
                {
                    "type": "tab-area",
                    "widgets": [
                        "Four"
                    ],
                    "currentIndex": 0
                }
            ],
            "sizes": [
                0.5,
                0.5
            ]
        }
    },
    "mode": "globalFilters",
    "viewers": {
        "One": {
            "plugin": "datagrid",
            "row-pivots": ["instrument"],
            "columns": ["type", "timestamp", "volume", "price", "side", "exchange"],
            "sort": [
                ["timestamp", "desc"]
            ],
            "aggregates": {
                "exchange": "last",
                "instrument": "last",
                "side": "last",
                "timestamp": "last",
                "type": "last",
                "volume": "last"
            },
            "master": false,
            "name": "Latest Trades",
            "table": "trades",
            "linked": false
        },
        "Two": {
            "plugin": "datagrid",
            "sort": [
                ["timestamp", "desc"]
            ],
            "master": false,
            "name": "All Trades",
            "table": "trades",
            "linked": false
        },
        "Three": {
            "plugin": "datagrid",
            "sort": [
                ["timestamp", "desc"]
            ],
            "master": false,
            "name": "Orders",
            "table": "orders",
            "index": "id",
            "linked": false
        },
        "Four": {
            "plugin": "d3_treemap",
            "row-pivots": [
                "instrument"
            ],
            "columns": ["volume", "price", "side"],
            "aggregates": {
                "price": "last",
                "side": "last",
                "volume": "sum"
            },
            "master": false,
            "name": "Volume",
            "table": "trades",
            "linked": false
        }
    }
}
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material.css">
	<link rel='stylesheet' href="index.css">

	<script src="https://unpkg.com/@finos/perspective-workspace"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-datagrid"></script>
	<script src="https://unpkg.com/@finos/perspective-viewer-d3fc"></script>
	<script src="https://unpkg.com/@finos/perspective"></script>

	<style>

	body {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	</style>
	</head>
	<body>
	<perspective-workspace id="workspace"></perspective-workspace>

	<perspective-viewer row-pivots='["instrument"]' sort='[["timestamp", "asc"]]' id="viewer"></perspective-viewer>

	<script>
	window.addEventListener("WebComponentsReady", function() {
	async function get_layout() {
	const req = await fetch("layout.json");
	const json = await req.json();
	return json;
	}

	const ORDER_SCHEMA = {
	type: "string",
	id: "integer",
	timestamp: "integer",
	volume: "float",
	price: "float",
	side: "string",
	instrument: "string",
	exchange: "string"
	};

	const TRADE_SCHEMA = {
	type: "string",
	timestamp: "integer",
	volume: "float",
	price: "float",
	side: "string",
	instrument: "string",
	exchange: "string"
	};


	const worker = perspective.worker();

	const order_table = worker.table(ORDER_SCHEMA);
	const trade_table = worker.table(TRADE_SCHEMA);

	window.addEventListener("load", async () => {
	const plugin = window.getPlugin("d3_heatmap");
	plugin.max_cells = 10000;
	plugin.max_columns = 200;

	window.workspace.tables.set("orders", order_table);
	window.workspace.tables.set("trades", trade_table);
	const layout = await get_layout();
	window.workspace.restore(layout);


	var ws = new WebSocket("wss://exchange.dev.nemoulous.com");
	ws.onmessage = (event) => {
	const data = JSON.parse(event.data);
	if (data["type"] === "TRADE") {
	data["timestamp"] = data["target"]["timestamp"];
	data["volume"] = data["target"]["taker_order"]["volume"];
	data["price"] = data["target"]["taker_order"]["price"];
	data["side"] = data["target"]["taker_order"]["side"];
	data["instrument"] = data["target"]["taker_order"]["instrument"];
	data["exchange"] = data["target"]["taker_order"]["exchange"];
	delete data["target"];
	trade_table.update([data]);
	} else {
	data["id"] = data["target"]["id"];
	data["timestamp"] = data["target"]["timestamp"];
	data["volume"] = data["target"]["volume"];
	data["price"] = data["target"]["price"];
	data["side"] = data["target"]["side"];
	data["instrument"] = data["target"]["instrument"];
	data["exchange"] = data["target"]["exchange"];
	delete data["target"];
	order_table.update([data]);
	}
	};
	});
	});
	</script>
	</body>
	</html>
	{
	"sizes": [
	1
	],
	"detail": {
	"main": {
	"type": "split-area",
	"orientation": "horizontal",
	"children": [
	{
	"type": "split-area",
	"children": [
	{
	"type": "tab-area",
	"widgets": [
	"One",
	"Two"
	],
	"currentIndex": 0
	},
	{
	"type": "tab-area",
	"widgets": [
	"Three"
	],
	"currentIndex": 0
	}
	],
	"sizes": [
	0.5,
	0.5
	]
	},
	{
	"type": "tab-area",
	"widgets": [
	"Four"
	],
	"currentIndex": 0
	}
	],
	"sizes": [
	0.5,
	0.5
	]
	}
	},
	"mode": "globalFilters",
	"viewers": {
	"One": {
	"plugin": "datagrid",
	"row-pivots": ["instrument"],
	"columns": ["type", "timestamp", "volume", "price", "side", "exchange"],
	"sort": [
	["timestamp", "desc"]
	],
	"aggregates": {
	"exchange": "last",
	"instrument": "last",
	"side": "last",
	"timestamp": "last",
	"type": "last",
	"volume": "last"
	},
	"master": false,
	"name": "Latest Trades",
	"table": "trades",
	"linked": false
	},
	"Two": {
	"plugin": "datagrid",
	"sort": [
	["timestamp", "desc"]
	],
	"master": false,
	"name": "All Trades",
	"table": "trades",
	"linked": false
	},
	"Three": {
	"plugin": "datagrid",
	"sort": [
	["timestamp", "desc"]
	],
	"master": false,
	"name": "Orders",
	"table": "orders",
	"index": "id",
	"linked": false
	},
	"Four": {
	"plugin": "d3_treemap",
	"row-pivots": [
	"instrument"
	],
	"columns": ["volume", "price", "side"],
	"aggregates": {
	"price": "last",
	"side": "last",
	"volume": "sum"
	},
	"master": false,
	"name": "Volume",
	"table": "trades",
	"linked": false
	}
	}
	}