1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5
6import { ChartPattern } from "chart_pattern.slint";
7
8component Bar {
9 in property <length> bar-height;
10
11 horizontal-stretch: 1;
12
13 Rectangle {
14 border-radius: 2px;
15 y: parent.height - self.height;
16 height: bar-height;
17 clip: true;
18
19 Rectangle {
20 height: root.height;
21 y: parent.height - self.height;
22 background: Theme.palette.bar-gradient;
23 }
24 }
25}
26
27export component BarBackground inherits Rectangle {
28 border-radius: 2px;
29 background: Theme.palette.bar-background-gradient;
30 opacity: 0.25;
31}
32
33export component BarChart {
34 in property <[float]> model;
35 in property <float> min;
36 in property <float> max;
37 in property <bool> active;
38
39 cache-rendering-hint: true;
40
41 ChartPattern {
42 count: model.length / 2;
43 }
44
45 layout := HorizontalLayout {
46 spacing: 1px;
47
48 for value in model : Bar {
49 private property <float> display-value;
50
51 min-height: 120px;
52 preferred-height: 100%;
53 bar-height: parent.height * (display-value - root.min) / (root.max - root.min);
54
55 states [
56 active when active : {
57 display-value: value;
58
59 in {
60 animate display-value { duration: Theme.durations.slow; easing: ease-in-out; }
61 }
62 }
63 ]
64 }
65 }
66}