Plotting Application

[saturn77]

Looking to port an existing egui application that does real time plotting over to Leptos and wondering if anyone else has done the same, and what was their general approach.

[gbj]

Not sure what type of plotting you're doing. Would leptos_chart be useful? I haven't used it, just a library someone created.

[saturn77]

Thanks for the feedback here, was unaware of this lib. However, it appears to render to svg format. I am looking for something that is real time oriented, where it can be continually updated via a thread. Actually this is one of the reasons for having used egui was the use of the built in plotting functions and then employing threads and data structures to update it at fixed interval. There is also the desire to have some panning and zooming of the plot, and then be able to save the image of the plot to png . . . .

[McleanWorkshield]

Insanely cool stuff. I am actually trying some similar things. I am using wasm-bindgen to create a JS function that attaches a chart from Apex Charts to an HTML Element with minor success. It is loading on a refresh but it errors when navigating between pages. Maybe this can help/you can help figure out what I am doing incorrect?

1. Add the Apex Charts CDN as a <Script /> to the leptos project.

// In the "view" of app.js
<Script src="https://cdn.jsdelivr.net/npm/apexcharts" />

2. Create the JS File to handle building the chart with the lib provided by the cdn.

// build_chart.js
export function buildChart(options) {
  if (
    document.getElementById("area-chart") &&   // This is true on initial load, but undefined when navigating between pages.
    typeof ApexCharts !== "undefined" &&
    options
  ) {
    const chart = new ApexCharts(
      document.getElementById("area-chart"),
      options
    );
    chart.render();
  }
}

4. Create the "Chart" component and call the build chart function with wasm-bindgen.

use chart_options::*;
use leptos::*;
use wasm_bindgen::prelude::*;

pub mod chart_options;

#[wasm_bindgen(module = "/src/components/charts/apex_charts.js")]
extern "C" {
    #[wasm_bindgen]
    fn buildChart(options: JsValue);
}

#[component]
pub fn Chart(cx: Scope, chart_options: ReadSignal<ChartOptions>) -> impl IntoView {
    create_effect(cx, move |_| {
        match serde_wasm_bindgen::to_value(&chart_options.get()) {
            Ok(config) => buildChart(config),
            Err(_) => log!("Error while serializing chart options."),
        }
    });

    view! {
        cx,
        <div id="area-chart"></div>
    }
}

With this I can get the chart to load on the initial refresh of the page... but when trying to navigate between different pages on the website, the chart then disappears and does not load. The problem seems to be that the JS function is looking for the element with ID "area-chart", but when navigating between pages, this element is added to the DOM after the JS Function is called resulting in no chart.