Change profile budget units

KopiJS · Sep 23, 2016 · 205b020 · 205b020
1 parent 9b18ca8
commit 205b020
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 36 deletions.
diff --git a/_profiles/css-tricks-cable.html b/_profiles/css-tricks-cable.html
@@ -4,11 +4,11 @@
 budgets:
   -
     metric: TTFB
-    max: 2
+    max: 2000
     alerts: ['mainAlert', 'slackAlert']
   -
     metric: firstPaint
-    max: 2
+    max: 2000
     alerts: ['mainAlert', 'slackAlert']
 name: 'CSS Tricks (Cable)'
 parameters:

diff --git a/app/App.js b/app/App.js
@@ -40,11 +40,11 @@ class App extends React.Component {
       return (test >= monthFrom) && (test <= monthTo)
     })
 
-    let queue = testsForRange.map(test => {
-      let year = test.toString().slice(0, 4)
-      let month = test.toString().slice(4, 6)
+    const queue = testsForRange.map(test => {
+      const year = test.toString().slice(0, 4)
+      const month = test.toString().slice(4, 6)
 
-      let path = `/results/${this.state.profile.slug}/${year}/${month}.json`
+      const path = `/results/${this.state.profile.slug}/${year}/${month}.json`
 
       return fetch(path).then(response => {
         return response.json()
@@ -93,7 +93,7 @@ class App extends React.Component {
     fetch('/profiles.json').then(response => {
       return response.json()
     }).then(profiles => {
-      let profile = profiles.find(profile => profile.slug === newProfile)
+      const profile = profiles.find(profile => profile.slug === newProfile)
 
       this.setState({
         loading: false,
@@ -104,14 +104,14 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    let dateRange = Utils.getDateRangeForPeriod(this.state.period)
+    const dateRange = Utils.getDateRangeForPeriod(this.state.period)
 
     this._fetchData(dateRange.from, dateRange.to)
   }
 
   componentDidUpdate(oldProps, oldState) {
     if ((oldState.period !== this.state.period) || (oldState.profile !== this.state.profile)) {
-      let dateRange = Utils.getDateRangeForPeriod(this.state.period)
+      const dateRange = Utils.getDateRangeForPeriod(this.state.period)
 
       this._fetchData(dateRange.from, dateRange.to)
     }

diff --git a/app/Chart.js b/app/Chart.js
@@ -68,9 +68,14 @@ class Chart extends React.Component {
         const lineEnd = lineStart + chart.scales['x-axis-0'].width
 
         chart.config.data.budgets.forEach(budget => {
-          const value = budget.max || budget.min
+          const metric = objectPath.get(Constants.metrics, budget.metric)
+          let value = budget.max || budget.min
 
           if (value) {
+            if (typeof metric.transform === 'function') {
+              value = metric.transform(value)
+            }
+
             const yValue = chart.scales['y-axis-0'].getPixelForValue(value)
 
             ctx.save()

diff --git a/app/Dashboard.js b/app/Dashboard.js
@@ -7,11 +7,11 @@ import * as Utils from './Utils'
 
 class Dashboard extends React.Component {
   render() {
-    let results = this.props.results
-    let timestamps = Object.keys(results)
-    let lastTs = timestamps[timestamps.length - 1]
-    let lastResult = results[lastTs]
-    let videoFrames = (lastResult && lastResult.videoFrames) || []
+    const results = this.props.results
+    const timestamps = Object.keys(results)
+    const lastTs = timestamps[timestamps.length - 1]
+    const lastResult = results[lastTs]
+    const videoFrames = (lastResult && lastResult.videoFrames) || []
 
     return (
       <div className="u-wrapper">
@@ -64,7 +64,7 @@ class Dashboard extends React.Component {
             <h3 className="c-Section__title">Latest filmstrip view</h3>
             <div className="c-Filmstrip">
               {videoFrames.map((frame, index) => {
-                let progress = `${frame._t / 1000}s`
+                const progress = `${frame._t / 1000}s`
 
                 return (
                   <div key={index} className="c-Filmstrip__item">

diff --git a/app/Section.js b/app/Section.js
@@ -10,7 +10,7 @@ const objectPath = require('object-path')
 class Section extends React.Component {
   render() {
     let budgets = (this.props.profile.budgets || []).filter(budget => (this.props.metrics.indexOf(budget.metric) !== -1))
-    
+
     return (
       <div className="c-Section">
         <h3 className="c-Section__title">{this.props.title}</h3>
@@ -43,15 +43,15 @@ class Section extends React.Component {
           })}
 
           {budgets.map((budget, index) => {
-            let metric = objectPath.get(Constants.metrics, budget.metric)
-            let value = objectPath.get(this.props.lastResult, budget.metric)
+            const metric = objectPath.get(Constants.metrics, budget.metric)
+            const value = objectPath.get(this.props.lastResult, budget.metric)
+
             let budgetValue = budget.max || budget.min || 0
+            let statusClass = ' c-Indicator--success'
 
             if (typeof metric.transform === 'function') {
-              value = metric.transform(value)
+              budgetValue = metric.transform(budgetValue)
             }
-
-            let statusClass = ' c-Indicator--success'
 
             if ((budget.max && (value > budgetValue)) ||
                (budget.min && (value < budgetValue))) {

diff --git a/bundle.js b/bundle.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,5 @@
+'use strict'
+
 const path = require('path')
 const webpack = require('webpack')