#set($report = $testbench.getBenchAnalytics().createReport($hits))
#set($aggs = $report.getJson())
#set($dates = $aggs.get("dates").get("buckets"))

<!-- Embed the data as JSON -->
<script id="activity-data" type="application/json">
[
  #foreach($d in $dates)
    {
      "date": "$d.get('key_as_string')",
      "total": $d.get('doc_count'),
      "avgScore": #if($d.get('percent').get('value') )$numberTool.format("0.00", $d.get('percent').get('value'))#else 0 #end,
      "fail":
        #set($fail=0)
        #foreach($b in $d.get('scores').get('buckets'))
          #if($b.get('key_as_string') == 'false')
            #set($fail = $b.get('doc_count'))
          #end
        #end
      $fail
    }#if($foreach.hasNext),#end
  #end
]
</script>

<div id="activity-chart" style="height: 400px;"></div>

<script type="text/javascript">
if (typeof window.renderActivityChart !== "function") {
	  window.renderActivityChart = function() {
	    const activityData = JSON.parse($("#activity-data").text());
	    const dates = activityData.map(item => item.date);
	    const totals = activityData.map(item => item.total);
	    const avgScores = activityData.map(item => item.avgScore == null ? null : parseFloat(item.avgScore));
	    const fails = activityData.map(item => item.fail);

	    let activityChart;
	    if (echarts.getInstanceByDom(document.getElementById('activity-chart'))) {
	      activityChart = echarts.getInstanceByDom(document.getElementById('activity-chart'));
	      activityChart.dispose();
	    }
	    activityChart = echarts.init(document.getElementById('activity-chart'));

	    const options = {
	      title: { text: 'Daily Activity (Total & Fails) and Avg Score', left: 'center', textStyle: { fontSize: 16 } },
	      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
	      legend: { bottom: 0 },
	      xAxis: [{ type: 'category', data: dates }],
	      yAxis: [
	        { type: 'value', name: 'Attempts' },
	        { type: 'value', name: 'Avg Score', min: 0, max: 1, position: 'right' }
	      ],
	      series: [
	        { name: 'Total Answers', type: 'bar', data: totals },
	        { name: 'Fails', type: 'bar', data: fails },
	        { name: 'Avg Score', type: 'line', yAxisIndex: 1, smooth: true, data: avgScores }
	      ]
	    };

	    activityChart.setOption(options);
	  }
	}
  // Call this after AJAX loads or on DOM ready
  $(function() {
	  window.renderActivityChart && window.renderActivityChart();
  });

  // If you’re using AJAX, be sure to call renderActivityChart() after content is injected!
</script>