{% assign id = include.chart-id %}
{% assign class = include.class %}
{% assign height = include.height | default: data.height | default: 25 %}
{% assign class = include.class %}

<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>

{% capture script %}
{% assign colors = include.colors | default: 1 %}
<script>
	var generateData = function() {
		var data = [],
			min = 0,
			max = 100,
			count = {{ include.count | default: 15 }};

		for (var n = 0; n < count; n++) {
			data.push({
				x: (n + 1).toString(),
				y: Math.floor(Math.random() * (max - min + 1)) + min
			});
		}

		return data;
	};

	var options = {
		chart: {
			height: {{ height | times: 16 }},
			type: "heatmap",
			toolbar: {
				show: false,
			},
		},
		dataLabels: {
			enabled: {% if include.labels %}true{% else %}false{% endif %}
		},
		{% if include.scale %}
		plotOptions: {
			heatmap: {
				enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
				colorScale: {
					ranges: [{
						from: 0,
						to: 20,
						name: "Low",
						color: "{{ "green" | tabler_color }}"
					}, {
						from: 21,
						to: 50,
						name: "Medium",
						color: "{{ "blue" | tabler_color }}"
					}, {
						from: 51,
						to: 75,
						name: "High",
						color: "{{ "yellow" | tabler_color }}"
					}, {
						from: 76,
						to: 100,
						name: "Extreme",
						color: "{{ "red" | tabler_color }}"
					}]
				}
			}
		},
		{% else %}
		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
		{% endif %}
		series: [
		{% for i in site.months-short limit: 12 %}
			{ name: "{{ i }}", data: generateData() },{% endfor %}
		],
		xaxis: {
			type: "category"
		}
	};

	(new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render();
</script>
{% endcapture %}

{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
