theta-vn / leptos_chart Goto Github PK

View Code? Open in Web Editor NEW

58.0 0.0 8.0 857 KB

Draw chart with svg for leptos

License: MIT License

Rust 100.00%

leptos_chart's Introduction

A visualization library for leptos

The project provides chart types to draw for leptos.

Examples and Usage

PieChart

Cargo.toml for PieChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["PieChart"]}

main.rs for PieChart

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Polar::new(
        Series::from(vec![1.0, 2.0, 3.]),
        Series::from(vec!["A", "B", "C"]),
    )
    .set_view(740, 540, 1, 200, 20);

    let color = Color::from("#ff0000");
    let shift_degrees = 120.;

    view! {
        <div class="mx-auto p-8">
            <h1>"Pie chart example with right label"</h1>
            // color and shift_degrees are options
            <PieChart chart=chart color=color shift_degrees=shift_degrees/>
        </div>
    }
}

Result for PieChart

Result with feature debug for PieChart

BarChart

Cargo.toml for BarChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChart"]}

main.rs for BarChart

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart_v = Cartesian::new(
        Series::from(vec!["A", "B", "C"]),
        Series::from(vec![1.0, 6.0, 9.]),
    )
    .set_view(820, 620, 3, 50, 50, 20);

    let chart_h = Cartesian::new(
        Series::from(vec![0.7, 1.5, 1.9]),
        Series::from(vec!["A", "B", "C"]),
    )
    .set_view(820, 620, 3, 30, 30, 20);

    view! {
        <div class="mx-auto p-8" style="background:#00000077">

            <h1>"Bar chart example"</h1>
            <BarChart chart=chart_v />

            <h1>"Bar chart example"</h1>
            <BarChart chart=chart_h />
        </div>
    }
}

Result (debug) for BarChart

BarChartGroup

Cargo.toml for BarChartGroup

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["BarChartGroup"]}

main.rs for BarChartGroup

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = CartesianGroup::new()
        .set_view(840, 640, 3, 50, 50, 20)
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.7, 1.5, 1.9]),
        )
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.3, 0.5, 0.9]),
        );

    view! {
        <div class="mx-auto p-8">
            <h1>"Bar chart stack example"</h1>
            <BarChartGroup chart=chart />
        </div>
    }
}

Result (debug) for BarChartGroup

LineChart

Cargo.toml for LineChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChart"]}

main.rs for LineChart

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Cartesian::new(
        Series::from(vec![0., 1.0, 2.]),
        Series::from(vec![3.0, 1.0, 5.]),
    )
    .set_view(820, 620, 3, 100, 100, 20);

    view! {
        <div class="mx-auto p-8" style="background:#00000077">
            <h1>"Line chart example"</h1>
            <LineChart chart=chart />
        </div>
    }
}

Result (debug) for LineChart

LineChartGroup

Cargo.toml for LineChartGroup

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["LineChartGroup"]}

main.rs for LineChartGroup

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {

    let chart = CartesianGroup::new()
    .set_view(840, 640, 3, 50, 50, 20)
    .add_data(
        Series::from((vec!["1982", "1986", "2010", "2020", ], "%Y", "year")),
        Series::from(vec![3., 2.0, 1., 4.]),
    )
    .add_data(
        Series::from((vec!["1982", "1986", "2017", "2020"], "%Y", "year")),
        Series::from(vec![0., 1.0, 2., 3.]),
    );

    view! {
        <div class="mx-auto p-8">
            <h1>"Line chart group example"</h1>
            <LineChartGroup chart=chart />
        </div>
    }
}

Result (debug) for LineChartGroup

RadarChart

Cargo.toml for RadarChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["RadarChart"]}

main.rs for RadarChart

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Polar::new(
        Series::from(vec![85.0, 55.0, 45., 60., 40.]),
        Series::from(vec!["Reading", "Writing", "Listening", "Speaking", "React"]),
    )
    .set_view(740, 540, 1, 0, 20);

    view! {
        <div class="mx-auto p-8">
            <h1>"Radar chart example"</h1>
            <RadarChart chart=chart />
        </div>
    }
}

Result (debug) for RadarChart

ScatterChart

Cargo.toml for ScatterChart

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["ScatterChart"]}

main.rs for ScatterChart

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = Cartesian::new(
        Series::from(vec![50,60,70,80,90,100,110,120,130,140,150])
            .set_range(40., 160.),
        Series::from(vec![7,8,8,9,9,9,10,11,14,14,15])
            .set_range(6., 16.),
    )
    .set_view(820, 620, 3, 100, 100, 20);

    view! {
        <div class="mx-auto p-8">
            <h1>"Scatter chart example"</h1>
            <ScatterChart chart=chart />
        </div>
    }
}

