Add pie wasm example

aleics · Aug 29, 2024 · f4d59db · f4d59db
1 parent 49ef415
commit f4d59db
Show file tree

Hide file tree

Showing 9 changed files with 3,951 additions and 0 deletions.
diff --git a/bruc-web/examples/pie-chart/.gitignore b/bruc-web/examples/pie-chart/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/bruc-web/examples/pie-chart/.node-version b/bruc-web/examples/pie-chart/.node-version
@@ -0,0 +1 @@
+v16.19.1
diff --git a/bruc-web/examples/pie-chart/.nvmrc b/bruc-web/examples/pie-chart/.nvmrc
@@ -0,0 +1 @@
+v16.19.1
diff --git a/bruc-web/examples/pie-chart/bootstrap.js b/bruc-web/examples/pie-chart/bootstrap.js
@@ -0,0 +1,5 @@
+// A dependency graph that contains any wasm must all be imported
+// asynchronously. This `bootstrap.js` file does the single async import, so
+// that no one else needs to worry about it again.
+import("./index.js")
+  .catch(e => console.error("Error importing `index.js`:", e));
diff --git a/bruc-web/examples/pie-chart/index.html b/bruc-web/examples/pie-chart/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <body>
+        <div id="first"></div>
+        <noscript
+            >This page contains webassembly and javascript content, please
+            enable javascript in your browser.</noscript
+        >
+        <script src="./index.js"></script>
+    </body>
+</html>
diff --git a/bruc-web/examples/pie-chart/index.js b/bruc-web/examples/pie-chart/index.js
@@ -0,0 +1,52 @@
+import { Bruc } from "bruc";
+
+const spec = `{
+  "dimensions": {
+    "width": 500,
+    "height": 500
+  },
+  "data": [
+    {
+      "name": "primary",
+      "values": []
+    }
+  ],
+  "visual": {
+    "shapes": [
+      {
+        "from": "primary",
+        "type": "pie",
+        "properties": {
+          "value": { "field": "y" }
+        }
+      }
+    ]
+  }
+}`;
+
+const bruc = Bruc.build(spec);
+
+await bruc.renderAsSvg("#first");
+
+while (true) {
+  const data = randomData();
+  await bruc.setData("primary", data);
+
+  await delay(1000);
+}
+
+function randomData() {
+  const values = [];
+  for (let i = 0; i <= randomValue(200); i++) {
+    values.push({ x: i, y: randomValue(50) });
+  }
+  return values;
+}
+
+function randomValue(max) {
+  return Math.floor(Math.random() * max);
+}
+
+function delay(time) {
+  return new Promise((resolve) => setTimeout(resolve, time));
+}