makeover_webview/

chart.rs

//! The stylesheet half of a chart: a run of magnitudes against one axis, drawn
//! as bars.
//!
//! The markup is drawn by the quasi hosts (`quasi-webview` for this renderer),
//! which own the vocabulary member. This module owns the classes that markup
//! carries and the rules that draw them, so the generated stylesheet and the
//! emitted markup cannot disagree about a name.
//!
//! [`meter`](crate::meter)'s neighbour and its opposite in one respect: a meter
//! draws one proportion, and a chart draws a series whose markup computes
//! nothing. Both numbers reach the markup as they were given, and the division
//! happens in CSS.
//!
//! # Why the arithmetic is in the stylesheet
//!
//! `quasi-declare` derives a compiled template by rendering a screen with
//! stand-in values and keeping the bytes that no request reaches; a number the
//! description HANDS a renderer is found in that render and becomes a hole, and
//! a number the renderer WORKS OUT from two of them is printed as its
//! arithmetic, leaves no stand-in to find, and is baked into the template as a
//! constant. `quasi_router::stage::number_at` says so in as many words.
//!
//! So `--value` and `--most` reach the markup as themselves, and `chart_rules`
//! divides them where a browser can. Both ride in
//! [`VARS_ATTR`](crate::VARS_ATTR) rather than in `style`, so a page whose
//! policy refuses style attributes still draws its bars.

use crate::{Depth, Emit, class, depth_rule, gated, hover_condition};
use makeover_layout::{Intent as _, Tone};
use std::fmt::Write as _;

/// Every class a chart's markup can carry.
///
/// [`crate::facet::FACET_CLASSES`]' obligation, and the list is what keeps the
/// scraped vocabulary true if a rule goes away.
pub const CHART_CLASSES: &[&str] = &[
    "chart",
    "chart-bars",
    "chart-bar-col",
    "chart-bar",
    "chart-bar-label",
];

/// What a chart looks like.
///
/// # What is emitted and what is deferred
///
/// `progress_rules`' rule, applied: the tones are emitted and the sizes are
/// not. This crate names no magnitude, that is `makeover-geometry`'s, so
/// every length here is a custom property with a default an adopter overrides
/// once, exactly as `--awaiting-bar` is. How tall a chart stands is the app's:
/// MNW's revenue chart is 200px and a sparkline beside a figure is 24px.
///
/// The height of a BAR is the one length that has to be here, and it is not a
/// magnitude: it is the two numbers the markup carries, divided. That division
/// is the half of the contract the markup cannot state on its own.
///
/// The column stretches to the chart's height and stacks from the bottom. It
/// has to: a percentage height resolves only against a definite one, and a
/// column left at `align-items: flex-end`'s content height gave every bar
/// `auto`, which is the 2px floor and nothing more.
///
/// `max(var(--most), 1)` rather than a guard: an axis of zero is sayable, and
/// dividing by it would make the whole declaration invalid at computed-value
/// time. Clamping the divisor draws every bar at nothing, which is what an
/// empty axis means. `min(…, 100%)` is the other end: a value past the axis
/// fills its column and stops, as the vocabulary's own fraction and the other
/// two renderers already clamp it, rather than pushing its label out of the chart.
///
/// The column holds the label too, one line by `nowrap`, so the bar's share is
/// of the column less `1lh`: measured against the whole column a full bar and
/// its label overflowed it, and flex shrank the tallest bars out of proportion
/// with the rest. The first `height` is the same without the label's line, for
/// an engine that does not know `lh` and drops the second.
fn chart_rules(opts: &Emit) -> String {
    let chart = class("chart", opts);
    let bars = class("chart-bars", opts);
    let col = class("chart-bar-col", opts);
    let bar = class("chart-bar", opts);
    let label = class("chart-bar-label", opts);

    let mut css = depth_rule(&chart, Depth::Well);

    let _ = writeln!(
        css,
        ".{bars} {{\n    display: flex;\n    align-items: flex-end;\n    \
         gap: var(--chart-gap, 2px);\n    height: var(--chart-height, 200px);\n}}"
    );
    let _ = writeln!(
        css,
        ".{col} {{\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    \
         justify-content: flex-end;\n    align-self: stretch;\n    \
         align-items: center;\n    min-width: 0;\n    position: relative;\n}}"
    );
    let _ = writeln!(
        css,
        ".{bar} {{\n    width: 100%;\n    background: var(--action);\n    \
         min-height: var(--chart-bar-least, 2px);\n    \
         height: min(calc(var(--value, 0) * 100% / max(var(--most, 1), 1)), 100%);\n    \
         height: min(calc(var(--value, 0) * (100% - 1lh) / max(var(--most, 1), 1)), 100% - 1lh);\n}}"
    );
    // A chart can be saying something, the same way a bar can. `progress_rules`
    // emits the tones for that reason and this follows it.
    for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
        let _ = writeln!(
            css,
            ".{chart}[data-tone=\"{0}\"] .{bar} {{\n    background: var(--{0});\n}}",
            tone.token()
        );
    }
    let _ = writeln!(
        css,
        ".{label} {{\n    color: var(--content-muted);\n    max-width: 100%;\n    \
         white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}}"
    );

    // The readout, revealed from the attribute the markup already carries.
    //
    // Gated, because it is a hover state and this crate asks
    // `Affordance` whether a hover state exists rather than assuming one.
    // Keyed on the attribute rather than on a class, so a bar with nothing to
    // say reveals no empty bubble.
    //
    // Centred with `inset-inline: 0` and an auto margin rather than with a
    // half-width translate: the translate is the idiom and it names a
    // magnitude, and this does the same job with three keywords.
    css.push_str(&gated(
        hover_condition(),
        &format!(
            ".{col}[data-tooltip]:hover::before {{\n    content: attr(data-tooltip);\n    \
             position: absolute;\n    bottom: 100%;\n    inset-inline: 0;\n    \
             margin-inline: auto;\n    width: max-content;\n    \
             background: var(--surface-raised);\n    color: var(--content);\n    \
             border: var(--border);\n    box-shadow: var(--elevation-overlay);\n    \
             padding: var(--chart-readout-padding, 0.25em 0.5em);\n    \
             white-space: nowrap;\n    pointer-events: none;\n}}\n"
        ),
    ));
    css
}

/// The rules, for the stylesheet builder.
#[must_use]
pub fn rules(opts: &Emit) -> String {
    chart_rules(opts)
}

#[cfg(test)]
mod tests {
    use super::*;

    /// Every class the markup can carry has a rule, which is what
    /// `CHART_CLASSES` exists to keep true.
    #[test]
    fn every_class_this_module_names_has_a_rule() {
        let css = chart_rules(&Emit::default());
        for name in CHART_CLASSES {
            assert!(css.contains(&format!(".{name}")), "{name} has no rule");
        }
    }
}