From 5822a1d9b9adb0a57806e741bcb2f1d33346e26e Mon Sep 17 00:00:00 2001 From: Alexander Jophus Date: Sat, 1 Feb 2025 17:38:14 +0000 Subject: [PATCH] update dioxus example to 0.6 --- examples/dioxus-web-demo/Cargo.toml | 3 +-- examples/dioxus-web-demo/Dioxus.toml | 4 +-- examples/dioxus-web-demo/README.md | 4 +-- examples/dioxus-web-demo/src/main.rs | 40 +++++++++++++--------------- 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/examples/dioxus-web-demo/Cargo.toml b/examples/dioxus-web-demo/Cargo.toml index 77664e1..e31edff 100644 --- a/examples/dioxus-web-demo/Cargo.toml +++ b/examples/dioxus-web-demo/Cargo.toml @@ -7,8 +7,7 @@ edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] -dioxus = "0.3" -dioxus-web = "0.3" +dioxus = { version = "0.6", features = ["web"] } charming = { path = "../../charming", features = ["wasm"] } diff --git a/examples/dioxus-web-demo/Dioxus.toml b/examples/dioxus-web-demo/Dioxus.toml index a486eab..87fabfa 100644 --- a/examples/dioxus-web-demo/Dioxus.toml +++ b/examples/dioxus-web-demo/Dioxus.toml @@ -34,8 +34,8 @@ style = [] # Javascript code file script = [ - "https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js", - "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js", + "https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js", + "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js", ] [web.resource.dev] diff --git a/examples/dioxus-web-demo/README.md b/examples/dioxus-web-demo/README.md index ec0836f..e2b507e 100644 --- a/examples/dioxus-web-demo/README.md +++ b/examples/dioxus-web-demo/README.md @@ -40,7 +40,7 @@ script = [ ## Getting started ```sh -dioxus serve +dioxus serve --platform web ``` - \ No newline at end of file + diff --git a/examples/dioxus-web-demo/src/main.rs b/examples/dioxus-web-demo/src/main.rs index 7791b58..c6ec604 100644 --- a/examples/dioxus-web-demo/src/main.rs +++ b/examples/dioxus-web-demo/src/main.rs @@ -1,7 +1,7 @@ -use dioxus::prelude::*; +use dioxus::{document::Script, prelude::*}; use log::LevelFilter; -use charming::{component::{Axis, Title}, element::AxisType, series::Line, Chart, WasmRenderer}; +use charming::{component::Axis, element::AxisType, series::Line, Chart, WasmRenderer}; fn main() { // Init debug @@ -9,27 +9,25 @@ fn main() { console_error_panic_hook::set_once(); log::info!("starting app"); - dioxus_web::launch(app); + dioxus::LaunchBuilder::new().launch(|| app()); } -fn app(cx: Scope) -> Element { - - let renderer: WasmRenderer = WasmRenderer::new(600, 400); - use_future!(cx, || async move { - let chart = Chart::new() - .x_axis( - Axis::new() - .type_(AxisType::Category) - .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]), - ) - .y_axis(Axis::new().type_(AxisType::Value)) - .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260])); - - renderer.render("chart",&chart).unwrap(); +fn app() -> Element { + let renderer = use_signal(|| WasmRenderer::new(600, 400)); + use_effect(move || { + let chart = Chart::new() + .x_axis( + Axis::new() + .type_(AxisType::Category) + .data(vec!["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]), + ) + .y_axis(Axis::new().type_(AxisType::Value)) + .series(Line::new().data(vec![150, 230, 224, 218, 135, 147, 260])); + + renderer.read_unchecked().render("chart", &chart).unwrap(); }); - - cx.render(rsx! ( + rsx! ( div { style: "text-align: center;", h1 { "🌗 Dioxus + Charming 🚀" } @@ -38,10 +36,10 @@ fn app(cx: Scope) -> Element { } div { style: "width: 100%; text-align: center;", - div { + div { id: "chart", style: "display: inline-block;", } } - )) + ) }