Stats
#
Zero Counter {% include 'components/stats/zero-counter' %}
#
HTML 
<div class="zero-counter" data-from="0" data-to="1000">
	<span class="zero-counter__value">1000</span>
	<span class="zero-counter__title">The title</span>
</div>
Twig 
<div class="zero-counter" data-from="{{counter_from}}" data-to="{{counter_to}}">
	<span class="zero-counter__value">{{counter_to}}</span>
	<span class="zero-counter__title">{{counter_title}}</span>
</div>
{
    "counter_from": 0,
    "counter_to": 1000,
    "counter_title": "The title"
}
1000 The title
Line Stat {% include 'components/stats/line-stat' %}
#
HTML 
<div class="line-statistic" data-min="0" data-max="100">
	<span class="line-statistic__title">The Title</span>
	<span class="line-statistic__text">
		<span class="line-statistic__value">65</span>%	</span>
	<div class="line-statistic__line-wrapper">
		<div class="line-statistic__line-actual js-pre-animated"></div>
	</div>
</div>
Twig 
<div class="line-statistic" data-min="{{stat_min}}" data-max="{{stat_max}}">
	<span class="line-statistic__title">{{stat_title}}</span>
	<span class="line-statistic__text">
		<span class="line-statistic__value">{{stat_value}}</span>{% if stat_of %} of {{ stat_of }} {% else %}%{% endif %}
	</span>
	<div class="line-statistic__line-wrapper">
		<div class="line-statistic__line-actual js-pre-animated"></div>
	</div>
</div>
{
    "stat_min": 0,
    "stat_max": 100,
    "stat_title": "The Title",
    "stat_value": 65
}
The Title 65%
Progress {% include 'components/stats/progress' %}
#
HTML 
<div class="progress-totalizer-panel">
    <div class="progress-totalizer-wrapper">
        <div class="progress-totalizer">
            <div class="progress-totalizer__segments">
                <div class="progress-totalizer__segment progress-totalizer__segment--church" style="width: 60%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--individual" style="width: 20%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--remaining" style="width: 20%"></div>
            </div>
            <div class="progress-totalizer__markers">
                <div class="progress-totalizer__marker" style="width: 100%"></div>
            </div>
        </div>
    </div>
    <div class="progress-totalizer-legend">
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--church">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Your church has given</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--individual">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Individual regular giving</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--remaining">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Still to raise</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
    </div>
</div>
Twig 
<div class="progress-totalizer-panel">
    <div class="progress-totalizer-wrapper">
        <div class="progress-totalizer">
            <div class="progress-totalizer__segments">
                <div class="progress-totalizer__segment progress-totalizer__segment--church" style="width: 60%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--individual" style="width: 20%"></div>
                <div class="progress-totalizer__segment progress-totalizer__segment--remaining" style="width: 20%"></div>
            </div>
            <div class="progress-totalizer__markers">
                <div class="progress-totalizer__marker" style="width: 100%"></div>
            </div>
        </div>
    </div>
    <div class="progress-totalizer-legend">
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--church">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Your church has given</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--individual">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Individual regular giving</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
        <div class="progress-totalizer-legend__col progress-totalizer-legend__col--remaining">
            <span class="progress-totalizer-legend__color"></span>
            <span class="progress-totalizer-legend__label">Still to raise</span>
            <span class="progress-totalizer-legend__value">£XXXXX</span>
        </div>
    </div>
</div>
{}
Your church has given £XXXXX
Individual regular giving £XXXXX
Still to raise £XXXXX
Line Stat Counter {% include 'components/stats/line-stat~counter' %}
#
HTML 
<div class="line-statistic" data-min="0" data-max="1000">
	<span class="line-statistic__title">The Title</span>
	<span class="line-statistic__text">
		<span class="line-statistic__value">800</span> of 1000 	</span>
	<div class="line-statistic__line-wrapper">
		<div class="line-statistic__line-actual js-pre-animated"></div>
	</div>
