Skip to content

Commit

Permalink
�feat(view): return Summary value and modify content data (#97)
Browse files Browse the repository at this point in the history
* chore(view): Run `npm install`

* feat(view): Turn data about summary and apply color visualizing

* refactor(view): remove unnecessary id

* refactor(view): remove unnecessary namebox and summary id

* feat(view): change author profile hover action

* chore(view): Run `npm install`

* style(view): add color codes for same names

* style(view): modify color function for more separate author
  • Loading branch information
jejecrunch authored Sep 8, 2022
1 parent d4a98a5 commit 9077c99
Show file tree
Hide file tree
Showing 7 changed files with 833 additions and 322 deletions.
922 changes: 663 additions & 259 deletions package-lock.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const authorBgColorArray = [
"00ADF7",
"0077AA",
"4AC3F7",
"0BD9E0",
"33C2FF",
"4BC4F9",
"0089C4",
];
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,6 @@
border-radius: $border--radius;
}

// body {
// background-color: #fff;
// color: #222
// }

.entire {
width: 85%;
margin-left: 20px;
Expand All @@ -32,10 +27,9 @@
align-items: center;
width: 85%;
padding-top: 10px;
padding-bottom: 10px;
}

.commit {
.summary {
display: flex;
align-items: center;
flex-direction: row;
Expand All @@ -46,6 +40,7 @@
.nameBox {
display: flex;
justify-content: center;
position: relative;
}

.name {
Expand All @@ -55,19 +50,32 @@
width: 30px;
height: 30px;
font-weight: bold;
background-color: $blue-light-A700;
color: white;

color: $white;
justify-content: center;
align-items: center;
text-align: center;
font-size: 15pt;
margin-left: -5px;
margin-right: -5px;

&::after {
&:hover {
@include animation();
background-color: $gray-200 !important;
color: $black !important;
z-index: 9999;
}

&:hover {
background-color: $blue-light-A200;
&:nth-child(2n){
&:hover {
@include animation();
z-index: 9999;
}
}

&:nth-child(3n):hover {
@include animation();
z-index: 9999;
}
}

Expand All @@ -78,9 +86,7 @@

&::after {
@include animation();

@include shadow();

@include border(5px);

content: attr(data-tooltip-text);
Expand All @@ -103,15 +109,46 @@

&:hover::after {
left: 100%;
background-color: rgba(0, 119, 170, 0.8);
background-color: rgba(34, 34, 34, 0.8);
opacity: 1;
}
}

.message {
.keywords {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 15px;
}

.keyword {
margin-left: 5px;
margin-right: 5px;

&:hover {
@include animation();
font-weight: 700;
cursor: pointer;
}

&.large {
font-size: 18pt;
font-weight: 900;

&:hover {
@include animation();
cursor: pointer;
}
}

&.medium {
font-size: 16pt;
font-weight: 700;

&:hover {
@include animation();
cursor: pointer;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,37 +1,57 @@
import type { GlobalProps } from "types";

import type { Commit, Author, Cluster } from "./Summary.type";
import { getInitData } from "./Summary.util";
import type { Cluster, Keyword } from "./Summary.type";
import { getColorValue, getInitData } from "./Summary.util";

import "./Summary.scss";

const Summary = ({ data }: GlobalProps) => {
const info = getInitData({ data });
const clusters = getInitData({ data });

return (
<div className="entire">
{info.map((cluster: Cluster) => {
{clusters.map((cluster: Cluster) => {
return (
<div className="cluster" key={cluster.id}>
{cluster.commits.map((commit: Commit) => {
return (
<p className="commit" key={commit.commitId}>
<span className="nameBox">
{commit.authorNames.map((authorName: Author) => {
<div className="cluster" key={cluster.clusterId}>
<p className="summary">
<span className="nameBox">
{cluster.summary.authorNames.map(
(authorArray: Array<string>) => {
return authorArray.map((authorName: string) => {
const colorValue = getColorValue(authorName);
return (
<span
key={authorName.id}
className="name"
data-tooltip-text={authorName.name}
key={authorName}
className={["name"].join(" ")}
data-tooltip-text={authorName}
style={{ backgroundColor: colorValue }}
>
{authorName.name.slice(0, 1)}
{authorName.slice(0, 1)}
</span>
);
})}
</span>
<span className="message">{commit.message}</span>
</p>
);
})}
});
}
)}
</span>
<span className="keywords">
{cluster.summary.keywords.map((keywordObj: Keyword) => {
let size = "";

if (keywordObj.count > 6) size = "large";
else if (keywordObj.count > 3) size = "medium";
else size = "small";

return (
<span
className={["keyword", size].join(" ")}
key={keywordObj.keyword}
>
{keywordObj.keyword}
</span>
);
})}
</span>
</p>
</div>
);
})}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
export type Author = {
id: string;
name: string;
export type Keyword = {
keyword: string;
count: number;
};

export type Commit = {
commitId: string;
authorNames: Array<Author>;
message: string;
export type Summary = {
authorNames: Array<Array<string>>;
keywords: Array<Keyword>;
};

export type Cluster = {
id: string;
commits: Array<Commit>;
clusterId: number;
summary: Summary;
};
Original file line number Diff line number Diff line change
@@ -1,40 +1,82 @@
import { nanoid } from "nanoid";

import type { GlobalProps, CommitNode } from "types";

import type { Cluster, Commit } from "./Summary.type";
import { authorBgColorArray } from "./Summary.const";
import type { Cluster } from "./Summary.type";

const colorName = [...authorBgColorArray];

export function getInitData({ data }: GlobalProps) {
const clusters: Cluster[] = [];

data.map((clusterNode) => {
const cluster: Cluster = {
id: nanoid(),
commits: [],
clusterId: clusterNode.commitNodeList[0].clusterId,
summary: {
authorNames: [],
keywords: [],
},
};

const commitArray: Commit[] = [];

clusterNode.commitNodeList.map((commitNode: CommitNode) => {
const temp = {
commitId: commitNode.commit.id,
authorNames: commitNode.commit.author.names.map((name) => ({
id: nanoid(),
name: name.trim(),
})),
message: commitNode.commit.message,
// set names
const authorSet: Set<string> = new Set();
commitNode.commit.author.names.map((name) => {
authorSet.add(name.trim());
return name.trim();
});

cluster.summary.authorNames.push(Array.from(authorSet));

// set keywords
const keywordObject = {
keyword: commitNode.commit.message.split(" ")[0],
count: 1,
};

commitArray.push(temp);
const findKeywordIndex = cluster.summary.keywords.findIndex(
(key) => key.keyword === commitNode.commit.message.split(" ")[0]
);

if (findKeywordIndex === -1) cluster.summary.keywords.push(keywordObject);
else {
cluster.summary.keywords[findKeywordIndex].count += 1;
}

cluster.commits = commitArray;
cluster.summary.keywords.sort((a, b) => b.count - a.count);

return temp;
return commitNode;
});

// remove name overlap
const authorsSet = cluster.summary.authorNames.reduce(
(set, authorArray) => {
authorArray.forEach((author) => {
set.add(author);
});
return set;
},
new Set()
);

cluster.summary.authorNames = [];

cluster.summary.authorNames.push(Array.from(authorsSet) as Array<string>);

clusters.push(cluster);

return cluster;
});

return clusters;
}

export function getColorValue(name: string) {
let result = "";

const index =
(name[0].charCodeAt(0) + name[1].charCodeAt(0)) % colorName.length;
result = `#${colorName[index]}`;
colorName.slice(0 + index, index + 1);

return result;
}
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { default as Summary } from "./Summary";
export type { Commit, Cluster, Author } from "./Summary.type";
export type { Cluster } from "./Summary.type";

0 comments on commit 9077c99

Please sign in to comment.