lint

Author: DanielRyanSmith

webapp/components/interop-dashboard.js

@@ -547,7 +547,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                             <a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
                             <span
                               class="interop-score-mobile"
-                              style$="[[_getScoreStyle(rowName, stable)]]"
+                              style$="[[getScoreStyle(rowName, stable)]]"
                             >[[getInteropScoreForFeature(rowName, stable)]]</span>
                           </div>
                         </td>
@@ -566,7 +566,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                         <td>
                           <div class="card-header-mobile">
                             <strong>TOTAL</strong>
-                            <span class="interop-score-mobile">[[getInteropSubtotalScore(section, stable)]]</span>
+                            <span
+                              class="interop-score-mobile"
+                              style$="[[getSubtotalScoreStyle(section, stable)]]"
+                            >[[getInteropSubtotalScore(section, stable)]]</span>
                           </div>
                         </td>
                       <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -768,7 +771,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
-    calculateColor(score) {
+  calculateColor(score) {
     const gradient = [
       // Red.
       { scale: 0, color: [250, 0, 0] },
@@ -801,15 +804,16 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     ];
   }
 
-  /**
-   * Generates a complete CSS style string for a score badge.
-   * @param {number} score The numerical score.
-   * @return {string} A CSS style string.
-   */
-  _getScoreStyle(feature, _stable) {
-    console.log('getting here?');
+  getSubtotalScoreStyle(section, stable) {
+    const interopIndex = this.dataManager.getYearProp('numBrowsers');
+    const score = this.getNumericalSubtotalScore(interopIndex, section, stable);
+    const colors = this.calculateColor(score);
+    return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
+  }
+
+  getScoreStyle(feature, stable) {
     const interopIndex = this.dataManager.getYearProp('numBrowsers');
-    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature);
+    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature, stable);
     const colors = this.calculateColor(score);
     return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
@@ -914,23 +918,27 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(total / 10).toFixed(1)}%`;
   }
 
-  getSubtotalScore(browserIndex, section, stable) {
+  getNumericalSubtotalScore(browserIndex, section, stable) {
     const scores = stable ? this.scores.stable : this.scores.experimental;
     const totalScore = section.rows.reduce((sum, rowName) => {
       return sum + scores[browserIndex][rowName];
     }, 0);
     const avg = Math.floor(totalScore / section.rows.length) / 10;
+    return avg;
+  }
+
+  getSubtotalScore(browserIndex, section, stable) {
+    const score = this.getNumericalSubtotalScore(browserIndex, section, stable);
     // Don't display decimal places for a 100% score.
-    if (avg >= 100) {
+    if (score >= 100) {
       return '100%';
     }
-    return `${avg.toFixed(1)}%`;
+    return `${score.toFixed(1)}%`;
   }
 
   getInteropSubtotalScore(section, isStable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    const score = this.getSubtotalScore(numBrowsers, section, isStable);
-    return score;
+    return this.getSubtotalScore(numBrowsers, section, isStable);
   }
 
   getSummaryOptionText() {
@@ -949,8 +957,8 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return !scoreAsGroup && !this.showBrowserIcons(index);
   }
 
-  getBrowserScoreForFeature(browserIndex, feature) {
-    const scores = this.stable ? this.scores.stable : this.scores.experimental;
+  getBrowserScoreForFeature(browserIndex, feature, stable) {
+    const scores = stable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     // Don't display decimal places for a 100% score.
     if (score / 10 >= 100) {
@@ -961,12 +969,12 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
 
   getInteropScoreForFeature(feature, stable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    return this.getBrowserScoreForFeature(numBrowsers, feature);
+    return this.getBrowserScoreForFeature(numBrowsers, feature, this.stable);
   }
 
   // getNumericalBrowserScoreByFeature returns the same score as
   // getBrowserScoreForFeature but as a number instead of a string
-  getNumericalBrowserScoreByFeature(browserIndex, feature) {
+  getNumericalBrowserScoreByFeature(browserIndex, feature, stable) {
     const scores = this.stable ? this.scores.stable : this.scores.experimental;
     const score = scores[browserIndex][feature];
     const roundedScore = Math.round(score * 100) / 100;
@@ -991,9 +999,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     }
 
     const summaryFeatureName = this.getYearProp('summaryFeatureName');
-    this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName);
-    this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName);
-    this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName);
+    this.totalChromium = this.getBrowserScoreForFeature(0, summaryFeatureName, this.stable);
+    this.totalFirefox = this.getBrowserScoreForFeature(1, summaryFeatureName, this.stable);
+    this.totalSafari = this.getBrowserScoreForFeature(2, summaryFeatureName, this.stable);
   }
 
   updateUrlParams(embedded, stable, feature, isMobileScoresView) {
@@ -1158,7 +1166,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     const individualScores = [];
     for (let i = 0; i < rows.length; i++) {
       const feature = rows[i];
-      individualScores[i] = [feature, this.getNumericalBrowserScoreByFeature(browserIndex, feature)];
+      individualScores[i] = [
+        feature,
+        this.getNumericalBrowserScoreByFeature(browserIndex, feature, this.stable)
+      ];
     }
     individualScores.sort((a, b) => a[1] - b[1]);
     for (let i = 0; i < individualScores.length; i++) {