</div>
Twig 
<div class="line-statistic" data-min="{{stat_min}}" data-max="{{stat_max}}">
	<span class="line-statistic__title">{{stat_title}}</span>
	<span class="line-statistic__text">
		<span class="line-statistic__value">{{stat_value}}</span>{% if stat_of %} of {{ stat_of }} {% else %}%{% endif %}
	</span>
	<div class="line-statistic__line-wrapper">
		<div class="line-statistic__line-actual js-pre-animated"></div>
	</div>
</div>
{
    "stat_min": 0,
    "stat_max": 1000,
    "stat_title": "The Title",
    "stat_value": 800,
    "stat_of": 1000
}
The Title 800 of 1000
Progress Block {% include 'components/stats/progress-block' %}
#
HTML 
<div class="small-row large-row progress-stat-grid progress-stat-grid--grey">
    <div class="progress-stat-block progress-stat-block--large">
        <span class="icon-empowerment-yellow"></span>
        <span class="progress-stat-block__value">99999</span>
        <span class="progress-stat-block__label">Lives changed</span>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">This year we have given</span>
            <span class="progress-stat-block__value">&pound;9999</span>
        </div>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">Our church gave</span>
            <span class="progress-stat-block__value">99999</span>
        </div>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">Individual gave</span>
            <span class="progress-stat-block__value">99999</span>
        </div>
    </div>
</div>
Twig 
<div class="small-row large-row progress-stat-grid progress-stat-grid--grey">
    <div class="progress-stat-block progress-stat-block--large">
        <span class="icon-empowerment-yellow"></span>
        <span class="progress-stat-block__value">99999</span>
        <span class="progress-stat-block__label">Lives changed</span>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">This year we have given</span>
            <span class="progress-stat-block__value">&pound;9999</span>
        </div>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">Our church gave</span>
            <span class="progress-stat-block__value">99999</span>
        </div>
    </div>
    <div class="large-col-4">
        <div class="progress-stat-block">
            <span class="progress-stat-block__label">Individual gave</span>
            <span class="progress-stat-block__value">99999</span>
        </div>
    </div>
</div>
{}
99999 Lives changed
This year we have given £9999
Our church gave 99999
Individual gave 99999
Chart {% include 'components/stats/chart' %}
#
HTML 
<div class="pie-chart" data-data="[{&quot;value&quot;: 91, &quot;color&quot;:&quot;#FCD901&quot;, &quot;highlight&quot;:&quot;#EFCD02&quot;},{&quot;value&quot;: 9, &quot;color&quot;: &quot;#90ADAB&quot;, &quot;highlight&quot;: &quot;#88A4A2&quot;}]" style="visibility: visible;">
	<canvas class="chart" height="960" width="1920" style="width: 960px; height: 480px;"></canvas>	
</div>
Twig 
<div class="pie-chart" data-data="[{&quot;value&quot;: 91, &quot;color&quot;:&quot;#FCD901&quot;, &quot;highlight&quot;:&quot;#EFCD02&quot;},{&quot;value&quot;: 9, &quot;color&quot;: &quot;#90ADAB&quot;, &quot;highlight&quot;: &quot;#88A4A2&quot;}]" style="visibility: visible;">
	<canvas class="chart" height="960" width="1920" style="width: 960px; height: 480px;"></canvas>	
</div>
{# 
    Valid data attributes:
        - data-data: JSON string of valid data as per http://www.chartjs.org/docs/#doughnut-pie-chart
            Note that `label` is not required for our default setup
        - data-options: JSON string of valid options as per http://www.chartjs.org/docs/#getting-started-global-chart-configuration
            Defaults to (excluding Chart.js defaults):
                {
                    segmentShowStroke : false,
                    scaleShowLabels: false,
                    responsive: true,
                    showTooltips: true,
                    animationEasing: 'easeOutCirc',
                    animationSteps : 100,
                    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>p",
                }
#}
{}