Lighthouse-ci: Redesign of the project dashboard

[patrickhulce]

Discrete components and steps:

UI Components

• [x] Category score line chart
  
  
  
  • [x] basic line graph (8baaabb19afd8e39a75b3fdbf7ddb57d588e862d)
  
  
  • [x] add points (deaa0d0435741c8b8155cfbb8ebfb5bad25780a4)
  
  
  • [x] add y-axis label (8baaabb19afd8e39a75b3fdbf7ddb57d588e862d)
  
  
  • [x] add x-axis date range (9d22646730ab21b2a442ab1f3bbc783c55cd8a4d)
  
  
  • [x] colorize line graph based on score (b92ac77acf5354fd6dbafbd1b236ed91f6ae56a6)
  
  
  • [x] rework colorized approach based on masks (6e222ffe6aea9371b18ec3991521d1b7e6aac838)
  
  
  • [x] add # of builds picker (9d22646730ab21b2a442ab1f3bbc783c55cd8a4d)
  
  
  • [x] hover panel
  
  
  • [x] basic date and score on hover (35c366e41d1166bf03729daf1f9a2e70f48ea391)
  
  
  • [x] add category gauge (b304a30bbfa80b97b8e43e0c3705883c0c370098)
  
  
  • [x] add view report links (d164c400b393ed706330e1b5f39f8a8804a217ad)
  
  
  • [x] pin on click (6c038b9d65e07ba39acf12d3a391bbdec9a016c3)
  
  
  • [x] add vertical tracking line on hover or pin (fd4948a4e7e4c994297c12482d0d22418f7db771)
  
  
  • [x] add delta bar graph (4c315537f829a09747b81bbbde6d082e226551e5)
  
  
  • [x] add max/min gray error bars (08eeed993a6d2802e53e90ddfa70947cc305a75e)
  
  
• [x] url/branch picker (83e59e7e3691677fde4c6c8eafda89803f3935cd)
  
  
  
  • [x] move url/branch picker up to header on scroll (83e59e7e3691677fde4c6c8eafda89803f3935cd)
  
  
• [x] metric line chart
  
  
  
  • [x] basic line graph with 1 metric on fixed scale (112b204d6033dbd757429554fea4f2dda34ca296)
  
  
  • [x] axis markers (112b204d6033dbd757429554fea4f2dda34ca296)
  
  
  • [x] add other metrics by line type (f2fd3b3e5ebae11401027f29cfa173f29b49a5dd)
  
  
  • [x] dynamic scale (112b204d6033dbd757429554fea4f2dda34ca296)
  
  
  • [x] add colorization of line on hover (4a6c5eca609b4290852f050570177e9457162d56)
  
  
  • [x] add vertical tracking line on hover or pin (7529795daf9f2be6cb8dee5486e512c766e9cf38)
  
  
  • [x] add hover panel w/date metric value and links (b474af4602dd984b4a9fe877a7fdaa831d11bf9b)
  
  
• [x] Category score histogram
  
  
  
  • [x] basic histogram (3c83479c241a862aa32cb6a182b03720dd25b4b0)
  
  
  • [x] x-axis labels for control points (3c83479c241a862aa32cb6a182b03720dd25b4b0)
  
  
  • [x] colorize histograph bars based on score (3c83479c241a862aa32cb6a182b03720dd25b4b0)
  
  
  • [x] vertical "Latest" line ABANDONED, confusing with multiple "Latest" points
  
  
  • [x] add hover panel with total count and list of builds to view (5ad03e5de7a86d68a9b24c275f1eff617046b2f0)
  
  
• [x] metric value area chart (tweaked to regular histogram due to low data volume)
  
  
  
  • [x] basic area chart with fixed scale (6514c976d3c9799eb76dfafea04ef1081f64160c)
  
  
  • [x] axis markers (6514c976d3c9799eb76dfafea04ef1081f64160c)
  
  
  • [x] colorize line/area based on score (6514c976d3c9799eb76dfafea04ef1081f64160c)
  
  
  • [x] vertical "Latest" line ABANDONED, confusing with multiple "Latest" points
  
  
  • [x] add hover panel with total count and list of builds to view (f79d41a9ec6fda8bad2280b6dcfbaf339578ea69)
  
  
• [x] binary audit row display
  
  
  
  • [x] summarize latest passed/failed count by group (21ba5f619d1ce61da4a40449cdad55301f60e899)
  
  
  • [x] color-only pie chart for passed/failed/notapplicable (ccae3d9e7a92dffe5263ecf2bc0660c59a6cc397)
  
  
  • [x] legend for passed/failed/notapplicable (18260ad04939bf528d448bd8cc851d058a49c409)
  
  
  • [x] fancy background for passed/failed/notapplicable (ccae3d9e7a92dffe5263ecf2bc0660c59a6cc397)
  
  
  • [x] sync display to the hover state (21ba5f619d1ce61da4a40449cdad55301f60e899)
  
  
  • [x] hover panel displays audit titles (2c3cf5076f9cf5fd56c79dc2c65e4510567511d1)
  
  

API Components

• [x] expose category score max/min statistics (328441710e5c9df48cf6589272c4f7799d342021)
• [x] more efficient statistic fetching (PUNTED, still a 90 lighthouse score as is 😃 )
• [x] expand statistics to handle accessibility, seo, pwa categories (4dcae09b21646809acf25340b76e144661805990)

Designs

[Zizzamia]

This looks awesome! We just started supporting lhci/server internally at Coinbase, can't wait to see completed this new UI. Let me know if I can help anywhere.

[patrickhulce]

This is complete! 🎉 should be pushed out with 0.3.10 and become default once 0.4.0 launches and folks have a chance to give a little more feedback.