perspective-viewer 5.5.1

A data visualization and analytics component, especially well-suited for large and/or streaming datasets.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

use yew::prelude::*;

/// Lowercases `key` and folds every other character to `-`, producing the
/// middle segment of a `--psp-label--{slug}--content` intl variable name.
pub fn intl_slug(key: &str) -> String {
    key.chars()
        .map(|x| {
            if x.is_ascii_alphanumeric() {
                x.to_ascii_lowercase()
            } else {
                '-'
            }
        })
        .collect()
}

/// The inline `style` that routes an element's `:before` text through the intl
/// indirection.
pub fn intl_content_style(var: &str) -> String {
    format!("--psp-label--content: var(--psp-label--{var}--content)")
}

#[derive(Properties, PartialEq)]
pub struct IntlLabelProps {
    pub name: String,

    #[prop_or_default]
    pub group: bool,

    #[prop_or_default]
    pub class: Classes,
}

/// A `<label>` whose text is the intl string for a schema key.
#[function_component(IntlLabel)]
pub fn intl_label(props: &IntlLabelProps) -> Html {
    let slug = intl_slug(&props.name);
    let (id, var) = if props.group {
        (
            format!("{}-group-label", props.name),
            format!("group-{slug}"),
        )
    } else {
        (format!("{}-label", props.name), slug)
    };

    let style = intl_content_style(&var);
    let class = classes!("intl-label", props.class.clone());
    html! { <label {class} {id} {style} /> }
}