1414 <!--[if lt IE 9]>
1515 <script src="js/html5.js"></script>
1616 <![endif]-->
17+ #### EMBED EXPERIMENTALS ####
1718</ head >
1819
19- < body >
20+ < body data-bind =" style: { overflow: overviewVisible() ? 'hidden' : 'auto' } " >
2021 < div id ="progress " style ="width:100%;height:100%;position: absolute;left:0;top:0;background:#ffffff;z-index:100 ">
2122 < span style ="position: absolute;left:50%;top:50%;font-weight:bold "> Loading...</ span >
2223 </ div >
8283 < div class ="navbar navbar-inverse navbar-fixed-top " id ="TopNav ">
8384 < div class ="navbar-inner ">
8485 < div class ="container-fluid ">
86+ <!-- ko ifnot: overviewVisible -->
8587 < a class ="brand " href ="# " data-bind ="text: configuration().SutName != null ? configuration().SutName : 'Features' "> </ a >
8688 < div class ="navbar-search pull-left ">
87- < input type ="text " id ="TypeAheadSearchBox " class ="search-query " data-bind ="value: whatToSearchFor " style ="width: 300px " placeholder ="@tag or feature name " />
89+ < input type ="text " id ="TypeAheadSearchBox " class ="search-query " data-bind ="value: whatToSearchFor " style ="width: 300px " placeholder ="@tag or feature name "/>
8890 < a id ="SearchButton " data-bind ="click: search " class ="btn "> Search</ a >
8991 < a id ="ClearSearchButton " data-bind ="click: clearSearch " class ="btn "> Clear</ a >
9092 </ div >
93+ <!-- /ko -->
94+ <!-- ko if: overviewVisible -->
95+ < div class ="pull-left ">
96+ < span class ="brand "> Overview and Summary</ span >
97+ </ div >
98+ <!-- /ko -->
99+ < div class ="overview pull-right ">
100+ < a id ="OverviewButton " class ="btn " data-bind ="text: overviewVisible() ? 'Hide Overview' : 'Show Overview', click: toggleOverview "> </ a >
101+ </ div >
91102 </ div >
92103 </ div >
93- < div class ="navbar-below ">
104+ < div class ="navbar-below " data-bind =" style: { height: overviewVisible() ? '0px' : '22px' } " >
94105 < div data-bind ="click: $root.hideShowNavigation "> < i class ="icon-white " data-bind ="css: { 'icon-minus-sign': $root.navIsShown(), 'icon-plus-sign': !$root.navIsShown() } "> </ i > Navigation</ div >
95106 < div data-bind ="click: $root.hideShowNavigationTree "> < i class ="icon-white " data-bind ="css: { 'icon-minus-sign': $root.ShowAllLinks(), 'icon-plus-sign': !$root.ShowAllLinks() } "> </ i > Links</ div >
96107 </ div >
@@ -183,7 +194,6 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
183194 </ div >
184195 </ div >
185196 <!--/row-->
186-
187197 <!--<hr>
188198
189199 <footer>
@@ -192,7 +202,41 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
192202
193203 </ div >
194204 <!--/.fluid-container-->
195- <!-- Le javascript
205+
206+ < div class ="modal-host ">
207+ < div class ="modal-overlay " data-bind ="css: { 'modal-overlay-visible': overviewVisible } ">
208+ < div class ="modal-box ">
209+ < div class ="clearfix ">
210+ < div id ="overallCompleteCanvas-container " class ="pull-left ">
211+ < canvas id ="overallCompleteCanvas "> </ canvas >
212+ </ div >
213+ < aside id ="overallCompleteSummary " class ="pull-right ">
214+ < h3 > Scenario Summary by Result</ h3 >
215+ < ul data-bind ="foreach: totals ">
216+ < li >
217+ < span class ="color-key " data-bind ="text: value, style: { backgroundColor: color } "> </ span >
218+ < span data-bind ="text: label "> </ span >
219+ </ li >
220+ </ ul >
221+ </ aside >
222+ </ div >
223+ < div >
224+ < h3 class ="header "> Scenario Summary by Root Namespace</ h3 >
225+ < canvas id ="byRootFolderCanvas "> </ canvas >
226+ </ div >
227+ < div >
228+ < h3 class ="header "> Scenario Summary by Top 20 Tags</ h3 >
229+ < canvas id ="byTagCanvas "> </ canvas >
230+ </ div >
231+ < div >
232+ < h3 class ="header "> @NotTested Scenario Summary by Root Namespace</ h3 >
233+ < canvas id ="notTestedbyRootFolderCanvas "> </ canvas >
234+ </ div >
235+ </ div >
236+ </ div >
237+ </ div >
238+
239+ <!-- Le javascript
196240 ================================================== -->
197241 <!-- Placed at the end of the document so the pages load faster -->
198242 < script src ="js/jquery-1.8.3.min.js " type ="text/javascript "> </ script >
@@ -201,6 +245,8 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
201245 < script src ="js/knockout.mapping-latest.js " type ="text/javascript "> </ script >
202246 < script src ="js/underscore-min.js " type ="text/javascript "> </ script >
203247 < script src ="js/jquery.highlight-4.closure.js "> </ script >
248+ < script src ="js/Chart.min.js "> </ script >
249+ < script src ="js/Chart.StackedBar.js "> </ script >
204250 < script src ="js/Markdown.Converter.js " type ="text/javascript "> </ script >
205251 < script src ="js/Markdown.Extra.js " type ="text/javascript "> </ script >
206252 < script src ="js/featuresModel.js " type ="text/javascript "> </ script >
@@ -209,8 +255,9 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
209255 < script src ="js/heirarchyBuilder.js " type ="text/javascript "> </ script >
210256 < script src ="js/typeaheadList.js " type ="text/javascript "> </ script >
211257 < script src ="js/featureSearch.js " type ="text/javascript "> </ script >
258+ < script src ="js/picklesOverview.js " type ="text/javascript "> </ script >
212259 < script type ="text/javascript ">
213- function ViewModel ( features , configuration ) {
260+ function ViewModel ( features , configuration , summary ) {
214261 var self = this ;
215262
216263 features = $ . map ( features , function ( el , i ) { return new FeatureParent ( el ) ; } ) ;
@@ -219,8 +266,11 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
219266 self . featuresByFolder = ko . observable ( buildFullHierarchy ( getFeaturesFromScenariosList ( features ) ) ) ;
220267 self . currentFeature = ko . observable ( ) ;
221268 self . configuration = ko . observable ( configuration ) ;
269+ self . totals = ko . observable ( [ ] ) ;
270+
222271 self . ShowAllLinks = ko . observable ( false ) ;
223-
272+ self . overviewVisible = ko . observable ( false ) ;
273+
224274 self . setCurrentFeature = function ( ) {
225275 if ( window . location . hash != '' ) {
226276 var featureFromHashLocation = findFeatureByRelativeFolder ( removeBeginningHash ( window . location . hash ) , features ) ;
@@ -230,6 +280,29 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
230280 }
231281 } ;
232282
283+ self . toggleOverview = function ( ) {
284+ if ( ! self . overviewVisible ( ) ) {
285+ // scroll to top to support fixed overlay
286+ window . scrollTo ( 0 , 0 ) ;
287+ }
288+
289+ self . overviewVisible ( ! self . overviewVisible ( ) ) ;
290+
291+ if ( self . overviewVisible ( ) ) {
292+ if ( ! self . overview ) {
293+ // build charts first time overview becomes visible
294+ self . overview = PicklesOverview ( summary ) ;
295+ self . overview . createOverallTotalsChart ( $ ( '#overallCompleteCanvas' ) . get ( 0 ) . getContext ( '2d' ) ) ;
296+ self . overview . createByTagChart ( $ ( '#byTagCanvas' ) . get ( 0 ) . getContext ( '2d' ) ) ;
297+ self . overview . createByRootFolderChart ( $ ( '#byRootFolderCanvas' ) . get ( 0 ) . getContext ( '2d' ) ) ;
298+ self . overview . createNotTestedByRootFolderChart ( $ ( '#notTestedbyRootFolderCanvas' ) . get ( 0 ) . getContext ( '2d' ) ) ;
299+ self . totals ( self . overview . getTotalsData ( ) ) ;
300+ } else {
301+ $ ( '.modal-overlay' ) . scrollTop ( 0 ) ;
302+ }
303+ }
304+ } ;
305+
233306 self . whatToSearchFor = ko . observable ( "" ) ;
234307
235308 self . clearSearch = function ( ) {
@@ -317,7 +390,7 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
317390 function jsonPWrapper ( data ) {
318391 data . Features . reverse ( ) ;
319392
320- var viewModel = new window . ViewModel ( data . Features , data . Configuration ) ;
393+ var viewModel = new window . ViewModel ( data . Features , data . Configuration , data . Summary ) ;
321394 viewModel . setCurrentFeature ( ) ;
322395
323396 window . ko . applyBindings ( viewModel ) ;
@@ -328,11 +401,14 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
328401 } ) ;
329402
330403 $ ( '#progress' ) . hide ( ) ;
404+ $ ( '#TopNav' ) . show ( ) ;
331405 }
332406
333407 var navShown = true ;
334408
335409 $ ( document ) . ready ( function ( ) {
410+ $ ( '#TopNav' ) . hide ( ) ;
411+
336412 function chromeSOPHack_LoadJsonPFileAndCreateDynamicScriptTag ( ) {
337413 var url = "pickledFeatures.js" ; // URL of the external script
338414
0 commit comments