Skip to content

Instantly share code, notes, and snippets.

@sc1f

sc1f/perspective_on_update.html

Last active May 22, 2020 22:28
Show Gist options
  • Save sc1f/42a7933f35d7327912d729701ee65785 to your computer and use it in GitHub Desktop.
Save sc1f/42a7933f35d7327912d729701ee65785 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
perspective_on_update.html
<!--
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="https://unpkg.com/@finos/perspective-viewer"></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>
<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/dist/umd/material-dense.css">
<style>
perspective-viewer{position:absolute;top:0;left:0;right:0;bottom:0;}
</style>
</head>
<body>
<perspective-viewer plugin="datagrid">
</perspective-viewer>
<script>
window.addEventListener('WebComponentsReady', async function() {
const viewer = document.getElementsByTagName('perspective-viewer')[0];
// REPLACE WITH YOUR OWN DATASET HERE
const data = await fetch("8_x_10000.arrow");
const worker = perspective.shared_worker();
const table = worker.table(await data.arrayBuffer(), {index: "uid"});
const view = table.view();
const json = await view.to_json({
start_row: 2000,
end_row: 4000
})
const updater = updated => console.log(updated);
// const updater = () => undefined;
view.on_update(updater, {mode: "cell"});
await viewer.load(table);
await viewer.toggleConfig();
let count = 0;
let it;
it = setInterval(() => {
console.log("Updating");
table.update(json);
count++;
if (count === 20) {
console.log("CLEARING");
clearInterval(it);
}
}, 1000)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment