Skip to content

Commit 3a254e1

Browse files
AlecRustjaapmarcus
AlecRust
and
jaapmarcus
authored
Re-implement RRD charts in Chart.js (hestiacp#3452)
* Update Chart.js version * Re-implement Chart.js RRD charts * Only load Chart.js on RRD page * Improve charts on dark theme * Improve chart labelling * Increase size of charts * Refactor chart theming * Add Y axis labels and refine * Set chart line colors in theme * Limit height of charts * Improve $serviceUnits code * Improve service codes Mysql and missing postgresql could also be mysql_remotehost or pgsql_remotehost * Use daily, weekly, montly instead day week and month * Tidy RRD export labels * Tidy * Simplify docs links --------- Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>
1 parent 15fe882 commit 3a254e1

File tree

16 files changed

+203
-115
lines changed

16 files changed

+203
-115
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<p align="center">
1010
<a href="https://www.hestiacp.com/">HestiaCP.com</a> |
11-
<a href="https://hestiacp.com/docs/introduction/getting-started.html">Documentation</a> |
11+
<a href="https://hestiacp.com/docs/">Documentation</a> |
1212
<a href="https://forum.hestiacp.com/">Forum</a> |
1313
<a href="https://discord.gg/nXRUZch">Discord</a>
1414
<br/><br/>

‎bin/v-export-rrd‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
#----------------------------------------------------------#
1010

1111
chart=$1
12-
timespan=${2-hour}
12+
timespan=${2-daily}
1313

1414
# Includes
1515
# shellcheck source=/etc/hestiacp/hestia.conf
@@ -33,8 +33,8 @@ function generate_load_table() {
3333
rrdtool xport --json -s $start -e $end --step $step \
3434
DEF:la=$RRD/la/la.rrd:LA:AVERAGE \
3535
DEF:pr=$RRD/la/la.rrd:PR:AVERAGE \
36-
XPORT:la:load \
37-
XPORT:pr:Proccess
36+
XPORT:la:Load \
37+
XPORT:pr:Processes
3838
}
3939

4040
function generate_mem_table() {
@@ -115,21 +115,21 @@ function generate_net_table() {
115115
DEF:inoctets=$RRD/net/$host.rrd:RX:AVERAGE \
116116
DEF:outoctets=$RRD/net/$host.rrd:TX:AVERAGE \
117117
XPORT:inoctets:"Input (rx)" \
118-
XPORT:outoctets:"Output (rx)"
118+
XPORT:outoctets:"Output (tx)"
119119
else
120120
echo "Does not exists"
121121
exit 1
122122
fi
123123
}
124124

125-
if [ "$timespan" = "week" ]; then
125+
if [ "$timespan" = "weekly" ]; then
126126
start=$(date -d "7 days ago" +%s)
127127
# every 30 min
128128
step=3600
129-
elif [ "$timespan" = "month" ]; then
129+
elif [ "$timespan" = "monthly" ]; then
130130
start=$(date -d "1 month ago" +%s)
131131
step=21600
132-
elif [ "$timespan" = "year" ]; then
132+
elif [ "$timespan" = "yearly" ]; then
133133
start=$(date -d "1 year ago" +%s)
134134
step=172800
135135
else

‎install/hst-install-debian.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2154,7 +2154,7 @@ we hope that you enjoy using it as much as we do!
21542154
Please feel free to contact us at any time if you have any questions,
21552155
or if you encounter any bugs or problems:
21562156
2157-
Documentation: https://hestiacp.com/docs/introduction/getting-started.html
2157+
Documentation: https://hestiacp.com/docs/
21582158
Forum: https://forum.hestiacp.com/
21592159
Discord: https://discord.gg/nXRUZch
21602160
GitHub: https://www.github.com/hestiacp/hestiacp
@@ -2181,7 +2181,7 @@ cat $tmpfile
21812181
rm -f $tmpfile
21822182

21832183
# Add welcome message to notification panel
2184-
$HESTIA/bin/v-add-user-notification admin 'Welcome to Hestia Control Panel!' '<br>You are now ready to begin <a href="/add/user/">adding user accounts</a> and <a href="/add/web/">domains</a>. For help and assistance, view the <a href="https://hestiacp.com/docs/introduction/getting-started.html" target="_blank">documentation</a> or visit our <a href="https://forum.hestiacp.com/" target="_blank">user forum</a>.<br><br>Please report any bugs or issues via <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
2184+
$HESTIA/bin/v-add-user-notification admin 'Welcome to Hestia Control Panel!' '<br>You are now ready to begin <a href="/add/user/">adding user accounts</a> and <a href="/add/web/">domains</a>. For help and assistance, view the <a href="https://hestiacp.com/docs/" target="_blank">documentation</a> or visit our <a href="https://forum.hestiacp.com/" target="_blank">user forum</a>.<br><br>Please report any bugs or issues via <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
21852185

21862186
# Clean-up
21872187
# Sort final configuration file

‎install/hst-install-ubuntu.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2202,7 +2202,7 @@ we hope that you enjoy using it as much as we do!
22022202
Please feel free to contact us at any time if you have any questions,
22032203
or if you encounter any bugs or problems:
22042204
2205-
Documentation: https://hestiacp.com/docs/introduction/getting-started.html
2205+
Documentation: https://hestiacp.com/docs/
22062206
Forum: https://forum.hestiacp.com/
22072207
Discord: https://discord.gg/nXRUZch
22082208
GitHub: https://www.github.com/hestiacp/hestiacp
@@ -2229,7 +2229,7 @@ cat $tmpfile
22292229
rm -f $tmpfile
22302230

22312231
# Add welcome message to notification panel
2232-
$HESTIA/bin/v-add-user-notification admin 'Welcome to Hestia Control Panel!' '<br>You are now ready to begin <a href="/add/user/">adding user accounts</a> and <a href="/add/web/">domains</a>. For help and assistance, view the <a href="https://hestiacp.com/docs/introduction/getting-started.html" target="_blank">documentation</a> or visit our <a href="https://forum.hestiacp.com/" target="_blank">user forum</a>.<br><br>Please report any bugs or issues via <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
2232+
$HESTIA/bin/v-add-user-notification admin 'Welcome to Hestia Control Panel!' '<br>You are now ready to begin <a href="/add/user/">adding user accounts</a> and <a href="/add/web/">domains</a>. For help and assistance, view the <a href="https://hestiacp.com/docs/" target="_blank">documentation</a> or visit our <a href="https://forum.hestiacp.com/" target="_blank">user forum</a>.<br><br>Please report any bugs or issues via <a href="https://github.com/hestiacp/hestiacp/issues" target="_blank"><i class="fab fa-github"></i> GitHub</a>.<br><br><b>Have a wonderful day!</b><br><br><i class="fas fa-heart icon-red"></i> The Hestia Control Panel development team'
22332233

22342234
# Clean-up
22352235
# Sort final configuration file

‎web/css/src/themes/dark.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
--icon-color-maroon: #ff3478;
2222
--icon-color-green: #37cf39;
2323
--icon-color-blue: #0092f4;
24+
25+
/* Charts */
26+
--chart-label-color: #cdcdcd;
27+
--chart-grid-color: #434343;
2428
}
2529

2630
b,

‎web/css/src/themes/default.css‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@
3535
--icon-color-orange: #ffc043;
3636
--icon-color-blue: #326b9b;
3737
--icon-color-lightblue: #6eb6f0;
38+
39+
/* Charts */
40+
--chart-label-color: #7c7c7c;
41+
--chart-grid-color: #e9e9e9;
42+
--chart-line-1-color: var(--icon-color-blue);
43+
--chart-line-2-color: var(--icon-color-maroon);
44+
--chart-line-3-color: var(--icon-color-green);
3845
}
3946

