Index: arms/js/analysis/resource/chart/circularPackingChart.js =================================================================== diff -u -rde4eb6bcfacfc89d6f7e99548b4208dcb24987a4 -r50887001c32e1e8df91464e5ef472917cbe9f73f --- arms/js/analysis/resource/chart/circularPackingChart.js (.../circularPackingChart.js) (revision de4eb6bcfacfc89d6f7e99548b4208dcb24987a4) +++ arms/js/analysis/resource/chart/circularPackingChart.js (.../circularPackingChart.js) (revision 50887001c32e1e8df91464e5ef472917cbe9f73f) @@ -205,21 +205,16 @@ }); } -function drawCircularPacking(target, psServiceName) { - var chartDom = document.getElementById('circularPacking'); +function drawCircularPacking(target, psServiceName,rawData) { + var chartDom = document.getElementById(target); var myChart = echarts.init(chartDom); var option; - - $.when( - $.get("./js/analysis/mockData/circularPackingEx.json"), - $.getScript( - "../reference/jquery-plugins/d3-5.16.0/d3.min.js", - ) - ).done(function (res) { - run(res[0]); - }); + if(rawData) { + run(rawData); + } function run(rawData) { const dataWrap = prepareData(rawData); + console.log(dataWrap); initChart(dataWrap.seriesData, dataWrap.maxDepth); } function prepareData(rawData) { @@ -236,6 +231,7 @@ seriesData.push({ id: basePath, value: source.$count, + status: source.$status, depth: depth, index: seriesData.length }); @@ -253,6 +249,8 @@ }; } function initChart(seriesData, maxDepth) { + console.log("seriesData ===> ") + console.log(seriesData); var displayRoot = stratify(); function stratify() { return d3 @@ -361,7 +359,7 @@ max: maxDepth, dimension: 'depth', inRange: { - color: ["#182E3D", "#4A8FBD", "#82A5BD", "#5E7788", "#5D8AA8", "#2c5571"]//['#006edd', '#e0ffff'] + //color: ["#182E3D", "#4A8FBD", "#82A5BD", "#5E7788", "#5D8AA8", "#2c5571"]//['#006edd', '#e0ffff'] } } ], @@ -374,6 +372,24 @@ encode: { tooltip: 'value', itemName: 'id' + }, + itemStyle: { + color: function(params) { + // 여기에서 각 항목에 특정 색상을 지정하는 함수를 정의할 수 있습니다. + // 데이터에 액세스하고 조건 또는 로직에 따라 색상을 할당할 수 있습니다. + // 예시: + if (params.data.value % 5 === 4) { + return "rgba(255,255,51,0.71)"; // 값이 50보다 큰 경우 빨간색으로 지정 + } else if (params.data.value % 5 ===3) { + return "rgba(151,78,163,0.73)"; + } else if(params.data.value % 5 === 2) { + return "rgba(77,175,74,0.65)"; + } else if(params.data.value % 5 === 1) { + return "rgba(255,127,0,0.7)"; + } else { + return "rgba(55,125,184,0.62)"; // 기타 값은 초록색으로 지정 + } + } } } }; Index: arms/js/analysisScope.js =================================================================== diff -u -rde4eb6bcfacfc89d6f7e99548b4208dcb24987a4 -r50887001c32e1e8df91464e5ef472917cbe9f73f --- arms/js/analysisScope.js (.../analysisScope.js) (revision de4eb6bcfacfc89d6f7e99548b4208dcb24987a4) +++ arms/js/analysisScope.js (.../analysisScope.js) (revision 50887001c32e1e8df91464e5ef472917cbe9f73f) @@ -6,6 +6,8 @@ var dashboardColor; var pdServiceData; + +var pdServiceListData; var versionListData; //////////////////////////////////////////////////////////////////////////////////////// @@ -95,7 +97,6 @@ makeVersionMultiSelectBox(); dashboardColor = dashboardPalette.dashboardPalette01; - exampleCircularPackingChart(); // circularPackingChart - MockData //d3Chart 그리기 $.getScript("./js/pdServiceVersion/initD3Chart.js").done(function (script, textStatus) { @@ -126,12 +127,16 @@ statusCode: { 200: function (data) { ////////////////////////////////////////////////////////// + pdServiceListData = []; for (var k in data.response) { var obj = data.response[k]; + pdServiceListData.push({ "pdServiceId": obj.c_id, "pdServiceName": obj.c_title }); var newOption = new Option(obj.c_title, obj.c_id, false, false); $("#selected_pdService").append(newOption).trigger("change"); } ////////////////////////////////////////////////////////// + console.log("[analysisScope :: makePdServiceSelectBox] :: pdServiceListData => " ); + console.log(pdServiceListData); } } }); @@ -220,6 +225,8 @@ selectedVersionId = pdServiceVersionIds.join(","); // 요구사항 및 연결이슈 통계 getReqAndLinkedIssueData(selectedPdServiceId, selectedVersionId); + // Circular Packing with D3 차트 + getReqStatusAndAssignees(selectedPdServiceId, selectedVersionId); // 네트워크 차트 statisticsMonitor($("#selected_pdService").val(), selectedVersionId); getRelationJiraIssueByPdServiceAndVersions($("#selected_pdService").val(), selectedVersionId); @@ -1117,8 +1124,117 @@ } ///////////////////////////////////////////////////////// -// Nightingale Rose chart - 제품(서비스)의 버전별 요구사항 수 +// Circular Packing Chart ///////////////////////////////////////////////////////// +function getReqStatusAndAssignees(pdServiceLink, pdServiceVersionLinks) { + + $.ajax({ + url: "/auth-user/api/arms/analysis/scope/req-status-and-reqInvolved-unique-assignees2", + type: "GET", + data: { + pdServiceLink: pdServiceLink, + pdServiceVersionLinks: pdServiceVersionLinks, + 메인그룹필드: "pdServiceVersion", + 하위그룹필드들: "isReq", + 컨텐츠보기여부: true + }, + contentType: "application/json;charset=UTF-8", + dataType: "json", + progress: true, + statusCode: { + 200: function (result) { + console.log("[ analysisScope :: getReqStatusAndAssignees ] :: result"); + console.log(result); + let pdServiceName; + pdServiceListData.forEach(elements => { + if (elements["pdServiceId"] === +pdServiceLink) { + pdServiceName = elements["pdServiceName"]; + } + }); + + let reqStatusList = []; + console.log("getReqStatusAndAssignees :: getReqStatus ==> 시작"); + getReqStatus(pdServiceLink, pdServiceVersionLinks, function(result) { + if (result != null) { + reqStatusList = result; + } else { + console.error("getReqStatus AJAX 요청에서 에러 발생"); + } + }); + console.log("getReqStatusAndAssignees :: getReqStatus ==> "); + console.log(reqStatusList); + + let 버전별_검색결과_목록 = reqStatusList["검색결과"]["group_by_pdServiceVersion"]; + + if(버전별_검색결과_목록 && 버전별_검색결과_목록.length > 0) { + + } + + + let dataObject = {}; + if (result.length > 0) { + for (let i = 0; i < result.length; i++) { + // 버전이름 가져오기 + let versionName =""; + for (let j = 0; j < versionListData.length; j++) { + if(result[i]["상품_서비스_버전"] === versionListData[j]["c_id"]){ + versionName = versionListData[j]["c_title"].replaceAll(".","_"); + console.log("getReqStatusAndAssignees :: 상품_서비스_버전 이름 : " + versionName); + break; + } + } + let verSubObject = {}; + result[i]["요구사항들"].forEach((element) => { + // 작업자수가 0이 아닌 요구 사항만 (담당자 배정된 요구사항만) + if (element["작업자수"] !== 0) { + verSubObject[element["요구_사항_번호"]] = {"$count" : element["작업자수"]}; + } + }); + dataObject[versionName] = verSubObject; + } + } + + + console.log("getReqStatusAndAssignees :: dataObject ==> "); + console.log(dataObject); + drawCircularPacking("circularPacking",pdServiceName,dataObject); + } + } + }); +} + +// 요구사항별 Status 가져오기 +function getReqStatus(pdServiceId, pdServiceVersionLinks, callback) { + $.ajax({ + url: "/auth-user/api/arms/analysis/scope/getReqStatus/"+pdServiceId, + type: "GET", + data: { + 서비스아이디: pdServiceId, + pdServiceVersionLinks: pdServiceVersionLinks, + 메인그룹필드: "pdServiceVersion", + 하위그룹필드들: "key,status.status_name.keyword", + 컨텐츠보기여부: true + }, + contentType: "application/json;charset=UTF-8", + dataType: "json", + progress: true, + async: false, + statusCode: { + 200: function(result) { + callback(result); + }, + error: function(xhr, status, error) { + // 에러 처리 + console.error(error); + callback(null); // 에러 발생 시 callback 호출 + } + } + }); +} + +///////////////////////////////////////////////////////// +// Radial Polar Bar Chart - 제품(서비스)의 버전별 요구사항 수 +///////////////////////////////////////////////////////// function getReqPerVersion(pdService_id, pdServiceVersionLinks, versionTag) { $.ajax({ url: "/auth-user/api/arms/analysis/scope/getReqPerVersion/" + pdService_id,