base tabler

liquid/includes/ui/chart-heatmap.html

@@ -0,0 +1,96 @@
+{% removeemptylines %}
+{% 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 %}
+{% removeemptylines %}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+	{% if environment == 'development' %}
+	window.tabler_chart = window.tabler_chart || {};
+	{% endif %}
+
+	window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+		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: "var(--tblr-green)"
+					}, {
+						from: 21,
+						to: 50,
+						name: "Medium",
+						color: "var(--tblr-blue)"
+					}, {
+						from: 51,
+						to: 75,
+						name: "High",
+						color: "var(--tblr-yellow)"
+					}, {
+						from: 76,
+						to: 100,
+						name: "Extreme",
+						color: "var(--tblr-red)"
+					}]
+				}
+			}
+		},
+		{% else %}
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[1].prop }}", {% endfor %}{% endif %}],
+		{% endif %}
+		series: [
+			{% for i in site.months-short limit: 12 %}
+			{% assign month-i = forloop.index %}
+			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
+			{% endfor %}
+		],
+		xaxis: {
+			type: "category"
+		},
+		legend: {
+			{% if include.legend %}
+			show: true,
+			position: 'bottom',
+			offsetY: 8,
+			markers: {
+				width: 10,
+				height: 10,
+				radius: 100,
+			},
+			itemMargin: {
+				horizontal: 8,
+			},
+			{% else %}
+			show: false,
+			{% endif %}
+		},
+	})).render();
+});
+</script>
+{% endremoveemptylines %}
+{%- endcapture %}
+
+{% capture_script %}
+{{ script }}
+{% endcapture_script %}
+{% endremoveemptylines %}