wehub-resource-sync
78 lines
3.8 KiB
HTML
78 lines
3.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
|
|
<link rel="preload" href="/node_modules/@perspective-dev/server/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
|
|
<link rel="preload" href="/node_modules/@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
|
|
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/pro-dark.css" />
|
|
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/workspace/dist/css/pro-dark.css" />
|
|
<style>
|
|
perspective-workspace {
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
perspective-viewer {
|
|
--d3fc-positive--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
|
|
--d3fc-negative--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
|
|
--d3fc-full--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<perspective-workspace id="workspace"> </perspective-workspace>
|
|
<script type="module">
|
|
import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
|
|
import "/node_modules/@perspective-dev/workspace/dist/cdn/perspective-workspace.js";
|
|
import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
|
|
import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
|
|
|
|
import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
|
|
|
|
const SCHEMA = {
|
|
Title: "string",
|
|
"US Gross": "float",
|
|
"Worldwide Gross": "float",
|
|
"US DVD Sales": "float",
|
|
"Production Budget": "float",
|
|
"Release Date": "date",
|
|
"MPAA Rating": "string",
|
|
"Running Time min": "integer",
|
|
Distributor: "string",
|
|
Source: "string",
|
|
"Major Genre": "string",
|
|
"Creative Type": "string",
|
|
Director: "string",
|
|
"Rotten Tomatoes Rating": "integer",
|
|
"IMDB Rating": "float",
|
|
"IMDB Votes": "integer",
|
|
};
|
|
|
|
const MOVIES_URL = "https://vega.github.io/editor/data/movies.json";
|
|
|
|
(async () => {
|
|
const request = fetch(MOVIES_URL);
|
|
const worker = await perspective.worker();
|
|
const response = await request;
|
|
const json = await response.json();
|
|
for (const row of json) {
|
|
row["Release Date"] = row["Release Date"] ? new Date(row["Release Date"]) || null : null;
|
|
}
|
|
|
|
const table = await worker.table(SCHEMA, { name: "movies" });
|
|
table.update(json);
|
|
let req = await fetch("layout.json");
|
|
let layout = await req.json();
|
|
await window.workspace.load(worker);
|
|
await window.workspace.restore(layout);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|