Vertical Cluster List

Description

위 이미지에서 빨간 사각형 영역 안 부분입니다.

왼쪽 Graph와 오른쪽 Summary가 존재합니다.

Graph나 Summary를 클릭하면 아래에 Detail 컴포넌트가 보이고 Statistics 컴포넌트 역시 여기서 선택된 cluster의 데이터 통계를 보여줍니다.

Graph와 Summary의 자세한 설명은 아래에서 계속됩니다.

Collapsable Graph

@vgihan 님

• 각 Cluster Size의 시각화를 담당하는 부분입니다.
• Cluster는 여러 개의 Commit을 포함하고, 포함된 Commit의 개수로 Cluster Size가 결정됩니다.
• 하나의 Cluster를 나타내는 box는 내부에 채워진 cell의 크기로써 Cluster Size를 표현합니다.
• max 값은 10으로써, Cluster Size가 10 이상이면 box를 모두 채웁니다.
• 연속된 Cluster가 연결된 느낌을 주기 위해 link line을 추가했고, 마지막 element는 link가 존재하지 않습니다.
• 클릭하여 Detail 컴포넌트가 펼쳐지면 link가 늘어나며 Detail을 보여줍니다.

Using Type

import type { BaseType, Selection } from "d3";

import type { ClusterNode } from "types";

export type ClusterGraphElement = {
  cluster: ClusterNode;
  clusterSize: number;
  selected: number;
};

export type SVGElementSelection<T extends BaseType> = Selection<
  T | BaseType,
  ClusterGraphElement,
  SVGSVGElement | null,
  unknown
>;

Profile & Summary

@jejecrunch 님

commit author의 이름과 클러스터 맨 마지막의 commit message가 보여집니다.

cluster 안에 commit이 1개면 + n more을 출력하지 않으며, 2개 이상의 경우는 + n more을 출력합니다.

이때 commit author의 경우 cluster별로 가공하고 있으며, 중복되지 않습니다.

또 commit author의 background-color는 현재 15가지이며 이에 대한 방안은 프로필 이미지로 생각하고 있습니다.

Using Type

export type Keyword = {
  keyword: string;
  count: number;
};

export type Content = {
  message: string;
  count: number;
};

export type Summary = {
  authorNames: Array<Array<string>>;
  content: Content;
};

export type Cluster = {
  clusterId: number;
  summary: Summary;
};