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 ChartPattern {
40 count: model.length / 2;
41 }
42
43 layout := HorizontalLayout {
44 spacing: 1px;
45
46 for value in model : Bar {
47 private property <float> display-value;
48
49 min-height: 120px;
50 preferred-height: 100%;
51 bar-height: parent.height * (display-value - root.min) / (root.max - root.min);
52
53 states [
54 active when active : {
55 display-value: value;
56
57 in {
58 animate display-value { duration: Theme.durations.slow; easing: ease-in-out; }
59 }
60 }
61 ]
62 }
63 }
64}