<div class="row"> <!-- 첫번째 박스 --> <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> Time 분석 </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, 0.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 top-menu-div" 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="font13"> 1. Product <sup>service</sup> 를 선택해 주세요 </blockquote> <div class="control-group" style="padding-top: 10px; padding-bottom: 10px; border: 0"> <div class="controls form-group select-box" 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="font13"> 2. Product <sup>service</sup> 의 버전을 선택해 주세요 </blockquote> <div class="control-group" style="padding-bottom: 10px; border: 0"> <div class="controls form-group select-box" 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 large top-menu-div" style="margin-bottom: 15px; height: 290px"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-pencil-square-o"></i> 종합 진행 현황 </span> </h4> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; height: 2px; margin-top: 5px"></div> <div class="body" id="radarPart"></div> </div> </section> </div> <div class="col-md-2"> <section class="widget dashboard-top-section top-menu-div" style="overflow: auto; margin-bottom: 15px"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-pencil-square"></i> 범위(Scope) 현황 </span> </h4> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> <div class="box" style="display: flex; justify-content: space-evenly; margin: 10px 0"> <div> <div id="req_in_action_count" style=" color: #a4c6ff; margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700; "> - </div> <div class="description"> <i class="fa fa-wrench"></i> 진행 중 </div> </div> <div style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px">|</div> <div> <div id="req_count" style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700"> - </div> <div class="description">【총 요구사항】</div> </div> </div> <div class="column"> <div class="control-group" style="padding-bottom: 10px; border: 0"> <div class="controls form-group darkBack col-md-12" style="margin-bottom: 10px !important; padding: 10px 0 !important; text-align: center"> <span> 요구사항 진척도 : <!-- id="linkedIssue_subtask_count_per_req_in_action"--> <a id="req_progress" style="font-weight: bold"> - </a> % </span> <br /> <span>(완료된 요구사항 : <a id="req_completed" style="font-weight: bold">-</a>)</span> </div> </div> <div class="control-group" style="padding-bottom: 10px; border: 0;"> </div> </div> <div class="box" style="display: flex; justify-content: space-evenly; margin: 10px 0"> <div class="controls form-group col-md-6" style="margin-bottom: 5px !important; padding: 10px 0 !important; text-align: center"> <span> 생성된 요구사항 이슈 <br /> <small>(미할당)</small> <br /> <a id="total_req_issue_count" style="font-weight: bold"> - </a> 개 ( <span id="no_assigned_req_issue_count">-</span> ) </span> <br /> </div> <div class="controls form-group col-md-6" style="margin-bottom: 5px !important; padding: 10px 0 !important; text-align: center"> <span> 생성한 연결이슈 <br /> <small>(미할당)</small> <br /> <a id="total_linkedIssue_subtask_count" style="font-weight: bold"> - </a> 개 ( <span id="no_assigned_linkedIssue_subtask_count">-</span> ) </span> <br /> </div> </div> </div> </section> </div> <div class="col-md-2"> <section class="widget dashboard-top-section top-menu-div"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-clock-o"></i> 일정(Time) 현황 </span> </h4> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; height: 2px; margin-top: 5px"></div> <div class="box" style="display: flex; justify-content: space-evenly; margin: 10px 0"> <div> <span> 전체 일정 <br /> <a id="start_date_summary" style="font-weight: bold"> - </a> ~ <a id="end_date_summary" style="font-weight: bold"> - </a> </span> <br /> </div> </div> <div class="box" style="display: flex; justify-content: space-evenly; margin: 10px 0"> <div> <div id="remaining_days" style=" color: #a4c6ff; margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700; "> - </div> <div class="description">【 일정 】</div> </div> <div style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px">|</div> <div> <div id="progressDateRate" style="margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700"> - </div> <div class="description">【 경과 】</div> </div> </div> <div class="box" style="display: flex; justify-content: space-evenly; margin: 10px 0"> <div> <span> 작업 종료 예상일 <br /> <a id="expected_end_date" style="font-weight: bold"> - </a> </span> <br /> </div> </div> </div> </section> </div> <div class="col-md-2"> <section class="widget dashboard-top-section top-menu-div" style="overflow: auto"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-briefcase"></i> 자원(Resource) 현황 </span> </h4> </header> <div class="body"> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> <div class="box" style="margin: 10px 0"> <div id="resource" style=" color: #a4c6ff; margin-top: 5px; font-size: 20px; line-height: 20px; height: 20px; font-weight: 700; "> - </div> <div class="description"> <i class="fa fa-users"></i> 투입 작업자 수 </div> </div> <div class="column"> <div class="control-group" style="padding-bottom: 10px; border: 0"> <div class="controls form-group darkBack col-md-12" style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center"> <span> 1인당 요구사항 이슈 수 <br/>(최대 / 평균 / 최소) </span> <br /> <span> <a id="req_max" style="font-weight: bold"> - </a> </span> / <span> <a id="req_avg" style="font-weight: bold"> - </a> </span> / <span> <a id="req_min" style="font-weight: bold"> - </a> </span> </div> <div class="controls form-group darkBack col-md-12" style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center"> <span> 1인당 생성한 연결이슈 수 <br/>(최대 / 평균 / 최소)</span> <br /> <span> <a id="sub_max" style="font-weight: bold"> - </a> </span> / <span> <a id="sub_avg" style="font-weight: bold"> - </a> </span> / <span> <a id="sub_min" style="font-weight: bold"> - </a> </span> </div> <!-- <div class="controls form-group darkBack col-md-12" style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center"> <span> 생성한 연결이슈 평균 : <a id="avg_linkedIssue_count" style="font-weight: bold"> - </a> 개 </span> <br /> </div>--> </div> </div> </div> </section> </div> </div> </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-sort-amount-asc"></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: 10px; margin-bottom: 15px"></div> <blockquote class="font13" style="margin-top: 5px"> 선택한 버전의 가장 빠른 시작일과 가장 늦은 종료일 확인 및 경과 시간, 전체 버전의 타임라인을 확인할 수 있습니다. </blockquote> <div class="row" style="min-height: 280px"> <div class="col-lg-4 color-legend-widget"> <section class="widget" style="/*margin-bottom: 2px; */ min-height: 317.5px"> <header> <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; margin-bottom: 10px"></div> </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-6 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-6 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> <div style="display: flex; flex-direction: row; height: 42%; justify-content: space-between"> <div class="col-sm-12 fade-in-box" id="versionGaugeChart" style="height: 185px"></div> </div> </div> </section> </div> <div class="col-lg-8 color-legend-widget"> <section class="widget" style="min-height: 317.5px"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-tasks"></i> 버전 타임라인 </span> </h4> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> </header> <div class="body" id="version-timeline-wrapper"> <div id="version-timeline-bar" style="display: none"></div> </div> <!-- <div class="body" id="version-timeline-chart-container" style="min-height: 280px;"></div>--> </section> </div> </div> </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-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> <blockquote class="font13" style="margin-top: 5px"> 선택한 제품(서비스)와 버전에 일자별 업데이트된 요구사항과 연결된 이슈 분포 및 업데이트 누적 현황을 확인할 수 있습니다. </blockquote> <div class="row"> <div class="col-lg-6" style="/*padding-right: 4px !important;*/"> <section class="widget large" style="min-height: 460px"> <header> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-pie-chart"></i> 일자별 업데이트 분포 </span> </h4> <div class="widget-controls"></div> </header> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px; margin-bottom: 15px"></div> <div class="body" style="height: 100%"> <div class="row"> <!-- <div class="col-md-6"></div>--> <div class="col-md-12"> <label for="scatter_start_date" class="control-label" style="text-align: left; width: 40px !important"> 기간 : </label> <div class="controls form-group input-group" style=""> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> <input type="text" id="scatter_start_date" name="scatter_start_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span class="input-group-addon" style="padding: 0px; background-color: rgba(255, 255, 255, 0)"> ~ </span> <input type="text" id="scatter_end_date" name="scatter_end_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span id="scatter-search" class="input-group-addon" style="cursor: pointer; background-color: white; color: black"> <i class="fa fa-search"></i> </span> </div> </div> </div> <div id="scatter-chart-container"></div> </div> </section> </div> <div class="col-lg-6"> <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" id="heatmap-body" style="height: 415px"> <div style="width: 100%"> <blockquote class="font12 update-title" style="display: none"> 요구사항 누적 업데이트 현황 </blockquote> <div> <div id="calendar_yearview_blocks_chart_1"></div> </div> <blockquote class="font12 update-title" style="display: none"> 연결된 이슈 누적 업데이트 현황 </blockquote> <div> <div id="calendar_yearview_blocks_chart_2"></div> </div> </div> </div> </section> </div> </div> </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-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> <blockquote class="font13" style="margin-top: 5px"> 선택한 제품(서비스), 버전, 기간(최대 30일)의 요구사항 및 연결된 이슈의 일자별 생성 개수 및 업데이트 현황을 확인할 수 있습니다. </blockquote> <div class="row"> <div class="col-lg-12 color-legend-widget"> <section class="widget large" style="min-height: 540px"> <header style="margin-bottom: 15px"> <h4> <span class="font13" style="font-weight: bold"> <i class="fa fa-asterisk"></i> 생성 개수 및 업데이트 상태 현황 </span> </h4> <div class="widget-controls"></div> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> </header> <div class="body" style="height: 100%"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"> <label for="multi_stack_start_date" class="control-label" style="text-align: left; width: 40px !important"> 기간 : </label> <div class="controls form-group input-group" style=""> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> <input type="text" id="multi_stack_start_date" name="multi_stack_start_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span class="input-group-addon" style="padding: 0px; background-color: rgba(255, 255, 255, 0)"> ~ </span> <input type="text" id="multi_stack_end_date" name="multi_stack_end_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span id="multi-stack-search" class="input-group-addon" style="cursor: pointer; background-color: white; color: black"> <i class="fa fa-search"></i> </span> </div> </div> </div> <div id="multi-chart-container"></div> </div> </section> </div> </div> </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-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-6 color-legend-widget"> <section class="widget large"> <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" id="candlestick-chart-container" > </div> </section> </div> <div class="col-lg-6 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> --> <!-- Vertical 타임라인 박스 --> <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 style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap"> <blockquote class="font13" style="margin-top: 5px"> 선택한 제품(서비스), 버전, 기간(최대 30일)의 업데이트된 요구사항과 그에 연결된 이슈의 업데이트 현황을 확인할 수 있습니다. </blockquote> <div class="timeline-period col-md-4"> <label for="multi_stack_start_date" class="control-label" style="text-align: left; width: 40px !important"> 기간 : </label> <div class="controls input-group" style=""> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> <input type="text" id="timeline_start_date" name="timeline_start_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span class="input-group-addon" style="padding: 0px; background-color: rgba(255, 255, 255, 0)"> ~ </span> <input type="text" id="timeline_end_date" name="timeline_end_date" class="form-control parsley-validated font13 darkBack" style="color: #a4c6ff; background: rgba(50, 50, 50, 0.99) !important" placeholder="yyyy-mm-dd" required="required" readonly /> <span id="timeline-search" class="input-group-addon" style="cursor: pointer; background-color: white; color: black"> <i class="fa fa-search"></i> </span> </div> </div> </div> <div class="row"> <div class="col-lg-4 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> Vertical Timeline Chart </span> </h4> <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div> </header> <div class="body" id="vertical-timeline" style="min-height:732px;"> <div class="timeline-container"></div> </div> </section> </div> <div class="col-lg-8 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" id="sevenTimeLineBody" style="overflow: hidden; min-height:732px;"> <div id="overlapInputDiv" style="display: none; align-items: center; justify-content: space-between;"> <!--<form style="margin-right: 10px;"> <input type="radio" id="reqRadio" name="option" value="reqRadio"> <label for="reqRadio"><span>요구사항 업데이트 현황</span></label><br> <input type="radio" id="issueRadio" name="option" value="issueRadio" checked> <label for="issueRadio"><span>요구사항 기준 연결된 이슈 업데이트 현황</span></label> </form>--> <div style="display: flex; align-items: center;"> <span style="margin-right: 10px;">높이 조절</span> <input type="number" id="overlapNumberInput" name="overlapNumberInput" min="1" max="10" step="0.1" style="height: 20px; background: #323232; margin-right: 10px;"> <input type="range" min="0" max="9" step="0.1" id="overlapInput" value="2" style="width: 150px; background: #323232;"> </div> </div> <div id="updateRidgeLine" class="col-lg-12" style="text-align:center; overflow-x: auto; min-height:700px;"> </div> </div> </section> </div> </div> </div> </section> </div> </div> <style> #today_flag { position: relative; } #today_flag::before { content: ""; position: absolute; left: 0; border-left: 3px dashed #db2a34; height: 100%; } .today_flag_text { position: absolute; top: -25px; left: -11px; font-size: 11.5px; font-weight: 600; } .graph { height: 202.5px !important; } .timelines-chart .reset-zoom-btn { fill: white; } .timelines-chart .axises .y-axis text, .timelines-chart .axises .grp-axis text { fill: white; } .timelines-chart .axises .y-axis text, .timelines-chart .axises .grp-axis text { fill: white; } .timeline:before { left: 0px !important; background: none; } .time_element { overflow-x: scroll; white-space: nowrap; } @media (min-width: 0px) { .col-sm-6 { width: 50% !important; } .col-sm-12 { width: 100%; } } .infographic.basic .timeline .month { color: white; } #versionGaugeChart svg { height: 185px; } #scatter-chart-container { position: relative; width: 100%; height: 90%; overflow: visible; } #multi-chart-container { position: relative; width: 100%; height: 90%; overflow: visible; } #version-timeline-chart-container { position: relative; width: 100%; height: 100%; overflow: visible; } #candlestick-chart-container { position: relative; width: 100%; height: 100%; overflow: visible; } </style>