Skip to content

Commit 9a4f2b4

Browse files
akashraj9828akashraj9828
committed
Added new commit analysis chart // moved pinned repo section to middle
1 parent e40c199 commit 9a4f2b4

File tree

4 files changed

+127
-83
lines changed

4 files changed

+127
-83
lines changed

‎src/Components/Charts/BarChart.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function BarChart({ data, height, width, max_bars, accumulate_remaining }) {
135135
]}
136136
// borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
137137
borderColor="white"
138-
borderWidth={3}
138+
borderWidth={1}
139139
axisTop={null}
140140
axisRight={null}
141141
// axisLeft={null}

‎src/Components/Charts/PieChart.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ function PieChart({ data, height, width, max_slices,accumulate_remaining }) {
120120
{
121121
anchor: 'right',
122122
direction: 'column',
123-
translateX: 150,
123+
translateX: 130,
124124
translateY: 0,
125125
itemWidth: 100,
126126
itemHeight: 25,

‎src/Components/Views/Home.js‎

Lines changed: 112 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ class Home extends React.Component {
5353
// API CALL TO GET BASIC USER INFO
5454
DataProvider.getUserInfo(this.state.username).then((userData) => {
5555
if (userData.errors) return;
56-
this.setState({
57-
basicInfo: userData,
58-
user_id: userData.data.user.id,
59-
basicLoaded: true,
60-
});
56+
this.setState({
57+
basicInfo: userData,
58+
user_id: userData.data.user.id,
59+
basicLoaded: true,
60+
});
6161

6262
// API CALL TO GET ALL REPO INFO // NESTED BECAUSE USER_ID HAS DEPENDENCY ON FIRST API CALL (getUserInfo)
6363
DataProvider.getRepositoryInfo(this.state.username, this.state.user_id).then((repoData) => {
@@ -118,85 +118,119 @@ class Home extends React.Component {
118118

119119

120120
<div>
121-
121+
122122
<Layout>
123-
{this.state.basicLoaded && this.state.basicInfo ? <div>
124-
{/* CONDITIONAL REDERING OF BASIC INFO */}
125-
{this.state.basicLoaded ? <BasicInformation basicInfo={this.state.basicInfo} aggregateData={this.state.aggregateData} /> : Loader.section_loading}
126-
{/* PINNED SECTION */}
127-
<section className="pt-5 ">
128-
<div className="row">
129-
<div className="col-12">
130-
<h1 className="font-size-20 w-100">My Awesome projects</h1>
131-
</div>
132-
{/* CONDITIONAL REDERING OF PINNED REPO INFO */}
133-
{this.state.pinnedLoaded ? <Pinned pinnedRepos={this.state.pinnedInfo} /> : Loader.section_loading}
134-
</div>
135-
</section>
136-
{/* LANGUAGE SECTION */}
137-
<section className="pt-5 ">
138-
<div className="row">
139-
<div className="col-sm-6 mt-3">
140-
<h3 className="font-size-15 w-100">Language analysis Size wise</h3>
141-
{/* height:"calc( 100% - 20px ) because h3 above take 20px but i wanted card to be equal to the col-height */}
142-
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
143-
{/* CONDITIONAL REDERING OF LANGUAGE ANALYSYS(BY SIZE) INFO */}
144-
{this.state.languageGraphDataSizeLoaded ?
145-
<Fragment>
146-
<PieChart data={this.state.languageGraphDataSize} height={250} max_slices={6} accumulate_remaining={true} />
147-
{/* Extra info about pie chart */}
148-
<div>
149-
<h6 className="text-center mt-3">
150-
{this.state.languageGraphDataSize[0] && <Fragment> Most Used language is <span style={{ color: this.state.languageGraphDataSize[0].color }}> {this.state.languageGraphDataSize[0].id} </span></Fragment>}
151-
{this.state.languageGraphDataSize[1] && <Fragment> followed by <span style={{ color: this.state.languageGraphDataSize[1].color }}> {this.state.languageGraphDataSize[1].id} </span></Fragment>}
152-
{this.state.languageGraphDataSize[2] && <Fragment> & <span style={{ color: this.state.languageGraphDataSize[2].color }}> {this.state.languageGraphDataSize[2].id} </span></Fragment>}
153-
</h6>
154-
</div>
155-
</Fragment>
156-
: Loader.section_loading}
157-
{/* {this.state.languageDataLoaded ? <Language languageData={this.state.languageData} type="size" /> : Loader.section_loading} */}
123+
{this.state.basicLoaded && this.state.basicInfo ? <div>
124+
{/* CONDITIONAL REDERING OF BASIC INFO */}
125+
{this.state.basicLoaded ? <BasicInformation basicInfo={this.state.basicInfo} aggregateData={this.state.aggregateData} /> : Loader.section_loading}
126+
127+
{/* LANGUAGE SECTION */}
128+
<section className="pt-5 ">
129+
<div className="row">
130+
<div className="col-sm-6 mt-3">
131+
<h3 className="font-size-15 w-100">Language analysis Size wise</h3>
132+
{/* height:"calc( 100% - 20px ) because h3 above take 20px but i wanted card to be equal to the col-height */}
133+
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
134+
{/* CONDITIONAL REDERING OF LANGUAGE ANALYSYS(BY SIZE) INFO */}
135+
{this.state.languageGraphDataSizeLoaded ?
136+
<Fragment>
137+
<PieChart data={this.state.languageGraphDataSize} height={250} max_slices={6} accumulate_remaining={true} />
138+
{/* Extra info about pie chart */}
139+
<div>
140+
<h6 className="text-center mt-3">
141+
{this.state.languageGraphDataSize[0] && <Fragment> Most written language is <span style={{ color: this.state.languageGraphDataSize[0].color }}> {this.state.languageGraphDataSize[0].id} </span></Fragment>}
142+
{this.state.languageGraphDataSize[1] && <Fragment> followed by <span style={{ color: this.state.languageGraphDataSize[1].color }}> {this.state.languageGraphDataSize[1].id} </span></Fragment>}
143+
{this.state.languageGraphDataSize[2] && <Fragment> & <span style={{ color: this.state.languageGraphDataSize[2].color }}> {this.state.languageGraphDataSize[2].id} </span></Fragment>}
144+
</h6>
145+
</div>
146+
</Fragment>
147+
: Loader.section_loading}
148+
{/* {this.state.languageDataLoaded ? <Language languageData={this.state.languageData} type="size" /> : Loader.section_loading} */}
149+
</div>
158150
</div>
159-
</div>
160-
<div className="col-sm-6 mt-3">
161-
<h3 className="font-size-15 w-100">Language analysis Repo wise</h3>
162-
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
163-
{/* CONDITIONAL REDERING OF LANGUAGE ANALYSYS(BY COUNT) INFO */}
164-
{this.state.languageGraphDataCountLoaded ?
165-
<Fragment>
166-
<PieChart data={this.state.languageGraphDataCount} height={250} max_slices={6} />
167-
{/* Extra info about pie chart */}
168-
<div>
169-
<h6 className="text-center mt-3">
170-
{this.state.languageGraphDataCount[0] && <Fragment> Most Used language is <span style={{ color: this.state.languageGraphDataCount[0].color }}> {this.state.languageGraphDataCount[0].id} </span></Fragment>}
171-
{this.state.languageGraphDataCount[1] && <Fragment> followed by <span style={{ color: this.state.languageGraphDataCount[1].color }}> {this.state.languageGraphDataCount[1].id} </span></Fragment>}
172-
{this.state.languageGraphDataCount[2] && <Fragment> & <span style={{ color: this.state.languageGraphDataCount[2].color }}> {this.state.languageGraphDataCount[2].id} </span></Fragment>}
173-
</h6>
174-
</div>
175-
</Fragment>
176-
: Loader.section_loading}
177-
{/* {this.state.languageDataLoaded ? <Language languageData={this.state.languageData} type="count" /> : Loader.section_loading} */}
151+
<div className="col-sm-6 mt-3">
152+
<h3 className="font-size-15 w-100">Language analysis Repo wise</h3>
153+
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
154+
{/* CONDITIONAL REDERING OF LANGUAGE ANALYSYS(BY COUNT) INFO */}
155+
{this.state.languageGraphDataCountLoaded ?
156+
<Fragment>
157+
<PieChart data={this.state.languageGraphDataCount} height={250} max_slices={6} />
158+
{/* Extra info about pie chart */}
159+
<div>
160+
<h6 className="text-center mt-3">
161+
{this.state.languageGraphDataCount[0] && <Fragment> Most Used language is <span style={{ color: this.state.languageGraphDataCount[0].color }}> {this.state.languageGraphDataCount[0].id} </span></Fragment>}
162+
{this.state.languageGraphDataCount[1] && <Fragment> followed by <span style={{ color: this.state.languageGraphDataCount[1].color }}> {this.state.languageGraphDataCount[1].id} </span></Fragment>}
163+
{this.state.languageGraphDataCount[2] && <Fragment> & <span style={{ color: this.state.languageGraphDataCount[2].color }}> {this.state.languageGraphDataCount[2].id} </span></Fragment>}
164+
</h6>
165+
</div>
166+
</Fragment>
167+
: Loader.section_loading}
168+
{/* {this.state.languageDataLoaded ? <Language languageData={this.state.languageData} type="count" /> : Loader.section_loading} */}
169+
</div>
178170
</div>
179171
</div>
180-
</div>
181-
</section>
182-
{/* REPO SECTION */}
183-
<section className="pt-5 ">
184-
<div className="row">
185-
<div className="col-12">
186-
<h1 className="font-size-20 w-100">My Popular projects</h1>
187-
</div>
188-
<div className="col-12">
189-
<div className="card p-3 rounded">
190-
{/* Popular repos bar graph */}
191-
{this.state.repoGraphDataPopularityWiseLoaded ? <BarChart data={this.state.repoGraphDataPopularityWise} height={250} max_bars={6} /> : Loader.section_loading}
172+
</section>
173+
174+
{/* PINNED SECTION */}
175+
<section className="pt-5 ">
176+
<div className="row">
177+
<div className="col-12">
178+
<h1 className="font-size-20 w-100">My Awesome projects</h1>
179+
</div>
180+
{/* CONDITIONAL REDERING OF PINNED REPO INFO */}
181+
{this.state.pinnedLoaded ? <Pinned pinnedRepos={this.state.pinnedInfo} /> : Loader.section_loading}
192182
</div>
183+
</section>
184+
185+
186+
{/* REPO SECTION */}
187+
<section className="pt-5 ">
188+
<div className="row">
189+
<div className="col-sm-6 mt-3">
190+
<h3 className="font-size-15 w-100">Commit analysis</h3>
191+
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }}>
192+
{/* CONDITIONAL REDERING OF COMMIT ANALYSYS(repo wise) INFO */}
193+
{this.state.repoGraphDataCommitWiseLoaded ?
194+
<Fragment>
195+
<PieChart data={this.state.repoGraphDataCommitWise} height={250} max_slices={10} />
196+
{/* Extra info about pie chart */}
197+
<div>
198+
<h6 className="text-center mt-3">
199+
{this.state.repoGraphDataCommitWise[0] && <Fragment> Most Commits are done in <span style={{ color: this.state.repoGraphDataCommitWise[0].color }}> {this.state.repoGraphDataCommitWise[0].id} </span></Fragment>}
200+
</h6>
201+
</div>
202+
</Fragment>
203+
: Loader.section_loading}
204+
</div>
205+
</div>
206+
<div className="col-sm-6 mt-3">
207+
<h3 className="font-size-15 w-100">My Popular projects</h3>
208+
<div className="card p-3 rounded" style={{ height: "calc( 100% - 20px )" }} >
209+
{/* CONDITIONAL REDERING OF LANGUAGE ANALYSYS(BY COUNT) INFO */}
210+
{this.state.repoGraphDataPopularityWiseLoaded ?
211+
<Fragment>
212+
{this.state.repoGraphDataPopularityWiseLoaded ? <BarChart data={this.state.repoGraphDataPopularityWise} height={250} max_bars={6} /> : Loader.section_loading}
213+
{/* Extra info about pie chart */}
214+
<div>
215+
<h6 className="text-center mt-3">
216+
{this.state.repoGraphDataPopularityWise[0] && <Fragment> Most Famous repo is <span style={{ color: this.state.repoGraphDataPopularityWise[0].color }}> {this.state.repoGraphDataPopularityWise[0].id} </span></Fragment>}
217+
</h6>
218+
</div>
219+
</Fragment>
220+
: Loader.section_loading}
221+
222+
{/* Popular repos bar graph */}
223+
{/* {this.state.repoGraphDataPopularityWiseLoaded ? <BarChart data={this.state.repoGraphDataPopularityWise} height={250} max_bars={6} /> : Loader.section_loading} */}
224+
</div>
225+
</div>
226+
<div className="col-sm-6">
227+
</div>
193228
</div>
194-
</div>
195-
</section>
196-
</div> : Loader.user_not_found}
197-
<Footer/>
198-
</Layout>
199-
229+
</section>
230+
</div> : Loader.user_not_found}
231+
<Footer />
232+
</Layout>
233+
200234
</div>
201235
);
202236
}

‎src/Data-provider/index.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,13 @@ async function repoBarGraphCalculation(repoInfo) {
219219
var data_commit_wise = []
220220
var data_popularity_wise = []
221221
var toggle=false;
222+
let color_pallet=[
223+
"#f47560",
224+
"#e8c1a0",
225+
"#f1e15b",
226+
"#e8a838",
227+
"#61cdbb",
228+
"#97e3d5",]
222229
const {
223230
sorted_by_commits,
224231
sorted_by_popularity
@@ -227,20 +234,23 @@ async function repoBarGraphCalculation(repoInfo) {
227234
let repo = sorted_by_commits[i]
228235
toggle = !toggle;
229236
data_commit_wise.push({
230-
"id": repo.name,
237+
"id": repo.name +` (${repo.commits} commits)`,
231238
"label": repo.name,
232239
"commits": repo.commits,
233-
"parsed": repo.name +` (${repo.commits} commits)`, // the data we'll see when hovered on chart
240+
"value": repo.commits,
241+
"parsed":`${repo.commits} commits`, // the data we'll see when hovered on chart
234242
// color user chart default
243+
"color":color_pallet[i%color_pallet.length],
235244
"style": toggle ? "lines" : "dots"
236245
})
237246

238247
repo = sorted_by_popularity[i]
239248
data_popularity_wise.push({
240-
"id": repo.name,
249+
"id": repo.name+` (${repo.stars} Stars , ${repo.forks} Forks)`,
241250
"label": repo.name,
242251
"repo": repo.name,
243252
"stars": repo.stars,
253+
"color":color_pallet[i%color_pallet.length],
244254
"starsColor": "yellow",
245255
"forks": repo.forks,
246256
"forksColor": "purple",

0 commit comments

Comments
 (0)