Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

feat: upgrade apexcharts to v5 and add CSS variables for dynamic chart colors (#2555)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
ethancrawford
2025-12-09 04:08:03 +08:00
committed by GitHub
parent f9d6076014
commit e3d86c519b
4 changed files with 260 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
shared/includes/ui/chart.html
View File

@@ -21,6 +21,24 @@
{% capture script %}
{% assign chart-type = data.type | default: 'bar' -%}
{% removeemptylines %}
<style>
:root {
{% if data.series %}
{% for serie in data.series %}
{% assign color = serie.color | default: data.color | default: 'primary' %}
{% assign opacity = serie.color-opacity | default: '100%' %}
--chart-{{ id }}-color-{{ forloop.index0 }}: color-mix(in srgb, transparent, var(--tblr-{{ color }}) {{ opacity }});
{% endfor %}
{% endif %}
{% if chart-type == 'area' %}
--chart-{{ id }}-fill-0: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
--chart-{{ id }}-fill-1: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
{% endif %}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
@@ -97,8 +115,8 @@
{% if chart-type == 'area' %}
fill: {
colors: [
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}80%{% endif %})',
'var(--chart-{{ id }}-fill-0)',
'var(--chart-{{ id }}-fill-1)',
],
type: 'solid'
},
@@ -234,9 +252,7 @@
{% endif %}
{% if data.series %}
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}
'color-mix(in srgb, transparent, var(--tblr-{{ color }}) {% if serie.color-opacity %}{{ serie.color-opacity }}{% else %}100%{% endif %})'{% unless forloop.last %}, {% endunless %}{% endfor %}
],
colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
legend: {