1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5import { ChartAxis, AxisLabel, AxisValue } from "chart_axis.slint";
6import { ChartPattern, BarBackground } from "chart_pattern.slint";
7
8component UpBar {
9 VerticalLayout {
10 Rectangle {
11 height: 0.6 * root.height;
12 background: Theme.palette.alternative-bar-gradient;
13 }
14
15 Rectangle {
16 height: 0.4 * root.height;
17 background: Theme.palette.alternative-light-bar-gradient;
18 }
19 }
20}
21
22component DownBar {
23 VerticalLayout {
24 Rectangle {
25 height: 0.37 * root.height;
26 background: Theme.palette.inverted-bar-gradient;
27 }
28
29 Rectangle {
30 height: 0.26 * root.height;
31 background: Theme.palette.inverted-alternative-bar-gradient;
32 }
33
34 Rectangle {
35 height: 0.37 * root.height;
36 background: Theme.palette.inverted-alternative-bar-gradient;
37 }
38 }
39}
40
41export component BalanceChart {
42 in property <float> min;
43 in property <float> max;
44 in property <[string]> x-axis-model;
45 in property <[int]> y-axis-model;
46 in property <string> y-unit;
47 in property <[float]> model;
48 in property <bool> active;
49
50 private property <length> zero: root.height * (1 - (0. - min) / (max - min));
51
52 i-zero-pattern := ChartPattern {
53 preferred-width: 100%;
54 preferred-height: 100%;
55 y: 0px;
56 count: x-axis-model.length;
57 height: root.zero;
58 cache-rendering-hint: true;
59 }
60
61 ChartPattern {
62 preferred-width: 100%;
63 preferred-height: 100%;
64 y: i-zero-pattern.height;
65 count: x-axis-model.length;
66 height: root.height - i_zero_pattern.height;
67 cache-rendering-hint: true;
68 }
69
70 ChartAxis {
71 preferred-width: 100%;
72 preferred-height: 100%;
73 x-model: x-axis-model;
74 y-model: y-axis-model;
75 vertical-stretch: 1;
76 y-min: min;
77 y-max: max;
78 y-unit: root.y-unit;
79 }
80
81 Rectangle {
82 cache-rendering-hint: true;
83 HorizontalLayout {
84 padding-left: 6px;
85 padding-right: 6px;
86 spacing: 10px;
87
88 for value[index] in model : Rectangle {
89 private property <float> display-value;
90
91 if(value > 0.0) : UpBar {
92 width: 100%;
93 y: zero - self.height;
94 height: parent.height * (display-value / (root.max - root.min));
95 }
96
97 if(value < 0.0) : DownBar {
98 y: zero;
99 width: 100%;
100 height: parent.height * (-1 * value / (root.max - root.min));
101 }
102
103 states [
104 active when active : {
105 display-value: value;
106
107 in {
108 animate display-value { duration: Theme.durations.slow; easing: ease-in-out; }
109 }
110 }
111 ]
112 }
113 }
114 }
115}