Index: arms/html/analysisScope/content-container.html
===================================================================
diff -u -ra38f2658b52fb03b348c94d3c9d0f9e72268f5fc -rfb5c3cdbd669d97d63a6ccd91366945ef1f64ca0
--- arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision a38f2658b52fb03b348c94d3c9d0f9e72268f5fc)
+++ arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision fb5c3cdbd669d97d63a6ccd91366945ef1f64ca0)
@@ -151,19 +151,19 @@
                                     <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 0px; !important; text-align: center">
+                                                style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center">
                                             <span>요구사항(<i class="fa fa-wrench"></i>) 연결이슈 평균: <a id="linkedIssue_subtask_count_per_req_in_action" style="font-weight: bold;">-</a>개</span><br>
                                         </div>
                                     </div>
                                 </div>
                                 <div    class="control-group"
                                         style="padding-bottom: 10px; border: 0">
                                     <div    class="controls form-group darkBack col-md-6"
-                                            style="margin-bottom: 5px !important; padding: 10px 0px; !important; text-align: center">
+                                            style="margin-bottom: 5px !important; padding: 10px 0; !important; text-align: center">
                                         <span>총 요구사항 <br/><small>(미할당)</small><br/><a id="total_req_count" style="font-weight: bold;">-</a> 개 (<span id="no_assigned_req_count">-</span>)</span><br>
                                     </div>
                                     <div    class="controls form-group darkBack col-md-6"
-                                            style="margin-bottom: 5px !important; padding: 10px 0px; !important; text-align: center">
+                                            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>
@@ -216,7 +216,7 @@
                                     <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 0px; !important; text-align: center">
+                                                style="margin-bottom: 10px !important; padding: 10px 0; !important; text-align: center">
                                             <span>작업 중 요구사항 평균 : <a id="req_in_action_avg" style="font-weight: bold;">-</a> 개</span><br>
                                         </div>
                                     </div>
@@ -225,7 +225,7 @@
                                     <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 0px; !important; text-align: center">
+                                                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>
@@ -284,8 +284,17 @@
             </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;">
+                    선택한 제품(서비스)과 버전에 생성된 요구사항 및 연결이슈 네트워크 차트
+                    <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">
+                            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-lg-12 color-legend-widget">
                         <section class="widget">
                             <header style="margin-bottom: 15px">
@@ -295,9 +304,58 @@
 										요구사항 및 연결된 이슈 분포
 									</span>
                                 </h4>
-                                <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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"></div>
+                                <blockquote
+                                        class="font13"
+                                        style="margin-top: 5px">
+                                    범위별 각종 분석 차트 입니다.
+                                    <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">
+                                            Help
+                                            <i class="fa fa-question" style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+                                        </button>
+                                    </div>
+                                </blockquote>
                                 <div class="network-graph">
                                     <svg id="NETWORK_GRAPH">
                                     </svg>
@@ -317,7 +375,7 @@
                     <span   class="font13"
                             style="font-weight: bold">
                         <i class="fa fa-calendar-o"></i>
-                        이슈 상태
+                        범위별 차트
                     </span>
                 </h4>
                 <div class="widget-controls">
@@ -357,24 +415,327 @@
             </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">
+                    범위별 각종 분석 차트 입니다.
+                    <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">
+                            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-lg-4" style="/*padding-right: 4px !important;*/">
-                        <section class="widget large">
+                    <div class="col-md-4">
+                        <section class="widget">
                             <header>
-                                <h4><i class="fa fa-pie-chart"></i> 이슈 상태 현황 </h4>
+                                <h4>
+                                    <span   class="font13"
+                                            style="font-weight: bold">
+                                        <i class="fa fa-pie-chart"></i>
+                                        Bar chart on polar
+                                    </span>
+                                </h4>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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" id="donut-chart"></div>
+                            <div class="body">
+                                <div class="column">
+                                    <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
+                                    <blockquote class="font12">
+                                        <strong>
+                                           제품<sup>서비스</sup>에 몇개의 버전이 있는지, 버전 하위로 몇개의 요구사항이 있는지
+                                        </strong>
+                                    </blockquote>
+                                    <div class="body" id="polar_bar"></div>
+                                </div>
+                            </div>
                         </section>
                     </div>
-                    <div class="col-lg-8">
-                        <section class="widget large">
+                    <div class="col-md-4">
+                        <section class="widget">
                             <header>
-                                <h4><i class="fa fa-bar-chart"></i> 일자별 이슈 업데이트 현황 </h4>
+                                <h4>
+                                    <span   class="font13"
+                                            style="font-weight: bold">
+                                        <i class="fa fa-minus-square"></i>
+                                        Box-plot chart
+                                    </span>
+                                </h4>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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" id="combination-chart"></div>
+                            <div class="body">
+                                <div class="column">
+                                    <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
+                                    <blockquote class="font12">
+                                        <strong>
+                                            버전별로 요구사항 이슈의 업데이트 분포
+                                        </strong>
+                                    </blockquote>
+                                    <div class="body" id="box_plot"></div>
+                                </div>
+                            </div>
                         </section>
                     </div>
+                    <div class="col-md-4">
+                        <section class="widget">
+                            <header>
+                                <h4>
+                                    <span   class="font13"
+                                            style="font-weight: bold">
+                                        <i class="fa fa-spinner"></i>
+                                        circular-sankey chart
+                                    </span>
+                                </h4>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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"></div>
+                                <div class="column">
+                                    <blockquote class="font12">
+                                        <strong>
+                                            요구사항이 다른 버전으로 옮겨간 이력이 있는지 분포
+                                        </strong>
+                                    </blockquote>
+                                    <div class="body" id="circular_sankey"></div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
                 </div>
+                <div class="row">
+                    <div class="col-md-6">
+                        <section class="widget">
+                            <header>
+                                <h4>
+                                    <span   class="font13"
+                                            style="font-weight: bold">
+                                        <i class="fa fa-tree"></i>
+                                        tree chart
+                                    </span>
+                                </h4>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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="column">
+                                    <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
+                                    <blockquote class="font12">
+                                        <strong>
+                                            하나의 요구사항에 몇명의 개입이 있었는지
+                                        </strong>
+                                    </blockquote>
+                                    <div class="body" id="tree"></div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                    <div class="col-md-6">
+                        <section class="widget">
+                            <header>
+                                <h4>
+                                    <span   class="font13"
+                                            style="font-weight: bold">
+                                        <i class="fa fa-dot-circle-o"></i>
+                                        Circle Packing with d3 chart
+                                    </span>
+                                </h4>
+                                <div class="widget-controls">
+                                    <a  class="hidden"
+                                        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  class="hidden"
+                                        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="column">
+                                    <div class="gradient_middle_border" style="width: 100%; margin-top: 8px"></div>
+                                    <blockquote class="font12">
+                                        <strong>
+                                            이번 버전에 처리한 요구사항은 어떤것이고, 이번 버전에 처리하지 못한 요구사항은 어떤것인지
+                                            (Text 색으로 표시) <br/>
+                                            버블 하나당 연관된 사람 수가 많을 수록 크게.
+                                        </strong>
+                                    </blockquote>
+                                    <div class="body" id="box_plot"></div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
             </div>
         </section>
     </div>