チャート

use hypersig::html::div;
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, Chart, DonutChart, Tabs, button, token};
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize, Clone, Copy, PartialEq)]
pub enum Kind {
    Bar,
    Stacked,
    Horizontal,
    Donut,
}

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

#[derive(Signals, Serialize, Deserialize)]
pub struct Browser {
    name: String,
    visitors: i32,
}

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

pub fn page() -> Page<Traffic> {
    // Each kind of chart draws the same two series of the same months.
    let visitors = |chart: Chart<Traffic, Month>| {
        chart
            .series(
                "デスクトップ",
                Month::desktop(),
                token::chart_1(),
            )
            .series(
                "モバイル",
                Month::mobile(),
                token::chart_2(),
            )
    };
    let label = "訪問者数";
    let names = [
        L { en: "Jan", ja: "1 月" },
        L { en: "Feb", ja: "2 月" },
        L { en: "Mar", ja: "3 月" },
        L { en: "Apr", ja: "4 月" },
        L { en: "May", ja: "5 月" },
        L { en: "Jun", ja: "6 月" },
    ];
    let months = names
        .into_iter()
        .zip([(186, 80), (305, 200), (237, 120), (73, 190), (209, 130), (214, 140)])
        .map(|(name, (desktop, mobile))| Month {
            name: site.t(name).to_owned(),
            desktop,
            mobile,
        })
        .collect();
    let browsers = ["Chrome", "Safari", "Firefox", "Edge"]
        .into_iter()
        .map(str::to_owned)
        .chain(["その他"
            .to_owned()])
        .zip([275, 200, 187, 173, 90])
        .map(|(name, visitors)| Browser { name, visitors })
        .collect();
    let grow = Traffic::months().update_where(
        |month| month.index().equals(3),
        Month::desktop(),
        |month| month.at(Month::desktop()) + 400,
    );
    let tabs = Tabs::new(label, Traffic::kind())
        .tab(
            Kind::Bar,
            "棒",
            visitors(Chart::bar(label, Traffic::months(), Month::name())).render(),
        )
        .tab(
            Kind::Stacked,
            "積み上げ",
            visitors(Chart::stacked_bar(label, Traffic::months(), Month::name())).render(),
        )
        .tab(
            Kind::Horizontal,
            "横棒",
            visitors(Chart::horizontal_bar(label, Traffic::months(), Month::name())).render(),
        )
        .tab(
            Kind::Donut,
            "ドーナツ",
            DonutChart::new(
                "ブラウザごとの訪問者数",
                Traffic::browsers(),
                Browser::name(),
                Browser::visitors(),
            )
            .render(),
        );
    Page::new(
        label,
        Traffic {
            kind: Kind::Bar,
            months,
            browsers,
        },
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(
                div().child(
                    button(ButtonVariant::Outline, ButtonSize::Sm)
                        .on_click(grow)
                        .text("4 月のデスクトップに 400 人足す"),
                ),
            )
            .child(tabs),
    )
}