feat: Draw commits additions vs deletions

scripts/charts.js

@@ -60,25 +60,66 @@ class Charts {
 		return { data: formattedData, groupedEvents };
 	}
 
-	static drawChart(data, name, area) {
+	static prepareProjectCommits(projectCommits) {
+		const groupedCommits = projectCommits.reduce((acc, obj)=> {
+			let key = obj.creation_day
+			if (!acc[key]) {
+				acc[key] = []
+			}
+				acc[key].push(obj)
+			return acc
+		}, {});
+		const additionSeries = [];
+		const deletionSeries = [];
+		for (let date in groupedCommits) {
+			let additions = 0;
+			let deletions = 0;
+			groupedCommits[date].forEach(commit => {
+				additions += commit.stats.additions;
+				deletions += commit.stats.deletions;
+			});
+			additionSeries.push([JSON.parse(date), additions]);
+			deletionSeries.push([JSON.parse(date), -(deletions)]);
+		}
+		const sortByDate = (a, b) => {
+			if (a[0] > b[0]) {
+				return -1;
+			}
+			if (a[0] < b[0]) {
+				return 1;
+			}
+			return 0;
+		}
+		additionSeries.sort(sortByDate);
+		deletionSeries.sort(sortByDate);
+
+		return [{
+			data: additionSeries,
+			name: 'Additions',
+			color: '#00ff00'
+		}, {
+			data: deletionSeries,
+			name: 'Deletions',
+			color: '#ff0000'
+		}];
+	}
+
+	static drawChart(series, title, area) {
 		this.chart = Highcharts.chart('charts', {
 			chart: {
 				zoomType: 'x',
 				type: area,
 			},
 			title: {
-				text: `Activity of ${name}`
+				text: `Activity of ${title}`
 			},
 			subtitle: {
 				text: `Source: Gitlab Activities`
 			},
 			xAxis: {
 				type: 'datetime',
 			},
-			series: [{
-				name,
-				data,
-			}],
+			series,
 			tooltip: {
 				split: true,
 			},

scripts/members.js

@@ -118,7 +118,7 @@ class Members extends Base {
 		const response = Charts.prepareMemberEvents(memberEvents);
 
 		const { data, memberEvents: { member : { name }} } = response;
-		Charts.drawChart(data, name);
+		Charts.drawChart([{ data, name }], name);
 		Charts.prepareChartFilters(memberId, name, this.showActivityDetals.bind(this));
 	}
 

scripts/projects.js

@@ -87,7 +87,13 @@ class Projects extends Base {
 								<button title="Load Commits" @click=${() => {this.loadProjectCommits(project.id)}}>Commits</button>
 							</span>
 						</span>
-						<button title="Display Activities" @click=${()=> {this.showProjectActivities(project.id, project.name)}}>Display</button>
+						<span class="button-group">
+							<button @click=${(ev) => {this.displayButtons(ev)}}>Display</button>
+							<span class="buttons">
+							<button title="Display Activities" @click=${()=> {this.showProjectActivities(project.id, project.name)}}>Activities</button>
+							<button title="Display Commits" @click=${()=> {this.showProjectCommits(project.id, project.name)}}>Commits</button>
+							</span>
+						</span>
 						<button @click=${()=> {this.appendToChart(project.id, project.name)}}>+</button>
 					</td>
 				</tr>
@@ -133,6 +139,13 @@ class Projects extends Base {
 			.with({ project: 'project_id' });
 	}
 
+	async getProjectCommits(projectId) {
+		return await db.commits
+			.where('project_id')
+			.equals(projectId)
+			.with({ project: 'project_id' });
+	}
+
 	async appendToChart(projectId, projectName) {
 		let projectEvents = await this.getProjectEvents(projectId);
 		const response = Charts.prepareProjectEvents(projectEvents);
@@ -183,6 +196,7 @@ class Projects extends Base {
 				'id',
 			].forEach(key => { delete commit[key] });
 			commit.project_id = projectId;
+			commit.creation_day = new Date(commit.authored_date).setHours(0, 0, 0, 0);
 		});
 		db.commits.bulkPut(commits);
 	}
@@ -191,7 +205,14 @@ class Projects extends Base {
 		let projectEvents = await this.getProjectEvents(projectId);
 		const updatedEvents = Charts.prepareProjectEvents(projectEvents);
 		const { data } = updatedEvents;
-		Charts.drawChart(data, projectName, 'areaspline');
+		Charts.drawChart([{ data, name: projectName }], projectName, 'areaspline');
+		Charts.prepareChartFilters();
+	}
+
+	async showProjectCommits(projectId, projectName) {
+		let projectCommits = await this.getProjectCommits(projectId);
+		const formattedCommitsSerieses = Charts.prepareProjectCommits(projectCommits);
+		Charts.drawChart(formattedCommitsSerieses, projectName, 'area');
 		Charts.prepareChartFilters();
 	}