Code Monkey home page Code Monkey logo

webpagetest-charts-ui's Introduction

#Webpagetest Charts UI This is a chart UI built on top of webpagetest-charts-api and all the data and chart types that it exposes. Goal is to make it easy to quickly analyze WPT results.
Display charts to see trends and some local data, but always link off to the WPT page for full data. Don't wanna rebuild WPT, just make it more accessible.

Installation

  1. Get webpagetest-charts-api up and running first.

  2. clone this repo

  3. npm install inside the repo.

  4. WPT_API="http://where-your-wpt-api-is-running:port" npm start

  5. Visit the app and port and you should see a list of available tests (assuming your API has completed some test runs).

If things get weird You can get into debug mode with:

DEBUG=wpt-ui* npm start and it'll talk to you some.

Once everything is working well wrap it up in forever or pm2 or whatever you want to keep it up and running.

What's it look like?

Main Page

lists the available tests suites the app is currently running. Imagine a nice list on a webpage :-)

Suite Page

Shows charts for all of the tests in the suites. Chart datapoints are clickable, so that you can see exactly what's going on. This example only has one chart, but more would populate here if the suite had more tests. This UI is better served by smaller suites.

suite

Datapoint Page

A summary of the WPT results for that datapoint. You can page through these results, or click through to the full WPT test page to get even more data.

datapoint

Contributing

PRs are Happily Accepted! The preferred PR method is:

  1. Fork this repo
  2. Create a feature branch on your fork
  3. code things
  4. PR your feature branch to this master
  5. We'll check out your PR, test, code review and when it's ready merge it in.

If you have a larger idea, feel free to bring it up in an issue first

TODO

  1. chage the UI to better display a suite that has lots of tests
  2. Get off of Trulia's CSS and into a known framework

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

webpagetest-charts-ui's People

Contributors

bigethan avatar ethan-trulia avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.