Last active
July 15, 2019 17:35
-
-
Save JHawk/ef28337d5c96c0360f07ca502b872c10 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("WebComponentsReady", function() { | |
// 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. | |
let psp = document.createElement("perspective-viewer"); | |
parent.appendChild(psp); | |
// Load the CSV data into `<perspective-viewer>`. | |
psp.load(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: 1px solid #ccc; | |
width: 480px; | |
font-family: sans-serif; | |
margin: 100px auto; | |
padding: 48px; | |
} | |
#drop-area.highlight { | |
border-color: purple; | |
} | |
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; | |
border: 1px solid #ccc; | |
} | |
.button:hover { | |
background: #ddd; | |
} | |
#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://unpkg.com/@finos/perspective/build/perspective.js"></script> | |
<script src="https://unpkg.com/@finos/perspective-viewer/build/perspective.view.js"></script> | |
<script src="https://unpkg.com/@finos/perspective-viewer-hypergrid/build/hypergrid.plugin.js"></script> | |
<script src="https://unpkg.com/@finos/perspective-viewer-d3fc/build/d3fc.plugin.js"></script> | |
<script src="csv.js"></script> | |
<link rel='stylesheet' href="index.css"> | |
<link rel='stylesheet' href="https://unpkg.com/@finos/perspective-viewer/build/material.css" is="custom-style"> | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment