<div class="tw-flex tw-items-center tw-justify-between">
    <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-dark:text-white/90">
        {__('Page avg. speed of the last %s days', $pageSpeedChart->days)}
    </h3>
     <div>
         {include file="{$tailadminURI}smarty/reloadable/components/switch-text-group.tpl"
             cases=[
                 [7, {__('Weekly')}, "{stbIO uri='pageSpeedBarChart' days=7}"],
                 [30, {__('Monthly')}, "{stbIO uri='pageSpeedBarChart' days=30}"],
                 [365, {__('Yearly')}, "{stbIO uri='pageSpeedBarChart' days=365}"]
             ]
             activeOffset=$pageSpeedChart->days
             jsCallback="ui.charts.removeByID('pageSpeedLineChart');"}
     </div>
</div>
<div id="pageSpeedLineChart" class="tw-chartDarkStyle reloadableChart"></div>
<script>
    ui.barChartGenerator(
        document.querySelector('#pageSpeedLineChart'),
        "{__('Avg. page load time')}",
        [{$pageSpeedChart->label}],
        [{$pageSpeedChart->data}],
        ["#465FFF"],
        '3',
        "{__('seconds')}",
    );
</script>
