Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +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

11
pages/_includes/cards/table-users.html
View File

@@ -52,11 +52,12 @@
<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
</td>
<td class="text-center">
{% assign circle-percentage = forloop.index | random_number: 0, 100 %}
<div class="mx-auto chart-circle chart-circle-xs" data-value="{{ circle-percentage | divide: 100 }}"
data-thickness="3" data-color="blue">
<div class="chart-circle-value">{{ circle-percentage }}%</div>
</div>
{% assign percentage = forloop.index | random_number: 0, 100 %}
<!-- <div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
<!-- data-thickness="3" data-color="blue">-->
<!-- <div class="chart-circle-value">{{ percentage }}%</div>-->
<!-- </div>-->
{% include ui/sparkline.html percentage=percentage type="pie" %}
</td>
<td class="text-center">
<div class="dropdown">

13
pages/_includes/ui/sparkline.html
View File

@@ -2,6 +2,11 @@
{% 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>
@@ -9,15 +14,15 @@
{% capture_global scripts %}
<script>
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 %},
height: 40,
stroke: "{{ color | tabler_color }}",
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,
innerRadius: 16,
innerRadius: 17,
});
});
</script>
{% endcapture_global %}
{% endcapture_global %}