@guardian/mobile-apps-article-templates/ArticleTemplates/footballTemplateStatsGraphs.html

Templates for articles on both iOS and Android next-gen apps

<div class="football__stats">
    <h2 class="football__label">Stats</h2>
        <div class="football__column">
            <div class="match-stats">
                <p class="match-stats__caption">Possession</p>
                <div class="match-stats__posession">
                    <svg class="pie-chart pie-chart--possession" data-home="__FOOTBALL_HOME_POSSESSION__" data-away="__FOOTBALL_AWAY_POSSESSION__"></svg>
                </div>
            </div>
        </div>
    
        <div class="football__column">
            <div class="match-stats">
                <p class="match-stats__caption">Goal Attempts</p>
                <div class="match-stats__shots">
                    <div class="match-stats__shots--home match-colours--home">
                        <p class="match-stats__shots__off">Off target <span>__FOOTBALL_HOME_SHOTS_OFF__</span></p>
                        <p class="match-stats__shots__on match-colours--home">On target <span>__FOOTBALL_HOME_SHOTS_ON__</span></p>
                    </div>
                    <div class="match-stats__shots--away match-colours--away">
                        <p class="match-stats__shots__off">Off target <span>__FOOTBALL_AWAY_SHOTS_OFF__</span></p>
                        <p class="match-stats__shots__on match-colours--away">On target <span>__FOOTBALL_AWAY_SHOTS_ON__</span></p>
                    </div>
                </div>
            
                <p class="match-stats__caption">Corners</p>
                <div class="match-stats__corners">
                    <div class="bar-chart match-colours--away">
                        <span class="bar-chart__value match-colours--home" style="width: __FOOTBALL_HOME_CORNERS_PERCENT__%">__FOOTBALL_HOME_CORNERS__</span>
                        <span>__FOOTBALL_AWAY_CORNERS__</span>
                    </div>
                </div>
        
                <p class="match-stats__caption">Fouls</p>
                <div class="match-stats__fouls">
                    <div class="bar-chart match-colours--away">
                        <span class="bar-chart__value match-colours--home" style="width: __FOOTBALL_HOME_FOULS_PERCENT__%">__FOOTBALL_HOME_FOULS__</span>
                        <span>__FOOTBALL_AWAY_FOULS__</span>
                    </div>
                </div>
            </div>
        </div>

        <style>
            .match-colours--home {
                color: __FOOTBALL_HOME_TEXT_COLOUR__;
                background-color: __FOOTBALL_HOME_COLOUR__;
            }
            .pie-chart--possession .pie-chart__segment-arc--home {
                fill: __FOOTBALL_HOME_COLOUR__;
            }
            .pie-chart--possession .pie-chart__label--home  {
                color: __FOOTBALL_HOME_TEXT_COLOUR__;
            }

            .match-colours--away {
                color: __FOOTBALL_AWAY_TEXT_COLOUR__;
                background-color: __FOOTBALL_AWAY_COLOUR__;
            }
            .pie-chart--possession .pie-chart__segment-arc--away {
                fill: __FOOTBALL_AWAY_COLOUR__;
            }
            .pie-chart--possession .pie-chart__label--away {
                color: __FOOTBALL_AWAY_TEXT_COLOUR__;
            }
        </style>
    </div>