1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
2 | // SPDX-License-Identifier: MIT |
3 | |
4 | import { Page } from "page.slint" ; |
5 | import { GroupBox, Value , ValueDisplay, BarChart } from "../widgets/widgets.slint" ; |
6 | |
7 | export global UsageAdapter { |
8 | in property <string> title: "Usage" ; |
9 | in property <[Value]> overview-model: [ |
10 | { |
11 | value: 16.41, |
12 | title: "Daily" , |
13 | unit: "kWh" , |
14 | }, |
15 | { |
16 | value: 15.23, |
17 | title: "Weekly" , |
18 | unit: "kWh" , |
19 | } |
20 | ]; |
21 | in property <[float]> model: [ |
22 | 10.0, |
23 | 9.0, |
24 | 11.0, |
25 | 12.0, |
26 | 8.0, |
27 | 14.0, |
28 | 9.0, |
29 | 16.0, |
30 | 18.0, |
31 | 12.0, |
32 | 11.0, |
33 | 14.0, |
34 | 12.0, |
35 | 16.0 |
36 | ]; |
37 | in property <float> min: 0.0; |
38 | in property <float> max: 24.0; |
39 | } |
40 | |
41 | export component Usage inherits Page { |
42 | in property <string> title <=> UsageAdapter.title; |
43 | in property <[Value]> overview-model <=> UsageAdapter.overview-model; |
44 | in property <[float]> model <=> UsageAdapter.model; |
45 | in property <float> min <=> UsageAdapter.min; |
46 | in property <float> max <=> UsageAdapter.max; |
47 | |
48 | GroupBox { |
49 | title: root.title; |
50 | |
51 | Rectangle { |
52 | BarChart { |
53 | preferred-width: 100%; |
54 | preferred-height: 100%; |
55 | model: root.model; |
56 | min: root.min; |
57 | max: root.max; |
58 | active: root.active; |
59 | } |
60 | |
61 | VerticalLayout { |
62 | alignment: start; |
63 | |
64 | ValueDisplay { |
65 | model: overview-model; |
66 | transparent-background: true; |
67 | alternative-colors: true; |
68 | active: root.active; |
69 | } |
70 | } |
71 | } |
72 | } |
73 | } |