mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Reduce empty space in Active Users homepage chart (#2693)
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
Bartosz-Doandcodecalm authored and 
GitHub committed
1 parent
271230ee0d
commit
0fd35c3858
6 files changed
+448
-1881
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated the `active-users-2` card chart include to use `chart-id="active-users-2"` with `height="11"` for a more compact layout.
|
||||
Vendored
-4
@@ -26,10 +26,6 @@
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.apexcharts-text {
|
||||
fill: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
|
||||
.apexcharts-gridline {
|
||||
stroke: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
+109
-1603
File diff suppressed because it is too large.
Load diff
@@ -1,13 +1,10 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="subheader">Active Users</div>
|
||||
<div class="d-flex align-items-baseline mb-2">
|
||||
<div class="h1 mb-0 me-2">25,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=-1 %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="subheader">Active Users</div>
|
||||
<div class="d-flex align-items-baseline mb-2">
|
||||
<div class="h1 mb-0 me-2">25,782</div>
|
||||
<div class="me-auto">{% include "ui/trending.html" value=-1 %}</div>
|
||||
</div>
|
||||
{% include "ui/chart-radial.html" id="active-users-4" title="Active users" value="58" height="200" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
{% removeemptylines %} {% assign id = include.id | default: "active-users-4" %} {% assign height = include.height | default: 350 %} {% assign class = include.class %} {% assign title = include.title | default: "Active users" | upcase %} {% assign value = include.value | default: 58 %}
|
||||
|
||||
<div id="chart-{{ id }}" class="position-relative {% if class %} {{ class }}{% endif %}"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
{% if environment == 'development' %}
|
||||
window.tabler_chart = window.tabler_chart || {};
|
||||
{% endif %}
|
||||
|
||||
window.ApexCharts &&
|
||||
({% if environment == "development" %}window.tabler_chart["chart-{{ id }}"] = {% endif %}new ApexCharts(
|
||||
document.getElementById("chart-{{ id }}"),
|
||||
{
|
||||
series: [{{ value }}],
|
||||
chart: {
|
||||
height: {{ height }},
|
||||
type: "radialBar",
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -120,
|
||||
endAngle: 120,
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: "70%",
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: -20,
|
||||
fontSize: "14px",
|
||||
fontFamily: "inherit",
|
||||
fontWeight: 400,
|
||||
color: "var(--tblr-secondary)",
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: "30px",
|
||||
fontWeight: 700,
|
||||
fontFamily: "inherit",
|
||||
offsetY: 0,
|
||||
color: "var(--tblr-body-color)",
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["var(--tblr-primary)"],
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
labels: ["{{ title }}"],
|
||||
}
|
||||
)).render();
|
||||
});
|
||||
</script>
|
||||
{% endremoveemptylines %}
|
||||
+266
-263
@@ -1,26 +1,8 @@
|
||||
{% removeemptylines %}
|
||||
{% assign data = charts[include.chart-id] %}
|
||||
{% assign id = include.id | default: include.chart-id %}
|
||||
{% assign height = include.height | default: data.height | default: 10 %}
|
||||
{% assign class = include.class %}
|
||||
|
||||
{% if include['size'] == 'sm' %}
|
||||
{% assign class = class | append: ' chart-sm' | strip %}
|
||||
{% assign height = 2.5 %}
|
||||
{% elsif include['size'] == 'lg' %}
|
||||
{% assign class = class | append: ' chart-lg' | strip %}
|
||||
{% assign height = 15 %}
|
||||
{% endif %}
|
||||
|
||||
{% if data %}
|
||||
{% if data.extend %}
|
||||
{% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %}
|
||||
{% endif %}
|
||||
{% removeemptylines %} {% assign data = charts[include.chart-id] %} {% assign id = include.id | default: include.chart-id %} {% assign height = include.height | default: data.height | default: 10 %} {% assign class = include.class %} {% if include['size'] == 'sm' %} {% assign class = class | append: ' chart-sm' | strip
|
||||
%} {% assign height = 2.5 %} {% elsif include['size'] == 'lg' %} {% assign class = class | append: ' chart-lg' | strip %} {% assign height = 15 %} {% endif %} {% if data %} {% if data.extend %} {% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %} {% endif %}
|
||||
|
||||
<div id="chart-{{ id }}" class="position-relative {% if class %} {{ class }}{% endif %}"></div>
|
||||
{% capture script %}
|
||||
{% assign chart-type = data.type | default: 'bar' -%}
|
||||
{% removeemptylines %}
|
||||
{% capture script %} {% assign chart-type = data.type | default: 'bar' -%} {% removeemptylines %}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
@@ -40,272 +22,293 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
{% if environment == 'development' %}
|
||||
window.tabler_chart = window.tabler_chart || {};
|
||||
{% endif %}
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
{% if environment == 'development' %}
|
||||
window.tabler_chart = window.tabler_chart || {};
|
||||
{% endif %}
|
||||
|
||||
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: "{{ chart-type }}",
|
||||
fontFamily: 'inherit',
|
||||
height: {{ height | times: 16 }},
|
||||
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: "{{ chart-type }}",
|
||||
fontFamily: 'inherit',
|
||||
height: {{ height | times: 16 }},
|
||||
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% else %}
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: {% if data.toolbar %}true{% else %}false{% endif %},
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% else %}
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: {% if data.toolbar %}true{% else %}false{% endif %},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% unless data.animations %}
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
{% endunless %}
|
||||
{% unless data.animations %}
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
{% endunless %}
|
||||
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if chart-type == 'bar' %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
{% if data.horizontal %}
|
||||
barHeight: '50%',
|
||||
horizontal: true,
|
||||
{% else %}
|
||||
columnWidth: '50%',
|
||||
{% endif %}
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% if chart-type == 'bar' %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
{% if data.horizontal %}
|
||||
barHeight: '50%',
|
||||
horizontal: true,
|
||||
{% else %}
|
||||
columnWidth: '50%',
|
||||
{% endif %}
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'radialBar' %}
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -120,
|
||||
endAngle: 120,
|
||||
hollow: {
|
||||
margin: 16,
|
||||
size: "50%"
|
||||
{% if chart-type == 'radialBar' %}
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: {{ data.radial-start-angle | default: -120 }},
|
||||
endAngle: {{ data.radial-end-angle | default: 120 }},
|
||||
hollow: {
|
||||
margin: {{ data.radial-hollow-margin | default: 16 }},
|
||||
size: "{{ data.radial-hollow-size | default: '50%' }}"
|
||||
},
|
||||
dataLabels: {
|
||||
show: {% if data.radial-labels-show == false %}false{% else %}true{% endif %},
|
||||
name: {
|
||||
show: {% if data.radial-name-show %}true{% else %}false{% endif %},
|
||||
offsetY: {{ data.radial-name-offset-y | default: 0 }},
|
||||
fontSize: '{{ data.radial-name-font-size | default: "16px" }}',
|
||||
color: '{{ data.radial-name-color | default: "inherit" }}',
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
value: {
|
||||
offsetY: -8,
|
||||
fontSize: '24px',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
value: {
|
||||
offsetY: {{ data.radial-value-offset-y | default: -8 }},
|
||||
fontSize: '{{ data.radial-value-font-size | default: "24px" }}',
|
||||
fontWeight: {{ data.radial-value-font-weight | default: 600 }},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'bar' or chart-type == 'area' %}
|
||||
dataLabels: {
|
||||
enabled: {% if data.datalabels %}true{% else %}false{% endif %},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.fill-type %}
|
||||
fill: {
|
||||
type: '{{ data.fill-type }}'
|
||||
{% if data.fill-type == 'gradient' %},
|
||||
gradient: {
|
||||
shade: '{{ data.fill-gradient-shade | default: "light" }}',
|
||||
type: '{{ data.fill-gradient-type | default: "horizontal" }}',
|
||||
shadeIntensity: {{ data.fill-gradient-shade-intensity | default: 0.5 }},
|
||||
gradientToColors: ['{{ data.fill-gradient-to-color | default: "#9ec2fb" }}'],
|
||||
inverseColors: {% if data.fill-gradient-inverse-colors %}true{% else %}false{% endif %},
|
||||
opacityFrom: {{ data.fill-gradient-opacity-from | default: 1 }},
|
||||
opacityTo: {{ data.fill-gradient-opacity-to | default: 1 }},
|
||||
stops: [{% if data.fill-gradient-stops %}{{ data.fill-gradient-stops | join: ', ' }}{% else %}0, 100{% endif %}]
|
||||
}
|
||||
{% endif %}
|
||||
},
|
||||
{% elsif chart-type == 'area' %}
|
||||
fill: {
|
||||
colors: [
|
||||
'var(--chart-{{ id }}-fill-0)',
|
||||
'var(--chart-{{ id }}-fill-1)',
|
||||
],
|
||||
type: 'solid'
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'bar' or chart-type == 'area' %}
|
||||
dataLabels: {
|
||||
enabled: {% if data.datalabels %}true{% else %}false{% endif %},
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: "{{ data.title | escape }}",
|
||||
margin: 0,
|
||||
floating: true,
|
||||
offsetX: 10,
|
||||
style: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'area' %}
|
||||
fill: {
|
||||
colors: [
|
||||
'var(--chart-{{ id }}-fill-0)',
|
||||
'var(--chart-{{ id }}-fill-1)',
|
||||
],
|
||||
type: 'solid'
|
||||
},
|
||||
{% endif %}
|
||||
{% if chart-type == 'radialBar' and data.stroke-linecap %}
|
||||
stroke: {
|
||||
lineCap: "{{ data.stroke-linecap }}"
|
||||
},
|
||||
{% elsif chart-type == 'area' or chart-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.title %}
|
||||
title: {
|
||||
text: "{{ data.title | escape }}",
|
||||
margin: 0,
|
||||
floating: true,
|
||||
offsetX: 10,
|
||||
style: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.series %}
|
||||
{% if chart-type == 'pie' or chart-type == 'donut' or chart-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 chart-type == 'area' or chart-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 %}
|
||||
{% elsif chart-type == 'candlestick' %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
|
||||
}{% 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 %}
|
||||
|
||||
{% if data.series %}
|
||||
{% if chart-type == 'pie' or chart-type == 'donut' or chart-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 %}],
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
},
|
||||
|
||||
{% elsif chart-type == 'candlestick' %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
|
||||
}{% 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 %}
|
||||
grid: {
|
||||
{% unless data.sparkline %}
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4
|
||||
},
|
||||
{% endunless %}
|
||||
{% if data.hide-grid %}
|
||||
show: false,
|
||||
{% else %}
|
||||
strokeDashArray: 4,
|
||||
{% if data.show-x %}
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
},
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
grid: {
|
||||
{% unless data.sparkline %}
|
||||
padding: {
|
||||
top: -20,
|
||||
right: 0,
|
||||
left: -4,
|
||||
bottom: -4
|
||||
},
|
||||
{% endunless %}
|
||||
{% if data.hide-grid %}
|
||||
show: false,
|
||||
{% else %}
|
||||
strokeDashArray: 4,
|
||||
{% if data.show-x %}
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
},
|
||||
{% if data.categories or data.datetime %}
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
{% if data.x-formatter %}
|
||||
formatter: function(val) {
|
||||
return {{ data.x-formatter }}
|
||||
},
|
||||
{% endif %}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% if chart-type == 'area' or chart-type == 'bar' %}
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.categories %}
|
||||
categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.datetime %}
|
||||
type: 'datetime',
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.categories or data.datetime %}
|
||||
xaxis: {
|
||||
labels: {
|
||||
padding: 0,
|
||||
{% if data.x-formatter %}
|
||||
formatter: function(val) {
|
||||
return {{ data.x-formatter }}
|
||||
},
|
||||
{% endif %}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% if chart-type == 'area' or chart-type == 'bar' %}
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.categories %}
|
||||
categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4
|
||||
},
|
||||
{% if data.y-max %}
|
||||
max: {{ data.y-max }},
|
||||
{% endif %}
|
||||
{% if data.y-title %}
|
||||
title: {
|
||||
text: '{{ data.y-title | escape }}'
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.y-tooltip %}
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
{% endif %}
|
||||
},
|
||||
{% endunless %}
|
||||
|
||||
{% if data.datetime %}
|
||||
type: 'datetime',
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.datetime %}
|
||||
{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
|
||||
{% assign days-count = data.series[0].data.size %}
|
||||
|
||||
{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
|
||||
yaxis: {
|
||||
labels: {
|
||||
padding: 4
|
||||
},
|
||||
{% if data.y-max %}
|
||||
max: {{ data.y-max }},
|
||||
{% endif %}
|
||||
{% if data.y-title %}
|
||||
title: {
|
||||
text: '{{ data.y-title | escape }}'
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.y-tooltip %}
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
{% endif %}
|
||||
},
|
||||
{% endunless %}
|
||||
labels: [
|
||||
{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
|
||||
{% if data.datetime %}
|
||||
{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
|
||||
{% assign days-count = data.series[0].data.size %}
|
||||
{% if data.colors %}
|
||||
colors: [{% for color in data.colors %}'{{ color }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% elsif data.series %}
|
||||
colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
|
||||
labels: [
|
||||
{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
legend: {
|
||||
{% if data.legend %}
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8
|
||||
},
|
||||
{% else %}
|
||||
show: false,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if data.series %}
|
||||
colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
|
||||
tooltip: {
|
||||
{% if data.hide-tooltip %}
|
||||
enabled: false,
|
||||
{% endif %}
|
||||
|
||||
legend: {
|
||||
{% if data.legend %}
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
offsetY: 12,
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 100,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 8
|
||||
},
|
||||
{% else %}
|
||||
show: false,
|
||||
{% endif %}
|
||||
},
|
||||
{% if chart-type == 'pie' or chart-type == 'donut' %}
|
||||
fillSeriesColor: false
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
|
||||
tooltip: {
|
||||
{% if data.hide-tooltip %}
|
||||
enabled: false,
|
||||
{% endif %}
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if chart-type == 'pie' or chart-type == 'donut' %}
|
||||
fillSeriesColor: false
|
||||
{% endif %}
|
||||
},
|
||||
{% 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>
|
||||
{% endremoveemptylines %}
|
||||
{%- endcapture %}
|
||||
|
||||
{% capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
|
||||
{% endif %}
|
||||
{% endremoveemptylines %}
|
||||
{% endremoveemptylines %} {%- endcapture %} {% capture_script %} {{ script }} {% endcapture_script %} {% endif %} {% endremoveemptylines %}
|
||||
Reference in new issue
Block a user