48 lines
2.2 KiB
HTML
48 lines
2.2 KiB
HTML
{% load i18n static %}
|
|
<div class="slide-canvas slide-chart-metrics" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
|
|
<div class="slide-chart-metrics__chart">
|
|
<h2 class="slide-chart-metrics__chart-title">{{ slide.title }}</h2>
|
|
<div class="slide-chart-metrics__chart-container">
|
|
<div id="chart-metrics-{{ slide.id }}" style="width:100%;height:100%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-chart-metrics__sidebar">
|
|
{% for metric in slide.content.sidebar_metrics %}
|
|
<div class="slide-chart-metrics__metric" {% if metric.accent_color %}style="border-left-color:{{ metric.accent_color }}"{% endif %}>
|
|
<div class="slide-chart-metrics__metric-label">{{ metric.label }}</div>
|
|
<div class="slide-chart-metrics__metric-value">{{ metric.value }}</div>
|
|
{% if metric.description %}
|
|
<div class="slide-chart-metrics__metric-desc">{{ metric.description }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if slide.content.key_insight %}
|
|
<div style="margin-top:auto;padding:24px;background:var(--px-light);border-radius:var(--px-radius);">
|
|
<div style="font:var(--px-label);text-transform:uppercase;color:var(--px-navy);margin-bottom:8px;">{% trans "Key Insight" %}</div>
|
|
<div style="font:var(--px-body-sm);color:var(--px-body);">{{ slide.content.key_insight }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<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-metrics-{{ slide.id }}');
|
|
if (el && typeof ApexCharts !== 'undefined') {
|
|
new ApexCharts(el, cfg).render();
|
|
}
|
|
})();
|
|
</script>
|
|
{% endif %}
|
|
</div>
|