Skip to content

Commit 1f1a980

Browse files
ArielMAJArielMAJ
authored
Merge pull request #25 from ArielMAJ/feat/search-bar
Feat/search bar
2 parents 985c5f0 + 986cce3 commit 1f1a980

6 files changed

Lines changed: 151 additions & 82 deletions

File tree

‎api/poetry.lock‎

Lines changed: 3 additions & 3 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.3.3"
3+
version = "0.4.0"
44
description = ""
55
authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
66
readme = "README.md"

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

‎vue-front/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
<title>GitHub Visualization</title>
99
</head>
1010
<body>
1111
<noscript>

‎vue-front/src/App.vue‎

Lines changed: 39 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,50 @@
11
<template>
22
<div class="app justify-center">
3-
<v-row no-gutters class="justify-center">
4-
<v-col
5-
v-bind:key="item"
6-
v-for="item in plotItems"
7-
class="plotly-chart center-content"
3+
<!-- <v-responsive class="mx-auto" max-width="344"> -->
4+
<v-responsive id="search-bar" max-width="700">
5+
<v-text-field
6+
v-model="username"
7+
label="Search for a GitHub username"
8+
hint="Write a GitHub username and press enter to visualize their account information"
9+
placeholder="ArielMAJ"
10+
clearable
11+
type="text"
12+
variant="solo-filled"
13+
:rules="[rules.required]"
14+
@keyup.enter="search"
815
>
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>
16+
</v-text-field>
17+
</v-responsive>
18+
<!-- <v-btn
19+
class="white--text"
20+
color="primary"
21+
@click="pieChartModalOpen = !pieChartModalOpen"
22+
>Open Repository Visualization
23+
</v-btn> -->
24+
<PieChartModal v-if="pieChartModalOpen" :username="this.username" />
2025
</div>
2126
</template>
2227
<script>
23-
import Loading from "./components/Loading.vue";
24-
import PlotlyChart from "./components/PlotlyChart.vue";
28+
import PieChartModal from "./modals/PieChartModal.vue";
2529
2630
export default {
2731
name: "app",
2832
components: {
29-
PlotlyChart,
30-
Loading,
33+
PieChartModal,
3134
},
3235
data: function () {
3336
return {
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-
],
37+
pieChartModalOpen: false,
38+
rules: {
39+
required: (value) => !!value || "Field is required",
40+
},
41+
username: "",
4942
};
5043
},
51-
async mounted() {
52-
this.plotItems.forEach((item) => {
53-
this.fetchData("a", item);
54-
});
55-
},
5644
methods: {
57-
async fetchData(username, item) {
58-
try {
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}`
67-
);
68-
item.chartData = await resp.json();
69-
console.log(item);
70-
} catch (error) {
71-
console.error("Error fetching data:", error);
45+
search() {
46+
if (this.username !== "") {
47+
this.pieChartModalOpen = true;
7248
}
7349
},
7450
},
@@ -86,11 +62,13 @@ export default {
8662
-webkit-font-smoothing: antialiased;
8763
-moz-osx-font-smoothing: grayscale;
8864
text-align: center;
89-
color: #2c3e50;
65+
color: rgb(4, 162, 4);
9066
background-color: black;
9167
min-height: 100vh;
9268
min-width: 100vw;
9369
max-width: 100vw;
70+
margin: 0;
71+
position: absolute;
9472
}
9573
9674
body {
@@ -100,31 +78,16 @@ body {
10078
max-width: 100vw;
10179
}
10280
103-
.plotly-chart {
104-
margin: 20px;
105-
border: 1px solid #ccc;
106-
border-radius: 50px;
107-
background-color: transparent;
108-
height: 325px;
109-
min-width: 325px;
110-
max-width: 40%;
111-
}
112-
113-
.margin-up {
114-
margin-top: 20px;
115-
}
116-
.center-content {
117-
display: flex;
118-
flex-direction: column;
119-
align-items: center;
120-
justify-content: space-around;
121-
}
122-
12381
.justify-center {
12482
justify-content: center;
12583
}
12684
12785
::-webkit-scrollbar {
12886
display: none;
12987
}
88+
89+
#search-bar {
90+
margin: auto;
91+
margin-top: 20px;
92+
}
13093
</style>

‎vue-front/src/modals/PieChartModal.vue‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<v-row no-gutters class="justify-center">
3+
<v-col
4+
v-bind:key="item"
5+
v-for="item in plotItems"
6+
class="plotly-chart center-content"
7+
>
8+
<h2 class="margin-up" v-if="item.chartData !== null">
9+
{{ item.chartData[0].labels[0] }}
10+
</h2>
11+
<Loading v-if="item.chartData === null" />
12+
<PlotlyChart
13+
v-else
14+
:chartData="item.chartData"
15+
:divId="item.information"
16+
/>
17+
</v-col>
18+
</v-row>
19+
</template>
20+
<script>
21+
import Loading from "../components/Loading.vue";
22+
import PlotlyChart from "../components/PlotlyChart.vue";
23+
24+
export default {
25+
name: "pie-chart-modal",
26+
components: {
27+
PlotlyChart,
28+
Loading,
29+
},
30+
props: {
31+
username: {
32+
type: String,
33+
required: true,
34+
},
35+
},
36+
data: function () {
37+
return {
38+
plotItems: [
39+
{ information: "allow_forking", chartData: null },
40+
{ information: "archived", chartData: null },
41+
{ information: "disabled", chartData: null },
42+
{ information: "fork", chartData: null },
43+
{ information: "has_discussions", chartData: null },
44+
{ information: "has_downloads", chartData: null },
45+
{ information: "has_issues", chartData: null },
46+
{ information: "has_pages", chartData: null },
47+
{ information: "has_projects", chartData: null },
48+
{ information: "has_wiki", chartData: null },
49+
{ information: "is_template", chartData: null },
50+
{ information: "private", chartData: null },
51+
{ information: "web_commit_signoff_required", chartData: null },
52+
],
53+
};
54+
},
55+
async mounted() {
56+
this.plotItems.forEach((item) => {
57+
this.fetchData(this.username, item);
58+
});
59+
},
60+
methods: {
61+
async fetchData(username, item) {
62+
try {
63+
console.log(
64+
"Fetching data...",
65+
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
66+
`${username}/${item.information}`
67+
);
68+
const resp = await fetch(
69+
process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
70+
`${username}/${item.information}`
71+
);
72+
item.chartData = await resp.json();
73+
console.log(item);
74+
} catch (error) {
75+
console.error("Error fetching data:", error);
76+
}
77+
},
78+
},
79+
};
80+
</script>
81+
82+
<style scoped>
83+
.plotly-chart {
84+
margin: 20px;
85+
border: 1px solid #ccc;
86+
border-radius: 50px;
87+
background-color: transparent;
88+
height: 325px;
89+
min-width: 325px;
90+
max-width: 40%;
91+
}
92+
93+
.margin-up {
94+
margin-top: 20px;
95+
}
96+
.center-content {
97+
display: flex;
98+
flex-direction: column;
99+
align-items: center;
100+
justify-content: space-around;
101+
}
102+
103+
.justify-center {
104+
justify-content: center;
105+
}
106+
</style>

0 commit comments

Comments
 (0)