Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-26 13:04:39 +04:00
Code Issues Projects Releases Wiki Activity

sparkline chart

Browse Source
This commit is contained in:
codecalm
2019-12-25 15:32:40 +01:00
parent e116c07bd1
commit 61e7a5e04e
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/cards/table-users.html
+6 -5
View File
@@ -52,11 +52,12 @@
<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div> <div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
</td> </td>
<td class="text-center"> <td class="text-center">
{% assign circle-percentage = forloop.index | random_number: 0, 100 %} {% assign percentage = forloop.index | random_number: 0, 100 %}
<div class="mx-auto chart-circle chart-circle-xs" data-value="{{ circle-percentage | divide: 100 }}" <!-- <div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
data-thickness="3" data-color="blue"> <!-- data-thickness="3" data-color="blue">-->
<div class="chart-circle-value">{{ circle-percentage }}%</div> <!-- <div class="chart-circle-value">{{ percentage }}%</div>-->
</div> <!-- </div>-->
{% include ui/sparkline.html percentage=percentage type="pie" %}
</td> </td>
<td class="text-center"> <td class="text-center">
<div class="dropdown"> <div class="dropdown">
pages/_includes/ui/sparkline.html
+9 -4
View File
@@ -2,6 +2,11 @@
{% assign id = 0 | random_id %} {% assign id = 0 | random_id %}
{% assign color = include.color | default: 'blue' %} {% assign color = include.color | default: 'blue' %}
{% assign data = include.data %}
{% if include.percentage %}
{% assign data = include.percentage | append: "/100" %}
{% endif %}
{% append_lib peity %} {% 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> <div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
@@ -9,15 +14,15 @@
{% capture_global scripts %} {% capture_global scripts %}
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
$().peity && $('#sparkline-{{ id }}').text("{{ include.data }}").peity("{{ type | default: 'bar' }}", { $().peity && $('#sparkline-{{ id }}').text("{{ data }}").peity("{{ type | default: 'bar' }}", {
width: {% if type == 'pie' %}40{% else %}64{% endif %}, width: {% if type == 'pie' %}40{% else %}64{% endif %},
height: 40, height: 40,
stroke: "{{ color | tabler_color }}", stroke: "{{ color | tabler_color }}",
strokeWidth: 2, strokeWidth: 2,
fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'bar' %}["{{ color | tabler_color }}"]{% else %}"transparent"{% endif %}, fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'gray-200' | tabler_color }}"]{% elsif type == 'bar' %}["{{ color | tabler_color }}"]{% else %}"transparent"{% endif %},
padding: .2, padding: .2,
innerRadius: 16, innerRadius: 17,
}); });
}); });
</script> </script>
{% endcapture_global %} {% endcapture_global %}