Workers

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "chart-js-rs"
-version = "0.0.58"
+version = "0.1.0"
 edition = "2021"
 authors = ["Billy Sheppard", "Luis Moreno"]
 license = "Apache-2.0"
@@ -19,8 +19,17 @@ rust_decimal = "1.37.2"
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.141"
 serde-wasm-bindgen = "0.6"
-wasm-bindgen = { version = "0.2.100", features = ["serde-serialize"] }
+wasm-bindgen = { version = "0.2.101", features = ["serde-serialize"] }
 uuid = { version = "1.17.0", features = ["v4", "js"] }
+web-sys = { version = "0.3.77", optional = true, features = [
+    "DomRect",
+    "HtmlCanvasElement",
+    "OffscreenCanvas",
+    "WorkerOptions",
+    "WorkerType",
+] }
+tokio = { version = "1.47.1", features = ["sync"], optional = true }
+itertools = "0.14.0"
 
 [workspace]
 members = ["examples"]
@@ -31,3 +40,7 @@ itertools = "0.14.0"
 quote = "1.0.40"
 proc-macro2 = "1.0.95"
 syn = { features = ["parsing", "full"], version = "2.0.106" }
+
+[features]
+default = []
+workers = ["dep:web-sys", "dep:tokio"]

examples/Cargo.toml

@@ -8,7 +8,7 @@ edition = "2021"
 crate-type = ["cdylib"]
 
 [dependencies]
-chart-js-rs = { path = "../" }
+chart-js-rs = { path = "../", features = ["workers"]}
 console_error_panic_hook = { version = "*", default-features = false }
 dominator = { version = "*", default-features = false }
 futures-signals = { version = "*", default-features = false }

examples/index.html

@@ -12,15 +12,15 @@
   <link rel="stylesheet" href="./index.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
-  <script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/luxon@^2/build/global/luxon.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1/dist/chartjs-adapter-luxon.umd.min.js"></script>
 
   <script type="module">
     import init from './chart_js_rs_example.js';
 
     async function run() {
-      await init();
+      await init(); 
     }
 
     run();

examples/snippets/chart-js-rs-339a98cce73d8073/js/exports.js

@@ -0,0 +1,51 @@
+export function get_chart(id) {
+    return Chart.getChart(document.getElementById(id)).config._config
+}
+
+export function render_chart(v, id, mutate, plugins, defaults) {
+    console.debug('Before mutate:', v);
+
+    let obj;
+
+    if (defaults != null || defaults != undefined) {
+        defaults = eval(defaults);
+    }
+
+    if (plugins != null || plugins != undefined) {
+        v.plugins = eval(plugins);
+    }
+
+    if (mutate) {
+        obj = window.mutate_chart_object(v)
+    }
+    else {
+        obj = v
+    };
+
+    console.debug('After mutate:', obj);
+
+    const ctx = document.getElementById(id);
+    let chart = new Chart(ctx, obj);
+}
+
+export function update_chart(updated, id, animate) {
+    try {
+        let chart = Chart.getChart(document.getElementById(id));
+        chart.config._config.type = updated.type;
+        chart.config._config.data = updated.data;
+        chart.config._config.options = updated.options;
+
+        console.debug('Updated chart:', chart);
+
+        if (animate) {
+            chart.update();
+        } else {
+            chart.update('none');
+        }
+
+        true
+    }
+    catch {
+        false
+    }
+}

examples/snippets/chart-js-rs-71705c35f71c3454/js/exports.js

@@ -0,0 +1,51 @@
+export function get_chart(id) {
+    return Chart.getChart(document.getElementById(id)).config._config
+}
+
+export function render_chart(v, id, mutate, plugins, defaults) {
+    console.debug('Before mutate:', v);
+
+    let obj;
+
+    if (defaults != null || defaults != undefined) {
+        defaults = eval(defaults);
+    }
+
+    if (plugins != null || plugins != undefined) {
+        v.plugins = eval(plugins);
+    }
+
+    if (mutate) {
+        obj = window.mutate_chart_object(v)
+    }
+    else {
+        obj = v
+    };
+
+    console.debug('After mutate:', obj);
+
+    const ctx = document.getElementById(id);
+    let chart = new Chart(ctx, obj);
+}
+
+export function update_chart(updated, id, animate) {
+    try {
+        let chart = Chart.getChart(document.getElementById(id));
+        chart.config._config.type = updated.type;
+        chart.config._config.data = updated.data;
+        chart.config._config.options = updated.options;
+
+        console.debug('Updated chart:', chart);
+
+        if (animate) {
+            chart.update();
+        } else {
+            chart.update('none');
+        }
+
+        true
+    }
+    catch {
+        false
+    }
+}