Higher resolution charts in Wasm

[JaminMartin]

Hi, I have just been playing around with the wasm leptos and dioxus examples. I have noticed that they are quite low res images, is it possible to render them to svg? when I use plotly-rs they remain crisp at different browser zoom levels.

Is this already a feature that I am just missing?

[LukaOber]

I am not quite sure if I understand what you mean. What exactly is low res, the graph you see in the UI or a downloaded image?

Can you provide me with an example and some screenshots?

[JaminMartin]

I mean, you can see the raster effect at >100% zoom levels in the browser. I think this is because the WASM renderer for charming does not output SVG, where as the plotly-rs likely does as this does not have this effect. So perhaps, resolution isnt the correct word, but a WASM SVG render rather than raster.

When I look at the Echarts site itself, it does not experience this issue. This is only apparent with charming, I have simply been using the provided leptos and dioxus examples in the repo.

[LukaOber]

I have updated the leptos example here with some more options and switched to the svg render (you also need to add js_sys to your dependencies). Please feel free to ask more questions if needed:

use charming::{
    component::{Axis, Title},
    element::AxisType,
    series::Line,
    Chart, WasmRenderer,
};
use leptos::prelude::*;
use leptos::{ev, html::Div};
use leptos_use::utils::Pausable;
use leptos_use::{use_interval_fn, use_resize_observer};

#[component]
fn App() -> impl IntoView {
    let data = RwSignal::new(vec![150, 230, 224, 218, 135, 147, 260]);

    Effect::new(move |_| {
        let local = data.get();

        let chart = Chart::new()
            .title(Title::new().text("Demo: Leptos + Charming"))
            .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(local));

        let chart_json = chart.to_string();
        let js_code = format!(
            r#"
            var chartDom = document.getElementById('chart');
            if (chartDom) {{
                var myChart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom, null, {{ renderer: 'svg' }});
                myChart.setOption({});
            }}
        "#,
            chart_json
        );
        let _ = js_sys::eval(&js_code);
    });

    let chart_div_ref = create_node_ref::<Div>();
    let _ = use_resize_observer(chart_div_ref, move |entries, _| {
        js_sys::eval("echarts.getInstanceByDom(document.getElementById('chart')).resize();");
    });

    let Pausable {
        pause,
        resume,
        is_active: _,
    } = use_interval_fn(
        move || {
            data.update(|d| d.rotate_right(1));
        },
        1000,
    );
    view! {
        <div style="width: 100%;">
            <div node_ref=chart_div_ref id="chart" style="width: 100%; max-width: 1200px; height: 800px"></div>
            <button on:click=move |_| pause()>"Pause"</button>
            <button on:click=move |_| resume()>"Resume"</button>
        </div>
    }
}

fn main() {
    mount_to_body(|| view! { <App /> })
}

[JaminMartin]

This works perfectly thank you. Is there a chance of this being an option for the WASM renderer? then it will be easily transferable to the other examples.

[LukaOber]

I will try to look into it over the holidays.

[JaminMartin]

Likewise, thanks again.

I guess it is also possible to use the HTML render as well?