1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3import { Palette,Measurements } from "../common.slint";
4import { AppState } from "../appState.slint";
5import { HaText } from "general/haText.slint";
6
7export component Graph {
8 in property <string> name;
9 in property <string> id;
10 in property <bool> full-screen: false;
11 property <[int]> grid: [ 2, 3, 4, 5, 6, 7, 8, 9];
12 property <[int]> values: [0, 1, 2, 3, 4, 5, 6,];
13 tile := Rectangle {
14 clip: true;
15 background: Palette.graph-background;
16 border-radius: Measurements.tile-radius;
17 VerticalLayout {
18 padding: (tile.height > Measurements.small-height-tile) ? 18px : 9px;
19 width: 100%;
20 height: tile.height;
21 VerticalLayout {
22 alignment: start;
23 spacing: 5px;
24
25 HaText {
26 text: root.name;
27 font-size: 10pt;
28 font-weight: 400;
29 color: Palette.graph-foreground;
30 }
31
32 Rectangle {
33 height: 10px;
34 }
35 }
36 }
37
38 Rectangle {
39 width: 1px;
40 height: parent.height * 0.6;
41 background: Palette.graph-foreground.transparentize(0.8);
42 x: tile.width * 0.1;
43 y: tile.height * 0.3;
44 }
45
46 for i in grid: Rectangle {
47 width: 1px;
48 height: parent.height * 0.6;
49 background: Palette.graph-foreground.transparentize(0.9);
50 x: tile.width * 0.1 * i;
51 y: tile.height * 0.3;
52 }
53 for i in values: HaText {
54 horizontal-alignment: right;
55 y: tile.height * 0.9 - (tile.height * i / 10);
56 x: tile.width * 0.03;
57 text: i * 20;
58 color: Palette.graph-foreground.transparentize(0.8);
59 font-size: 5pt;
60 }
61 Rectangle {
62 height: 1px;
63 width: parent.width * 0.8;
64 background: Palette.graph-foreground.transparentize(0.8);
65 x: tile.width * 0.1;
66 y: tile.height * 0.9;
67 }
68
69 property <[int]> days: [ 58, 60, 22, 90, 40, 30, 50, 40, 20];
70
71 HorizontalLayout {
72 x: 25px;
73 y: parent.height - self.height - 25px;
74 alignment: start;
75 spacing: 10px;
76 for i in days: Rectangle {
77 y: parent.height - self.height;
78 border-top-left-radius: 5px;
79 border-top-right-radius: 5px;
80 width: 10px;
81 height: i * 1px;
82 background: Palette.graph-alternate-foreground;
83 opacity: 90%;
84 }
85 }
86 }
87}
88