_infographics.twig

{% if ffs.bg_colour == 'gold' %}
  {% set graph_colour = "--uw-black" %}
{% else %}
  {% if ffs.theme == 'org-art' %}
    {% set graph_colour = "--art-4" %}
  {% elseif ffs.theme == 'org-eng' %}
    {% set graph_colour = "--eng-4" %}
  {% elseif ffs.theme == 'org-ahs' %}
    {% set graph_colour = "--ahs-4" %}
  {% elseif ffs.theme == 'org-mat' %}
    {% set graph_colour = "--mat-4" %}
  {% elseif ffs.theme == 'org-sci' %}
    {% set graph_colour = "--sci-4" %}
  {% elseif ffs.theme == 'org-env' %}
    {% set graph_colour = "--env-4" %}
  {% elseif ffs.theme == 'org-stp' %}
    {% set graph_colour = "--stp-light" %}
  {% elseif ffs.theme == 'org-stj' %}
    {% set graph_colour = "--stj-light" %}
  {% elseif ffs.theme == 'org-ren' %}
    {% set graph_colour = "--ren-light" %}
  {% elseif ffs.theme == 'org-cgc' %}
    {% set graph_colour = "--cgc-light" %}
  {% elseif ffs.theme == 'org-school' %}
    {% set graph_colour = "--school-4" %}
  {% elseif ffs.theme == 'org-default' %}
    {% set graph_colour = "--uw-gold" %}
  {% endif %}
{% endif %}


<div
  class="highlighted-fact-infographic infographic-{{ infographics.info_type | replace({'_': '-'}) }} "
  data-infographic-type="{{ infographics.info_type }}"
  data-percent="{{ infographics.info_text }}"
  data-foregroundColor="var({{ graph_colour }})"
>
  {% if infographics.info_type == 'number' %}
    <span class="number">
      <span class="timer">{{ infographics.info_text }}</span>
      {% if infographics.info_suffix %}
        {{ infographics.info_suffix }}
      {% endif %}
    </span>
  {% else %}
    <div class="infographic-texthide">
      {{ infographics.info_text }}
      {% if infographics.info_suffix %}
        {{ infographics.info_suffix }}
      {% else %}
      <span>%</span>
      {% endif %}
    </div>
  {% endif %}

</div>