tabler/pages/_includes/ui/sparkline.html

{% assign type = include.type | default: 'bar' %}
{% assign id = 0 | random_id %}
{% assign color = include.color | default: 'blue' %}

{% assign data = include.data %}
{% if include.percentage %}
	{% assign data = include.percentage | append: "/100" %}
{% endif %}

{% append_lib peity %}

<div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>

{% capture_global scripts %}
<script>
	document.addEventListener("DOMContentLoaded", function () {
		$().peity && $('#sparkline-{{ id }}').text("{{ data }}").peity("{{ type | default: 'bar' }}", {
			width: {% if type == 'pie' %}40{% else %}64{% endif %},
			height: 40,
			stroke: "{{ color | tabler_color }}",
			strokeWidth: 2,
			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %},
			padding: .2,
			{% if type == 'pie' %}innerRadius: 17,{% endif %}
		});
	});
</script>
{% endcapture_global %}