Get VisualsForce usage count

getVFPageCount.apex

public static Map<string,integer> getVFUsageCount(String metricsDate, boolean useIds){
    if(String.isEmpty(metricsDate)){
        metricsDate = 'THIS_WEEK';
    }
	List<AggregateResult> results = database.query('SELECT ApexPageId, ApexPage.Name, SUM(DailyPageViewCount) FROM VisualforceAccessMetrics WHERE MetricsDate = '+
                                                   metricsDate +' group by ApexPageId, ApexPage.Name order by SUM(DailyPageViewCount)');
    
    Map<string,integer> countMap = new Map<string,integer>();
    Map<Id,ApexPage> idtoName = new Map<id,ApexPage>();
    For(AggregateResult res : results){
        countMap.put((id)res.get('ApexPageId'), integer.valueOf(res.get('expr0')));
    }
    for(ApexPage p : [SELECT ID, Name from ApexPage]){
        idtoName.put(p.Id, p);
        if(countMap.containsKey(p.Id)){
            continue;
        }
        countMap.put(p.Id, 0);
    }
    Map<string,integer> countByName = new Map<string, integer>();
    for(ApexPage p : idtoName.Values()){
        countByName.put(p.Name,countMap.get(p.Id));
    }
    
    return useIds ? countMap : countByName;
}
System.debug(getVFUsageCount(null, false));

VisualForcePageUsage.page

<!--
 - Created by gtandeciarz on 6/21/17.
 -->

