Demo of Perspective.
-
-
Save texodus/02d8fd10aef21b19d6165cf92e43e668 to your computer and use it in GitHub Desktop.
Perspective CSV Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: apache-2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.addEventListener("DOMContentLoaded", function () { | |
const worker = window.perspective.worker(); | |
// Get `dropArea` element from the DOM. | |
var dropArea = document.getElementById("drop-area"); | |
// Get `input` element from the DOM. | |
var input = document.getElementById("fileElem"); | |
// Add event listeners to `dropArea`. | |
dropArea.addEventListener("dragenter", () => {}, false); | |
dropArea.addEventListener("dragleave", () => {}, false); | |
dropArea.addEventListener("dragover", () => {}, false); | |
dropArea.addEventListener("drop", (x) => console.log(x), false); | |
// Prevent defaults for drag / drop events. | |
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => { | |
dropArea.addEventListener(eventName, preventDefaults, false); | |
}); | |
function preventDefaults(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
} | |
// Highlight `dropArea` on drag enter and over. | |
["dragenter", "dragover"].forEach(function (eventName) { | |
dropArea.addEventListener(eventName, highlight, false); | |
}); | |
// Remove highlight `dropArea` on drag leave and drop. | |
["dragleave", "drop"].forEach(function (eventName) { | |
dropArea.addEventListener(eventName, unhighlight, false); | |
}); | |
// Add class for highlighting drop area. | |
function highlight() { | |
dropArea.classList.add("highlight"); | |
} | |
// Remove class for highlighting drop area. | |
function unhighlight() { | |
dropArea.classList.remove("highlight"); | |
} | |
// Add event listener for drop. | |
dropArea.addEventListener("drop", handleDrop, false); | |
// Add event listener for file change on `input`. | |
input.addEventListener("change", function () { | |
handleFiles(this.files); | |
}); | |
// Handle files attached to the drop. | |
function handleDrop(e) { | |
let dt = e.dataTransfer; | |
let files = dt.files; | |
handleFiles(files); | |
} | |
// Iterate over files and call upload on each. | |
function handleFiles(files) { | |
[...files].forEach(uploadFile); | |
} | |
// On file load, remove the `dropArea` and replace it with a `<perspective-viewer>`. | |
function uploadFile(file) { | |
let reader = new FileReader(); | |
reader.onload = function (fileLoadedEvent) { | |
let txt = fileLoadedEvent.target.result; | |
// Remove the `dropArea` from the DOM. | |
const parent = dropArea.parentElement; | |
parent.removeChild(dropArea); | |
// Create a `<perspective-viewer>` and append it to the DOM. | |
const psp = document.createElement("perspective-viewer"); | |
parent.appendChild(psp); | |
// Load the CSV data into `<perspective-viewer>`. | |
psp.load(worker.table(txt)); | |
}; | |
// Read the contents of the CSV - triggering the onload when finished. | |
reader.readAsText(file); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#drop-area { | |
border: 5px dashed #ccc; | |
border-radius: 15px; | |
width: 480px; | |
font-family: sans-serif; | |
margin: 100px auto; | |
padding: 48px; | |
color: #666; | |
} | |
#drop-area.highlight { | |
border-color: cornflowerblue; | |
color: #000; | |
} | |
p { | |
margin-top: 0; | |
} | |
.my-form { | |
margin-bottom: 10px; | |
} | |
#gallery { | |
margin-top: 10px; | |
} | |
#gallery img { | |
width: 150px; | |
margin-bottom: 10px; | |
margin-right: 10px; | |
vertical-align: middle; | |
} | |
.button { | |
display: inline-block; | |
padding: 10px; | |
background: #ccc; | |
cursor: pointer; | |
border-radius: 5px; | |
} | |
.button:hover { | |
background: cornflowerblue; | |
color: white; | |
} | |
#fileElem { | |
display: none; | |
} | |
perspective-viewer { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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://cdn.jsdelivr.net/npm/@finos/perspective@latest"></script> | |
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@latest"></script> | |
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@latest"></script> | |
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@latest"></script> | |
<script src="csv.js"></script> | |
<link rel="stylesheet" href="index.css" /> | |
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/material.css" /> | |
</head> | |
<body> | |
<div id="drop-area"> | |
<form class="my-form"> | |
<p> | |
Upload a CSV file by dragging from your desktop and dropping | |
onto the dashed region. | |
</p> | |
<p> | |
(Data is processed in browser, and never sent to any | |
server). | |
</p> | |
<input type="file" id="fileElem" multiple accept="text/csv" /> | |
<label class="button" for="fileElem">Select a file</label> | |
</form> | |
</div> | |
</body> | |
</html> |
Ahh, good version of it..thanks! Great work btw!
…On Wed, Nov 8, 2023 at 10:16 AM Andrew Stein ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Nothing. https://perspective.finos.org/block/?example=editable
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/texodus/02d8fd10aef21b19d6165cf92e43e668#gistcomment-4754394>
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAADWTISHA6NHHUNDMGR67TYDO46DBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TOMRTGE3DAONHORZGSZ3HMVZKMY3SMVQXIZI>
.
You are receiving this email because you commented on the thread.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>
.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nothing. https://perspective.finos.org/block/?example=editable