Create a popup table with summary stats

medium_stats.js

{
    var htmlEscape = function (value) {
        var d = document.createElement('div');
        d.innerText = value;
        return d.innerHTML;
    };
    var url = 'https://medium.com/me/';
    var getDetail = (postId, startDate, callback) => {
        const payload = [
            {
                "operationName": "StatsPostChart",
                "variables": {
                    "postId": postId,
                    "startAt": startDate,
                    "endAt": Date.now()
                },
                "query": "query StatsPostChart($postId: ID!, $startAt: Long!, $endAt: Long!) {\n  post(id: $postId) {\n    id\n    ...StatsPostChart_dailyStats\n    ...StatsPostChart_dailyEarnings\n    __typename\n  }\n}\n\nfragment StatsPostChart_dailyStats on Post {\n  dailyStats(startAt: $startAt, endAt: $endAt) {\n    periodStartedAt\n    views\n    internalReferrerViews\n    memberTtr\n    __typename\n  }\n  __typename\n  id\n}\n\nfragment StatsPostChart_dailyEarnings on Post {\n  earnings {\n    dailyEarnings(startAt: $startAt, endAt: $endAt) {\n      periodEndedAt\n      periodStartedAt\n      amount\n      __typename\n    }\n    lastCommittedPeriodStartedAt\n    __typename\n  }\n  __typename\n  id\n}\n"
            }
        ];
        fetch('https://medium.com/_/graphql',
            {
                body: JSON.stringify(payload),
                method: 'POST',
                headers: {
                    "accept": "*/*",
                    "content-type": 'application/json'
                }
            })
            .then((response) => response.json())

            .then((data) => {
                var totEarned = data[0].data.post.earnings.dailyEarnings.reduce( (acc, item) => acc+item.amount, 0 );
                callback(totEarned);
            });
    };
    fetch(url + 'stats?filter=not-response&limit=9999',
        {
            headers: {
                accept: "application/json"
            }
        })
        .then((response) => response.text())
        .then((data) => {
            const json = JSON.parse(data.substring(data.indexOf('{')));
            const articles = json.payload.value;
            const tableHead = `
            <style>
                .ttt { width: 98%; margin:0 1%; }
                .ttt th, .ttt td { text-align: right; padding: 0 2px; }
                .ttt th:nth-child(2) { width:35%; }
            </style>
            <table class="ttt table table-striped"><thead>
                <tr><th>#</th>
                <th class="text-left">Title</th>
                <th class="text-left">Published at</th>
                <th class="text-left">Publication</th>
                <th>Reading time</th>
                <th>Views</th>
                <th>Reads</th>
                <th>Fans</th>
                <th>Claps</th>
                <th>Earnings</th>
                </tr></th>
            </thead><tbody>`;
            const tableFoot = `</tbody></table>`;

            const rows = articles.map((article, index, arr) => {
                const { postId, slug, title, upvotes, views, reads, firstPublishedAt, createdAt, readingTime, claps, collectionId } = article;
                const publication = collectionId ? json.payload.references.Collection[collectionId].name : ''
                return `<tr data-id="${postId}" data-from="${createdAt}"><td align="right">${arr.length - index}</td>
                <td class="text-left"><a target="_blank" href="https://medium.com/p/${encodeURIComponent(slug)}-${postId}">${htmlEscape(title)}</a></td>
                <td class="text-left">${new Date(firstPublishedAt).toISOString().substring(0, 19).replace('T', ' ')}</td>
                <td class="text-left">${htmlEscape(publication)}</td>
                <td>${readingTime} min</td>
                <td>${views}</td>
                <td>${reads}</td>
                <td>${upvotes}</td>
                <td>${claps}</td>
                <td>...</td>
                </tr>`;
            });
            var wi = screen.availWidth * 0.9;
            var he = screen.availHeight * 0.8;
            var le = Math.round(screen.availWidth * 0.05);
            var to = Math.round(screen.availHeight * 0.1);
            var popup = window.open("", "List of articles", `width=${wi},height=${he},popup=1,left=${le},top=${to}`);
            popup.document.write(`<!DOCTYPE html><html><head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <title>List of articles</title></head>
            <body>${tableHead}${rows.join('\n')}${tableFoot}</body></html>`);

            popup.document.querySelectorAll('.ttt tr[data-id]').forEach( (row) => {
                getDetail(row.dataset.id, row.dataset.from, (earn) => 
                    {row.querySelector('td:last-child').innerText = (earn/100).toFixed(2)});
            });
        });
}