' +
"진행 현황 정보를 가져오는 중입니다..."
);
//1. 좌상 게이지 차트 및 타임라인
//2. Time ( 작업일정 ) - 버전 개수 삽입
$.ajax({
url: "/auth-user/api/arms/pdService/getNodeWithVersionOrderByCidDesc?c_id=" + pdserviceId,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
async: false,
statusCode: {
200: function (json) {
let versionData = json.pdServiceVersionEntities;
versionData.sort((a, b) => a.c_id - b.c_id);
let versionCount = versionData.length;
console.log("[ analysisTime :: statisticsMonitor ] :: 등록된 버전 개수 = " + versionCount);
if (versionCount !== undefined) {
$("#version_prgress").text(versionCount);
if (versionCount >= 0) {
let today = new Date();
$("#notifyNoVersion").slideUp();
$("#project-start").show();
$("#project-end").show();
$("#versionGaugeChart").html(""); //게이지 차트 초기화
var versionGauge = [];
var versionTimeline = [];
var versionCustomTimeline = [];
versionData.forEach(function (versionElement, idx) {
if (pdserviceVersionId.includes(versionElement.c_id)) {
var gaugeElement = {
"current_date": today.toString(),
"version_name": versionElement.c_title,
"version_id": versionElement.c_id,
"start_date": (versionElement.c_pds_version_start_date === "start" ? today : versionElement.c_pds_version_start_date),
"end_date": (versionElement.c_pds_version_end_date === "end" ? today : versionElement.c_pds_version_end_date)
}
versionGauge.push(gaugeElement);
}
var timelineElement = {
"id" : versionElement.c_id,
"title" : "버전: "+versionElement.c_title,
"startDate" : (versionElement.c_pds_version_start_date === "start" ? today : versionElement.c_pds_version_start_date),
"endDate" : (versionElement.c_pds_version_end_date === "end" ? today : versionElement.c_pds_version_end_date)
};
versionTimeline.push(timelineElement);
var versionTimelineCustomData = {
"title" : versionElement.c_title,
"startDate" : (versionElement.c_pds_version_start_date === "start" ? today : versionElement.c_pds_version_start_date),
"endDate" : (versionElement.c_pds_version_end_date === "end" ? today : versionElement.c_pds_version_end_date)
};
versionCustomTimeline.push(versionTimelineCustomData);
});
drawVersionProgress(versionGauge); // 버전 게이지
// 이번 달의 첫째 날 구하기
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
// 이번 달의 마지막 날 구하기
var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
// 이번달 일수 구하기
var daysCount = lastDay.getDate();
// 오늘 일자 구하기
var day = today.getDate();
var today_flag = {
title: "오늘",
startDate: formatDate(firstDay),
endDate: formatDate(lastDay),
id: "today_flag"
};
versionTimeline.push(today_flag);
$("#version-timeline-bar").show();
Timeline.init($("#version-timeline-bar"), versionTimeline);
var basePosition = $("#today_flag").css("left");
var baseWidth = $(".month").css("width");
var calFlagPosition = (parseFloat(baseWidth) / daysCount) * day;
var flagPosition = parseFloat(basePosition) + calFlagPosition + "px";
$("#today_flag").removeAttr("style");
$("#today_flag").removeClass("block");
$("#today_flag").css("position", "absolute");
$("#today_flag").css("height", "170px");
$("#today_flag").css("bottom", "-35px");
$("#today_flag span").remove();
$(".block .label").css("text-align", "left");
$("#today_flag").css("left", flagPosition);
$("#today_flag").css("position", "relative");
$("#today_flag").prepend(" ' +
"일별 업데이트 상태 차트를 로딩 중입니다..."
);
$.ajax({
url: url,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
async: false,
statusCode: {
200: function (data) {
console.log("[ analysisTime :: dailyUpdatedStatusScatterChart ] :: 일별 업데이트 상태 스캐터 차트데이터 = ");
console.log(data);
let result = Object.keys(data).reduce(
(acc, date) => {
if (data[date].totalRequirements !== 0 || data[date].totalRelationIssues !== 0) {
acc.dates.push(date);
acc.totalRequirements.push(data[date].totalRequirements);
acc.totalRelationIssues.push(data[date].totalRelationIssues);
}
return acc;
},
{
dates: [],
totalRelationIssues: [],
totalRequirements: [],
}
);
let dates = result.dates;
let totalRelationIssues = result.totalRelationIssues;
let totalRequirements = result.totalRequirements;
let deadlineSeries = createDeadlineSeries(dates, totalRequirements, totalRelationIssues, globalDeadline, false, 2);
var dom = document.getElementById("scatter-chart-container");
var myChart = echarts.init(dom, "dark", {
renderer: "canvas",
useDirtyRect: false
});
var option;
if ((totalRequirements && totalRequirements.length > 0) || (totalRelationIssues && totalRelationIssues.length > 0)) {
option = {
aria: {
show: true
},
legend: {
data: ["요구사항", "연결된 이슈"],
textStyle: {
color: "white"
}
},
xAxis: {
type: "category",
axisTick: { show: false },
data: dates,
axisLabel: {
textStyle: {
color: "white"
}
}
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.2)",
width: 1,
type: "dashed"
}
},
axisLabel: {
textStyle: {
color: "white"
}
}
},
series: [
{
name: "요구사항",
data: totalRequirements,
type: "scatter",
symbol: "diamond",
clip: false,
label: {
normal: {
show: false,
color: "#FFFFFF"
},
emphasis: {
show: true,
color: "#FFFFFF"
}
},
symbolSize: function (val) {
var sbSize = 10;
if (val > 10) {
sbSize = val * 1.1;
} else if (val === 0) {
sbSize = 0;
}
return sbSize;
}
},
{
name: "연결된 이슈",
data: totalRelationIssues,
type: "scatter",
clip: false,
label: {
normal: {
show: false,
color: "#FFFFFF"
},
emphasis: {
show: true,
color: "#FFFFFF"
}
},
symbolSize: function (val) {
var sbSize = 10;
if (val > 10) {
sbSize = val * 1.1;
} else if (val === 0) {
sbSize = 0;
}
return sbSize;
},
itemStyle: {
color: "#13de57"
}
},
...deadlineSeries
],
tooltip: {
trigger: "axis",
position: "top",
borderWidth: 1,
axisPointer: {
type: "line",
label: {
formatter: function (params) {
return formatDate(new Date(params.value));
}
}
}
},
backgroundColor: "rgba(255,255,255,0)",
animationDelay: function (idx) {
return idx * 20;
},
animationDelayUpdate: function (idx) {
return idx * 20;
}
};
myChart.on("click", function (params) {
// console.log(params.data);
});
myChart.on("mouseover", function (params) {
// if (params.seriesType === 'line') {
var option = myChart.getOption();
option.series[params.seriesIndex].label.color = 'white';
option.series[params.seriesIndex].label.show = true;
myChart.setOption(option);
// }
});
myChart.on("mouseout", function (params) {
// if (params.seriesType === 'line') {
var option = myChart.getOption();
option.series[params.seriesIndex].label.show = false;
myChart.setOption(option);
// }
});
}
else {
option = {
title: {
text: "데이터가 없습니다",
left: "center",
top: "middle",
textStyle: {
color: "#fff"
}
},
backgroundColor: "rgba(255,255,255,0)"
};
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
window.addEventListener("resize", myChart.resize);
}
}
});
}
////////////////////
// 히트맵 차트
////////////////////
function calendarHeatMap(pdServiceLink, pdServiceVersions) {
$("#calendar_yearview_blocks_chart_1 svg").remove();
$("#calendar_yearview_blocks_chart_2 svg").remove();
$.ajax({
url: "/auth-admin/api/arms/analysis/time/heatmap",
type: "GET",
data: { pdServiceLink: pdServiceLink, pdServiceVersionLinks: pdServiceVersions },
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
async: false,
statusCode: {
200: function (data) {
console.log("[ analysisTime :: calendarHeatMap ] :: 누적 업데이트 히트맵 차트데이터 = ");
console.log(data);
$(".update-title").show();
$("#calendar_yearview_blocks_chart_1").calendar_yearview_blocks({
data: JSON.stringify(data.requirement),
start_monday: true,
always_show_tooltip: true,
month_names: ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sept", "oct", "nov", "dec"],
day_names: ["mon", "wed", "fri", "sun"]
});
$("#calendar_yearview_blocks_chart_2").calendar_yearview_blocks({
data: JSON.stringify(data.relationIssue),
start_monday: true,
always_show_tooltip: true,
month_names: ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"],
day_names: ["mon", "wed", "fri", "sun"]
});
}
}
});
}
////////////////
// 멀티 콤비네이션 차트
///////////////
async function dailyCreatedCountAndUpdatedStatusesMultiStackCombinationChart(pdServiceLink, pdServiceVersionLinks) {
let deadline = await waitForGlobalDeadline();
let startDate = $("#multi_stack_start_date").val();
let endDate = $("#multi_stack_end_date").val();
if (!validateSearchDateWithChart(startDate, endDate)) {
return;
}
const url = new UrlBuilder()
.setBaseUrl("/auth-admin/api/arms/analysis/time/issue-status/aggregation/by-date")
.addQueryParam("pdServiceLink", pdServiceLink)
.addQueryParam("pdServiceVersionLinks", pdServiceVersionLinks)
.addQueryParam("기준일_필드명", "updated")
.addQueryParam("시작일", startDate)
.addQueryParam("종료일", endDate)
.build();
$(".spinner").html(
' ' +
"생성 개수 및 업데이트 상태 현황 정보를 로딩 중입니다..."
);
$.ajax({
url: url,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
async: false,
statusCode: {
200: function (data) {
console.log("[ analysisTime :: dailyCreatedCountAndUpdatedStatusesMultiStackCombinationChart ] :: 일별 이슈 생성 개수 및 업데이트 현황 데이터 = ");
console.log(data);
var accumulateRequirementCount = 0;
var accumulateRelationIssueCount = 0;
let result = Object.keys(data).reduce(
(acc, date) => {
if (data[date].totalRequirements !== 0 || data[date].totalRelationIssues !== 0) {
acc.dates.push(date);
accumulateRequirementCount += data[date].totalRequirements;
accumulateRelationIssueCount += data[date].totalRelationIssues;
acc.totalRequirements.push(accumulateRequirementCount);
acc.totalRelationIssues.push(accumulateRelationIssueCount);
}
if (data[date].requirementStatuses) {
console.log(data[date].requirementStatuses)
Object.keys(data[date].requirementStatuses).forEach((status) => {
if (!acc.statusKeys.includes(status)) {
acc.statusKeys.push(status);
}
});
}
if (data[date].relationIssueStatuses) {
Object.keys(data[date].relationIssueStatuses).forEach((status) => {
if (!acc.statusKeys.includes(status)) {
acc.statusKeys.push(status);
}
});
}
return acc;
},
{
dates: [],
totalRelationIssues: [],
totalRequirements: [],
statusKeys: []
}
);
var dom = document.getElementById("multi-chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var option;
if (result.dates.length > 0) {
var labelOption = {
show: false,
position: "top",
distance: 0,
align: "center",
verticalAlign: "top",
rotate: 0,
formatter: "{c}",
fontSize: 14,
rich: {
name: {}
}
};
let dates = result.dates;
let totalRelationIssues = result.totalRelationIssues;
let totalRequirements = result.totalRequirements;
let statusKeys = result.statusKeys;
let deadlineSeries = createDeadlineSeries(dates, totalRequirements, totalRelationIssues, globalDeadline, true, 4);
let requirementStatusSeries = statusKeys.map((key, i) => {
let stackType = "요구사항";
return {
name: key,
type: "bar",
stack: stackType,
label: labelOption,
emphasis: {
focus: "series"
},
data: dates.map((date) => {
if (data[date] && data[date].requirementStatuses && Object.keys(data[date].requirementStatuses).length > 0) {
return { value: data[date].requirementStatuses[key] || 0, stackType: stackType };
} else {
return { value: 0, stackType: stackType };
}
})
};
});
let relationIssueStatusSeries = statusKeys.map((key, i) => {
let stackType = "연결된 이슈";
return {
name: key,
type: "bar",
stack: stackType,
label: labelOption,
emphasis: {
focus: "series"
},
data: dates.map((date) => {
if (data[date] && data[date].relationIssueStatuses && Object.keys(data[date].relationIssueStatuses).length > 0) {
return { value: data[date].relationIssueStatuses[key] || 0, stackType: stackType };
} else {
return { value: 0, stackType: stackType };
}
})
};
});
// let stackIndex = statusKeys.map((value, index) => index);
statusKeys.push("요구사항");
statusKeys.push("연결된 이슈");
let multiCombinationChartSeries = [
...requirementStatusSeries,
...relationIssueStatusSeries,
{
name: "요구사항",
type: "line",
// yAxisIndex: 1,
emphasis: {
focus: "series"
},
symbolSize: 10,
data: totalRequirements
},
{
name: "연결된 이슈",
type: "line",
// yAxisIndex: 1,
emphasis: {
focus: "series"
},
symbolSize: 10,
data: totalRelationIssues
},
...deadlineSeries
];
var legendData = statusKeys;
var xAiasData = dates;
option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function(params) {
var tooltipText = "";
tooltipText += params[0].axisValue + " ' +
"수직 타임라인 차트를 로딩 중입니다..."
);
$.ajax({
url: verticalUrl,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
statusCode: {
200: function (data) {
console.log("[ analysisTime :: TimeLineData ] :: = ");
console.log(data);
verticalTimeLineChart(data);
}
}
});
const ridgeLineUrl = new UrlBuilder()
.setBaseUrl("/auth-admin/api/arms/analysis/time/standard-daily/updated-ridgeline")
.addQueryParam("pdServiceLink", pdServiceLink)
.addQueryParam("pdServiceVersionLinks", pdServiceVersionLinks)
.addQueryParam("기준일_필드명", "updated")
.addQueryParam("isReqType", "ISSUE")
.addQueryParam("시작일", startDate)
.addQueryParam("종료일", endDate)
.addQueryParam("크기", 1000)
.addQueryParam("하위_크기", 1000)
.addQueryParam("컨텐츠_보기_여부", true)
.build();
function executeAjaxCall(url) {
$(".spinner").html(
' ' +
"요구사항 업데이트 현황(능선차트)를 로딩 중입니다..."
);
$.ajax({
url: url,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
progress: true,
statusCode: {
200: function (data) {
console.log("[ analysisTime :: ridgeLineData ] :: = ");
console.log(data);
updateRidgeLine(data);
}
}
});
}
executeAjaxCall(ridgeLineUrl);
window.addEventListener("resize", function() {
adjustHeight();
});
}
function getColorByVersion(version) {
var colorPalette = [ //e chart 컬러 팔레트
'#c23531','#2f4554','#61a0a8','#d48265','#91c7ae',
'#749f83','#ca8622','#bda29a','#6e7074','#546570',
'#c4ccd3'
];
var versionNumber = parseInt(version);
return colorPalette[versionNumber % colorPalette.length];
}
function updateRidgeLine(traffic){
// 데이터가 없을 경우
if (!traffic || traffic.length === 0) {
document.getElementById("overlapInputDiv").style.display = "none";
document.getElementById("updateRidgeLine").innerHTML = "" + "데이터가 없습니다.
"; return; } else { document.getElementById("overlapInputDiv").style.display = "flex"; } function setOverlapInputListener() { var overlap = this.value; overlapNumberInput.value = overlap; drawGraph(traffic, overlap); } function setOverlapNumberInputListener() { var overlap = this.value; overlapInput.value = overlap; drawGraph(traffic, overlap); } overlapInput.removeEventListener('input', setOverlapInputListener); overlapNumberInput.removeEventListener('input', setOverlapNumberInputListener); overlapInput.addEventListener('input', setOverlapInputListener); overlapNumberInput.addEventListener('input', setOverlapNumberInputListener); var initialOverlap = traffic.length > 30 ? 5 : 2; document.getElementById("overlapInput").value = initialOverlap; document.getElementById("overlapNumberInput").value = initialOverlap; drawGraph(traffic, initialOverlap); } function drawGraph(traffic, overlap){ document.getElementById("updateRidgeLine").innerHTML = ""; var nestedDataByDate = d3.nest() .key(function(d) { return +new Date(d.date); }) .entries(traffic); var dates = nestedDataByDate.map(function(d) { return +d.key; }).sort(d3.ascending); var nestedDataByName = d3.nest() .key(function(d) { return d.name; }) .entries(traffic); var series = nestedDataByName.map(function(d) { var valuesMap = d3.map(d.values, function(e) { return String(+new Date(e.date)); }); var values = dates.map(function(date) { var valueObj = valuesMap.get(String(date)); return valueObj ? valueObj.value : null; }); var version = d.values[0] ? d.values[0].version : null; // version 필드 추가 var summary = d.values[0] ? d.values[0].summary : null; // version 필드 추가 var key = d.values[0] ? d.values[0].name : null; // version 필드 추가 return { name: key+": "+summary, values: values, version: version ,key:key}; // version 값 포함하여 반환 }); //const overlap = 4; const width = 900; //const height = series.length * 30; const minHeight = 600; const maxHeight = 650; const height = Math.max(minHeight, Math.min(maxHeight, series.length * 16)); const marginTop = 50; const marginRight = 0; const marginBottom = 0; const marginLeft = 280; // Create the scales. const x = d3.scaleTime() .domain(d3.extent(dates)) .range([marginLeft, width - marginRight]); const y = d3.scalePoint() .domain(series.map(d => d.name)) .range([marginTop, height - marginBottom]); const z = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d.values))]).nice() .range([0, -overlap * y.step()]); // Create the area generator and its top-line generator. const area = d3.area() .curve(d3.curveBasis) .defined(d => !isNaN(d)) .x((d, i) => x(dates[i])) .y0(0) .y1(d => z(d)); const line = area.lineY1(); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", maxHeight) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSize(0).tickPadding(4)) .call(g => g.select(".domain").remove()) .selectAll(".tick text") .text(function(d) { return d.length > 42 ? d.slice(0, 35) + ' . . .' : d; // 긴 레이블은 축약 }) .style("font-size", "10px"); // Append a layer for each series. const group = svg.append("g") .selectAll("g") .data(series) .join("g") .attr("transform", d => `translate(0,${y(d.name) + 1})`); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); group.append("path") .attr("fill", d => getColorByVersion(d.version)) .attr("d", d => area(d.values)) .on("mouseover", function(d) { var event = d3.event; d3.select(this) .transition() .duration(20) .style("opacity", 0.4); div.transition() .duration(20) .style("opacity", .9); div.html("버전 정보: " + convertVersionIdToTitle(d.version) + "