4047
/* App header
@@ -382,7 +389,7 @@
382389
background-color: rgb(0 0 0 / 5%);
383390

384391
& .main-menu-toggle-label {
385-
color: #c36;
392+
color: var(--color-text-link-hover);
386393
}
387394
}
388395

@@ -442,16 +449,16 @@
442449
background-color: rgb(0 0 0 / 5%);
443450

444451
& .main-menu-item-label {
445-
color: #c36;
452+
color: var(--color-text-link-hover);
446453
}
447454
}
448455

449456
&.active {
450457
& .main-menu-item-label {
451-
color: #c36;
458+
color: var(--color-text-link-hover);
452459

453460
& .fas {
454-
color: #c36;
461+
color: var(--color-text-link-hover);
455462
}
456463
}
457464
}
@@ -467,7 +474,7 @@
467474
&:hover,
468475
&.active {
469476
background-color: transparent;
470-
border-bottom-color: #c36;
477+
border-bottom-color: var(--color-text-link-hover);
471478
}
472479
}
473480

@@ -765,12 +772,9 @@
765772
text-transform: uppercase;
766773
font-weight: 600;
767774

768-
&.selected {
769-
color: #c36;
770-
}
771-
775+
&.selected,
772776
&:hover {
773-
color: #c36;
777+
color: var(--color-text-link-hover);
774778
}
775779

776780
&:active {
@@ -1393,10 +1397,6 @@
13931397
max-width: 920px;
13941398
}
13951399

1396-
.form-container-narrow {
1397-
max-width: 810px;
1398-
}
1399-
14001400
@media (--viewport-medium) {
14011401
.sidebar-right-container {
14021402
display: grid;
@@ -1558,7 +1558,7 @@
15581558
}
15591559

15601560
.form-link {
1561-
color: #326b9b;
1561+
color: var(--color-text-link);
15621562
cursor: pointer;
15631563
text-decoration: underline;
15641564
font-weight: 600;
@@ -1836,7 +1836,7 @@
18361836
font-weight: 500;
18371837
padding: 3px 25px;
18381838
user-select: none;
1839-
color: #30659d;
1839+
color: var(--color-text-link);
18401840
min-width: 100px;
18411841
text-align: center;
18421842
text-shadow: 0 1px 1px rgb(255 255 255 / 85%);
@@ -2066,7 +2066,7 @@
20662066
box-shadow: inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%),
20672067
0 4px 6px rgb(190 190 190 / 40%);
20682068
font-weight: 600;
2069-
color: #30659d;
2069+
color: var(--color-text-link);
20702070
cursor: pointer;
20712071
position: relative;
20722072
padding: 8px 18px;
@@ -2168,7 +2168,7 @@
21682168
text-transform: uppercase;
21692169

21702170
@media (--viewport-small) {
2171-
color: #326b9b;
2171+
color: var(--color-text-link);
21722172

21732173
&:hover {
21742174
color: #0077c6;
@@ -2377,7 +2377,7 @@
23772377

23782378
&:hover,
23792379
&[aria-selected="true"] {
2380-
color: #c36;
2380+
color: var(--color-text-link-hover);
23812381
}
23822382

23832383
&:active {
@@ -2548,10 +2548,10 @@
25482548
color: #53ba55;
25492549

25502550
& a {
2551-
color: #326b9b;
2551+
color: var(--color-text-link);
25522552

25532553
&:hover {
2554-
color: #c36;
2554+
color: var(--color-text-link-hover);
25552555
}
25562556

25572557
&:active {

‎web/css/src/themes/vestia.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ strong {
182182
}
183183

184184
& #btn-back {
185-
color: #30659d;
185+
color: #326b9b;
186186
background: none;
187187
text-shadow: none;
188188
text-transform: none;
@@ -278,7 +278,7 @@ strong {
278278
}
279279

280280
.button-secondary {
281-
color: #414141;
281+
color: var(--color-text-link);
282282
text-shadow: none;
283283
text-transform: none;
284284
border-color: #bbb;

‎web/css/src/utilities.css‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,6 @@
109109
padding-left: 30px !important;
110110
}
111111

112-
.u-rounded {
113-
border-radius: var(--border-radius-base) !important;
114-
}
115-
116112
.u-pos-relative {
117113
position: relative !important;
118114
}
@@ -133,17 +129,16 @@
133129
min-height: 600px !important;
134130
}
135131

132+
.u-max-height300 {
133+
max-height: 300px !important;
134+
}
135+
136136
.u-side-by-side {
137137
display: flex !important;
138138
justify-content: space-between !important;
139139
align-items: center !important;
140140
}
141141

142-
.u-image-fluid {
143-
max-width: 100% !important;
144-
height: auto !important;
145-
}
146-
147142
.u-list-bulleted {
148143
list-style: disc !important;
149144
padding-left: 40px !important;

0 commit comments

Comments
 (0)