|
<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://cdn.jsdelivr.net/npm/@finos/perspective-workspace/dist/umd/material.css"> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-workspace"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></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-viewer table="superstore"></perspective-viewer> |
|
</perspective-workspace> |
|
|
|
<script> |
|
|
|
const URL = "https://cdn.jsdelivr.net/npm/superstore-arrow/superstore.arrow"; |
|
|
|
async function get_layout() { |
|
const req = await fetch("layout.json"); |
|
const json = await req.json(); |
|
return json; |
|
} |
|
|
|
const datasource = async () => { |
|
const request = fetch(URL); |
|
const worker = perspective.worker(); |
|
const response = await request; |
|
const buffer = await response.arrayBuffer(); |
|
return worker.table(buffer); |
|
}; |
|
|
|
window.addEventListener("load", async () => { |
|
const plugin = window.getPlugin("d3_heatmap"); |
|
plugin.max_cells = 10000; |
|
plugin.max_columns = 200; |
|
window.workspace.tables.set("superstore", datasource()); |
|
const layout = await get_layout(); |
|
window.workspace.restore(layout); |
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |