feat(view): return Summary value and modify content data

packages/view/src/components/VerticalClusterList/Summary/Summary.const.ts

@@ -0,0 +1,9 @@
+export const authorBgColorArray = [
+  "00ADF7",
+  "0077AA",
+  "4AC3F7",
+  "0BD9E0",
+  "33C2FF",
+  "4BC4F9",
+  "0089C4",
+];

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -18,11 +18,6 @@
   border-radius: $border--radius;
 }
 
-// body {
-//     background-color: #fff;
-//     color: #222
-// }
-
 .entire {
   width: 85%;
   margin-left: 20px;
@@ -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;
@@ -46,6 +40,7 @@
 .nameBox {
   display: flex;
   justify-content: center;
+  position: relative;
 }
 
 .name {
@@ -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;
   }
 }
 
@@ -78,9 +86,7 @@
 
   &::after {
     @include animation();
-
     @include shadow();
-
     @include border(5px);
 
     content: attr(data-tooltip-text);
@@ -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;
+    }
+  }
+}

packages/view/src/components/VerticalClusterList/Summary/Summary.tsx

@@ -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>
         );
       })}

packages/view/src/components/VerticalClusterList/Summary/Summary.type.ts

@@ -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;
 };

packages/view/src/components/VerticalClusterList/Summary/Summary.util.ts

@@ -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;
+}

packages/view/src/components/VerticalClusterList/Summary/index.ts

@@ -1,2 +1,2 @@
 export { default as Summary } from "./Summary";
-export type { Commit, Cluster, Author } from "./Summary.type";
+export type { Cluster } from "./Summary.type";