Statistics Container

The Statistic Container will hold statistic cards.

The Statistic Container includes an implemntation of the Circular Progress Bar.

The Circular Progress Bar is a text container, tht uses CountUp for a rolling counter, and has outer rings that include animated circular progress bars.

The ProgressBar js file is in the root/libraries folder.

  • URL: https://kimmobrunfeldt.github.io/progressbar.js/
    The countUp js file is in the root/libraries folder.
  • Github: https://github.com/inorganik/countUp.js

    Colors of the progress bar are maintained in CSS, via a color modifier class in the component to utilize the standard theme colors. This color modifier must be located on the .circular-progress-bar element. Current classes maintaind are:
  • Theme color: $color-yellow-high = Yellow colored progress bars. (default)
  • Theme color: $color-sky-blue = Blue colored progress bars

    Required/Expected variables:
    An object keyed circular_progress_bar which contains:
  • modifier_class: pass modifier classes (color)
  • id: Unique id for an id="" attribute
  • raw_text: Text to be displayed in center of circle; with an
    optional leading symbol. --- Expected values: 360, #45, $99
  • light title Heavy title
  • light title Heavy title
Markup Details
                            {{ attach_library('goizueta_theme/statistics-container') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('statistic-container') : ' class="statistic-container"'
%}

<section {{ attributes|raw }}>
  <ul class="statistic-container__container">
    {% for item in statistics %}
      <li class="statistic-container__item">
        {% include '@components/statistic-card/statistic-card.twig' with {
          "statistic_card" : item
        } only %}
      </li>
    {% endfor %}
  </ul>
  <div class="statistic-container__pager slick-pager"></div>
</section>