hellogauges/gauges/
circulargauge.rs

1/*
2HELLOGAUGES
3Copyright (C) 2022 Adrián Romero
4This program is free software: you can redistribute it and/or modify
5it under the terms of the GNU General Public License as published by
6the Free Software Foundation, either version 3 of the License, or
7(at your option) any later version.
8
9This program is distributed in the hope that it will be useful,
10but WITHOUT ANY WARRANTY; without even the implied warranty of
11MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12GNU General Public License for more details.
13
14You should have received a copy of the GNU General Public License
15along with this program.  If not, see <http://www.gnu.org/licenses/>.
16*/
17
18use super::arc::{Arc, ArcContext};
19use super::svgdraw;
20use yew::prelude::*;
21
22#[derive(Properties, PartialEq)]
23pub struct CircularGaugeProps {
24    #[prop_or_default]
25    pub value: Option<f64>,
26    #[prop_or_default]
27    pub pattern: String,
28    pub title: String,
29    pub min: f64,
30    pub max: f64,
31    #[prop_or_default]
32    pub children: ChildrenWithProps<Arc>,
33}
34
35#[function_component(CircularGauge)]
36pub fn circular_gauge(props: &CircularGaugeProps) -> Html {
37    let r1 = 55.0;
38    let centerx = 100;
39    let centery = 65;
40
41    let (html_arc, formatvalue) = match props.value {
42        Some(v) => (
43            html! {
44                <circle
45                    cx={centerx.to_string()}
46                    cy={centery.to_string()}
47                    r={r1.to_string()}
48                    class="circulargauge-bar"
49                    style={format!(r##"
50                        fill: #00000000;
51                        stroke-miterlimit: 0;
52                        stroke-dasharray: {} 400;
53                        transform: translate({}px, {}px) rotate(-90deg) translate({}px, {}px);"##, 
54                        svgdraw::padvalue(props.min, props.max, r1 * svgdraw::radians(360.0), v), centerx, centery, -centerx, -centery)}
55                />
56            },
57            svgdraw::format_number(&props.pattern, v),
58        ),
59        None => (html! {}, String::new()),
60    };
61
62    html! {
63        <svg
64            xmlns="http://www.w3.org/2000/svg"
65            version="1.1"
66            viewBox="0 0 200 130"
67        >
68        <circle
69            cx={centerx.to_string()}
70            cy={centery.to_string()}
71            r={r1.to_string()}
72            class="circulargauge-background"
73            style="fill: #00000000; stroke-miterlimit: 0"
74        />
75        <ContextProvider<ArcContext> context={ArcContext{
76            min: props.min,
77            max: props.max,
78            startangle: -90.0,
79            endangle: 270.0,
80            centerx,
81            centery,
82            r: 52.0,
83            class: "circulargauge-arc" }}>
84            { for props.children.iter() }
85        </ContextProvider<ArcContext>>
86        { html_arc }
87        <text x={100} y={65} text-anchor="middle" class="circulargauge-value">
88            { formatvalue }
89        </text>
90        <text x={100} y={85} text-anchor="middle" class="circulargauge-title">
91            { props.title.clone() }
92        </text>
93        </svg>
94    }
95}
hellogauges/gauges/circulargauge.rs

hellogauges/gauges/
circulargauge.rs
