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
63
64
65
66
67
68
69
70
//! Projects breakdown horizontal bar chart
use crate::api::{format_cost, ProjectCost};
use leptos::prelude::*;
/// Projects breakdown component
#[component]
pub fn ProjectsBreakdown(
/// Top 5 projects by cost
projects: Vec<ProjectCost>,
) -> impl IntoView {
// Color palette for bars (cycling through accent colors)
let colors = [
"--accent-primary",
"--accent-secondary",
"--accent-tertiary",
"--color-info",
"--color-warning",
];
view! {
<div class="card projects-card">
<div class="card-header">
<h3 class="card-title">"Top Projects by Cost"</h3>
</div>
<div class="card-body">
{if projects.is_empty() {
view! {
<p class="hint">"No project data available"</p>
}.into_any()
} else {
view! {
<div class="projects-breakdown">
{projects.into_iter().enumerate().map(|(i, project)| {
let color = colors.get(i % colors.len()).unwrap_or(&"--accent-primary");
let project_name = if project.project.is_empty() {
"Unknown Project".to_string()
} else {
project.project.split('/').next_back().unwrap_or(&project.project).to_string()
};
view! {
<div class="project-item">
<div class="project-header">
<span class="project-name">{project_name}</span>
<span class="project-cost">
{format_cost(project.cost)}
" ("{format!("{:.1}%", project.percentage)}")"
</span>
</div>
<div class="project-bar">
<div
class="project-fill"
style={format!(
"width: {}%; background-color: var({});",
project.percentage,
color
)}
></div>
</div>
</div>
}
}).collect::<Vec<_>>()}
</div>
}.into_any()
}}
</div>
</div>
}
}