Skip to content

Commit 8162020

Browse files
tworkooltworkool
authored
Merge pull request #7 from tworkool/develop
[Release] Release v0.3.2
2 parents ec94cb3 + 4c40da0 commit 8162020

File tree

15 files changed

+1129
-876
lines changed

15 files changed

+1129
-876
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
The Sensebox Data Dashboard is a analytics dashboard for data collected from Senseboxes around the world (for more info on Senseboxes [follow this link](https://sensebox.de/en/))
33
![Dashboard Live Data Preview](https://github.com/tworkool/sensebox.data.dashboard/blob/main/webapp/src/assets/content/dashboard-preview.jpg)
44
The motivation behind this project is mainly to create a better approach to visualising data collected from Senseboxes. The [Opensensemap](https://opensensemap.org/) is a great native approach for doing so, but in my opinion it could be improved from many perspectives.
5-
If you would like to use a published version of this dashboard, please visit his link: SOON TO BE ADDED
5+
If you would like to use a published version of this dashboard, please visit his link: [sensebox-data-dashboard.de](sensebox-data-dashboard.de)
66
#### Motivation
77
One prominent feature which will be implemented in the future, is a Map visualising different sensor data from multiple Senseboxes. The main focus is the development of a user-driven dashboard for managing the overview of data.
88

‎webapp/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sensebox-data-dashboard",
33
"private": true,
4-
"version": "0.3.1",
4+
"version": "0.3.2",
55
"description": "sensebox-data-dashboard",
66
"browserslist": "> 0.5%, last 2 versions, not dead",
77
"authors": [],

‎webapp/src/assets/content/dashboard-preview.jpg

108 KB
Loading

‎webapp/src/components/dashboard_box_info/index.jsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Alert,
1111
Badge,
1212
Button,
13+
CloseButton,
1314
Divider,
1415
Group,
1516
Image,
@@ -183,6 +184,15 @@ const DashboardBoxInfo = () => {
183184
</ActionIcon>
184185
)}
185186
<div className="sbd-dashboard-box-info__scroll-container">
187+
<CloseButton
188+
className="sbd-dashboard-box-info__icon sbd-dashboard-box-info__icon--collapse"
189+
title="hide box info"
190+
size="xl"
191+
iconSize={26}
192+
onClick={(_) => {
193+
setIsExpanded(false);
194+
}}
195+
/>
186196
<div className="sbd-dashboard-box-info__content">
187197
{isExpanded && (
188198
<LoadingOverlay
@@ -205,19 +215,6 @@ const DashboardBoxInfo = () => {
205215
)}
206216
{senseboxInfoData?.data && (
207217
<>
208-
<Button
209-
variant="light"
210-
color="pink"
211-
radius="xs"
212-
compact
213-
className="sbd-dashboard-box-info__icon sbd-dashboard-box-info__icon--collapse"
214-
rightIcon={<BoxOff size={16} />}
215-
onClick={(_) => {
216-
setIsExpanded(false);
217-
}}
218-
>
219-
hide box info
220-
</Button>
221218
<div>
222219
<Text size="lg" weight={500}>
223220
{senseboxInfoData.data.name}

‎webapp/src/components/dashboard_box_info/style.scss

Lines changed: 88 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -6,105 +6,117 @@ $animation-duration: 0.5s;
66
$content-margin-desktop-left: 20px;
77
$content-margin-desktop-right: 12px;
88
$content-margin-mobile: 12px;
9+
$margin-right-mobile-expanded: 10px;
910

1011
.sbd-dashboard-box-info {
11-
width: $dashboard-box-info-width;
12-
border-radius: 0 $dashboard-box-info-border-radius $dashboard-box-info-border-radius 0;
13-
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
14-
@include responsive(phone) {
15-
width: calc(100% - 20px);
16-
}
12+
width: $dashboard-box-info-width;
13+
border-radius: 0 $dashboard-box-info-border-radius $dashboard-box-info-border-radius 0;
14+
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
15+
@include responsive(phone) {
16+
width: calc(100vw - $margin-right-mobile-expanded);
17+
}
18+
@include responsive(desktop-down) {
19+
border-right: 1px solid #c4c4c4;
20+
}
21+
height: 100%;
22+
background-color: white;
23+
z-index: 4;
24+
overflow: hidden;
25+
position: absolute;
26+
left: 0;
27+
top: 0;
28+
bottom: 0;
29+
30+
transition: width $animation-duration, height $animation-duration, border-radius $animation-duration,
31+
left $animation-duration, top $animation-duration;
32+
33+
&--collapsed {
1734
@include responsive(desktop-down) {
18-
border-right: 1px solid #c4c4c4;
19-
}
20-
height: 100%;
21-
background-color: white;
22-
z-index: 4;
23-
overflow: hidden;
24-
position: absolute;
25-
left: 0;
26-
top: 0;
27-
bottom: 0;
28-
29-
transition: width $animation-duration;
30-
31-
&--collapsed {
32-
@include responsive(desktop-down) {
33-
width: $dashboard-box-info-width-mobile--collapsed;
34-
padding: 0;
35-
36-
& .sbd-dashboard-box-info__scroll-container {
37-
opacity: 0;
38-
pointer-events: none;
39-
}
40-
}
35+
width: $dashboard-box-info-width-mobile--collapsed;
36+
height: $dashboard-box-info-width-mobile--collapsed;
37+
border-radius: 100%;
38+
padding: 0;
39+
left: 10px;
40+
top: 10px;
41+
42+
& .sbd-dashboard-box-info__scroll-container {
43+
opacity: 0;
44+
pointer-events: none;
45+
}
4146
}
47+
}
4248

43-
&--expanded {
44-
@include responsive(desktop-down) {
45-
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
46-
}
49+
&--expanded {
50+
@include responsive(desktop-down) {
51+
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
52+
border-radius: calc($dashboard-box-info-border-radius * 1.5);
53+
left: 0;
54+
top: 0;
4755
}
56+
}
4857

49-
&__data-container {
50-
/* opacity: 1;
58+
&__data-container {
59+
/* opacity: 1;
5160
transition: opacity $animation-duration;
5261
min-width: calc($dashboard-box-info-width - $content-margin-desktop-left - $content-margin-desktop-right);
5362
5463
@include responsive(phone) {
5564
min-width: calc(100% - $content-margin-mobile * 2);
5665
} */
57-
}
66+
}
5867

59-
&__icon {
60-
@include responsive(desktop) {
61-
display: none;
62-
}
63-
&--expand {
64-
margin: 0 auto;
65-
position: absolute;
66-
left: 0;
67-
right: 0;
68-
top: 10px;
69-
z-index: 4;
70-
}
71-
&--collapse {
72-
width: 100%;
73-
margin-bottom: 0.5rem;
74-
}
68+
&__icon {
69+
position: absolute;
70+
right: 10px;
71+
top: 10px;
72+
@include responsive(desktop) {
73+
display: none;
74+
}
75+
&--expand {
76+
margin: 0 auto;
77+
position: absolute;
78+
left: 0;
79+
right: 0;
80+
top: 10px;
81+
z-index: 4;
7582
}
83+
&--collapse {
84+
width: 100%;
85+
margin-bottom: 0.5rem;
86+
}
87+
}
7688

77-
&__content {
78-
margin: 10px $content-margin-desktop-right 10px $content-margin-desktop-left;
89+
&__content {
90+
margin: 10px $content-margin-desktop-right 10px $content-margin-desktop-left;
7991

80-
@include responsive(desktop-down) {
81-
margin: 10px $content-margin-mobile;
82-
}
92+
@include responsive(desktop-down) {
93+
margin: 10px $content-margin-mobile;
8394
}
95+
}
8496

85-
&__image {
86-
@include responsive(desktop) {
87-
transition: opacity 0.5s;
88-
opacity: 0.5;
97+
&__image {
98+
@include responsive(desktop) {
99+
transition: opacity 0.5s;
100+
opacity: 0.5;
89101

90-
&:hover {
91-
opacity: 1;
92-
}
93-
}
102+
&:hover {
103+
opacity: 1;
104+
}
94105
}
106+
}
95107

96-
&__scroll-container {
97-
width: 100%;
98-
height: 100%;
99-
overflow: auto;
108+
&__scroll-container {
109+
width: 100%;
110+
height: 100%;
111+
overflow: auto;
100112

101-
opacity: 1;
102-
transition: opacity $animation-duration;
113+
opacity: 1;
114+
transition: opacity $animation-duration;
103115

104-
min-width: $dashboard-box-info-width;
105-
@include responsive(phone) {
106-
min-width: 60vw;
107-
padding-bottom: 40px;
108-
}
116+
min-width: $dashboard-box-info-width;
117+
@include responsive(phone) {
118+
min-width: calc(100vw - $margin-right-mobile-expanded - 1px);
119+
padding-bottom: 40px;
109120
}
121+
}
110122
}

‎webapp/src/components/dashboard_header/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const DashboardHeader = () => {
124124
<div className="sbd-search-grid">
125125
<FocusTrap active>
126126
<TextInput
127+
size="md"
127128
defaultValue={searchContent}
128129
placeholder="Search by name"
129130
icon={<Search size={16} />}
@@ -132,7 +133,7 @@ const DashboardHeader = () => {
132133
}}
133134
error={searchError}
134135
/>
135-
<Button onClick={handleSearchExecution}>Search</Button>
136+
<Button size="md" onClick={handleSearchExecution}>Search</Button>
136137
</FocusTrap>
137138
</div>
138139

0 commit comments

Comments
 (0)