rzmk/czv
1
0
Fork 0
mirror of https://github.com/rzmk/czv.git synced 2025-12-27 11:26:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: update info about WASM web-demo example

Browse source
This commit is contained in:
rzmk 2024-06-20 17:11:28 -04:00
parent 0648673c46
commit 9bd3090545
No known key found for this signature in database
7 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
czv-wasm/examples/web-demo/README.md Normal file
View file

@ -0,0 +1,7 @@
# czv for WebAssembly web demo
View `index.html` in a web browser and import a CSV file.
## Development
If you want to modify the TypeScript code then after you save your modifications you must run `tsc script.ts --module es2022 --target es2022` to generate a compatible `script.js` file.

46
czv-wasm/examples/web-demo/index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html id="html" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pico.min.css" />
<title>czv demo</title>
</head>
<body style="padding:1rem">
<div style="display: flex; gap: 2rem; justify-content: space-between;">
<h1>czv playground</h1>
<button class="outline secondary" style="height: fit-content; padding: 0.25rem;" onclick="const html = document.getElementById('html');
if (html.getAttribute('data-theme') === 'light')
html.setAttribute('data-theme', 'dark')
else
html.setAttribute('data-theme', 'light')">Switch
page theme</button>
</div>
<p>Import a CSV file and get statistical data from running <a href="https://github.com/rzmk/czv">czv</a> in your
browser using WASM.</p>
<input type="file" id="upload" accept=".csv" class="hidden" />
<label for="upload" style="display: none;" id="progress">Loading...</label>
<table style="width: 100%;" class="striped">
<thead>
<tr>
<th style="width: 10rem">Output type</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row count</td>
<td id="row-count"></td>
</tr>
<tr>
<td>Column count</td>
<td id="column-count"></td>
</tr>
</tbody>
</table>
<script src="script.js" type="module"></script>
</body>
</html>

4
czv-wasm/examples/web-demo/pico.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

27
czv-wasm/examples/web-demo/script.js Normal file
View file

@ -0,0 +1,27 @@
const progress = document.getElementById("progress");
import init, * as czv from "../../pkg/czv.js";
// Must run `await init()` or `initSync()` first for web use
await init();
const fileReader = new FileReader();
fileReader.onloadstart = () => {
if (progress)
progress.style.display = "block";
};
fileReader.onloadend = () => {
const rowCountElement = document.getElementById("row-count");
const columnCountElement = document.getElementById("column-count");
if (rowCountElement)
rowCountElement.innerText = String(czv.rowCount({
file_data: fileReader.result,
}));
if (columnCountElement)
columnCountElement.innerText = String(czv.columnCount({ file_data: fileReader.result }));
if (progress)
progress.style.display = "none";
};
const input = document.getElementById("upload");
if (input)
input.addEventListener("change", () => {
// @ts-ignore
fileReader.readAsText(input.files[0]);
});

34
czv-wasm/examples/web-demo/script.ts Normal file
View file

@ -0,0 +1,34 @@
const progress = document.getElementById("progress");
import init, * as czv from "../../pkg/czv.js";
// Must run `await init()` or `initSync()` first for web use
await init();
const fileReader = new FileReader();
fileReader.onloadstart = () => {
if (progress) progress.style.display = "block";
};
fileReader.onloadend = () => {
const rowCountElement = document.getElementById("row-count");
const columnCountElement = document.getElementById("column-count");
if (rowCountElement)
rowCountElement.innerText = String(
czv.rowCount({
file_data: fileReader.result as string,
})
);
if (columnCountElement)
columnCountElement.innerText = String(
czv.columnCount({ file_data: fileReader.result as string })
);
if (progress) progress.style.display = "none";
};
const input = document.getElementById("upload");
if (input)
input.addEventListener("change", () => {
// @ts-ignore
fileReader.readAsText(input.files[0]);
});