{{ define "canonicals_chart" }}
{{/* CANONICAL URLs CHART */}}
<div id="canonical-chart" class="chart"></div>
<script type="text/javascript">
	addToQueue(function() {
		let canonicalChart = echarts.init(document.getElementById('canonical-chart'));
		canonicalChart.setOption({
			color: ['#F7E497', '#FD7B6A'],
			toolbox: {
				show: true,
				top: "bottom",
				left: 0,
				feature: {
					saveAsImage: {
						show: true,
						name: "canonical-chart",
					}
				}
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: 'top',
				left: 'left',
				orient: 'vertical',
				data:  ['Canonical', 'Non Canonical'],
			},
			textStyle: {
				fontFamily: "Fira Code",
				fontSize: "1rem",
				fontWeight: 300,
			},
			series: [
				{
					center: ['50%', '55%'],
					labelLine: {
						show: false
					},
					label: {
						show: false
					},
					radius: ['0%', '65%'],
					name: 'Canonical URLs',
					type: 'pie',
					data: [
						{ value: {{ .CanonicalCount.Canonical }}, name: 'Canonical' },
						{ value: {{ .CanonicalCount.NonCanonical }}, name: 'Non Canonical' },
					],
				}
			]
		});
	});
</script>
{{ end }}