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 keyedcircular_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>