39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
{% load i18n static %}
|
|
<div class="slide-canvas slide-chart" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
|
|
<div class="slide-chart__header">
|
|
<h1 class="slide-chart__title">{{ slide.title }}</h1>
|
|
{% if slide.subtitle %}
|
|
<p class="slide-chart__subtitle">{{ slide.subtitle }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="slide-chart__container">
|
|
<div id="chart-{{ slide.id }}" class="slide-chart__apex"></div>
|
|
</div>
|
|
|
|
{% if slide.content.footer_note %}
|
|
<div style="position:absolute;bottom:28px;left:80px;font:var(--px-caption);color:var(--px-light-muted);">
|
|
{{ slide.content.footer_note }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<img src="{% static 'img/HH_R_H_Logo.png' %}" alt="" class="slide-logo--footer">
|
|
|
|
{% if slide.content.chart_config %}
|
|
<script>
|
|
(function() {
|
|
var cfg = {{ slide.content.chart_config|safe }};
|
|
cfg.chart = cfg.chart || {};
|
|
cfg.chart.fontFamily = 'Inter, sans-serif';
|
|
cfg.chart.animations = { enabled: true };
|
|
cfg.colors = cfg.colors || ['#005696', '#0EA5E9', '#14B8A6', '#F59E0B', '#FB7185', '#8B5CF6'];
|
|
cfg.theme = { mode: 'light' };
|
|
var el = document.getElementById('chart-{{ slide.id }}');
|
|
if (el && typeof ApexCharts !== 'undefined') {
|
|
new ApexCharts(el, cfg).render();
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</div>
|