#set($s = $mediaarchive.getSearcherManager().getSearcher("system", "userauthenticationLog"))
#set($hits = $s.getAllHits($context))
#set($dl = $mediaarchive.getSearcher("assetdownloadLog"))
#set($dlhits = $dl.getAllHits($context))


#set($assetsearcher = $mediaarchive.getSearcher("asset"))
#set($assets = $assetsearcher.getAllHits($context))



<div class="row">

[[Query]]: $breakdownhits.getSearchQuery().toFriendly()




<div class="col-md-4 well">

<canvas id="usagechart" width="200" height="200"></canvas>

</div>

<div class="col-md-4">

<ul class="list-group">
 <a href="#" class="list-group-item active">
    [[Asset Usage Breakdown]]
  </a>
#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
#foreach($subitem in $item.getAggregations())

  <li class="list-group-item">
    <span class="badge" title="$item.key">$!sizer.inEnglish($subitem.getValue()) </span>
   $!mediaarchive.getData("assettype",$item.key)<br>

  </li>

#end
#end

<li class="list-group-item">
    <span class="badge">$!sizer.inEnglish($breakdownhits.getSum("filesize")) </span>
  [[Total]]

  </li>
  
</ul>

</div>

</div>

<script>
var ctx = document.getElementById("usagechart");
var data =
{
        labels: [

#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())

"$item.key" #if($foreach.hasNext),#end

#end
        

        
        ],
     
        
        
        datasets: [{
            
            data: [
#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
#foreach($subitem in $item.getAggregations())
$subitem.getValue() ,
#end
#end
                  
                   
                   ],
                   #set($count = 1)

        backgroundColor: [
#foreach($item in $breakdownhits.getAggregations().get("assettype_filesize").getBuckets())
#foreach($subitem in $item.getAggregations())
                #if($count != 1) , #end '$mediaarchive.getData("color", "$count").get("colorcode")'
                #set($count = $count + 1)
                #end
                #end
            ]
        
        
            
    }],

}

var myChart = new Chart(ctx, {
    type: 'pie',
    data: data
    
});
</script>