4545<html >
4646 @Include( "Head")
4747 <body class =" dashboard-view @Model.MasterConfig.GetValue(" theme " )" >
48- <div class =" app" >
48+ <div class =" app header-dark side-nav-folded " >
4949 <div class =" layout" >
5050 @Include( "Navbar")
5151 @Include( "Sidenav")
5252 <div class =" page-container" >
5353 <div class =" main-content" >
54- <div class =" container-fluid" >
54+ <div class =" container-fluid p-4 " >
5555 <div class =" row" >
5656 <div class =" @boxSize" >
5757 <div class =" card" >
420420 </script >
421421 }
422422 @Include( "Scripts")
423+ <script >
424+ /* -- [ chart options ] -- */
425+ var options = {
426+ responsive: true ,
427+ maintainAspectRatio: false ,
428+ legend: {
429+ position: " right" ,
430+ labels: {
431+ boxWidth: 10 ,
432+ fontSize: 11 ,
433+ lineHeight: 1 ,
434+ fontFamily: " Source Sans Pro" ,
435+ padding: 1
436+ }
437+ },
438+ cutoutPercentage: 65
439+ };
440+
441+ function drawChart (ctx , config ) {
442+ ctx .width = 100 ;
443+ ctx .height = 80 ;
444+ new Chart (ctx, config);
445+ }
446+
447+ /* -- [ parent chart ] -- */
448+ (function drawParentChart () {
449+ if (typeof statusGroup !== " undefined" ) {
450+ var config = {
451+ type: ' doughnut' ,
452+ data: {
453+ datasets: [{
454+ borderColor: ' transparent' ,
455+ data: [
456+ statusGroup .passParent , statusGroup .failParent , statusGroup .fatalParent , statusGroup .errorParent , statusGroup .warningParent , statusGroup .skipParent
457+ ],
458+ backgroundColor: [
459+ " #00af00" , " #F7464A" , " #8b0000" , " #ff6347" , " #FDB45C" , " #1e90ff"
460+ ]
461+ }],
462+ labels: [ " Pass" , " Fail" , " Fatal" , " Error" , " Warning" , " Skip" ]
463+ },
464+ options: options
465+ };
466+
467+ var ctx = document .getElementById (" parent-analysis" ).getContext (' 2d' );
468+ drawChart (ctx, config);
469+ }
470+ })();
471+
472+ /* -- [ children chart ] -- */
473+ (function drawChildChart () {
474+ if (typeof statusGroup !== " undefined" ) {
475+ var config = {
476+ type: ' doughnut' ,
477+ data: {
478+ datasets: [{
479+ borderColor: ' transparent' ,
480+ data: [
481+ statusGroup .passChild , statusGroup .failChild , statusGroup .fatalChild , statusGroup .errorChild , statusGroup .warningChild , statusGroup .skipChild ,statusGroup .infoChild
482+ ],
483+ backgroundColor: [
484+ " #00af00" , " #F7464A" , " #8b0000" , " #ff6347" , " #FDB45C" , " #1e90ff" , " #46BFBD"
485+ ]
486+ }],
487+ labels: [ " Pass" , " Fail" , " Fatal" , " Error" , " Warning" , " Skip" , " Info" ]
488+ },
489+ options: options
490+ };
491+
492+ var ctx = document .getElementById (" child-analysis" ).getContext (' 2d' );
493+ drawChart (ctx, config);
494+ }
495+ })();
496+
497+ /* -- [ grand-children chart ] -- */
498+ (function drawGrandChildChart () {
499+ if ($ (' #grandchild-analysis' ).length > 0 && typeof statusGroup !== " undefined" ) {
500+ var config = {
501+ type: ' doughnut' ,
502+ data: {
503+ datasets: [{
504+ borderColor: ' transparent' ,
505+ data: [
506+ statusGroup .passGrandChild , statusGroup .failGrandChild , statusGroup .fatalGrandChild , statusGroup .errorGrandChild , statusGroup .warningGrandChild , statusGroup .skipGrandChild , statusGroup .infoGrandChild
507+ ],
508+ backgroundColor: [
509+ " #00af00" , " #F7464A" , " #8b0000" , " #ff6347" , " #FDB45C" , " #1e90ff" , " #46BFBD"
510+ ]
511+ }],
512+ labels: [ " Pass" , " Fail" , " Fatal" , " Error" , " Warning" , " Skip" , " Info" ]
513+ },
514+ options: options
515+ };
516+
517+ var ctx = document .getElementById (" grandchild-analysis" ).getContext (' 2d' );
518+ drawChart (ctx, config);
519+ }
520+ })();
521+
522+ /* -- [ timeline ] -- */
523+ function getRandomColor () {
524+ var letters = ' 0123456789ABCDEF' ;
525+ var color = ' #' ;
526+ for (var i = 0 ; i < 6 ; i++ ) {
527+ color += letters[Math .floor (Math .random () * 16 )];
528+ }
529+ return color;
530+ }
531+
532+ (function drawTimelineChart () {
533+ if (typeof timeline !== " undefined" ) {
534+ var datasets = [];
535+ for (var key in timeline) {
536+ datasets .push ({ label: key, data: [ timeline[key] ], backgroundColor: getRandomColor (), borderWidth: 1 });
537+ }
538+
539+ var ctx = document .getElementById (' timeline' ).getContext (' 2d' );
540+
541+ new Chart (ctx, {
542+ type: ' horizontalBar' ,
543+ data: {
544+ datasets: datasets
545+ },
546+ options: {
547+ responsive: true ,
548+ maintainAspectRatio: false ,
549+ tooltips: {
550+ mode: ' point'
551+ },
552+ scales: {
553+ xAxes: [{
554+ stacked: true ,
555+ gridLines: false
556+ }],
557+ yAxes: [{
558+ stacked: true ,
559+ gridLines: false ,
560+ barThickness: 25
561+ }]
562+ },
563+ legend: {
564+ display: false
565+ }
566+ }
567+ });
568+ }
569+ })();
570+ </script >
423571 </body >
424572</html >
0 commit comments