Skip to content

Commit 5748d90

Browse files
ArielMAJArielMAJ
authored
Merge pull request #10 from ArielMAJ/fix/responsivity
Fix/responsivity
2 parents cbf4085 + 426aee4 commit 5748d90

7 files changed

Lines changed: 218 additions & 142 deletions

File tree

‎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.2.1"
3+
version = "0.3.0"
44
description = ""
55
authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
66
readme = "README.md"

‎api/src/main.py‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,26 @@
2020
)
2121

2222

23-
@app.get("/{username}/repos")
24-
async def data(username: str):
23+
@app.get("/{username}/{information}")
24+
async def data(username: str, information: str):
25+
await asyncio.sleep(random() * 5)
2526
gh_repositories = get_paginated_data(username)
27+
return calc_repo_info_for_plotly(gh_repositories, information)
2628

27-
forks = [
29+
def calc_repo_info_for_plotly(gh_repositories, information: str):
30+
return [
2831
{
2932
"values": [
30-
fork_count := len(
31-
list(filter(lambda repo: repo["fork"], gh_repositories))
33+
count := len(
34+
list(filter(lambda repo: repo.get(information, False), gh_repositories))
3235
),
33-
len(gh_repositories) - fork_count,
36+
len(gh_repositories) - count,
3437
],
35-
"labels": ["Forked Repositories", "Owned Repositories"],
38+
"labels": [information.capitalize().replace("_", " "), "Otherwise"],
3639
"type": "pie",
3740
"hole": ".4",
3841
}
3942
]
40-
await asyncio.sleep(random() * 7)
41-
return {"forks": forks}
42-
4343

4444
def get_paginated_data(username: str):
4545
def parse_data(data):

‎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.2.1",
3+
"version": "0.3.0",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",

‎vue-front/src/App.vue‎

Lines changed: 58 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,72 @@
11
<template>
22
<div id="app">
3-
<v-container>
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" />
8-
</v-col>
9-
<v-col class="plotly-chart center-content">
10-
<LoadingHeart v-if="plotInfo2.data === null" />
11-
<PlotlyChart v-else :propData="plotInfo2" divId="plot2" />
12-
</v-col>
13-
<v-col class="plotly-chart center-content">
14-
<Loading v-if="plotInfo3.data === null" />
15-
<PlotlyChart v-else :propData="plotInfo3" divId="plot3" />
16-
</v-col>
17-
</v-row>
18-
</v-container>
3+
<v-row no-gutters>
4+
<v-col
5+
v-bind:key="item"
6+
v-for="item in plotItems"
7+
class="plotly-chart center-content"
8+
>
9+
<h2 class="margin-up" v-if="item.chartData !== null">
10+
{{ item.chartData[0].labels[0] }}
11+
</h2>
12+
<Loading v-if="item.chartData === null" />
13+
<PlotlyChart
14+
v-else
15+
:chartData="item.chartData"
16+
:divId="item.information"
17+
/>
18+
</v-col>
19+
</v-row>
1920
</div>
2021
</template>
2122
<script>
2223
import Loading from "./components/Loading.vue";
23-
import LoadingHeart from "./components/LoadingHeart.vue";
2424
import PlotlyChart from "./components/PlotlyChart.vue";
2525
2626
export default {
2727
name: "app",
2828
components: {
2929
PlotlyChart,
3030
Loading,
31-
LoadingHeart
3231
},
3332
data: function () {
3433
return {
35-
plotInfo1: {
36-
data: null,
37-
},
38-
plotInfo2: {
39-
data: null,
40-
},
41-
plotInfo3: {
42-
data: null,
43-
},
34+
plotItems: [
35+
{ information: "allow_forking", chartData: null },
36+
{ information: "archived", chartData: null },
37+
{ information: "disabled", chartData: null },
38+
{ information: "fork", chartData: null },
39+
{ information: "has_discussions", chartData: null },
40+
{ information: "has_downloads", chartData: null },
41+
{ information: "has_issues", chartData: null },
42+
{ information: "has_pages", chartData: null },
43+
{ information: "has_projects", chartData: null },
44+
{ information: "has_wiki", chartData: null },
45+
{ information: "is_template", chartData: null },
46+
{ information: "private", chartData: null },
47+
{ information: "web_commit_signoff_required", chartData: null },
48+
],
4449
};
4550
},
4651
async mounted() {
47-
try {
48-
this.fetchData('a').then((data) => data.json()).then(json => this.plotInfo1.data = json.forks)
49-
this.fetchData('b').then((data) => data.json()).then(json => this.plotInfo2.data = json.forks)
50-
this.fetchData('c').then((data) => data.json()).then(json => this.plotInfo3.data = json.forks)
51-
52-
} catch (error) {
53-
console.error("Error fetching data:", error);
54-
}
52+
this.plotItems.forEach((item) => {
53+
this.fetchData("a", item);
54+
});
5555
},
5656
methods: {
57-
async fetchData(username) {
57+
async fetchData(username, item) {
5858
try {
59-
console.log("Fetching data...", process.env.VUE_APP_BACKEND_ROOT_ENDPOINT + `${username}/repos` );
60-
return fetch(
61-
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT + `${username}/repos`
59+
console.log(
60+
"Fetching data...",
61+
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
62+
`${username}/${item.information}`
63+
);
64+
const resp = await fetch(
65+
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
66+
`${username}/${item.information}`
6267
);
68+
item.chartData = await resp.json();
69+
console.log(item);
6370
} catch (error) {
6471
console.error("Error fetching data:", error);
6572
}
@@ -84,12 +91,10 @@ export default {
8491
min-height: 100vh;
8592
min-width: 100vw;
8693
max-width: 100vw;
87-
position: absolute;
8894
}
8995
9096
body {
9197
scroll-behavior: smooth;
92-
overflow-y: hidden;
9398
overflow-x: hidden;
9499
min-width: 100vw;
95100
max-width: 100vw;
@@ -100,12 +105,22 @@ body {
100105
border: 1px solid #ccc;
101106
border-radius: 50px;
102107
background-color: transparent;
108+
height: 325px;
109+
min-width: 325px;
110+
max-width: 40%;
103111
}
104112
113+
.margin-up {
114+
margin-top: 20px;
115+
}
105116
.center-content {
106117
display: flex;
118+
flex-direction: column;
107119
align-items: center;
108-
justify-content: center;
109-
height: 350px;
120+
justify-content: space-around;
121+
}
122+
123+
::-webkit-scrollbar {
124+
display: none;
110125
}
111126
</style>

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

Lines changed: 31 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,40 @@
11
<template>
2-
<div class="lds-ellipsis">
3-
<div></div>
4-
<div></div>
5-
<div></div>
6-
<div></div>
7-
</div>
2+
<component :is="loadingComponent" />
83
</template>
94

105
<script>
6+
import LoadingDots from "./LoadingDots.vue";
7+
import LoadingHeart from "./LoadingHeart.vue";
118
129
export default {
13-
name: "loading-component",
10+
name: "loading-component",
11+
components: {
12+
LoadingDots,
13+
LoadingHeart,
14+
},
15+
props: {
16+
loadingComponentChoice: {
17+
type: String,
18+
default: "Any",
19+
},
20+
},
21+
computed: {
22+
loadingComponent() {
23+
switch (this.loadingComponentChoice) {
24+
case "Dots":
25+
return LoadingDots;
26+
case "Heart":
27+
return LoadingHeart;
28+
default:
29+
return this.randomComponentChoice;
30+
}
31+
},
32+
randomComponentChoice() {
33+
const componentKeys = Object.keys(this.$options.components);
34+
return componentKeys[Math.floor(Math.random() * componentKeys.length)];
35+
},
36+
},
1437
};
1538
</script>
1639

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>
40+
<style scoped></style>

0 commit comments

Comments
 (0)