Opened vs Closed Issues Report

The report is a bar chart showing the number of opened issues vs number of resolved issues for a given list of projects.
$! 
 string [] project = argv[ 0 ]; 
 number resolvedIssues = countIssues( "project = " + project  +  " AND status in (Done, Closed, Resolved)" ); 
 number openedIssues = countIssues( "project = " + project  +  " AND status not in (Done, Closed, Resolved)" ); 
 number totalIssues = resolvedIssues + openedIssues; 
 
 number prResolved = round(resolvedIssues/totalIssues *  100 ,  2 ); 
 number prOpened = round(openedIssues/totalIssues *  100 ,  2 ); 
 $ 
 
 <html> 
 <head> 
 <style type= "text/css" > 
 body{ 
    background:#ededeb; 
 } 
    
 .report{ 
      font-family:  'Source Sans Pro' , sans-serif; 
      color: white; 
      box-shadow: none; 
      display: -webkit-inline-box; 
 } 
 .report ul{ 
      margin:0px 30px 10px 0px; 
      padding: 0 ; 
      list-style-type:none; 
      font-size:11px; 
      font-weight: 400 ; 
      line-height:20px; 
      } 
 .report_box{ 
      width:  85%; 
      background: #42526e; 
      float : left; 
      box-shadow: -1px 0px rgba( 255 ,  255 ,  255 ,  0.07 ); 
      cursor: pointer; 
      transform: scale( 1 ); 
      transition-property: transform,background; 
      transition-duration: .3s; 
      max-width: -webkit-fill-available; 
 } 
 .report_box_inner{ 
      padding:30px; 
 } 
 .report_box_inner span{ 
      font-size:36px; 
      font-weight: 700 ; 
 } 
 .progress{ 
      width: 100%; 
      margin-top:10px; 
      height:6px; 
      background:rgba( 0 ,  0 ,  0 ,  0.3 ); 
      margin-bottom:15px; 
 } 
 .progress_bar_opened{ 
      height:6px; float :left; 
      width: $prOpened$%; 
      background:#e4da57; 
      -webkit-animation:bar 2s; 
 } 
 .progress_bar_closed{ 
      height:6px; float :left; 
      width: $prResolved$%; 
      background:#1c9c6b; 
      -webkit-animation:bar2 2s; 
 }  
        
 .report_box_inner h2{ 
      font-weight:normal; 
      color: white; 
      font-size:16px; 
      margin:-4px 0px 3px 0px; 
 } 
 .report_box_inner p{ 
      font-size:11px; 
      color:rgb( 182 ,  182 ,  182 );clear: left; 
      font-weight: 300 ; 
      width:160px; 
      margin:2px 0px 15px 0px; 
 } 
      
 
 </style> 
 </head> 
 <body> 
 <div  class = 'report' > 
    <div  class = 'report_box' > 
      <div  class = 'report_box_inner' > 
        <h2> 
          Opened issue in $project$ 
        </h2> 
        <div  class = 'stat' > 
          <span>$prOpened$</span> 
        </div> 
        <div  class = 'progress' > 
          <div  class = 'progress_bar_opened' ></div> 
        </div> 
        <p>This is a simple example. You can render any html and  do everything you want.</p> 
      </div> 
    </div> 
    <div  class = 'report_box' > 
      <div  class = 'report_box_inner' > 
        <h2> 
          Closed issue in $project$ 
        </h2> 
        <div  class = 'stat' > 
          <span>$prResolved$%</span> 
        </div> 
        <div  class = 'progress' > 
          <div  class = 'progress_bar_closed' ></div> 
        </div> 
        <p>This is a simple example. You can render any html and  do everything you want.</p> 
      </div> 
    </div> 
 </div> 
 
 </body> 
 </html>