mirror of
https://github.com/tabler/tabler.git
synced 2026-07-27 13:34:37 +04:00
charts refactor, libs refactor
This commit is contained in:
codecalm
@@ -1,8 +1,10 @@
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% if site.data.libs.css %}
|
||||
<!-- Libs CSS -->
|
||||
{% for lib in site.data.libs.css %}
|
||||
{% for file in lib[1] %}
|
||||
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{% removeemptylines %}
|
||||
{{ site.capture_global.scripts }}
|
||||
{{ site.captured_global.scripts }}
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<script>
|
||||
window.tabler_colors = { {% for color in site.colors %}
|
||||
'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if site.data.libs %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
{% if site.data.libs.js and site.captured_libs %}
|
||||
<!-- Libs JS -->
|
||||
{% for lib in site.data.libs.js %}
|
||||
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
|
||||
{% for file in lib[1] %}
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
|
||||
+124
-113
@@ -4,147 +4,158 @@
|
||||
{% assign class = include.class | default: '' %}
|
||||
|
||||
{% if include['size'] == 'sm' %}
|
||||
{% assign class = class | append: ' chart-sm' | strip %}
|
||||
{% assign height = 2.5 %}
|
||||
{% assign class = class | append: ' chart-sm' | strip %}
|
||||
{% assign height = 2.5 %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
|
||||
<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %}
|
||||
style="outline: 1px solid red" {% endif %}></div>
|
||||
|
||||
{% append_lib apexcharts %}
|
||||
{% capture script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
// @formatter:off
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
{% if jekyll.environment == 'development' %}
|
||||
window.tabler_chart = window.tabler_chart || {};
|
||||
{% endif %}
|
||||
|
||||
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: '{{ data.type }}',
|
||||
height: {{ height | times: 16 }},
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
window.ApexCharts && ({% if jekyll.environment == 'development' %}
|
||||
window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}
|
||||
new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: "{{ data.type }}",
|
||||
{% if data.title %}
|
||||
fontFamily: 'inherit',
|
||||
{% endif %}
|
||||
height: {{ height | times: 16 }},
|
||||
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% else %}
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
},
|
||||
{% endif %}
|
||||
{% unless data.animations %}
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
{% endunless %}
|
||||
|
||||
{% if data.dashed-history or data.stroke-curve %}
|
||||
stroke: {
|
||||
{% if data.dashed-history %}
|
||||
width: [2, 1],
|
||||
dashArray: [0, 3],
|
||||
{% endif %}
|
||||
{% if data.stroke-curve %}
|
||||
curve: '{{ data.stroke-curve }}',
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if data.series %}
|
||||
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
fill: {
|
||||
opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
|
||||
{% if data.type == 'area' %}type: 'solid'{% endif %}
|
||||
},
|
||||
|
||||
{% else %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: '{{ serie.name }}',
|
||||
data: [{{ serie.data | join: ', '}}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: "{{ data.title | escape }}",
|
||||
margin: 0,
|
||||
floating: true,
|
||||
offsetX: 10,
|
||||
style: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.type == 'area' or data.type == 'line' %}
|
||||
stroke: {
|
||||
width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
|
||||
{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
|
||||
lineCap: "round",
|
||||
curve: "{{ data.stroke-curve | default: 'smooth' }}",
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.series %}
|
||||
{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
|
||||
{% if data.categories or data.days-labels-count %}
|
||||
xaxis: {
|
||||
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
|
||||
{% if data.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% else %}series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{{ serie.data | join: ', ' }}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.show - grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.categories or data.days-labels-count %}
|
||||
xaxis: {
|
||||
{% if data.categories %}
|
||||
categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
colors: [
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
{% if data.days-labels-count %}
|
||||
type: 'datetime', {% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.series %}
|
||||
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
// @formatter:on
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
{% if include.show-scripts %}
|
||||
{{ script }}
|
||||
{{ script }}
|
||||
{% else %}
|
||||
{% capture_global scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% capture_global scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
|
||||
{% if data %}
|
||||
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
|
||||
|
||||
{% append_lib jqvmap %}
|
||||
{% capture script %}
|
||||
<script>
|
||||
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
|
||||
@@ -17,7 +19,8 @@
|
||||
borderColor: 'transparent',
|
||||
{% if data.zoom %}enableZoom: true,{% endif %}
|
||||
{% if data.values %}
|
||||
scaleColors: [tabler.colorVariation('{{ color }}', 'lightest'), tabler.colors.{{ color }}],
|
||||
{% assign color-light = color | append: "-100" %}
|
||||
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
|
||||
normalizeFunction: 'polynomial',
|
||||
values: (chart_data = {{ data.values }}),
|
||||
onLabelShow: function (event, label, code) {
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
{% assign square = true %}
|
||||
{% endif %}
|
||||
|
||||
<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{ include.type }}" {% if include.color %}data-spark-color="{{ include.color }}"{% endif %}>
|
||||
{% append_lib peity %}
|
||||
<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{ include.type }}" {% if include.color %}data-spark-color="{{ include.color | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
|
||||
{% if include.label %}
|
||||
<div class="sparkline-label">
|
||||
{{ include.label }}
|
||||
|
||||
Reference in New Issue
Block a user