<div class="card" id="campaignPerformance">
	{{{preLoader}}}
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title">{{translation.campaignPerformance}}</h3>
			{{{ appCardAction "buttonthree" "sectionthree" 'campaignPerformance'}}}
		</div>

		<div class="card-data pt-3">
			<div>
				<div class="">
					<canvas id="compaignBarChart" width="275" height="137" style="display: block; width: 275px; height: 137px;" class="chartjs-render-monitor"></canvas>
				</div>
			</div>
		</div>
		<div class="card-footer border-top-1">
			<div class="select-wid">
				<select>
	      <option value="" selected>Yesterday</option>
	      <option value="1">Last Week</option>
	      <option value="2">Last Month</option>
	      <option value="3">Last 6 Months</option>
	   </select>
			</div>
		</div>
	</div>
</div>
{{#extend 'scripts' }}
<script type="text/javascript">
	new Chart(document.getElementById("compaignBarChart"), {
		type: 'bar',
		data: {
			labels: ["12:00 AM", "4:00 AM", "8:00 AM", "12:00 PM", "16:00 PM"],
			datasets: [{
				label: "Website Views",
				backgroundColor: "#5d92f4",
				data: [600, 900, 660, 750, 800]
			}, {
				label: "Email Subscription",
				backgroundColor: "#ffb70f",
				data: [400, 550, 400, 400, 450]
			}]
		},
		options: {
			legend: {
				display: false
			},
			tooltips: {
				titleSpacing: 6,
				cornerRadius: 5
			},
			scales: {
				xAxes: [{
					gridLines: {
						display: false,
					},
					ticks: {},
					barPercentage: 1.3,
					categoryPercentage: 0.5,
				}],
				yAxes: [{
					gridLines: {
						drawBorder: false
					},
					ticks: {
						min: 100,
						max: 1000
					},
				}]
			}
		}
	});

</script>
{{/extend}}