Result (debug) for ScatterChart

Voronoi

Cargo.toml for Voronoi

leptos = {version = "0.6"}
leptos_chart = {version = "0.3", features = ["Voronoi"]}
rand = "0.8"

main.rs for Voronoi

use leptos::*;
use leptos_chart::*;
use rand::Rng;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    // fill the unit square with points
    let mut rng = rand::thread_rng();
    let vx = (0..100)
        .map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
        .collect::<Vec<_>>();
    let vy = (0..100)
        .map(|_| (96_f64 * rng.gen::<f64>() + 2_f64) )
        .collect::<Vec<_>>();
    

    let chart = Cartesian::new(        
        Series::from(vx).set_range(0., 100.),
        Series::from(vy).set_range(0., 100.),
    )
    .set_view(720, 720, 3, 80, 80, 20);

    let color = Color::from("#ff0000");

    view! {
      <div class="mx-auto p-8">
        <h1>"Voronoi diagram example"</h1>
        <Voronoi chart=chart.clone()/>
      </div>

      <div class="mx-auto p-8">
        <h1>"Voronoi diagram with triangle example"</h1>
        <Voronoi chart=chart delaunay=true color=color/>
      </div>
    }
}

Result (debug) for Voronoi

leptos_chart's People

Contributors

Stargazers

Forkers

develangel martinfrances107 trifel michibab webmsgr aptly-io oyelowo

leptos_chart's Issues

Add SvgChart and Axes to the public interface

I really like the project .. I am finding it useful in several project

I would like to have a conversation about using this library from a developers point of view.

If I want to use the "Axes" feature in isolation (without the other features like "LineChart" then I get a compilation errors because core is not available. )

To make this library more generic this is a simple fix.
-Axes = []
+Axes = ["core"]

Also to make this library more generic... I want to expose the SvgChart component.

Inside my module I want to import SvgChart and create child objects to reflect my custom code.

I have a PR which I think makes the minimum change
There are many was to achieve this goal.. so I created this issue as well as the PR so we can discuss the best way forward.

One thing I think is missing from the minimum change .. is a example which shows a custom chart.
But I think the discussion here may change the solution.

bar_char_group is broken

When creating and testing the migration pull request

I noticed that the example bar_chart_group does not compile

until all the other examples when I run

trunk serve

I will look into fixing this over the weekend, but I just want to raise the issue... here.