<apex:page id="VisualForcePageUsage" title="VisualForce Page Metrics" readOnly="true" setup="true" standardStylesheets="false">
    <apex:slds ></apex:slds>
    <script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/40.0/connection.js"
            type="text/javascript"></script>
    <script type="text/javascript">

        var config={
            pages : [],
            sortKey : 'Views',
            sortOrder : 'desc',
            since : 'LAST_WEEK'
        }

        function getMetrics()
        {
            config.pages = [];
            var metricsById = {};
            var whereClause = config.since == 'All Time' ? '' : `WHERE MetricsDate >= ${config.since}`;
            var query = `SELECT ApexPageId, ApexPage.Name, SUM(DailyPageViewCount) FROM VisualforceAccessMetrics ${whereClause} group by ApexPageId, ApexPage.Name ORDER BY SUM(DailyPageViewCount) DESC`;
            var result = sforce.connection.query(query);
            var it = new sforce.QueryResultIterator(result);
            while(it.hasNext()) {
                var record = it.next();
                metricsById[record.Name] = record.expr0;
                console.log('Got record ' + JSON.stringify(record, null, 4));
            }

            var allPages = sforce.connection.query("Select Id, Name, CreatedDate, LastModifiedDate, LastModifiedBy.Name, LastModifiedBy.Id from ApexPage order by Name desc");
            var pageIt = new sforce.QueryResultIterator(allPages);

            while(pageIt.hasNext()) {
                var record = pageIt.next();
                var ct = metricsById[record.Name] != undefined ? metricsById[record.Name] : 0;
                var lastmoduser = record.LastModifiedBy;
                if(lastmoduser){
                    console.log(lastmoduser['Name']);
                }
                var page = { Id: record.Id,
                    Name : record.Name,
                    CreatedDate : record.CreatedDate,
                    Views : parseInt(ct),
                    LastModifiedDate : record.LastModifiedDate,
                    LastModifiedBy : lastmoduser ? lastmoduser['Name'] : '',
                    LastModifiedById : lastmoduser ? lastmoduser['Id'] : ''
                };
                config.pages.push(page);
            }
            renderPages();
            var formData = document.querySelector('div[id="formData"]');
            formData.setAttribute('style','');
        }

        function renderPages(){
            var output='';
            var sorted = config.pages.sort(compareValues(config.sortKey,config.sortOrder));
            console.log(sorted);
            for(var prop in sorted){
                var page = sorted[prop];
                output+=`<tr>
                            <th scope="row" data-label="${prop}"><div class="slds-truncate" title="${page.Name}"><a href="/${page.Id}">${page.Name}</a></div></th>
                            <td class="${page.Views == 0 ? 'slds-text-color_error' : ''}"><div class="slds-truncate" title="${page.Views}">${page.Views}</div></td>
                            <td><div class="slds-truncate" title="${convertDate(page.CreatedDate)}">${convertDate(page.CreatedDate)}</div></td>
                            <td><div class="slds-truncate" title="${convertDate(page.LastModifiedDate)}">${convertDate(page.LastModifiedDate)}</div></td>
                            <td><div class="slds-truncate" title="${page.LastModifiedBy}"><a href="/${page.LastModifiedById}">${page.LastModifiedBy}</a></div></td>
                         </tr>`;
                //console.log(JSON.stringify(page, null, 4));
            }
            document.getElementById('output').innerHTML=output;

        }

        function convertDate(inputFormat) {
            function pad(s) { return (s < 10) ? '0' + s : s; }
            var d = new Date(inputFormat);
            return [ pad(d.getMonth()+1),pad(d.getDate()), d.getFullYear()].join('/');
        }

        // function for dynamic sorting
        function compareValues(key, order) {
            order = order != undefined ? order : 'asc';
            return function(a, b) {
                if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
                    // property doesn't exist on either object
                    return 0;
                }

                const varA = (typeof a[key] === 'string') ?
                        a[key].toUpperCase() : a[key];
                const varB = (typeof b[key] === 'string') ?
                        b[key].toUpperCase() : b[key];

                var comparison = 0;
                if (varA > varB) {
                    comparison = 1;
                } else if (varA < varB) {
                    comparison = -1;
                }
                return (
                        (order == 'desc') ? (comparison * -1) : comparison
                );
            };
        }

        document.addEventListener('DOMContentLoaded',function() {
            var sel = document.querySelector('select[id="filterSince"]');
            sel.onchange=changeEventHandler;
            sel.value = config.since;
            getMetrics();
        },false);

        function changeEventHandler(event) {
            // You can use “this” to refer to the selected element.
            var val = event.target.value;
            console.log(val);
            config.since = val;
            getMetrics();
        }

        function sortBy(key, order){
            if(config.sortKey == key){
                config.sortOrder = config.sortOrder == 'asc' ? 'desc' : 'asc';
            }else{
                config.sortKey = key;
                config.sortOrder = order != undefined ? order : 'asc';
            }
            renderPages();
        }
    </script>
    <apex:sectionHeader title="VisualForce Page Metrics" description="This page displays your organization's VisualForce page usage, by views." help="https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_tools_metrics.htm"/>
    <div id="formData" style="display:none;">
        <div class="slds-grid">
            <div class="slds-col">
                <div data-reactroot="" class="slds-form slds-form_stacked slds-m-bottom_medium">
                    <div data-reactroot="" class="slds-form-element">
                        <label class="slds-form-element__label" for="filterSince">Metrics Since: </label>
                        <div class="slds-form-element__control">
                            <div class="slds-select_container  slds-size_small">
                                <select class="slds-select" id="filterSince">
                                    <option value="YESTERDAY">Yesterday</option>
                                    <option value="LAST_WEEK">Last Week</option>
                                    <option value="LAST_MONTH">Last Month</option>
                                    <option value="LAST_YEAR">Last Year</option>
                                    <option value="">All Time</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table id="dataTable" data-reactroot="" class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout"  role="grid">
            <thead>
            <tr class="slds-text-title_caps slds-line-height_reset">
                <th class="slds-is-sortable slds-text-title_caps" scope="col">
                    <a href="javascript:sortBy('Name');" class="slds-th__action slds-text-link_reset" tabindex="0">
                        <span class="slds-assistive-text">Sort </span>
                        <span class="slds-truncate" title="Name">Name</span>
                        <div class="slds-icon_container">
                            <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                            </svg>
                        </div>
                        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                </th>
                <th class="slds-is-sortable slds-text-title_caps slds-is-sorted slds-is-sorted_asc" scope="col" aria-sort="ascending" >
                    <a href="javascript:sortBy('Views');" class="slds-th__action slds-text-link_reset" tabindex="0">
                        <span class="slds-assistive-text">Sort </span>
                        <span class="slds-truncate" title="Views">Views</span>
                        <div class="slds-icon_container">
                            <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                            </svg>
                        </div>
                        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                </th>
                <th class="slds-is-sortable slds-text-title_caps" scope="col">
                    <a href="javascript:sortBy('CreatedDate');" class="slds-th__action slds-text-link_reset" tabindex="0">
                        <span class="slds-assistive-text">Sort </span>
                        <span class="slds-truncate" title="Created Date">Created Date</span>
                        <div class="slds-icon_container">
                            <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                            </svg>
                        </div>
                        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                </th>
                <th class="slds-is-sortable slds-text-title_caps" scope="col">
                    <a href="javascript:sortBy('LastModifiedDate');" class="slds-th__action slds-text-link_reset" tabindex="0">
                        <span class="slds-assistive-text">Sort </span>
                        <span class="slds-truncate" title="Created Date">Last Modified Date</span>
                        <div class="slds-icon_container">
                            <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                            </svg>
                        </div>
                        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                </th>
                <th class="slds-is-sortable slds-text-title_caps" scope="col">
                    <a href="javascript:sortBy('LastModifiedBy');" class="slds-th__action slds-text-link_reset" tabindex="0">
                        <span class="slds-assistive-text">Sort </span>
                        <span class="slds-truncate" title="Created Date">Last Modified By</span>
                        <div class="slds-icon_container">
                            <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                            </svg>
                        </div>
                        <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                    </a>
                </th>
            </tr>
            </thead>
            <tbody id="output">

            </tbody>
        </table>
    </div>
</apex:page>