Demo of Perspective.
Perspective CSV Example
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); | |
} | |
}); |
#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; | |
} |
<!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/dist/umd/perspective.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></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="csv.js"></script> | |
<link rel='stylesheet' href="index.css"> | |
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/material-dense.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