mirror of
https://github.com/tabler/tabler.git
synced 2026-08-02 08:25:32 +04:00
radalChart fix
This commit is contained in:
codecalm
+11
-14
@@ -2,6 +2,7 @@ total-sales:
|
||||
type: donut
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
name: Total sales
|
||||
series:
|
||||
- name: Direct
|
||||
color: blue
|
||||
@@ -16,23 +17,21 @@ total-sales:
|
||||
color: yellow
|
||||
data: 12
|
||||
|
||||
total-sales2:
|
||||
type: radalBar
|
||||
campaigns:
|
||||
name: Campaigns
|
||||
type: radialBar
|
||||
sparkline: true
|
||||
hide-legend: true
|
||||
series:
|
||||
- name: Direct
|
||||
- name: Total Sent
|
||||
color: blue
|
||||
data: 44
|
||||
- name: Affilliate
|
||||
color: green
|
||||
data: 55
|
||||
- name: Sponsored
|
||||
color: red
|
||||
data: 35
|
||||
- name: E-mail
|
||||
color: yellow
|
||||
data: 12
|
||||
- name: Reached
|
||||
color: blue-light
|
||||
data: 36
|
||||
- name: Opened
|
||||
color: blue-lighten
|
||||
data: 18
|
||||
|
||||
tasks:
|
||||
name: Tasks
|
||||
@@ -175,7 +174,6 @@ area-spline-stacked:
|
||||
spline: true
|
||||
hide-legend: true
|
||||
stacked: true
|
||||
# groups: [1, 2]
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
- name: Maximum
|
||||
@@ -255,7 +253,6 @@ bar-stacked:
|
||||
display: true
|
||||
type: bar
|
||||
stacked: true
|
||||
# groups: [1, 2]
|
||||
hide-legend: true
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
series:
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
<h3 class="card-title">Total sales</h3>
|
||||
|
||||
{% include ui/chart.html chart-id="total-sales" height=15 %}
|
||||
{% include ui/chart.html chart-id="total-sales2" height=15 %}
|
||||
{% include ui/chart.html chart-id="campaigns" height=15 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+106
-107
@@ -13,130 +13,129 @@
|
||||
|
||||
{% capture script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
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 }}',
|
||||
height: {{ height | times: 16 }},
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% 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.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.series %}
|
||||
{% if data.type == 'pie' or data.type == 'donut' %}
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% 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 %}],
|
||||
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% else %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: '{{ serie.name }}',
|
||||
data: [{{ serie.data | join: ', '}}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% 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.show-grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: 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.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% 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.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.series %}
|
||||
colors: [ //chart colors
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
colors: [ //chart colors
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user