Browser demo @pinta365/boxframe

by pinta365

HTML

<link rel="stylesheet" href="style.css">

    <h3>@cross/boxframe</h3>
    <div class="example-unit">
        <h4>Google Sheet</h4>
        <pre class="container" id="test"></pre>
    </div>
    <div class="example-unit">
        <h4>Generated DataFrame</h4>
        <pre class="container" id="test2"></pre>
    </div>

CSS

.example-unit {
  margin-bottom: 2em;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.example-unit h4 {
  margin-top: 0;
}
.container {
  background-color: #e6f7ff;
}

JavaScript

import { BoxFrame, DataFrame } from "https://esm.sh/jsr/@cross/[email protected]";

// EXAMPLE 1
// Check if WASM engine is enabled
if (BoxFrame.isWasmEngineEnabled()) {
    console.log("WASM engine is enabled");
} else {
    console.log("WASM engine is disabled");
}

//Create a DataFrame from a google sheet.
//https://docs.google.com/spreadsheets/d/1INCdqc8IBQDkgj9szIfp4y6o6NYU0-VGnd668zoQK90/
const df = await BoxFrame.readGoogleSheet("1INCdqc8IBQDkgj9szIfp4y6o6NYU0-VGnd668zoQK90", "Sheet1");

const test = df.toString()
document.getElementById('test').innerHTML = test;

// EXAMPLE 2
// Create a DataFrame from an object
const sales = new DataFrame({
    product: ["Laptop", "Phone", "Tablet", "Laptop", "Phone"],
    price: [999, 699, 399, 1099, 799],
    region: ["North", "South", "North", "South", "West"],
    quantity: [5, 12, 8, 5, 15]
});

// Find best selling products by region
const topProducts = sales.groupBy("region").agg({
    price: "mean",
    quantity: "sum"
}).sortValues("quantity_sum", false);

const test2 = topProducts.toString()
document.getElementById('test2').innerHTML = test2;