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

bootstrap update, charts fixes

Browse Source
This commit is contained in:
codecalm
2020-11-21 16:24:32 +01:00
parent f00c4faa18
commit b0b70bcda3
3 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -82,7 +82,7 @@
"@fullcalendar/timegrid": "^5.4.0",
"apexcharts": "^3.22.2",
"autosize": "^4.0.2",
"bootstrap": "twbs/bootstrap#fe961c1",
"bootstrap": "twbs/bootstrap#f4457bc",
"countup.js": "^2.0.7",
"daterangepicker": "^3.1.0",
"flatpickr": "^4.6.6",

2
src/pages/_includes/cards/development-activity.html
View File

@@ -5,7 +5,7 @@
<div class="position-relative">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
<div class="row g-2">
<div class="col-auto">{% include ui/chart-sparkline.html percentage=35 type="donut" %}</div>
<div class="col-auto">{% include ui/chart-sparkline.html id="activity" percentage=35 type="donut" %}</div>
<div class="col">
<div>Today's Earning: $4,262.40</div>
<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>

122
src/pages/_includes/ui/chart-sparkline.html
View File

@@ -1,72 +1,74 @@
{% assign type = include.type | default: 'bar' %}
{% assign id = 0 | random_id %}
{% assign id = include.id %}
{% assign color = include.color | default: 'blue' %}
{% assign height = include.height | default: 2.5 %}
{% assign data = include.data %}
<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
{% if id %}
<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if jekyll.environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
chart: {
type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
fontFamily: 'inherit',
height: {{ height | times: 16 | round }},
{% if type == 'pie' %}
width: {{ height | times: 16 | round }},
{% endif %}
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
{% if type == 'donut' %}
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '75%'
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
chart: {
type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
fontFamily: 'inherit',
height: {{ height | times: 16 | round }},
{% if type == 'pie' or type == 'donut' %}
width: {{ height | times: 16 | round }},
{% endif %}
animations: {
enabled: false
},
track: {
margin: 0
sparkline: {
enabled: true
},
dataLabels: {
show: false
},
tooltip: {
enabled: false,
},
{% if type == 'donut' %}
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '75%'
},
track: {
margin: 0
},
dataLabels: {
show: false
}
}
}
},
{% endif %}
{% if type == 'area' or type == 'line' %}
stroke: {
width: 2,
lineCap: "round",
},
{% endif %}
},
{% endif %}
{% if type == 'area' or type == 'line' %}
stroke: {
width: 2,
lineCap: "round",
},
{% endif %}
{% if type == 'donut' %}
colors: ["{{ color | default: 'blue' | tabler_color }}"],
series: [{{ data }}],
{% else %}
series: [{
color: "{{ color | default: 'blue' | tabler_color }}",
data: [{{ data }}]
}],
{% endif %}
})).render();
});
// @formatter:on
</script>
{% endcapture_global %}
{% if type == 'donut' %}
colors: ["{{ color | default: 'blue' | tabler_color }}"],
series: [{{ data }}],
{% else %}
series: [{
color: "{{ color | default: 'blue' | tabler_color }}",
data: [{{ data }}]
}],
{% endif %}
})).render();
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}