<div class="card" id="dailySales">
	{{{preLoader}}}
	<div class="card-content">
		<div class="card-header justify-content-between d-flex mb-4">
			<h3 class="card-title">{{translation.dailySales}}</h3>
			{{{ appCardAction "buttonone" "sectionone" 'dailySales'}}}
		</div>

		<div class="card-data">
			<div>
				<div class="d-flex align-items-center">
					<i aria-hidden="true" class="mr-3 material-icons success-text text-xxl">arrow_upward</i>
					<div>
						<h3 class="mb-1">12,255 Today</h3>
						<span class="fs-14 gray--text">10% increase from yesterday</span>
					</div>
				</div>
				<div class="">
					<canvas id="dailySalesChart" width="275" height="110" style="display: block; width: 275px; height: 110px;" class="chartjs-render-monitor"></canvas>
				</div>
			</div>
		</div>
		<div class="card-footer border-top-1">
			<div class="align-items-center d-flex text-md">
				<i aria-hidden="true" class="mr-1 material-icons">autorenew</i>
				<p>{{translation.updated10MinAgo}}</p>
			</div>
		</div>
	</div>
</div>
{{#extend 'scripts'}}
<script type="text/javascript">
	new Chart(document.getElementById("dailySalesChart"), {
		type: 'line',
		data: {
			labels: ['9', '10', '11', '12', '13', '14', '15'],
			datasets: [{
				labels: ['9', '10', '11', '12', '13', '14', '15'],
				fill: false,
				lineTension: 0,
				fillOpacity: 0.3,
				borderColor: "#00d014",
				borderWidth: "4",
				pointBorderColor: "#ffffff",
				pointBackgroundColor: "#00d014",
				pointBorderWidth: 3,
				pointRadius: 6,
				pointHoverBackgroundColor: "#00d014",
				pointHoverBorderColor: "#00d014",
				pointHoverBorderWidth: 4,
				pointHoverRadius: 7,
				data: [100, 200, 125, 250, 200, 150, 200]
			}]
		},
		options: {
			legend: {
				display: false
			},
			scales: {
				xAxes: [{
					display: true,
					ticks: {
						min: 0
					},
					gridLines: {
						display: true,
						drawBorder: false
					}
				}],
				yAxes: [{
					display: false,
					ticks: {
						suggestedMin: 0,
						beginAtZero: true
					}
				}]
			}
		}
	});

</script>
{{/extend}}
