lodviz_components

High-level Leptos components for data visualization, built on top of lodviz_core. Renders pure SVG — no JavaScript charting library required.

Target: wasm32-unknown-unknown (Leptos 0.8 CSR). Requires Trunk to build.

Chart Components

Interactive Features

• Zoom & Pan — ZoomPan wrapper with mouse/touch support
• Brush selection — Brush for range selection across linked charts
• Linked dashboards — LinkedDashboard + DashboardContext for synchronized crosshair/selection
• Draggable cards — DraggableCard layout component for resizable dashboard panels
• Tooltips — Per-chart tooltip overlays with hover state
• Legend toggle — Click legend entries to show/hide series

Zoom Interactions

Charts wrapped with ZoomPan support the following mouse interactions:

use lodviz_components::{LineChart, ZoomPan};
use leptos::prelude::*;

let (transform, set_transform) = signal(ZoomTransform::from_domain(0.0, 100.0, 0.0, 50.0));
let original = transform.read_only();

view! {
    <ZoomPan
        transform=set_transform
        original=original
        inner_width=Signal::derive(|| 800.0)
        inner_height=Signal::derive(|| 400.0)
    >
        <LineChart data=data transform=transform />
    </ZoomPan>
}

Installation

[dependencies]
lodviz_components = "0.2"
lodviz_core = "0.2"

Configure your Trunk.toml to target WASM:

[build]
target = "index.html"

Quick Start

use lodviz_components::LineChart;
use lodviz_core::core::data::{DataPoint, Dataset, Series};
use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    let data = Signal::derive(|| Dataset {
        series: vec![Series {
            label: "Sales".to_string(),
            points: (0..50)
                .map(|i| DataPoint::new(i as f64, (i as f64).sin() * 100.0))
                .collect(),
            color: None,
        }],
    });

    view! {
        <LineChart data=data />
    }
}

Data Input

Components accept data exclusively as Signal<T>, where T is one of the chart-ready types defined in lodviz_core::core::data. No parsing happens inside components.

From static data

use lodviz_core::core::data::{DataPoint, Dataset, Series};
use lodviz_components::LineChart;
use leptos::prelude::*;

let data = Signal::derive(|| Dataset::from_series(
    Series::new("Temp", vec![
        DataPoint::new(0.0, 22.5),
        DataPoint::new(1.0, 23.1),
    ])
));

view! { <LineChart data=data /> }

From a remote CSV (browser fetch)

This crate performs no I/O. Data loading is the application's responsibility:

use lodviz_core::core::csv::parse_csv;
use lodviz_core::core::encoding::{Encoding, Field};
use leptos::prelude::*;

// LocalResource performs the fetch in WASM
let dataset = LocalResource::new(|| async {
    let text = gloo_net::http::Request::get("/data/sales.csv")
        .send().await.unwrap()
        .text().await.unwrap();

    let table = parse_csv(&text).unwrap();
    let enc = Encoding::new(
        Field::quantitative("month"),
        Field::quantitative("value"),
    );
    table.to_dataset(&enc)
});

For the full pipeline (CSV → DataTable → Dataset → downsampling) see the Data Pipeline section in the lodviz_core README.

Color Maps

HeatmapChart and ContourChart accept a color_map: ColorMap prop for encoding scalar values as perceptually uniform colors (Oklab interpolation).

use lodviz_core::core::color_map::{ColorMap, SequentialColorMap, DivergingColorMap};

// Sequential
<HeatmapChart color_map=ColorMap::Sequential(SequentialColorMap::Viridis) ... />
<ContourChart color_map=ColorMap::Sequential(SequentialColorMap::Plasma) ... />

// Diverging (good for data centered around zero)
<HeatmapChart color_map=ColorMap::Diverging(DivergingColorMap::RdBu) ... />

// Custom anchors
<HeatmapChart color_map=ColorMap::Custom {
    anchors: vec!["#00429d".into(), "#ffffbf".into(), "#93003a".into()]
} ... />

Available sequential palettes: Viridis, Plasma, Inferno, Magma, Cividis, Turbo, Grayscale. Available diverging palettes: RdBu, PuOr, PiYG, BrBG.

Theming

Wrap your app in ThemeProvider for automatic light/dark mode support:

use lodviz_components::ThemeProvider;

view! {
    <ThemeProvider>
        <LineChart data=data />
    </ThemeProvider>
}

Charts respond to the prefers-color-scheme media query automatically.

Demo App

See apps/web_dashboard for a full working demo with routing, multiple chart types, theme switching, and interactive dashboards.

cd apps/web_dashboard
trunk serve --port 3000

License

MIT — see LICENSE