"use strict"; function addZeroToFront(number) { return (number < 10 ? "0" : "") + number; } var Timeline = (function () { var fn, target, data, viewData, fontWidth, colors; fontWidth = 11; fn = { init: function init(_target, _data) { var widgetWidth = $("#version-timeline-bar")[0].offsetWidth; // 화면을 그리는데 필요한 기본 데이터 viewData = { startYear: null, endYear: null, startMonth: null, endMonth: null, totalStartMonth: null, totalEndMonth: null, monthLength: 0, yearLength: 0, maxWidth: widgetWidth - 10, width: 30, widthForMonth: 30, lastWidth: 0, lastWidthForMonth: 0, currentDate: null, lastStart: { index: 0, year: 0 }, allMonthArray: [] }; if(ColorPalette) { colors = ColorPalette.d3Chart.gaugeChart; } else { colors = [ "rgba(158, 1, 66, 0.8)", "rgba(213, 62, 79, 0.8)", "rgba(244, 109, 67, 0.8)", "rgba(253, 174, 97, 0.8)", "rgba(254, 224, 139, 0.8)", "rgba(230, 245, 152, 0.8)", "rgba(171, 221, 164, 0.8)", "rgba(102, 194, 165, 0.8)", "rgba(50, 136, 189, 0.8)", "rgba(94, 79, 162, 0.8)" ]; } var t = []; if (!_target) throw new Error("타임라인을 그릴 타겟을 입력하세요."); target = _target; data = _data; if (!data || data.length === 0) return; // 데이터가 전혀 없는 경우 data = data.sort(function (a, b) { return new Date(a.startDate) - new Date(b.startDate) + (new Date(a.endDate) - new Date(b.endDate)); }); // 데이터 정리 fn.updateViewData(); fn.updateRealData(); // 템플릿 생성 후 바로 삽입 t.push( '
'.concat(fn.draw(), "
") ); $(target).html(t.join("")); }, // viewData를 업데이트한다. updateViewData: function updateViewData() { 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; } } /******************************************** * 출력할 년도를 정리하는 코드 * *****************************************/ v.startYear = Number(D.date(v.startYear, "yyyy")); // 데이터상의 시작년도 v.endYear = Number(D.date(v.endYear, "yyyy")); // 데이터상의 마지막년도 v.lastStart.year = Number(D.date(v.lastStart.year, "yyyy")); // 마지막 항목이 시작하는 연도 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")); // 소숫점이 0.5보다 크면 올려서, 작으면 버려서 년도별 가로를 정한다. 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() { var v, i, d, startYear, endYear, startMonth, endMonth, fullYear; v = viewData; for (i = 0; i < data.length; i++) { d = data[i]; startYear = Number(D.date(d.startDate, "yyyy")); endYear = Number(D.date(d.endDate, "yyyy")); startMonth = Number(D.date(d.startDate, "MM")); endMonth = Number(D.date(d.endDate, "MM")); fullYear = endYear - startYear > 1 ? endYear - startYear - 1 : 0; // 1월부터 12월까지 꽉찬 해가 몇 해인지 산출 // 가로 위치를 구한다. d.left = (function () { var left = 0; left += (startYear - v.startYear) * v.width; left += (startMonth - 1) * (v.width / 12); return left + 1; // 투명때문에 라벨 막대가 겹치면 선이 있는 것처럼 보여서 1픽셀 옮김 })(); // 실제 길이를 구한다. d.width = (function () { var width = 0; if (startYear === endYear) { // 시작과 마감해가 같다면 width += (endMonth - startMonth + 1) * (v.width / 12); // 시작년도 월계산 } else { width += (12 - startMonth + 1) * (v.width / 12); // 시작년도 월계산 width += fullYear * v.width; // 중간년도 년계산 width += endMonth * (v.width / 12); // 종료년도 월계산 } return width - 1; // 투명때문에 라벨 막대가 겹치면 선이 있는 것처럼 보여서 1픽셀 옮김 })(); // 색상을 정한다 d.color = colors[i % colors.length]; // 높이 레벨을 정한다 d.height = (function () { if (i === 0) return 10; if (d.startDate <= data[i - 1].endDate) { return data[i - 1].height + 10; } else { return data[i - 1].height + 20; } return 20; })(); // 타임라인 z-index d.zIndex = (function () { if (i === 0) return 9999; if (d.startDate <= data[i - 1].endDate) { return data[i - 1].zIndex - 1; } return 9999; })(); // 라벨 높이 레벨을 정한다 d.labelHeight = d.height * 2 + 20; //d.labelHeight = d.height * 2 + 20; } }, draw: function draw() { var t = [], i, d, v, year, month; v = viewData; t.push('
')); for (i = 0; i < data.length; i++) { d = data[i]; t.push( '
') ); t.push('\t') .concat(d.title, '') ); 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(0, 4)); // 앞에 두 자리는 없앤다. t.push('
'); t.push(year); t.push("
"); } t.push("
"); $(".loader").addClass("hide"); return t.join(""); } }; return { init: fn.init }; })(); //# sourceMappingURL=timeline.js.map