Index: vue/src/assets/images/devops/DevSupport/github.png =================================================================== diff -u -r87e035254196d91407ea9a71e7fed4de45358d82 -r2ddfafed4da862bc4f7eab735f4d6805abcb6efa --- vue/src/assets/images/devops/DevSupport/github.png (.../github.png) (revision 87e035254196d91407ea9a71e7fed4de45358d82) +++ vue/src/assets/images/devops/DevSupport/github.png (.../github.png) (revision 2ddfafed4da862bc4f7eab735f4d6805abcb6efa) @@ -3585,6 +3585,8 @@ padding: 1px 0 0 75px; color: #fff; font-size: 13px; + margin-top: 35px; + padding-top: 15px; } .timeline-container ul:before { @@ -3671,6 +3673,29 @@ height: auto; } +.vertical-chevron-up, .vertical-chevron-down { + position: absolute; + left: 48%; + transform: translateY(-20px); + font-size: 20px; + cursor: pointer; +} + +.vertical-chevron-down { + transform: translateY(20px); +} + +.fa-chevron-up:hover, .fa-chevron-down:hover { + opacity: 80%; +} + +@media screen and (max-width: 1295px) { + .timeline-period { + flex: 1 1 auto; + margin-bottom: 10px; + } +} + /* Dashboard 시작 */ .c3-tooltip { Index: arms/html/analysisTime/content-container.html =================================================================== diff -u -rc8b6e217f086592e401d8c12bc7a5aa0c88f57df -r2ddfafed4da862bc4f7eab735f4d6805abcb6efa --- arms/html/analysisTime/content-container.html (.../content-container.html) (revision c8b6e217f086592e401d8c12bc7a5aa0c88f57df) +++ arms/html/analysisTime/content-container.html (.../content-container.html) (revision 2ddfafed4da862bc4f7eab735f4d6805abcb6efa) @@ -779,10 +779,49 @@
-
- 선택한 제품(서비스)와 버전에 최근 7일 이내의 업데이트된 요구사항과 그에 연결된 이슈의 타임라인을 확인할 수 있습니다. -
+
+
+ 선택한 제품(서비스)와 버전에 최근 7일 이내의 업데이트된 요구사항과 그에 연결된 이슈의 타임라인을 확인할 수 있습니다. +
+
+ +
+ + + + + +  ~  + + + + + +
+
+
{ - let filteredItems = versionData.filter(item => { - if (!contentSet[item.summary]) { // 객체의 키로 중복 체크 - contentSet[item.summary] = true; // 중복 체크를 위해 키에 값을 할당 - return true; + versionData.forEach(item => { + if (!contentSet[item.summary]) { // 중복 체크 + contentSet[item.summary] = { + title: convertVersionIdToTitle(item.pdServiceVersion), + content: item.summary, + type: [item.key], + date: formatDateTime(item.updated) + }; + } else { + contentSet[item.summary].type.push(item.key); + contentSet[item.summary].type.sort(); } - return false; - }).map(item => ({ // 중복이 없는 항목들을 새 객체로 변환 - title: convertVersionIdToTitle(item.pdServiceVersion), - content: item.summary, - type: "", - date: formatDateTime(item.updated) - })); + }); - return [...acc, ...filteredItems]; // 새로운 객체들을 누적값에 추가 + return acc; }, []); - makeVerticalTimeline(items); + items = Object.values(contentSet).map(item => ({ + ...item, + type: item.type.join(' | ') + })); + + makeVerticalTimeline(pdServiceLink, pdServiceVersions, week, items); } } }); @@ -1700,15 +1706,27 @@ */ } -function makeVerticalTimeline(data) { +function makeVerticalTimeline(pdServiceLink, pdServiceVersions, week, data) { + + // 날짜 세팅 + const { from, to } = getFromToDates(week); + $("#timeline_start_date").val(from); + $("#timeline_end_date").val(to); + + // 데이터 세팅 const $container = document.querySelector(".timeline-container"); + $container.innerHTML = ''; + const upIcon = document.createElement("i"); + upIcon.className = "fa fa-chevron-up vertical-chevron-up"; + $container.append(upIcon); + if (data.length == 0) { - $container.innerHTML = "

데이터가 없습니다.

"; + $container.innerHTML += "

데이터가 없습니다.

"; } else { const $ul = document.createElement("ul"); - data.forEach(({ title, content, type, date }, index) => { + data.forEach(({title, content, type, date}, index) => { const $li = document.createElement("li"); $li.className = "session"; $li.innerHTML = ` @@ -1727,13 +1745,42 @@ $container.append($ul); } + + const downIcon = document.createElement("i"); + downIcon.className = "fa fa-chevron-down vertical-chevron-down"; + if (week != 1) { + $container.append(downIcon); + } + + // 버튼 클릭 이벤트 + $('.fa-chevron-up').on('click', function() { + verticalTimeLineChart(pdServiceLink, pdServiceVersions, week+1); + }); + + $('.fa-chevron-down').on('click', function() { + if (week - 1 > 0) { + verticalTimeLineChart(pdServiceLink, pdServiceVersions, week-1); + } + }); } function formatDateTime(dateTime) { var date = dateTime.split('T')[0]; return date; } +function getFromToDates(week) { + const fromDate = new Date(); + fromDate.setDate(fromDate.getDate() - week * 7); + const from = fromDate.toISOString().split('T')[0]; + + const toDate = new Date(); + toDate.setDate(toDate.getDate() - (week - 1) * 7); + const to = toDate.toISOString().split('T')[0]; + + return { from, to }; +} + function detailTimeLineChart(pdServiceLink, pdServiceVersions) { const url = new UrlBuilder()