Skip to content

Commit 4395f62

Browse files
ArielMAJArielMAJ
authored
Merge pull request #5 from ArielMAJ/feat/loading
Feat/loading
2 parents b3a1568 + f846911 commit 4395f62

9 files changed

Lines changed: 236 additions & 38 deletions

File tree

‎api/.pre-commit-config.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ repos:
8888
args: [--filter-files, --profile=black, --src-path=src, --gitignore]
8989

9090
- repo: https://github.com/pre-commit/mirrors-prettier
91-
rev: v4.0.0-alpha.6
91+
rev: v4.0.0-alpha.7
9292
hooks:
9393
- id: prettier
9494
additional_dependencies:

‎api/poetry.lock‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎api/pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "api"
3-
version = "0.1.0"
3+
version = "0.2.0"
44
description = ""
55
authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
66
readme = "README.md"

‎api/src/main.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import asyncio
2+
from random import random
13
import re
24

35
import requests
@@ -35,6 +37,7 @@ async def data(username: str):
3537
"hole": ".4",
3638
}
3739
]
40+
await asyncio.sleep(3)
3841
return {"forks": forks}
3942

4043

‎vue-front/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "docs",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",

‎vue-front/src/App.vue‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,70 @@
11
<template>
22
<div id="app">
33
<v-container>
4-
<v-row no-gutters alignContent="center" justify="space-between">
5-
<v-col md="4">
6-
<PlotlyChart :propData="plotInfo" divId="plot1" />
4+
<v-row no-gutters justify="space-around">
5+
<v-col class="plotly-chart center-content">
6+
<Loading v-if="plotInfo1.data === null" />
7+
<PlotlyChart v-else :propData="plotInfo1" divId="plot1" />
78
</v-col>
8-
<v-col md="4">
9-
<PlotlyChart :propData="plotInfo" divId="plot2" />
9+
<v-col class="plotly-chart center-content">
10+
<LoadingHeart v-if="plotInfo2.data === null" />
11+
<PlotlyChart v-else :propData="plotInfo2" divId="plot2" />
1012
</v-col>
11-
<v-col md="4">
12-
<PlotlyChart :propData="plotInfo" divId="plot3" />
13+
<v-col class="plotly-chart center-content">
14+
<Loading v-if="plotInfo3.data === null" />
15+
<PlotlyChart v-else :propData="plotInfo3" divId="plot3" />
1316
</v-col>
1417
</v-row>
1518
</v-container>
1619
</div>
1720
</template>
1821
<script>
22+
import Loading from "./components/Loading.vue";
23+
import LoadingHeart from "./components/LoadingHeart.vue";
1924
import PlotlyChart from "./components/PlotlyChart.vue";
2025
2126
export default {
2227
name: "app",
2328
components: {
2429
PlotlyChart,
30+
Loading,
31+
LoadingHeart
2532
},
2633
data: function () {
2734
return {
28-
plotInfo: {
35+
plotInfo1: {
36+
data: null,
37+
},
38+
plotInfo2: {
39+
data: null,
40+
},
41+
plotInfo3: {
2942
data: null,
3043
},
31-
loadingData: true,
3244
};
3345
},
34-
mounted() {
35-
this.fetchData();
46+
async mounted() {
47+
try {
48+
const [data1, data2, data3] = await Promise.all([
49+
this.fetchData(),
50+
this.fetchData(),
51+
this.fetchData(),
52+
]);
53+
54+
this.plotInfo1.data = (await data1.json()).forks;
55+
this.plotInfo2.data = (await data2.json()).forks;
56+
this.plotInfo3.data = (await data3.json()).forks;
57+
} catch (error) {
58+
console.error("Error fetching data:", error);
59+
}
3660
},
3761
methods: {
3862
async fetchData() {
3963
try {
40-
this.loadingData = true;
41-
const response = await fetch(
64+
console.log("Fetching data...");
65+
return fetch(
4266
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT + "ArielMAJ/repos"
4367
);
44-
const data = await response.json();
45-
this.plotInfo.data = data.forks;
46-
console.log(this.plotInfo.data);
47-
this.loadingData = false;
4868
} catch (error) {
4969
console.error("Error fetching data:", error);
5070
}
@@ -65,7 +85,7 @@ export default {
6585
-moz-osx-font-smoothing: grayscale;
6686
text-align: center;
6787
color: #2c3e50;
68-
background-color: bisque;
88+
background-color: black;
6989
min-height: 100vh;
7090
min-width: 100vw;
7191
max-width: 100vw;
@@ -79,4 +99,18 @@ body {
7999
min-width: 100vw;
80100
max-width: 100vw;
81101
}
102+
103+
.plotly-chart {
104+
margin: 20px;
105+
border: 1px solid #ccc;
106+
border-radius: 50px;
107+
background-color: transparent;
108+
}
109+
110+
.center-content {
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
height: 350px;
115+
}
82116
</style>

‎vue-front/src/components/Loading.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<div class="lds-ellipsis">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
12+
export default {
13+
name: "loading-component",
14+
};
15+
</script>
16+
17+
<style scoped>
18+
.lds-ellipsis {
19+
display: inline-block;
20+
position: relative;
21+
width: 80px;
22+
height: 80px;
23+
}
24+
25+
.lds-ellipsis div {
26+
position: absolute;
27+
top: 33px;
28+
width: 13px;
29+
height: 13px;
30+
border-radius: 50%;
31+
background: #fff;
32+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
33+
}
34+
35+
.lds-ellipsis div:nth-child(1) {
36+
left: 8px;
37+
animation: lds-ellipsis1 0.6s infinite;
38+
}
39+
40+
.lds-ellipsis div:nth-child(2) {
41+
left: 8px;
42+
animation: lds-ellipsis2 0.6s infinite;
43+
}
44+
45+
.lds-ellipsis div:nth-child(3) {
46+
left: 32px;
47+
animation: lds-ellipsis2 0.6s infinite;
48+
}
49+
50+
.lds-ellipsis div:nth-child(4) {
51+
left: 56px;
52+
animation: lds-ellipsis3 0.6s infinite;
53+
}
54+
55+
@keyframes lds-ellipsis1 {
56+
0% {
57+
transform: scale(0);
58+
}
59+
60+
100% {
61+
transform: scale(1);
62+
}
63+
}
64+
65+
@keyframes lds-ellipsis3 {
66+
0% {
67+
transform: scale(1);
68+
}
69+
70+
100% {
71+
transform: scale(0);
72+
}
73+
}
74+
75+
@keyframes lds-ellipsis2 {
76+
0% {
77+
transform: translate(0, 0);
78+
}
79+
80+
100% {
81+
transform: translate(24px, 0);
82+
}
83+
}
84+
</style>

‎vue-front/src/components/LoadingHeart.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="lds-heart">
3+
<div></div>
4+
</div>
5+
</template>
6+
7+
<script>
8+
9+
export default {
10+
name: "loading-heart",
11+
};
12+
</script>
13+
14+
<style scoped>
15+
.lds-heart {
16+
display: inline-block;
17+
position: relative;
18+
width: 80px;
19+
height: 80px;
20+
transform: rotate(45deg);
21+
transform-origin: 40px 40px;
22+
}
23+
24+
.lds-heart div {
25+
top: 32px;
26+
left: 32px;
27+
position: absolute;
28+
width: 32px;
29+
height: 32px;
30+
background: #dfc;
31+
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
32+
}
33+
34+
.lds-heart div:after,
35+
.lds-heart div:before {
36+
content: " ";
37+
position: absolute;
38+
display: block;
39+
width: 32px;
40+
height: 32px;
41+
background: #dfc;
42+
}
43+
44+
.lds-heart div:before {
45+
left: -24px;
46+
border-radius: 50% 0 0 50%;
47+
}
48+
49+
.lds-heart div:after {
50+
top: -24px;
51+
border-radius: 50% 50% 0 0;
52+
}
53+
54+
@keyframes lds-heart {
55+
0% {
56+
transform: scale(0.95);
57+
}
58+
59+
5% {
60+
transform: scale(1.1);
61+
}
62+
63+
39% {
64+
transform: scale(0.85);
65+
}
66+
67+
45% {
68+
transform: scale(1);
69+
}
70+
71+
60% {
72+
transform: scale(0.95);
73+
}
74+
75+
100% {
76+
transform: scale(0.9);
77+
}
78+
}
79+
</style>

‎vue-front/src/components/PlotlyChart.vue‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
<template>
2-
<div
3-
class="plotly-chart"
4-
ref="container"
5-
:id="divId"
6-
:style="{
7-
height: height,
8-
width: width,
9-
}"
10-
></div>
2+
<div ref="container" :id="divId" :style="{
3+
height: height,
4+
width: width,
5+
}"></div>
116
</template>
127

138
<script>
@@ -80,11 +75,4 @@ export default {
8075
};
8176
</script>
8277

83-
<style scoped>
84-
.plotly-chart {
85-
/* margin: 20px auto; */
86-
border: 1px solid #ccc;
87-
border-radius: 50px;
88-
background-color: transparent;
89-
}
90-
</style>
78+
<style scoped></style>

0 commit comments

Comments
 (0)