Index: arms/html/dashboard/content-container.html =================================================================== diff -u -rcf2ec0ef8bcd2fd8b918b541a8a3706e8bf2dffb -r4de755e3b3f8bd2bad7ae87af491771a85d6476d --- arms/html/dashboard/content-container.html (.../content-container.html) (revision cf2ec0ef8bcd2fd8b918b541a8a3706e8bf2dffb) +++ arms/html/dashboard/content-container.html (.../content-container.html) (revision 4de755e3b3f8bd2bad7ae87af491771a85d6476d) @@ -719,6 +719,7 @@ } .timeline:before { left: 0px !important; + background: none; } .time_element { overflow-x: scroll; Index: arms/js/dashboard/chart/infographic_custom.css =================================================================== diff -u -r06c6a4606acaad9b58cdc6de6334b2b80d3a7671 -r4de755e3b3f8bd2bad7ae87af491771a85d6476d --- arms/js/dashboard/chart/infographic_custom.css (.../infographic_custom.css) (revision 06c6a4606acaad9b58cdc6de6334b2b80d3a7671) +++ arms/js/dashboard/chart/infographic_custom.css (.../infographic_custom.css) (revision 4de755e3b3f8bd2bad7ae87af491771a85d6476d) @@ -364,7 +364,8 @@ top: 23px; right: 25px; } -.infographic.basic .timeline .yearList { +.infographic.basic .timeline .yearList, +.infographic.basic .timeline .monthList { height: 23px; border-top: 1px solid #686868; } @@ -377,6 +378,15 @@ text-align: center; } +.infographic.basic .timeline .month { + float: left; + position: relative; + height: 23px; + line-height: 23px; + font-size: 11px; + text-align: left; +} + .infographic.basic .timeline .year a { color: #f52267; } @@ -430,7 +440,7 @@ position: relative; box-sizing: border-box; /*padding: 36px 25px 0;*/ - width: 840px; + /*width: 840px;*/ height: 305px; border-top: none; } @@ -470,7 +480,6 @@ border-left-style: solid; font-size: 11.5px; line-height: 1.1em; - cursor: help; } .infographic.basic .timeline .graph .label .ellipsis { display: block; @@ -2757,11 +2766,12 @@ margin-top: 10px; margin-bottom: 10px; /*padding: 0 0 35px;*/ - width: 880px; + /*width: 880px;*/ height: initial; } .infographic.basic .timeline .graph, -.infographic.basic .timeline .yearList { +.infographic.basic .timeline .yearList, +.infographic.basic .timeline .monthList { margin: 0 auto; /* //width: 1030px;*/ } Index: arms/js/dashboard/chart/timeline_custom.js =================================================================== diff -u -rd6a8675bcddcb918becf595b68d1ffdd032746b6 -r4de755e3b3f8bd2bad7ae87af491771a85d6476d --- arms/js/dashboard/chart/timeline_custom.js (.../timeline_custom.js) (revision d6a8675bcddcb918becf595b68d1ffdd032746b6) +++ arms/js/dashboard/chart/timeline_custom.js (.../timeline_custom.js) (revision 4de755e3b3f8bd2bad7ae87af491771a85d6476d) @@ -1,5 +1,9 @@ "use strict"; +function addZeroToFront(number) { + return (number < 10 ? "0" : "") + number; +} + var Timeline = (function () { var fn, target, data, viewData, fontWidth, colors; fontWidth = 11; @@ -15,14 +19,23 @@ viewData = { startYear: null, endYear: null, + startMonth: null, + endMonth: null, + totalStartMonth: null, + totalEndMonth: null, + monthLength: 0, yearLength: 0, - maxWidth: 880,//widgetWidth,//1080, - width: 0, + maxWidth: widgetWidth - 10, + width: 30, + widthForMonth: 30, lastWidth: 0, + lastWidthForMonth: 0, + currentDate: null, lastStart: { index: 0, year: 0 - } + }, + allMonthArray: [] }; colors = [ @@ -62,12 +75,16 @@ }, // viewData를 업데이트한다. updateViewData: function updateViewData() { - var v, i, d, titleWidth, yearWidth, yearGap; + var v, i, d, titleWidth, yearWidth, yearGap, monthWidth; v = viewData; for (i = 0; i < data.length; i++) { d = data[i]; if (i === 0 || v.startYear > d.startDate) v.startYear = d.startDate; if (i === 0 || v.endYear < d.endDate) v.endYear = d.endDate; + var startMonthTemp = new Date(d.startDate).getMonth(); + var endMonthTemp = new Date(d.endDate).getMonth(); + if (i === 0 || v.totalStartMonth > startMonthTemp) v.totalStartMonth = startMonthTemp; + if (i === 0 || v.totalEndMonth < endMonthTemp) v.totalEndMonth = endMonthTemp; if (i === 0 || v.lastStart.year < d.startDate) { v.lastStart.index = i; v.lastStart.year = d.startDate; @@ -83,29 +100,53 @@ v.yearLength = v.endYear - v.startYear + 1; // 해당 년도까지 포함하기 때문에 1을 더함 + var arrayYear = v.startYear; + var arrayMonth = 1; + for (i = 0; i < v.yearLength * 12; i++) { + v.allMonthArray.push(arrayYear.toString().substring(2) + addZeroToFront(arrayMonth)); + if (arrayMonth == 12) { + arrayMonth = 1; + arrayYear++; + } else { + arrayMonth = arrayMonth + 1; + } + } + + // 월 계산 + var yearToMonth = v.yearLength * 12; + var tempStartMonth = v.totalStartMonth.toString().substring(2); + var tempEndMonth = v.totalEndMonth.toString().substring(2); + var tempMonthLength = tempEndMonth - tempStartMonth; + + v.monthLength = yearToMonth + tempMonthLength + 1; + data[v.lastStart.index].title = data[v.lastStart.index].title || ""; //title이 없는 항목이 있을 수 있기 때문에 처리 /******************************************** * 년도별 width를 정리하는 코드 * *****************************************/ yearWidth = v.maxWidth / v.yearLength; // 일단 단순하게 나누어서 가로를 구함 + monthWidth = v.maxWidth / v.monthLength; titleWidth = data[v.lastStart.index].title.length * fontWidth; // 마지막 항목 글자 개수만큼 가로를 구함 yearGap = Number(D.date(data[v.lastStart.index].endDate, "yyyy")) - Number(D.date(data[v.lastStart.index].startDate, "yyyy")); - if (titleWidth > yearGap * yearWidth) { - // 마지막 타이틀이 해당년도 길이보다 짧으면 년도를 1년 추가한다 - v.endYear++; - v.yearLength++; - yearWidth = v.maxWidth / v.yearLength; - } // 소숫점이 0.5보다 크면 올려서, 작으면 버려서 년도별 가로를 정한다. - if (yearWidth - parseInt(yearWidth) > 0.5) v.width = Math.ceil(yearWidth); - else v.width = Math.floor(yearWidth); + if (yearWidth - parseInt(yearWidth) > 0.5) { + v.width = Math.ceil(yearWidth); + } else { + v.width = Math.floor(yearWidth); + } + if (monthWidth - parseInt(monthWidth) > 0.5) { + v.widthForMonth = Math.ceil(monthWidth); + } else { + v.widthForMonth = Math.floor(monthWidth); + } // 버리거나 올려서 남거나 모자란 픽셀은 마지막 년도에 배정한다. v.lastWidth = v.maxWidth - v.width * v.yearLength + v.width; + v.lastWidthForMonth = v.maxWidth - v.widthForMonth * v.monthLength + v.widthForMonth; }, // 실제로 뿌릴 데이터를 정리하는 함수 updateRealData: function updateRealData() { @@ -183,9 +224,12 @@ i, d, v, - year; + year, + month; v = viewData; - t.push('
'); + + t.push('
')); + for (i = 0; i < data.length; i++) { d = data[i]; t.push( @@ -208,14 +252,33 @@ t.push("
"); } t.push("
"); - t.push('
'); + t.push('
')); + month = 1; + for (i = 0; i < v.yearLength * 12; i++) { + t.push('
'); + t.push(month); + t.push("
"); + if (month == 12) { + month = 1; + } else { + month = month + 1; + } + } + t.push("
"); + t.push('
')); for (i = v.startYear; i <= v.endYear; i++) { - year = "'".concat(i.toString().substring(2, 4)); // 앞에 두 자리는 없앤다. - t.push('
')); + year = "".concat(i.toString().substring(0, 4)); // 앞에 두 자리는 없앤다. + t.push('
'); t.push(year); t.push("
"); } t.push("
"); + + $(".loader").addClass("hide"); + return t.join(""); } };