Index: arms/html/analysisTime/content-container.html =================================================================== diff -u -re05d7c791ca041a40ef7c540f9d55fb70eb73bb2 -r547a05b3b655e5b332ab6cda63eb2fa73d4f10af --- arms/html/analysisTime/content-container.html (.../content-container.html) (revision e05d7c791ca041a40ef7c540f9d55fb70eb73bb2) +++ arms/html/analysisTime/content-container.html (.../content-container.html) (revision 547a05b3b655e5b332ab6cda63eb2fa73d4f10af) @@ -254,239 +254,7 @@ </div> </section> </div> -<!-- <div class="col-lg-12 col-layer"> - <section class="widget"> - <header> - <h4> - <span class="font13" - style="font-weight: bold"> - <i class="fa fa-home"></i> - 일정 분석 - </span> - </h4> - <div class="widget-controls"> - <a data-widgster="toleft" - title="change width to left" - href="#"> - <i class="glyphicon glyphicon-chevron-left"></i> - </a> - <a data-widgster="expand" - title="Expand" - href="#"> - <i class="glyphicon glyphicon-chevron-up"></i> - </a> - <a data-widgster="collapse" - title="Collapse" - href="#"> - <i class="glyphicon glyphicon-chevron-down"></i> - </a> - <a data-widgster="toright" - title="change width to right" - href="#"> - <i class="glyphicon glyphicon-chevron-right"></i> - </a> - <a data-widgster="restore" - title="Restore" - href="#"> - <span class="glyphicon glyphicon-repeat"></span> - </a> - <a data-widgster="fullscreen" - title="Fullscreen" - href="#"> - <i class="glyphicon glyphicon-fullscreen" - style="font-size: 11px"> - </i> - </a> - </div> - </header> - <div class="body"> - <div class="gradient_middle_border" style="width: 100%; height: 2px"></div> - <blockquote class="font13" - style="margin-top: 5px;"> - 선택한 제품(서비스)와 버전의 Time별 요구사항 현황 - <div style="float: right;"> - <button class="btn btn-transparent btn-xs" - style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;" - onclick="window.open('docs/guide.html#requirement_regist_inquiry')"> - Help - <i class="fa fa-question" - style="font-size: 14px; vertical-align: middle; color: #acacac"></i> - </button> - </div> - </blockquote> - <div class="row"> - <div class="col-md-3"> - <section class="widget dashboard-top-section" - style="border: dashed;border-width: thin;border-color: lightsteelblue;"> - <header style="margin-bottom: 20px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-asterisk"></i> - 제품(서비스) - 버전 선택 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div class="column"> - <blockquote class="font12"> - <strong>1. Product<sup>service</sup>를 선택해 주세요</strong> - </blockquote> - <div class="control-group" - class="darkBack" - style="padding-top: 10px; padding-bottom: 15px; border: 0"> - <div class="controls form-group" - class="darkBack" - style="margin-bottom: 5px !important"> - <select id="selected_pdService" - required="required" - data-placeholder="Select Product(Service)" - class="select-block-level chzn-select darkBack" - tabindex="-1" - name="selected_pdService" - style="width: 100% !important"> - <option value=""></option> - </select> - </div> - </div> - <blockquote class="font12"> - <strong>2. Product<sup>service</sup>의 버전을 선택해 주세요</strong> - </blockquote> - <div class="control-group" - style="padding-bottom: 10px; border: 0"> - <div class="controls form-group" - style="margin-bottom: 5px !important"> - <select multiple="multiple" - id="multiversion" - class="multiple-select btn-block darkBack" - placeholder=" Select Version"> - </select> - </div> - </div> - </div> - </div> - </section> - </div> - <div class="col-md-3"> - <section class="widget dashboard-top-section"> - <header style="margin-bottom: 15px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-clock-o"></i> - 전체 남은 일자 중 남은 퍼센트 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div class="control-group" - class="darkBack" - style="padding-bottom: 10px; border: 0"> - <div class="darkBack" - style="margin-bottom: 10px !important; padding: 10px 0px; !important; text-align: center"> - <span>종료까지 남은 진행률<br/><a id="version_progress" style="font-weight: bold;">-</a> % <a class="isExceed" style="font-weight: bold;"></a></span><br> - </div> - <div class="darkBack" - style="margin-bottom: 10px !important; padding: 10px 0px; !important; text-align: center"> - <span>종료까지 남은 일자<br/><a id="remaining_days" style="font-weight: bold;">-</a> 일 <a class="isExceed" style="font-weight: bold;"></a></span><br> - </div> - </div> - </div> - </section> - </div> - <div class="col-md-3"> - <section class="widget dashboard-top-section"> - <header style="margin-bottom: 15px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-calendar-o"></i> - 요구사항 현황 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div class="box"> - <div class="big-text" id="total_req_count">-</div> - <div class="description"> - <i class="fa fa-bullhorn"></i> - 총 요구사항 - </div> - </div> - <div class="column"> - <div class="control-group" - class="darkBack" - style="padding-bottom: 10px; border: 0"> - <div class="controls form-group darkBack" - id="progress_req_status" - style="margin-bottom: 5px !important;"> - </div> - </div> - </div> -<!– <ul class="server-stats"> - <li> - <div class="key pull-right" id="completed_req_count"></div> - <div class="stat"> - <div class="info">완료</div> - <div class="progress progress-small" style="height: 20px;"> - <div class="progress-bar progress-bar-warning" id="req_completion_rate" style="width: 0%;"></div> - </div> - </div> - </li> - </ul>–> - </div> - </section> - </div> - - <div class="col-md-3"> - <section class="widget dashboard-top-section"> - <header style="margin-bottom: 15px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-dollar"></i> - 연결이슈 현황 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div class="box"> - <div class="big-text" id="total_linked_issue_count">-</div> - <div class="description"> - <i class="fa fa-sitemap"></i> - 총 연결이슈 - </div> - </div> - <div class="column"> - <div class="control-group" - class="darkBack" - style="padding-bottom: 10px; border: 0"> - <div class="controls form-group darkBack" - id="progress_linked_issue_status" - style="margin-bottom: 5px !important;"> - </div> - </div> - </div> -<!– <ul class="server-stats"> - <li> - <div class="key pull-right" id="completed_linked_issue_count"></div> - <div class="stat"> - <div class="info">완료</div> - <div class="progress progress-small" style="height: 20px;"> - <div class="progress-bar progress-bar-info" id="linked_issue_completion_rate" style="width: 0%;"></div> - </div> - </div> - </li> - </ul>–> - </div> - </section> - </div> - </div> - </div> - </section> - </div>--> - <!-- 두번째 박스 --> <div class="col-lg-12 col-layer"> <section class="widget"> @@ -586,58 +354,8 @@ </div> </section> </div> - <!-- <div class="col-lg-4"> - <section class="widget" style="margin-bottom: 2px"> - <header> - <h4> - <span - class="font13" - style="font-weight: bold"> - <i class="fa fa-clock-o"></i> - 진행 기한 - </span> - </h4> - </header> - <div - class="body" - id="project-progress-wrapper"> - <div style="display: flex; flex-direction: row; height: 42%; justify-content: space-between"> - <div - id="project-start" - class="box col-sm-4 fade-in-box" - style="display: none; margin-bottom: 0px; margin-right: 10px"> - <span>시작일로부터</span> - <br /> - <span - class="project-date" - id="fastestStartDate"></span> - <div - class="day-progress" - id="startDDay"></div> - </div> - <div - id="project-end" - class="box col-sm-4 fade-in-box" - style="display: none;margin-bottom: 0px; padding-bottom: 30px;"> - <span>종료일까지</span> - <br /> - <span - class="project-date" - id="latestEndDate"></span> - <div - class="day-progress" - id="endDDay"></div> - </div> - <div class="col-sm-4 fade-in-box" id="versionGaugeChart" style="height: 90px"></div> - </div> - - </div> - </section> - </div>--> - <!-- </div> - <div class="row" style="height: 230px; margin-top: 15px">--> <div class="col-lg-8 color-legend-widget"> - <section class="widget" style=" height: 315px;"> + <section class="widget large" style="min-height: 315px;"> <header> <h4> <span @@ -661,163 +379,6 @@ </section> </div> - <!-- 세번째 박스 --> -<!-- <div class="col-lg-12 col-layer"> - <section class="widget "> - <header> - <h4> - <span class="font13" - style="font-weight: bold"> - <i class="fa fa-calendar-o"></i> - 세번째 박스 - </span> - </h4> - <div class="widget-controls"> - <a data-widgster="toleft" - title="change width to left" - href="#"> - <i class="glyphicon glyphicon-chevron-left"></i> - </a> - <a data-widgster="expand" - title="Expand" - href="#"> - <i class="glyphicon glyphicon-chevron-up"></i> - </a> - <a data-widgster="collapse" - title="Collapse" - href="#"> - <i class="glyphicon glyphicon-chevron-down"></i> - </a> - <a data-widgster="toright" - title="change width to right" - href="#"> - <i class="glyphicon glyphicon-chevron-right"></i> - </a> - <a data-widgster="restore" - title="Restore" - href="#"> - <span class="glyphicon glyphicon-repeat"></span> - </a> - <a data-widgster="fullscreen" - title="Fullscreen" - href="#"> - <i class="glyphicon glyphicon-fullscreen" - style="font-size: 11px"> - </i> - </a> - </div> - </header> - <div class="body"> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div> - <div class="row"> - <div class="col-lg-4 color-legend-widget"> - <section class="widget"> - <header style="margin-bottom: 15px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-asterisk"></i> - 전체 어플리케이션 진행 현황 컬러표 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div> - <div id="radar-chart-main"></div> - </div> - </div> - </section> - </div> - <div class="col-lg-8 color-legend-widget"> - <section class="widget" style="/*margin-bottom: 0px!important;*/"> - <header> - <h4> - 제품(서비스) 버전별 - <small> - 요구사항 상태 - </small> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - <div class="widget-controls"> - <!– <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-plus"></i></a>–> - <!– <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-minus"></i></a>–> - <!– <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>–> - </div> - </header> - <div class="widget-table-overflow"> - - <table class="table table-striped table-lg mt-sm mb-0 sources-table"> - <thead> - <tr> - <th class="source-col-header">Source</th> - <th>Amount</th> - <th>Change</th> - <th class="hidden-xs">Percent.,%</th> - <th>Target</th> - <th class="chart-col-header hidden-sm hidden-xs">Trend</th> - </tr> - </thead> - <tbody> - <tr> - <td><span class="label label-important">Direct</span></td> - <td>713</td> - <td><strong class="color-green">+53</strong></td> - <td class="hidden-xs">+12</td> - <td>900</td> - <td class="chart-cell hidden-sm hidden-xs"> - <div id="direct_trend"></div> - </td> - </tr> - <tr> - <td><span class="label label-warning">Refer</span></td> - <td>562</td> - <td><strong>+84</strong></td> - <td class="hidden-xs">+64</td> - <td>500</td> - <td class="chart-cell hidden-sm hidden-xs"> - <div id="refer_trend"></div> - </td> - </tr> - <tr> - <td><span class="label label-success">Social</span></td> - <td>148</td> - <td><strong class="color-red">-12</strong></td> - <td class="hidden-xs">+3</td> - <td>180</td> - <td class="chart-cell hidden-sm hidden-xs"> - <div id="social_trend"></div> - </td> - </tr> - <tr> - <td><span class="label label-info">Search</span></td> - <td>653</td> - <td><strong class="color-green">+23</strong></td> - <td class="hidden-xs">+43</td> - <td>876</td> - <td class="chart-cell hidden-sm hidden-xs"> - <div id="search_trend"></div> - </td> - </tr> - <tr> - <td><span class="label label-inverse">Internal</span></td> - <td>976</td> - <td><strong>+101</strong></td> - <td class="hidden-xs">-7</td> - <td>844</td> - <td class="chart-cell hidden-sm hidden-xs"> - <div id="internal_trend"></div> - </td> - </tr> - </tbody> - </table> - </div> - </section> - </div> - </div> - </div> - </section> - </div>--> - <!-- 네번째 박스 --> <div class="col-lg-12 col-layer"> <section class="widget"> @@ -978,78 +539,6 @@ </section> </div> -<!-- <div class="col-lg-12 col-layer"> - <section class="widget"> - <header> - <h4> - <span class="font13" - style="font-weight: bold"> - <i class="fa fa-calendar-o"></i> - 요구사항 및 연결된 이슈 - </span> - </h4> - <div class="widget-controls"> - <a data-widgster="toleft" - title="change width to left" - href="#"> - <i class="glyphicon glyphicon-chevron-left"></i> - </a> - <a data-widgster="expand" - title="Expand" - href="#"> - <i class="glyphicon glyphicon-chevron-up"></i> - </a> - <a data-widgster="collapse" - title="Collapse" - href="#"> - <i class="glyphicon glyphicon-chevron-down"></i> - </a> - <a data-widgster="toright" - title="change width to right" - href="#"> - <i class="glyphicon glyphicon-chevron-right"></i> - </a> - <a data-widgster="restore" - title="Restore" - href="#"> - <span class="glyphicon glyphicon-repeat"></span> - </a> - <a data-widgster="fullscreen" - title="Fullscreen" - href="#"> - <i class="glyphicon glyphicon-fullscreen" - style="font-size: 11px"> - </i> - </a> - </div> - </header> - <div class="body"> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div> - <div class="row"> - <div class="col-lg-12 color-legend-widget"> - <section class="widget large"> - <header> - <h4 style=" - display: flex; - justify-content: space-between; - "> - <div> - <i class="fa fa-bar-chart"></i> 일자별 이슈 상태 - </div> - <button id="status-chart-button" type="button" class="btn btn-default btn-sm ml-1">그룹화 적용</button> - </h4> - </header> - <div id="status-chart-container"> - <div class="body" id="status-chart"></div> - </div> - </section> - </div> - </div> - </div> - </section> - </div>--> - - <!-- 다섯번째 박스 --> <!-- 주식 차트 부분 주석 <div class="col-lg-12 col-layer"> <section class="widget"> @@ -1137,78 +626,7 @@ </div> --> - <!-- 여섯번째 박스 --> -<!-- x축 타임라인 차트 주석 - <div class="col-lg-12 col-layer"> - <section class="widget"> - <header> - <h4> - <span class="font13" - style="font-weight: bold"> - <i class="fa fa-calendar-o"></i> - 버전별 타임라인 - </span> - </h4> - <div class="widget-controls"> - <a data-widgster="toleft" - title="change width to left" - href="#"> - <i class="glyphicon glyphicon-chevron-left"></i> - </a> - <a data-widgster="expand" - title="Expand" - href="#"> - <i class="glyphicon glyphicon-chevron-up"></i> - </a> - <a data-widgster="collapse" - title="Collapse" - href="#"> - <i class="glyphicon glyphicon-chevron-down"></i> - </a> - <a data-widgster="toright" - title="change width to right" - href="#"> - <i class="glyphicon glyphicon-chevron-right"></i> - </a> - <a data-widgster="restore" - title="Restore" - href="#"> - <span class="glyphicon glyphicon-repeat"></span> - </a> - <a data-widgster="fullscreen" - title="Fullscreen" - href="#"> - <i class="glyphicon glyphicon-fullscreen" - style="font-size: 11px"> - </i> - </a> - </div> - </header> - <div class="body"> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div> - <div class="row"> - <div class="col-lg-12 color-legend-widget"> - <section class="widget" style="/*margin-bottom: 0px!important;*/"> - <header style="margin-bottom: 15px"> - <h4> - <span class="font13" style="font-weight: bold"> - <i class="fa fa-asterisk"></i> - 버전별 업데이트 요구사항 현황 - </span> - </h4> - <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> - </header> - <div class="body"> - <div id="demo"></div> - </div> - </section> - </div> - </div> - </div> - </section> - </div>--> - - <!-- 일곱번째 박스 --> + <!-- Vertical 타임라인 박스 --> <div class="col-lg-12 col-layer"> <section class="widget"> <header> @@ -1357,15 +775,6 @@ color: white; } - /* 레이더 차트 */ - #versionGaugeChart svg:not(:root) { - overflow: visible - } - - #radar-chart-main { - height: 300px; - } - canvas { margin: auto; } @@ -1376,31 +785,6 @@ } } - .network-graph { - height: 415px; - display: flex; - justify-content: center; - align-items: center; - } - - #NETWORK_GRAPH { - overflow: hidden!important; - } - - #NETWORK_GRAPH .node-label { - font-size: 14px; - font-weight:bold; - color:#111; - stroke: white; - stroke-width: 1.5px; - paint-order: stroke fill; - text-anchor: middle; - } - - .graph { - height: 150px!important; - } - #versionGaugeChart svg { height: 185px; } @@ -1426,14 +810,15 @@ overflow: visible; } + #version-timeline-chart-container{ + position: relative; + width: 100%; + height: 100%; + overflow: visible; + } + #calendar_yearview_blocks_chart_1, #calendar_yearview_blocks_chart_2{ max-width: 100%; /* 부모 컨테이너의 최대 너비 설정 */ } -/* .day { - width: 1vw; !* 상대적인 너비 값 *! - height: 1vw; !* 상대적인 높이 값 *! - margin: 1px; - !* 다른 스타일링 속성들 추가 *! - }*/ </style> \ No newline at end of file Index: arms/js/analysisTime.js =================================================================== diff -u -re05d7c791ca041a40ef7c540f9d55fb70eb73bb2 -r547a05b3b655e5b332ab6cda63eb2fa73d4f10af --- arms/js/analysisTime.js (.../analysisTime.js) (revision e05d7c791ca041a40ef7c540f9d55fb70eb73bb2) +++ arms/js/analysisTime.js (.../analysisTime.js) (revision 547a05b3b655e5b332ab6cda63eb2fa73d4f10af) @@ -3,11 +3,11 @@ /////////////////// var dashboardColor; var selectedVersionId; -var globalJiraIssue = {}; -var pdServiceData; var versionListData; -var earliestVersionStartDate; var deadline; +// 최상단 메뉴 변수 +var req_count, linkedIssue_subtask_count, resource_count, req_in_action; +var mailAddressList; // 필요시 작성 //////////////////////////////////////////////////////////////////////////////////////// @@ -23,10 +23,6 @@ "../reference/light-blue/lib/jquery.iframe-transport.js", // chart Colors // "./js/dashboard/chart/colorPalette.js", - // c3 콤비네이션 차트 - // "../reference/jquery-plugins/c3/c3.min.css", - // "../reference/jquery-plugins/c3/c3-custom.css", - // "../reference/jquery-plugins/c3/c3.min.js", "./js/common/colorPalette.js", // 2번째 박스 timeline "../reference/jquery-plugins/info-chart-v1/js/D.js", @@ -36,7 +32,7 @@ "../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/timeline/css/newtimeline.css", "../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/timeline/js/raphael.min.js", "../reference/jquery-plugins/Timeline-Graphs-jQuery-Raphael/timeline/js/newtimeline.js", - // 3번째 박스 데이터 테이블 내 차트 + // echarts "../reference/jquery-plugins/echarts-5.4.3/dist/echarts.min.js", // 5번째 박스 network chart(현 게이지 차트) "./js/analysisTime/d3.v5.min.js", @@ -46,6 +42,7 @@ // 7번째 박스 "../reference/jquery-plugins/timelines-chart-2.11.8/src/show-time-marker.js", "../reference/jquery-plugins/timelines-chart-2.11.8/example/random-data.js", + // 최상단 메뉴 "js/analysis/topmenu/basicRadar.js", "js/analysis/topmenu/topMenu.js" ], @@ -108,7 +105,6 @@ .catch(function(error) { console.error('플러그인 로드 중 오류 발생' + error); }); - } /////////////////////// @@ -135,7 +131,6 @@ var newOption = new Option(obj.c_title, obj.c_id, false, false); $("#selected_pdService").append(newOption).trigger("change"); } - ////////////////////////////////////////////////////////// } } }); @@ -176,7 +171,6 @@ progress: true, statusCode: { 200: function (data) { - ////////////////////////////////////////////////////////// // console.log(data.response); // versionData versionListData = data.response.reduce((obj, item) => { @@ -194,21 +188,17 @@ selectedVersionId = pdServiceVersionIds.join(','); + // 최상단 메뉴 통계 수치_초기화(); - - // 요구사항 및 연결이슈 통계 getReqAndLinkedIssueData($("#selected_pdService").val(), selectedVersionId); + // 버전 및 게이지차트, 버전 타임라인 차트 초기화 statisticsMonitor($("#selected_pdService").val(), selectedVersionId); + // 히트맵 차트 초기화 calendarHeatMap($("#selected_pdService").val(), selectedVersionId); - showStatusesCountBox(); - getReqLinkedIssueCountAndRate($("#selected_pdService").val(), selectedVersionId, true); - getReqLinkedIssueCountAndRate($("#selected_pdService").val(), selectedVersionId, false); - - // combinationChart($("#selected_pdService").val(), selectedVersionId); - + // 요구사항 및 연결된 이슈 생성 누적 개수 및 업데이트 상태 현황 멀티 스택바 차트 setTimeout(function () { //Scope - (2) 요구사항에 연결된 이슈 총 개수 multiCombinationChart($("#selected_pdService").val(), selectedVersionId); @@ -251,21 +241,17 @@ selectedVersionId = versionTag.join(','); + // 최상단 메뉴 통계 수치_초기화(); - - // 요구사항 및 연결이슈 통계 getReqAndLinkedIssueData($("#selected_pdService").val(), selectedVersionId); + // 버전 및 게이지차트, 버전 타임라인 차트 초기화 statisticsMonitor($("#selected_pdService").val(), selectedVersionId); + // 히트맵 차트 초기화 calendarHeatMap($("#selected_pdService").val(), selectedVersionId); - showStatusesCountBox(); - getReqLinkedIssueCountAndRate($("#selected_pdService").val(), selectedVersionId, true); - getReqLinkedIssueCountAndRate($("#selected_pdService").val(), selectedVersionId, false); - - // combinationChart($("#selected_pdService").val(), selectedVersionId); - + // 요구사항 및 연결된 이슈 생성 누적 개수 및 업데이트 상태 현황 멀티 스택바 차트 setTimeout(function () { //Scope - (2) 요구사항에 연결된 이슈 총 개수 multiCombinationChart($("#selected_pdService").val(), selectedVersionId); @@ -295,31 +281,6 @@ return year + "-" + month + "-" + day; } -//////////////////// -// 첫번째 박스 -//////////////////// -function showStatusesCountBox() { - $("#progress_req_status").slimScroll({ - height: "190px", - railVisible: true, - railColor: "#222", - railOpacity: 0.3, - wheelStep: 10, - allowPageScroll: false, - disableFadeOut: false - }); - - $("#progress_linked_issue_status").slimScroll({ - height: "190px", - railVisible: true, - railColor: "#222", - railOpacity: 0.3, - wheelStep: 10, - allowPageScroll: false, - disableFadeOut: false - }); -} - function statisticsMonitor(pdservice_id, pdservice_version_id) { console.log("선택된 서비스 ===> " + pdservice_id); console.log("선택된 버전 리스트 ===> " + pdservice_version_id); @@ -334,7 +295,6 @@ progress: true, statusCode: { 200: function (json) { - pdServiceData = json; let versionData = json.pdServiceVersionEntities; versionData.sort((a, b) => a.c_id - b.c_id); let version_count = versionData.length; @@ -410,84 +370,14 @@ $("#timelineData .label").css("text-align", "left"); $("#today_flag").css("left", flagPosition); - // radarChart(pdservice_id, versionData); + // versionTimelineChart(versionCustomTimeline); } } } } }); } -function calculateDateDiff(date1, date2) { - return Math.floor((new Date(date1) - new Date(date2)) / (1000 * 60 * 60 * 24)); -} - -function progressShow(today, start_date, end_date) { - var totalDate = calculateDateDiff(end_date, start_date); - var remainingDate = calculateDateDiff(end_date, today); - var isExceeded = remainingDate < 0; - var absoluteRemainingDate = isExceeded ? Math.abs(remainingDate) : Math.abs(remainingDate); - var progress = totalDate === 0 ? 0 : ((absoluteRemainingDate / totalDate) * 100).toFixed(2); - - $('.isExceed').text(isExceeded ? " 초과" : "").css("color", isExceeded ? "#FF4D4D" : "none"); - $('#remaining_days').text(absoluteRemainingDate).css("color", isExceeded ? "#FF4D4D" : ""); - $('#version_progress').text(progress).css("color", isExceeded ? "#FF4D4D" : ""); -} - -function getReqLinkedIssueCountAndRate(pdservice_id, pdServiceVersionLinks, isReq) { - - var _url = "/auth-user/api/arms/analysis/time/normal-version/"+pdservice_id; - $.ajax({ - url: _url, - type: "GET", - data: { - "서비스아이디" : pdservice_id, - "메인그룹필드" : "status.status_name.keyword", - "isReq" : isReq, - "컨텐츠보기여부" : false, - "크기" : 1000, - "pdServiceVersionLinks" : pdServiceVersionLinks - }, - contentType: "application/json;charset=UTF-8", - dataType: "json", - progress: true, - statusCode: { - 200: function (data) { - if(isReq === true) { - calculateCompletion(data, "completed_req_count", "total_req_count", "req_completion_rate", "progress_req_status"); - - } else { - calculateCompletion(data, "completed_linked_issue_count", "total_linked_issue_count", "linked_issue_completion_rate", "progress_linked_issue_status"); - } - } - } - }); -} - -function calculateCompletion(data, completedId, totalId, rateId, progressId) { - $('#' + progressId).empty(); - var totalCount = data["전체합계"]; - var result = data["검색결과"]["group_by_status.status_name.keyword"]; - console.log(progressId); - var completedCount = 0; - result.forEach((item) => { - var count = item["개수"]; - completedCount += count; - - var key = item["필드명"]; - var value = count; - - var html_piece = "<div class=\"controls form-group darkBack\"\n" + - " style=\"margin-bottom: 5px !important; padding-top: 5px !important;\">\n" + - "<span>✡ " + key + " : <a id=\"alm_server_count\" style=\"font-weight: bold;\"> " + value + "</a> 개</span>\n" + - "</div>"; - // console.log(html_piece); - $("#" + progressId).append(html_piece); - }); - $("#" + totalId).text(totalCount); -} - - //////////////////// // 두번째 박스 //////////////////// @@ -604,9 +494,7 @@ } } } - earliestVersionStartDate = formatDate(new Date(fastestStartDate)); deadline = formatDate(new Date(latestEndDate)); - console.log("가장 빠른 버전 시작일" + earliestVersionStartDate +"\n가장 늦은 버전 종료일"+ deadline); $("#fastestStartDate").text(new Date(fastestStartDate).toLocaleDateString()); $("#latestEndDate").text(new Date(latestEndDate).toLocaleDateString()); @@ -794,60 +682,51 @@ } needle.animateOn(chart, needleAngle); - - progressShow(today, startDate, endDate); } //////////////////// -// 세번째 박스 +// 스캐터 차트 //////////////////// function scatterChart(data) { console.log(data); var requirementDataCount = {}; var relationIssueDataCount = {}; - var categories = []; - data.forEach(jiraissue => { - if(jiraissue.updated === null || jiraissue.updated === undefined) { - return; + var categories = new Set(); + for(let jiraissue of data) { + if(!jiraissue.updated) { + continue; } var updatedDate = jiraissue.updated.split('T')[0]; - categories.push(updatedDate); + categories.add(updatedDate); - if (jiraissue.isReq === true) { - if (!requirementDataCount[updatedDate]) { - requirementDataCount[updatedDate] = 0; - } - requirementDataCount[updatedDate]++; - } else { - if (!relationIssueDataCount[updatedDate]) { - relationIssueDataCount[updatedDate] = 0; - } - relationIssueDataCount[updatedDate]++; - } - }); + var dataCount = jiraissue.isReq ? requirementDataCount : relationIssueDataCount; + dataCount[updatedDate] = (dataCount[updatedDate] || 0) + 1; + } - var deadlineSeries = createDeadlineSeries(categories, deadline, 2); - console.log(deadlineSeries); - - var requirementData = Object.keys(requirementDataCount).map(key => { - var dateObj = new Date(key+'T00:00:00'); - return [dateObj, requirementDataCount[key]]; + var categoriesArray = Array.from(categories); + categoriesArray.sort((a, b) => { + return new Date(a) - new Date(b); }); - var relationIssueData = Object.keys(relationIssueDataCount).map(key => { - var dateObj = new Date(key+'T00:00:00'); - return [dateObj, relationIssueDataCount[key]]; - }); + var deadlineSeries = createDeadlineSeries(categoriesArray, deadline, 2); + var requirementData = []; + var relationIssueData = []; + for(let category of categoriesArray) { + requirementData.push(requirementDataCount[category] || 0); + relationIssueData.push(relationIssueDataCount[category] || 0); + } + var dom = document.getElementById('scatter-chart-container'); var myChart = echarts.init(dom, 'dark', { renderer: 'canvas', useDirtyRect: false }); + var option; if ((requirementData && requirementData.length > 0) || (relationIssueData && relationIssueData.length > 0) ) { @@ -857,24 +736,18 @@ show: true }, legend: { - data: ['요구사항' , '연결된 이슈'] // 여기에 실제 데이터 종류를 적어주세요 + data: ['요구사항' , '연결된 이슈'], // 여기에 실제 데이터 종류를 적어주세요 + textStyle: { + color: 'white' + } }, - /* toolbox: { - left: 'left', - feature: { - dataView: {}, - saveAsImage: {}, - dataZoom: {} - } - },*/ xAxis: { - type: 'time', - splitLine: { - show: false, - lineStyle: { - color: 'rgba(255,255,255,0.2)', // 라인 색상을 빨간색으로 변경 - width: 1, // 라인 너비를 2로 변경 - type: 'solid' // 라인 유형을 실선으로 변경 + type: 'category', + axisTick: {show: false}, + data: categoriesArray, + axisLabel: { + textStyle: { + color: 'white' } } }, @@ -883,11 +756,16 @@ splitLine: { show: true, lineStyle: { - color: 'rgba(255,255,255,0.2)', // 라인 색상을 빨간색으로 변경 - width: 1, // 라인 너비를 2로 변경 - type: 'solid' // 라인 유형을 실선으로 변경 + color: 'rgba(255,255,255,0.2)', + width: 1, + type: 'dashed' } - } + }, + axisLabel: { + textStyle: { + color: 'white' + } + }, }, series: [ { @@ -904,9 +782,12 @@ }, symbolSize: function (val) { var sbSize = 10; - if (val[1] > 10) { - sbSize = val[1] * 1.1; + if (val > 10) { + sbSize = val * 1.1; } + else if (val === 0) { + sbSize = 0; + } return sbSize; }, }, @@ -923,9 +804,12 @@ }, symbolSize: function (val) { var sbSize = 10; - if (val[1] > 10) { - sbSize = val[1] * 1.1; + if (val > 10) { + sbSize = val * 1.1; } + else if (val === 0) { + sbSize = 0; + } return sbSize; }, itemStyle: { @@ -982,7 +866,7 @@ } //////////////////// -// 네번째 박스 +// 스캐터 차트 데이터 호출 //////////////////// function getRelationJiraIssueByPdServiceAndVersions(pdServiceLink, pdServiceVersions) { $.ajax({ @@ -996,16 +880,12 @@ statusCode: { 200: function (data) { console.log(data); - // statusTimeline(data); sevenTimeline(data); setTimeout(function () { //Scope - (2) 요구사항에 연결된 이슈 총 개수 scatterChart(data); },1000); - - globalJiraIssue = data; - } } }); @@ -1060,9 +940,6 @@ /////////////// function multiCombinationChart(pdServiceLink, pdServiceVersionLinks) { - var issueStatusTypes = []; - var xKeys = []; - const url = new UrlBuilder() .setBaseUrl('/auth-user/api/arms/analysis/time/daily-requirements-count/jira-issue-statuses') .addQueryParam('pdServiceLink', pdServiceLink) @@ -1080,18 +957,34 @@ progress: true, statusCode: { 200: function (data) { - + console.log(data); + var accumulateRequirementCount = 0; + var accumulateRelationIssueCount = 0; let result = Object.keys(data).reduce((acc, date) => { - if (Object.keys(data[date].statuses).length > 0) { + if ((data[date].requirementStatuses !== null && Object.keys(data[date].requirementStatuses).length > 0) || (data[date].relationIssueStatuses !== null &&Object.keys(data[date].relationIssueStatuses).length > 0)) { acc.dates.push(date); - acc.totalIssues.push(data[date].totalIssues); - acc.totalRequirements.push(data[date].totalRequirements); - Object.keys(data[date].statuses).forEach(status => { - if (!acc.statusKeys.includes(status)) { - acc.statusKeys.push(status); - } - }); + accumulateRequirementCount += data[date].totalRequirements; + accumulateRelationIssueCount += data[date].totalRelationIssues; + + acc.totalRequirements.push(accumulateRequirementCount); + acc.totalIssues.push(accumulateRelationIssueCount); + + if (data[date].requirementStatuses !== null) { + Object.keys(data[date].requirementStatuses).forEach(status => { + if (!acc.statusKeys.includes(status)) { + acc.statusKeys.push(status); + } + }); + } + + if (data[date].relationIssueStatuses !== null) { + Object.keys(data[date].relationIssueStatuses).forEach(status => { + if (!acc.statusKeys.includes(status)) { + acc.statusKeys.push(status); + } + }); + } } return acc; @@ -1102,6 +995,10 @@ statusKeys: [] }); + console.log(result.totalRequirements); + console.log(result.totalIssues); + + var dom = document.getElementById('multi-chart-container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', @@ -1129,23 +1026,51 @@ let totalRequirements = result.totalRequirements; let statusKeys = result.statusKeys; - let statusSeries = statusKeys.map(key => ({ - name: key, - type: 'bar', - stack: 'total', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: dates.map(date => { - if (Object.keys(data[date].statuses).length > 0) { - return data[date].statuses[key] || 0; - } else { - return 0; - } - }) - })); + 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].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].relationIssueStatuses && Object.keys(data[date].relationIssueStatuses).length > 0) { + return {value: data[date].relationIssueStatuses[key] || 0, stackType: stackType}; + } else { + return {value: 0, stackType: stackType}; + } + }) + }; + }); + + console.log(requirementStatusSeries); + console.log(relationIssueStatusSeries); + let stackIndex = statusKeys.map((value, index) => index); var deadlineSeries = createDeadlineSeries(dates, deadline, 4); @@ -1155,14 +1080,16 @@ statusKeys.push("연결된 이슈"); let multiCombinationChartSeries = [ - ...statusSeries, + ...requirementStatusSeries, + ...relationIssueStatusSeries, { name: '요구사항', type: 'line', // yAxisIndex: 1, emphasis: { focus: 'series' }, + // position: 'right', symbolSize: 10, data: totalRequirements }, @@ -1173,6 +1100,7 @@ emphasis: { focus: 'series' }, + // position: 'right', symbolSize: 10, data: totalIssues }, @@ -1187,12 +1115,31 @@ trigger: 'axis', axisPointer: { type: 'shadow' + }, + formatter: function (params) { + var tooltipText = ''; + tooltipText += params[0].axisValue + '<br/>'; + params.forEach(function (item) { + if (item.value !== 0) { // 0인 데이터는 무시 + if (item.seriesType === "bar") { + var stackType = item.data.stackType; // 추가 정보에 접근 + tooltipText += item.marker + item.seriesName+"[" + stackType + "] : " + '<span style="float: right;">' + item.value + '</span>' + '<br/>'; + } + else if (item.seriesType === "line") { + tooltipText += item.marker + item.seriesName + ': ' + '<span style="float: right;">' + item.value + '</span>' + '<br/>'; + } + } + }); + return tooltipText; } }, legend: { data: legendData, textStyle: { color: 'white' + }, + tooltip: { + show: true } }, grid: { @@ -1207,13 +1154,13 @@ feature: { mark: {show: true}, // dataView: {show: true, readOnly: true}, - magicType: { + /*magicType: { show: true, type: ['stack'], // 스택과 일반 사이 전환 기능 추가 seriesIndex: { stack: stackIndex // stack 모드를 적용할 시리즈의 인덱스 } - }, + },*/ dataZoom: { show: true } @@ -1249,6 +1196,14 @@ textStyle: { color: 'white' } + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.2)', + width: 1, + type: 'dashed' + } } }, { @@ -1334,7 +1289,6 @@ }); } - // 마감일 함수 function createDeadlineSeries(categories, deadline, lineWidth) { var chartStart = categories.reduce((earliest, date) => date < earliest ? date : earliest, categories[0]); @@ -1385,150 +1339,6 @@ return deadlineSeries; } -//////////////////// -// 다섯번째 박스 -//////////////////// -function statusTimeline(data) { - - // 필요한 데이터만 추출 - var extractedData = extractDataForStatusTimeline(data); - - // 버전 별로 그룹화 - var groupedDataByVersion = groupingByVersion(extractedData); - - // 데이터 포맷팅 - var relatedIssues = dataFormattingForStatusTimeline(groupedDataByVersion); - - // 요소 호버 - $(".reqNode").hover( - function() { - - $(this).find('title').text(''); - var classValue = $(this).attr('class'); - var key = classValue.split(" ").pop(); // 요구사항 이슈 키 - - $("." + key).css("opacity", "0.7"); - - var tooltip = $('<div id="stlTooltip"></div>'); - tooltip.html(` - <table class="stltable"> - <tr> - <th>하위 이슈</th> - <th>상태</th> - </tr> - ${relatedIssues[key] ? relatedIssues[key] : '<tr><td colspan="2">데이터가 없습니다</td></tr>'} - </table> - `); - - tooltip.css({ - "visibility": "visible", - "opacity": "1", - "position": "absolute", - "left": event.pageX + 10, - "top": event.pageY + 10, - }); - - $("body").append(tooltip); - - }, function() { - $(".reqNode").css("opacity", "1"); - $("#stlTooltip").remove(); - - } - ); -} - -function extractDataForStatusTimeline(data){ - - var extractedData = []; - - data.forEach(item => { - var extractedItem = { - version: item.pdServiceVersion, - issueKey: item.key, - isReq: item.isReq, - parentReqKey: item.parentReqKey, - createdDate: new Date(Date.parse(item.created)), - summary: item.summary, - status: item.status.status_name - }; - extractedData.push(extractedItem); - }); - - return extractedData; -} - -function groupingByVersion(data) { - - var groupedData = data.reduce((result, item) => { - var pdServiceVersion = item.version; - if (!result[pdServiceVersion]) { - result[pdServiceVersion] = []; - } - result[pdServiceVersion].push(item); - return result; - }, {}); - - return groupedData; -} - -function dataFormattingForStatusTimeline(data) { - - var statusTimelineData = {}; - var formattedData = []; - var relatedIssues = {}; - - for (const version in data) { - - var reqIssue = data[version].filter(item => item.isReq === true); // 요구사항 이슈만 필터링 - var versionData = convertVersionIdToTitle(version); // text (버전) - var reqIssues = []; // children 전체 - - reqIssue.forEach(reqIssue => { - - // children 요소 중 하나 - var req = { - text: reqIssue.summary + " | " + reqIssue.status, - id: reqIssue.issueKey - }; - - reqIssues.push(req); - - // 호버 시 하위 이슈 볼 수 있도록 데이터 포맷팅 - var relatedIssue = data[version].filter(item => item.parentReqKey === reqIssue.issueKey); - - relatedIssue.forEach(relatedIssue => { - - if (!relatedIssues[relatedIssue.parentReqKey]) { - relatedIssues[relatedIssue.parentReqKey] = ''; - } - - relatedIssues[relatedIssue.parentReqKey] += "<tr><td>" + - relatedIssue.summary + - "</td><td>" + - relatedIssue.status + - "</td></tr>"; - }); - }); - - var totalData = { - text: versionData, - children: reqIssues - }; - - formattedData.push(totalData); - } - statusTimelineData.data = formattedData; - - $("#demo").timeline(statusTimelineData); - console.log("연관 이슈 전체: ", relatedIssues); - - return relatedIssues; -} - -//////////////////// -// 여섯번째 박스 -//////////////////// function sevenTimeline(data) { var sevenTimeLineDiv = document.getElementById("sevenTimeLine"); sevenTimeLineDiv.innerHTML = ""; @@ -1573,17 +1383,17 @@ return extractedData; } -// 버전 별 그룹화 하기 -function groupDataByPdServiceVersion(data) { - var extractedData = extractDataForSevenTimeline(data); - var groupedData = extractedData.reduce((result, obj) => { - var pdServiceVersion = obj.version; +function groupingByVersion(data) { + + var groupedData = data.reduce((result, item) => { + var pdServiceVersion = item.version; if (!result[pdServiceVersion]) { result[pdServiceVersion] = []; } - result[pdServiceVersion].push(obj); + result[pdServiceVersion].push(item); return result; }, {}); + return groupedData; } @@ -1676,298 +1486,80 @@ window.addEventListener('resize', myChart.resize); } -// 바차트 -function combinationChart(pdServiceLink, pdServiceVersionLinks) { - function combinationChartNoData() { - - $('#status-chart').html('데이터가 없습니다').css({ - 'display': 'flex', - 'justify-content': 'center', - 'align-items': 'center' - }); - - // c3.generate({ - // bindto: '#combination-chart', - // data: { - // x: 'x', - // columns: [], - // type: 'bar', - // types: {}, - // }, - // }); - } - - if(pdServiceLink === "" || pdServiceVersionLinks === "") { - combinationChartNoData(); - return; - } - - const url = new UrlBuilder() - .setBaseUrl('/auth-user/api/arms/analysis/time/daily-requirements-jira-issue-statuses') - .addQueryParam('pdServiceLink', pdServiceLink) - .addQueryParam('pdServiceVersionLinks', pdServiceVersionLinks) - .addQueryParam('크기', 1000) - .addQueryParam('하위크기', 1000) - .addQueryParam('컨텐츠보기여부', true) - .build(); - - $.ajax({ - url: url, - type: "GET", - contentType: "application/json;charset=UTF-8", - dataType: "json", - progress: true, - statusCode: { - 200: function (data) { - if ((Array.isArray(data) && data.length === 0) || - (typeof data === 'object' && Object.keys(data).length === 0) || - (typeof data === 'string' && data === "{}")) { - combinationChartNoData(); - return; - } - - const issueStatusTypesSet = new Set(); - for (const day in data) { - for (const status in data[day].statuses) { - //console.log('status ', status); - issueStatusTypesSet.add(status); - } - } - const issueStatusTypes = [...issueStatusTypesSet]; - - let columnsData = []; - let dayTotal = {}; - - issueStatusTypes.forEach((status) => { - const columnData = [status]; - for (const day in data) { - const count = data[day].statuses[status] || 0; - columnData.push(count); - dayTotal[day] = (dayTotal[day] || 0) + count; - - //console.log(`Day: ${day}, Status: ${status}, Count: ${count}, dayTotal: ${dayTotal[day]}`); - } - columnsData.push(columnData); - }); - - // 차트 x축 날짜값 포맷팅 - let keys = Object.keys(data).map(key => { - let [year, month, day] = key.split('-'); - return `${month}/${day}`; - }); - - const chart = c3.generate({ - bindto: '#status-chart', - data: { - x: 'x', - columns: [ - ['x', ...keys], - ...columnsData, - ['전체이슈', ...Object.keys(dayTotal).map(day => dayTotal[day])], - ], - type: 'bar', - types: { - '전체이슈': 'area', - }, - }, - color: { - pattern: dashboardColor.accumulatedIssueStatusColor, - }, - onrendered: function() { - d3.selectAll('.c3-line, .c3-bar, .c3-arc') - .style('stroke', 'white') - .style('stroke-width', '0.3px'); - }, - axis: { - x: { - type: 'category', - }, - }, - tooltip: { - format: { - title: function (index) { - const day = Object.keys(data)[index]; - const total = dayTotal[day]; - return `${day} | Total : ${total}`; - }, - }, - contents: function (d, defaultTitleFormat, defaultValueFormat, color) { - // 기본 툴팁 생성 - let tooltipHtml = this.getTooltipContent.apply(this, arguments); - // 툴팁 HTML 파싱 - let parsedHtml = $.parseHTML(`<div>${tooltipHtml}</div>`); - // '전체이슈' 행 제거 - $(parsedHtml).find('tr').each(function() { - if ($(this).find('td').first().text() === '전체이슈') { - $(this).remove(); - } - }); - // 다시 HTML 문자열로 변환 - return $(parsedHtml).html(); - } - } - }); - - $(document).on('click', '#status-chart .c3-legend-item', function () { - const id = $(this).text(); - const isHidden = $(this).hasClass('c3-legend-item-hidden'); - - for (const day in data) { - const docCount = data[day].statuses[id] || 0; - - if (isHidden) { - dayTotal[day] -= docCount; - } else { - dayTotal[day] += docCount; - } - } - }); - - let isGrouped = false; // 차트 그룹화 여부 - - $('#status-chart-button').on('click', function() { - if (isGrouped) { - // 그룹화 해제 - chart.groups([]); - $(this).text('그룹화 적용'); - } else { - // 그룹화 - chart.groups([issueStatusTypes]); - $(this).text('그룹화 해제'); - } - isGrouped = !isGrouped; - }); - } - } - }); -} - -//////////////////// -// 레이더 차트 -//////////////////// /* -function radarChart(pdServiceId, pdServiceVersionList) { +function versionTimelineChart(versionData) { - var maxCount; - var versionText = []; - var reqCount = []; + var dom = document.getElementById('version-timeline-chart-container'); - var _url = "/auth-user/api/arms/dashboard/normal/"+pdServiceId; - $.ajax({ - url: _url, - type: "GET", - data: { "서비스아이디" : pdServiceId, - "메인그룹필드" : "pdServiceVersion", - "isReq" : true, - "컨텐츠보기여부" : false, - "크기" : 1000 - }, - contentType: "application/json;charset=UTF-8", - dataType: "json", - progress: true, - async: false, - statusCode: { - 200: function (data) { - maxCount = data.전체합계; - var result = data.검색결과.group_by_pdServiceVersion; - - result.forEach(item => { - if (versionListData[item.필드명]) { - versionListData[item.필드명].totalCount = item.개수; - } - }); - - Object.values(versionListData).forEach(item => { - var version = {}; - version.text = item.c_title; - version.max = maxCount; - - versionText.push(version); - reqCount.push(item.totalCount); - }); - } - } + var myChart = echarts.init(dom, null, { + renderer: 'canvas', + useDirtyRect: false }); - var chart = echarts.init(document.getElementById('radar-chart-main')); + var colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC']; + var versionData = ['v1.0', 'v1.1', 'v1.2', 'v1.3', 'v1.4', 'v1.5', 'v1.6']; + console.log(colorList); - chart.setOption({ - color: ['#E49400'], - dataZoom: [ - { // The first dataZoom component - radiusAxisIndex: [0, 2] // Indicates that this dataZoom component - // controls the first and the third radiusAxis - } - ], - aria: { - show: false + var option = { + xAxis: { + type: 'time', }, - tooltip: {}, - legend: { - data: [{ - icon: 'circle', - name: '요구사항' - }], - textStyle: { - color: 'white', // 원하는 텍스트 색상으로 변경합니다. - fontSize: 14 - } + yAxis: { + data: versionData, + inverse: true, }, - radar: { - radius: [0, '50%'], - triggerEvent: true, - // shape: 'circle', - indicator: versionText, - name: { - rotate: 45, // 텍스트를 45도로 회전시킵니다. - position: 'outside', // 텍스트를 레이더 영역 내부에 위치시킵니다. - color: '#ffffff', - formatter: function(text) { - // 줄바꿈을 위해 '\n' 문자를 삽입합니다. - var wrappedValue = text.replace(/(.{12})/g, '$1\n'); // 10자마다 줄바꿈 - return '[' + wrappedValue + ']'; - }, - rich: { - value: { - align: 'left', - color: '#ffffff', - lineHeight: 10 // 줄 간격을 설정합니다. - } - } - } - }, series: [{ - name: '', - type: 'radar', - label: { - normal: { - show: true, - textStyle: { - color: 'white' // 원하는 텍스트 색상으로 변경합니다. - } + name: 'Versions', + type: 'custom', + itemStyle: { + color: function(params) { + return colorList[params.dataIndex % colorList.length]; } }, - itemStyle: { - borderWidth: 2, - borderColor: '#fff' + renderItem: function(params, api) { + var categoryIndex = api.value(0); + var start = api.coord([api.value(1), categoryIndex]); + var end = api.coord([api.value(2), categoryIndex]); + var height = params.coordSys.height / versionData.length; + + return { + type: 'rect', + shape: { + x: start[0], + y: start[1] - height / 2, + width: end[0] - start[0], + height: height + }, + style: api.style(params.dataIndex) // apply color here + }; }, - // areaStyle: {normal: {}}, - data : [ - { - value: reqCount, - name: '요구사항' - } - ], - symbol: 'circle', - symbolSize: 7, - symbolRotate: function(value, params) { - return ~~(360 * Math.random()); + encode: { + x: [1, 2], + y: 0 + }, + data: [ + ['v1.0', +new Date(2023, 0, 1), +new Date(2023, 0, 15)], + ['v1.1', +new Date(2023, 0, 10), +new Date(2023, 0, 25)], + ['v1.2', +new Date(2023, 1, 1), +new Date(2023, 1, 15)], + ['v1.3', +new Date(2023, 3, 1), +new Date(2023, 4, 15)], + ['v1.4', +new Date(2023, 2, 1), +new Date(2023, 3, 15)], + ['v1.5', +new Date(2023, 6, 1), +new Date(2023, 6, 15)], + ['v1.6', +new Date(2023, 5, 1), +new Date(2023, 11, 15)], + ] + }], + tooltip: { + trigger: 'axis', + position: 'top', + borderWidth: 1, + axisPointer: { + type: 'cross' } - } - ] - }); - window.addEventListener('resize', function () { - chart.resize(); - }); -} -*/ \ No newline at end of file + }, + }; + + if (option && typeof option === 'object') { + myChart.setOption(option, true); + } + + window.addEventListener('resize', myChart.resize); +}*/