{extends "../@layout.xml"} {block title}{$club->getName()} » {_statistics}{/block} {block header} <a href="{$club->getURL()}">{$club->getName()}</a> » {_statistics} {/block} {block content} <div> <h4>{_coverage}</h4> <p>{_coverage_this_week}</p> <div id="reachChart" style="width: 100%; height: 280px;"></div> <h4>{_views}</h4> <p>{_views_this_week}</p> <div id="viewsChart" style="width: 100%; height: 280px;"></div> <style> .modebar-container { display: none !important; } </style> {script "js/node_modules/plotly.js-dist/plotly.js"} <script> function makePlot(selector, datum) { Plotly.newPlot(document.querySelector(selector), [datum.total, datum.subs, datum.viral], { margin: { t: 0 }, layout: { showlegend: true, legend: { xanchor: 'center', x: 0.5, orientation: 'h' } } }); } let reach = {$reach}; let views = {$views}; makePlot("#reachChart", reach); makePlot("#viewsChart", views); </script> </div> {/block}