We’ve had a lot of questions about what’s powering our new interface, so
here’s a brief rundown:
Everything inside the
<body> tag is rendered with React components.
We tried a lot of JS frameworks and libraries to help us make the UI more dynamic. The one that fit best was React.
It provides a powerful way to make reusable components and the one-way data flow makes a lot of sense.
With React, our code is understandable, small, and fast.
React doesn’t have anything for routing. We tried a bunch of these as well and settled on Backbone’s router. It’s simple,
We are using d3 to render our charts. d3 is pretty amazing. We’re using maybe 1% of its API, but were able to replicate our
hand-coded server-drawn charts quite easily.
We wrote some async JS code by hand a while back to get a bunch of datasets and split them up into a timeframe for a chart.
We replaced our code with a few lines of IcedCoffeeScript and never looked back.
Then we have a Go app that uploads the bundle to s3/CloudFront, updates an assets file, and HUPs
the web servers so they reload the assets file.
» Here’s the gulp plugin we wrote for IcedCoffeeScript
Nothing has changed on the backend, we still use Go for everything.
It does a marvelous job with JSON.
We just deployed some significant changes to StatHat’s web interface.
Here are some changes concerning viewing and analyzing stats:
We changed the stat details interface to let you select any timeframe you want.
Our standard one hour to one year overview still exists, but you don’t need to switch
to the analyze interface to view something like 7 hours at 2 minute intervals.
When you hover over the chart, you will now see the value at each data point.
We are also including more summary data:
- most recent value
- standard deviation
- 95% and 99% confidence intervals
Pressing the Play button makes the chart automatically update every minute.
Like always, the analyze interface allows you to compare up to five stats on the same
chart. Comparing stats of vastly different scales is easier now: the left and right
axes are independent and can be set to any group of stats. Comparing the number of
API calls (which ranges from 6M - 14M) with HTTP request times ranging from 100 - 1800ms
The charts are fully responsive, from large screens:
We made changes to make StatHat easier to use when you have lots of stats:
- stats are automatically collapsed into groups by common prefix
- intelligent filtering and improved search
- groups and saved searches visible in the stat list side bar
There are many more minor tweaks and updates, all with the goal of making StatHat
a more useful tool to analyze your stats. Please let us know what you think of the
Upcoming posts will highlight changes to alerts and describe the technologies behind
these interface changes.
StatHat uses Amazon’s Elastic Load Balancer service to load balance requests to www.stathat.com and
api.stathat.com. All of Amazon’s ELB servers were affected by the Heartbleed
bug. They patched them today.
As soon as our ELBs were patched, we uploaded new SSL certificates.
Please contact us if you have any other questions.
You can now display your StatHat stats on Geckoboard. All you need to do is to create an access key at stathat.com/access and enter it into your Geckoboard account.
Thanks to Rob, Gareth, and Sofia at Geckoboard for creating the StatHat widget!
We released the StatHat iPhone App today. It lets you view all your stats and get push alerts. We think it is super handy and use it constantly!
Learn more about the StatHat iPhone App