Restore the WordPress.com admin bar stats sparkline

The staff at WordPress.com are at it again, removing useful features for the sake of consistency with the “unified experience” vision. This time, it’s the stats sparkline in the admin bar that was introduced in 2011. It still lives on hidden in the sidebar that appears when you click “My Sites” in the admin bar, but its usefulness is greatly reduced because it’s hidden in the sidebar and not immediately visible in the admin bar.

This was unacceptable, of course, so I wrote a script to bring it back. Unfortunately, because of certain technical limitations, this script can only run on URLs that have wordpress.com in the domain part. If you want to add support for your custom domain, you will have to extend the script’s include directives. You can add one in the script’s options in your extension. If your extension doesn’t support adding custom includes, you can add it yourself by adding a custom @include line to the script, but you won’t be able to receive automatic updates.

The sparkline is restored

If you’ve already installed one of my previous scripts, you’ll know how easy it is to install this one. If installing user scripts is new to you, don’t worry; it’s very simple. If you don’t already have one, install a browser extension that allows you to run user scripts. Then, install the script from Greasy Fork.

If you have any questions or experience any issues, please leave a comment.

You don’t need to know how the script works to use it, but if you’d like to know the technical details, read on. The source code is available on GitHub.

Happy blogging!

---

When I noticed that the sparkline was still available, I knew I had a template to work from. If you open your browser’s developer tools and inspect the Stats item in the My Sites sidebar, you’ll see something like this:

<li class="mb-icon" id="wp-admin-bar-blog-stats">
  <a href="https://wordpress.com/stats/tpenguinltg.wordpress.com" class="ab-item">
    Stats
    <img title="Showing site views per hour for the last 48 hours. Click for full Site Stats." alt="Stats" src="https://tpenguinltg.wordpress.com/wp-includes/charts/admin-bar-hours-scale-2x.php?masterbar=1" style="width: 95px; margin: 0; float: right;" />
  </a>
</li>

We see from this that the sparkline is an image, and the URL for that image in this example is https://tpenguinltg.wordpress.com/wp-includes/charts/admin-bar-hours-scale-2x.php?masterbar=1. It appears to be the site’s URL, followed by /wp-includes/charts/admin-bar-hours-scale-2x.php?masterbar=1. I played around with that URL and I discovered that the presence of the masterbar parameter, no matter what its value is, causes the server to return an image that’s blue instead of greyscale (it follows that the sidebar is internally called the Master Bar); removing it causes the server to return the greyscale image from before, along with the peak indicator. The images below show the difference against their intended background colours:

With ?masterbar=1

Without ?masterbar=1

The -scale-2x part was also a hint that there’s a smaller version. The 2x version is 48px tall, which is 16px too tall for the admin bar. Half of 48px is 24px, which should fit. I played with the URL again and discovered that removing the -2x gives us the size that we want.

Now that we have an image, what do we do with it? We have to add it to the admin bar somehow. The first step to doing that is to find the selector for the admin bar. If you inspect the bar, you’ll find something like this (the less important parts are omitted):

<ul class="ab-top-menu" id="wp-admin-bar-root-default">
  <li class="menupop my-sites" id="wp-admin-bar-blog"><a href="https://wordpress.com/stats/tpenguinltg.wordpress.com" aria-haspopup="true" class="ab-item">My Sites</a></li>
  <li id="wp-admin-bar-jumptotop-button-menu"><a href="#" class="ab-item"><div id="jumptotop" style="top: 0px;"><span class="noticon noticon-top"></span></div></a></li>
  <li class="menupop" id="wp-admin-bar-newdash"><a href="https://wordpress.com/" aria-haspopup="true" class="ab-item">Reader</a></li>
</ul>

We’re interested in adding a list item to this menu. We can access the menu using the ID wp-admin-bar-root-default. Now, it’s just creating the image, the surrounding link, and then appending the link to the list. We can create the elements using Document.createElement.

The last thing we need to take care of is to only run the script when the user is a member of the site. The first way I thought of was to use the API, but I quickly dismissed that because I still haven’t figured out how to handle authenticated API calls. Luckily, the “Master Bar” can help us out. If you open it when you’re on your blog, you’ll see the blog’s name, blavatar and domain name near the top. If you open it on someone else’s blog, it’ll be your default blog instead. This means that if you’re a member of the current blog, the site in the Master Bar will be the same as the current site. In the inspector:

<li class="has-blavatar" id="wp-admin-bar-blog-info">
  <a href="https://tpenguinltg.wordpress.com/" class="ab-item">
    <div class="ab-site-icon">
      <img alt="Current site avatar" src="https://secure.gravatar.com/blavatar/58f58f9e0dc4ec1b4218e34b6cef34d8?s=120" class="avatar" />
    </div>
    <span class="ab-site-title">`The Penguin' says..…</span><span class="ab-site-description">tpenguinltg.wordpress.com</span>
  </a>
</li>

We have the convenience of having the link to the blog given to us, so all we have to do to know if the user is a member of the current site is to check if the current URL starts with the link given. If it isn’t, then we return early.

Bringing it all together gives this script:

// ==UserScript==
// @name        WordPress.com Stats Sparkline
// @namespace   tpenguinltg
// @description Adds a stats sparkline to the WordPress.com admin bar
// @include     https://*.wordpress.com/*
// @version     1.0.0
// @updateURL   https://github.com/tpenguinltg/wpcom-stats-sparkline/raw/master/wpcom-stats-sparkline.user.js
// @homepageURL https://greasyfork.org/en/scripts/26076-wordpress-com-stats-sparkline
// @homepageURL https://github.com/tpenguinltg/wpcom-stats-sparkline
// @grant       none
// @license     MPLv2.0; http://mozilla.org/MPL/2.0/
// @copyright   2016, tPenguinLTG (https://tpenguinltg.wordpress.com/)
// ==/UserScript==

window.onload = function() {
  var blogUrlAnchor = document.querySelector("#wp-admin-bar-blog-info a.ab-item");
  if (!blogUrlAnchor) return;

  var blogUrl = blogUrlAnchor.href;

  // only act on sites where the user is a member
  if (!document.URL.startsWith(blogUrl)) return;

  var sparklineImage = document.createElement("img");
  sparklineImage.src = blogUrl + "/wp-includes/charts/admin-bar-hours-scale.php";
  sparklineImage.alt = "Stats";
  sparklineImage.title = "Showing site views per hour for the last 48 hours. Click for full Site Stats.";
  sparklineImage.style.paddingTop = "4px";
  sparklineImage.style.paddingBottom = "4px";

  var statsLink = document.createElement("a");
  statsLink.appendChild(sparklineImage);
  statsLink.href = "https://wordpress.com/stats/" + window.location.hostname;
  statsLink.className = "ab-item";

  var menuItem = document.createElement("li");
  menuItem.appendChild(statsLink);

  document.getElementById("wp-admin-bar-root-default").appendChild(menuItem);
}

The code is assigned to the “onload” event to wait for the page to completely load so that the elements we check for actually exist.

That’s all there is to it: create the elements, then append it to the admin bar. If you have any questions, feel free to ask in the comments, and if you’d like to view the source code or contribute, it’s up on GitHub.

• sparkline
• stats
• user script
• WordPress.com