Skip to content

Commit 1092e6a

Browse files
PsyChonekPsyChonek
committed
chart
1 parent c10a847 commit 1092e6a

File tree

14 files changed

+4427
-259
lines changed

14 files changed

+4427
-259
lines changed

‎services/web-nuxt/components/common/flexCenterStartList.vue‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

services/web-nuxt/components/layout/footer.vue renamed to services/web-nuxt/components/layout/bot.vue

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
<template>
2-
<footer class="footer">
2+
<div class="bot">
33
<div class="content has-text-centered">
44
<p>
5-
&copy; Daniel Vazač. Check out my GitHub:
5+
&copy; Daniel Vazač. Check out my GitHub:
66
<a href="https://github.com/PsyChonek" target="_blank">PsyChonek</a>
77
</p>
88
</div>
9-
</footer>
9+
</div>
1010
</template>
1111

1212
<script>
1313
export default {
14-
name: 'Footer'
14+
name: 'Bot'
1515
}
1616
</script>
1717

1818
<style scoped>
19-
20-
/* Footer styling */
21-
.footer {
19+
.bot {
2220
color: white;
2321
text-align: center;
24-
padding: 0.25rem;
22+
padding: 1rem;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
2526
}
2627
27-
.footer a {
28+
.bot a {
2829
color: white;
2930
text-decoration: underline;
3031
}

‎services/web-nuxt/components/layout/main.vue‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎services/web-nuxt/components/layout/mid.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="mid">
3+
<SensorChart :chart-data="chartData" :chart-options="chartOptions"/>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'Mid',
10+
data() {
11+
return {
12+
chartData: {
13+
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
14+
datasets: [{
15+
label: '# of Votes',
16+
data: [12, 19, 3, 5, 2, 3],
17+
backgroundColor: [
18+
'rgba(255, 99, 132, 0.2)',
19+
'rgba(54, 162, 235, 0.2)',
20+
'rgba(255, 206, 86, 0.2)',
21+
'rgba(75, 192, 192, 0.2)',
22+
'rgba(153, 102, 255, 0.2)',
23+
'rgba(255, 159, 64, 0.2)'
24+
],
25+
borderColor: [
26+
'rgba(255, 99, 132, 1)',
27+
'rgba(54, 162, 235, 1)',
28+
'rgba(255, 206, 86, 1)',
29+
'rgba(75, 192, 192, 1)',
30+
'rgba(153, 102, 255, 1)',
31+
'rgba(255, 159, 64, 1)'
32+
],
33+
borderWidth: 1
34+
}]
35+
},
36+
chartOptions: {
37+
responsive: true,
38+
maintainAspectRatio: true,
39+
}
40+
}
41+
}
42+
}
43+
</script>
44+
45+
<style scoped>
46+
.mid {
47+
flex: 1;
48+
padding: 1rem;
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: center;
52+
align-items: center;
53+
}
54+
</style>

‎services/web-nuxt/components/layout/page.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div class="layout">
3-
<LayoutHeader/>
4-
<LayoutMain/>
5-
<LayoutFooter/>
3+
<LayoutTop/>
4+
<LayoutMid/>
5+
<LayoutBot/>
66
</div>
77
</template>
88

@@ -13,11 +13,9 @@ export default {
1313
</script>
1414

1515
<style scoped>
16-
/* Base layout styling */
1716
.layout {
1817
display: flex;
1918
flex-direction: column;
20-
/* Ensure page height covers the viewport */
2119
min-height: 100vh;
2220
}
2321
</style>

services/web-nuxt/components/layout/header.vue renamed to services/web-nuxt/components/layout/top.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<template>
2-
<div class="header">
2+
<div class="top">
33
<h1 class="title">Climate Tracker</h1>
4-
<CommonFlexCenterStartList :items="items">
5-
<template v-slot:default="slotProps">
6-
<SensorItem :item="slotProps.item"/>
7-
</template>
8-
</CommonFlexCenterStartList>
4+
<SensorItems :items="items"/>
95
</div>
106
</template>
117

128
<script>
139
1410
export default {
15-
name: 'Header',
11+
name: 'Top',
1612
data() {
1713
return {
1814
items: []
1915
}
2016
},
2117
mounted() {
18+
2219
const generatedItems = [
2320
{ name: 'Sensor A', status: 'active' },
2421
{ name: 'Sensor B', status: 'inactive' },
@@ -37,7 +34,7 @@ export default {
3734
</script>
3835

3936
<style scoped>
40-
.header {
37+
.top {
4138
display: flex;
4239
justify-content: space-between;
4340
align-items: center;

‎services/web-nuxt/components/sensorChart.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
<Bar :data="chartData" :options="chartOptions" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import { Bar } from 'vue-chartjs'
9+
10+
export default {
11+
name: 'ChartComponent',
12+
components: {
13+
Bar,
14+
},
15+
props: {
16+
chartData: {
17+
type: Object,
18+
required: true,
19+
},
20+
chartOptions: {
21+
type: Object,
22+
default: () => ({
23+
responsive: true,
24+
maintainAspectRatio: false,
25+
}),
26+
},
27+
}
28+
}
29+
</script>

‎services/web-nuxt/components/sensorItem.vue‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎services/web-nuxt/components/sensorItems.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="grid-container">
3+
<slot v-for="(item, index) in items" :key="index" :item="item">
4+
<div class="grid-item">
5+
<p>{{ item.name }} - {{ item.status }}</p>
6+
</div>
7+
</slot>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'SensorItems',
14+
props: {
15+
items: {
16+
type: Array,
17+
required: true
18+
}
19+
},
20+
data() {
21+
return {
22+
fillers: 0,
23+
itemWidth: 0
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style scoped>
30+
.grid-container {
31+
display: grid;
32+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
33+
justify-items: center;
34+
gap: 16px;
35+
width: 100%;
36+
padding: 16px;
37+
}
38+
39+
.grid-item {
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
padding: 10px;
44+
border: 1px solid #ccc;
45+
box-sizing: border-box;
46+
}
47+
</style>

‎services/web-nuxt/eslint.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
2+
3+
export default createConfigForNuxt({
4+
// options here
5+
})

0 commit comments

Comments
 (0)