texodus/.block

## .block
license: apache-2.0

## README.md

      
    Raw
  

              README.md
            
          
    Demo of Perspective.

  
## csv.js
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);
    }
});

## index.css
#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;
}

## index.html
<!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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	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);
	}
	});
	#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@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>