Struct Chart 

pub struct Chart<S, T> { /* private fields */ }

A chart of the rows of a list signal, drawn as bars, lines, or areas.

Each row is one point along the axis of the categories, labeled by the text field category, and each Chart::series reads a number field of the row. The categories run along the bottom, or down the side of a Chart::horizontal_bar. The browser fits the scale of the values to them: it runs from a round number at or below the smallest value, or 0, to a round number at or above the largest, or 0, with grid lines on a step of 1, 2, 2.5, or 5 times a power of ten. A patch from the server or a statement in the browser that changes a value moves its bar or its line and refits the scale. A negative value draws its bar down from the line at 0.

Each bar, point, and grid line computes the scale from every row, so a change to the rows costs time that grows with the square of their number. This crate has not measured where that becomes slow. A long series can be summed into fewer rows on the server first.

The drawing, the axis labels, the legend, and the box that shows a row’s values under the pointer are hidden from assistive technology. A screen reader reads a visually hidden table of the same rows instead, captioned with label.

use hypersig::{Page, Signals};
use hypersig_ui::{Chart, token};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Month {
    name: String,
    desktop: i32,
    mobile: i32,
}

#[derive(Signals, Serialize, Deserialize)]
struct Traffic {
    months: Vec<Month>,
}

let chart = Chart::bar("Visitors", Traffic::months(), Month::name())
    .series("Desktop", Month::desktop(), token::chart_1())
    .series("Mobile", Month::mobile(), token::chart_2());
let months = vec![
    Month { name: "January".into(), desktop: 186, mobile: 80 },
    Month { name: "February".into(), desktop: 305, mobile: 200 },
];
let html = Page::new("Traffic", Traffic { months }).child(chart).render();
assert!(html.contains("<caption>Visitors</caption>"));
assert!(html.contains(">400</span>"));

Implementations

impl<S: 'static, T: 'static> Chart<S, T>

pub fn bar( label: impl Into<String>, rows: Sig<S, Vec<T>>, category: Sig<T, String>, ) -> Self

A bar chart named label of rows, labeled by category.

Each row has a group of bars, one per series.

pub fn stacked_bar( label: impl Into<String>, rows: Sig<S, Vec<T>>, category: Sig<T, String>, ) -> Self

A stacked bar chart named label of rows, labeled by category.

Each row has one bar, in which each series stacks on the ones added before it. Positive values stack up from 0 and negative ones down from it, so the scale reaches the largest sum of a row’s positive values and the smallest sum of its negative ones.

pub fn horizontal_bar( label: impl Into<String>, rows: Sig<S, Vec<T>>, category: Sig<T, String>, ) -> Self

A horizontal bar chart named label of rows, labeled by category.

Each row is a band down the side, labeled on the left, with one bar per series running from 0 along the scale at the bottom. It suits categories whose names are too long to sit under a vertical bar.

pub fn line( label: impl Into<String>, rows: Sig<S, Vec<T>>, category: Sig<T, String>, ) -> Self

A line chart named label of rows, labeled by category.

Each row is a point on the line of each series.

pub fn area( label: impl Into<String>, rows: Sig<S, Vec<T>>, category: Sig<T, String>, ) -> Self

An area chart named label of rows, labeled by category.

It is a line chart with the area between each line and 0 filled.

pub fn series<U: Number + Textual + 'static>( self, name: impl Into<String>, field: Sig<T, U>, color: Token<Color>, ) -> Self

Adds a series named name that draws the number field field in color.

pub fn format(self, format: NumberFormat) -> Self

Writes the values and the axis labels in format.

Until set, they are written as JavaScript’s String writes a number.

pub fn max_labels(self, count: u32) -> Self

Labels at most count rows along the axis of the categories, 12 until set.

With more rows than that, the axis labels every nth row from the first, for the smallest n that keeps to count, so the labels do not run into each other. The box under the pointer and the table a screen reader reads still name every row.

Panics

Panics if count is 0.

pub fn render(self) -> El<S>

The chart, its legend, and the table a screen reader reads, in a <figure>.

Trait Implementations

impl<S, T> Debug for Chart<S, T>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<S: 'static, T: 'static> From<Chart<S, T>> for El<S>

fn from(chart: Chart<S, T>) -> Self

Converts to this type from the input type.

impl<S: 'static, T: 'static> From<Chart<S, T>> for Node<S>

fn from(chart: Chart<S, T>) -> Self

Converts to this type from the input type.