<div class="card w-100" id="weeklySummary">
	{{{preLoader}}}
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title">{{translation.weeklySummary}}</h3>
			{{{ appCardAction "buttonsix" "sectionsix" 'weeklySummary'}}}
		</div>
		<div class="card-data pt-3">
			<div>
				<div class="">
					<canvas id="Weeklysummary" width="384" height="310" style="display: block; width: 384px; height: 310px;" class="chartjs-render-monitor"></canvas>
				</div>
			</div>
		</div>
	</div>
</div>
{{#extend 'scripts'}}
<script type="text/javascript">
	var bar_ctx = document.getElementById('Weeklysummary').getContext('2d');

	var gradientFill = bar_ctx.createLinearGradient(0, 0, 0, 250);
	gradientFill.addColorStop(0, '#3B7CFF');
	gradientFill.addColorStop(1, '#1E3C72');

	new Chart(document.getElementById("Weeklysummary"), {
		type: 'bar',
		data: {
			labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			datasets: [{
				label: 'Series A',
				backgroundColor: gradientFill,
				data: [12, 7, 14, 9, 14, 9, 17]
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			maxBarThickness: 0,
			legend: {
				display: false
			},
			scales: {
				xAxes: [{
					gridLines: {
						display: false,
					},
					barPercentage: 0.4,
				}],
				yAxes: [{
					gridLines: {
						drawBorder: false
					},
					ticks: {
						min: 5,
						max: 20
					},
				}]
			}
		}
	});

</script>
{{/extend}}