impl leptos_dom::IntoView {leptos_chart::LineChart}: leptos::ComponentConstructor<_>` is not satisfied

Trying to use 0.2 with leptos version = "0.6.5".

I basically copied the code from the example:

https://crates.io/crates/leptos_chart

Into my existing app. I refer to this code segment:

use leptos::*;
use leptos_chart::*;

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    leptos::mount_to_body(|| leptos::view! { <App/> })
}

#[component]
pub fn App() -> impl IntoView {
    let chart = CartesianGroup::new()
        .set_view(840, 640, 3, 50, 50, 20)
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.7, 1.5, 1.9]),
        )
        .add_data(
            Series::from(vec!["A", "B", "C"]),
            Series::from(vec![0.3, 0.5, 0.9]),
        );

    view! {
        <div class="mx-auto p-8">
            <h1>"Bar chart stack example"</h1>
            <BarChartGroup chart=chart />
        </div>
    }
}

The error i see then:

error[E0277]: the trait bound `&fn(leptos_chart::linechart::components::LineChartProps) -> impl leptos_dom::IntoView {leptos_chart::LineChart}: leptos::ComponentConstructor<_>` is not satisfied
   --> src/pages/tool/mod.rs:447:5
    |
447 | /     view! {
448 | |       <div class="space-y-10">
449 | |         <div class="flex center-items justify-between">
450 | |           <Breadcrumbs
...   |
636 | |       </Show>
637 | |     }
    | |_____^ the trait `leptos::ComponentConstructor<_>` is not implemented for `&fn(leptos_chart::linechart::components::LineChartProps) -> impl leptos_dom::IntoView {leptos_chart::LineChart}`
    |
help: trait impls with same name found
   --> /home/nixos/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.5.7/src/lib.rs:335:1
    |
335 | / impl<Func, V> ComponentConstructor<()> for Func
336 | | where
337 | |     Func: FnOnce() -> V,
338 | |     V: IntoView,
    | |________________^
...
345 | / impl<Func, V, P> ComponentConstructor<P> for Func
346 | | where
347 | |     Func: FnOnce(P) -> V,
348 | |     V: IntoView,
349 | |     P: PropsOrNoPropsBuilder,
    | |_____________________________^
    = note: perhaps two different versions of crate `leptos` are being used?
note: required by a bound in `component_view`
   --> /home/nixos/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.6.5/src/lib.rs:325:34
    |
325 | pub fn component_view<P>(f: impl ComponentConstructor<P>, props: P) -> View {
    |                                  ^^^^^^^^^^^^^^^^^^^^^^^ required by this bound in `component_view`
    = note: this error originates in the macro `view` (in Nightly builds, run with -Z macro-backtrace for more info)

error[E0277]: the trait bound `fn(leptos_chart::linechart::components::LineChartProps) -> impl leptos_dom::IntoView {leptos_chart::LineChart}: leptos::Component<_>` is not satisfied
   --> src/pages/tool/mod.rs:447:5
    |
447 | /     view! {
448 | |       <div class="space-y-10">
449 | |         <div class="flex center-items justify-between">
450 | |           <Breadcrumbs
...   |
636 | |       </Show>
637 | |     }
    | |_____^ the trait `leptos::Component<_>` is not implemented for fn item `fn(leptos_chart::linechart::components::LineChartProps) -> impl leptos_dom::IntoView {leptos_chart::LineChart}`
    |
help: trait impls with same name found
   --> /home/nixos/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.5.7/src/lib.rs:309:1
    |
309 |   impl<F, R> Component<EmptyPropsBuilder> for F where F: FnOnce() -> R {}
    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
310 |
311 | / impl<P, F, R> Component<P> for F
312 | | where
313 | |     F: FnOnce(P) -> R,
314 | |     P: Props,
    | |_____________^
    = note: perhaps two different versions of crate `leptos` are being used?
note: required by a bound in `component_props_builder`
   --> /home/nixos/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos-0.6.5/src/lib.rs:319:15
    |
318 | pub fn component_props_builder<P: PropsOrNoPropsBuilder>(
    |        ----------------------- required by a bound in this function
319 |     _f: &impl Component<P>,
    |               ^^^^^^^^^^^^ required by this bound in `component_props_builder`
    = note: this error originates in the macro `view` (in Nightly builds, run with -Z macro-backtrace for more info)

For more information about this error, try `rustc --explain E0277`.
error: could not compile `klick-frontend` (lib) due to 2 previous errors
2024-02-08T11:24:45.976073Z ERROR ❌ error

Should I search in my code for the error or does this library need some modifications for the 0.6.5 version? The example comes with support for 0.5 of leptos.

is it possible to have something like a filled line chart?

sorry i dont know what thats called.
Something like this:

I dont think this is possible at the moment, any chance this gets added?

Resolve security advisory

I love this project .. I am trying to get a long chain of security advisory warnings resolved from a project I am working on

When I run cargo audit on this project I get this warning

Crate:     time
Version:   0.1.45
Title:     Potential segfault in the time crate
Date:      2020-11-18
ID:        RUSTSEC-2020-0071
URL:       https://rustsec.org/advisories/RUSTSEC-2020-0071
Severity:  6.2 (medium)
Solution:  Upgrade to >=0.2.23
Dependency tree:
time 0.1.45
└── chrono 0.4.26
    └── theta-chart 0.0.5
        └── leptos_chart 0.1.0

I have created these issues in theta-chart and chrono

When those are complete the fix here will be simple.

Issue

When using leptos-chart in SSR mode, I've got the following message in the console.

[DANGER] You have both `csr` and `ssr` or `hydrate` and `ssr` enabled as features, which may cause issues like <Suspense/>` failing to work silently.

Steps to Reproduce

Create a new project by cargo leptos new --git leptos-rs/start-axum.
Add leptos-chart dependency leptos_chart = { version = "0.3.0", features = ["PieChart"] } and replace fn App() by that in https://github.com/theta-vn/leptos_chart
Open the page by a browser.

Potential Solution

I've found a similar issue in other chart library feral-dot-io/leptos-chartistry#4. They addressed the issue by removing "csr" flag from the leptos dependency. I've also confirmed this locally.

use of undeclared crate or module `tracing`

Compiling leptos_chart v0.2.2
error[E0433]: failed to resolve: use of undeclared crate or module `tracing
for:
--> C:...\leptos_chart-0.2.2\src\axes\xaxis.rs:7:1
--> C:...\leptos_chart-0.2.2\src\axes\yaxis.rs:7:1
-->C:...\leptos_chart-0.2.2\src\linechart\components.rs:62:1

#[component]
| ^^^^^^^^^^^^ use of undeclared crate or module tracing
|
= note: this error originates in the attribute macro ::leptos::leptos_dom::tracing::instrument (in Nightly builds, run with -Z macro-backtrace for more info)

I tried adding tracing to my leptos app Cargo.toml, but it still won't compile leptos_chart - any suggestions?