#1067: Overwrite MoM classnames instead of adding to the list (#1069)

* overwrite classnames instead of adding to them

* Fix bug from #1068

---------

Co-authored-by: Barry Pollard <barrypollard@google.com>

Author: sarahfossheim

src/js/techreport/summaryCards.js

@@ -73,14 +73,14 @@ class SummaryCard {
         });
       }
 
-      if(latestChange && latestChange.string && latestChange.perc) {
+      if(latestChange && latestChange.string && latestChange.perc != null) {
         const changeSlot = card.querySelector('[data-slot="change"]');
         const changeMeaning = changeSlot?.dataset?.meaning;
 
         if(changeSlot) {
           changeSlot.textContent = latestChange.string;
           const styling = UIUtils.getChangeStatus(latestChange.perc, changeMeaning);
-          changeSlot.classList.add(styling?.color, styling?.direction);
+          changeSlot.className = `monthchange ${styling?.color} ${styling?.direction}`;
         }
       }
     }

src/js/techreport/table.js

@@ -194,7 +194,7 @@ function updateTable(id, config, appConfig, apps, data) {
       }
 
       if(column.styling) {
-        wrapper.classList.add('monthchange', column.styling?.direction, column.styling?.color);
+        wrapper.className = `monthchange ${column?.styling?.color} ${column?.styling?.direction}`;
       }
 
       // Add cell to the row

src/js/techreport/timeseries.js

@@ -175,7 +175,7 @@ class Timeseries {
           const styling = UIUtils.getChangeStatus(latestMoM, changeMeaning);
           const monthChange = document.createElement('span');
           monthChange.textContent = latestMoMStr;
-          monthChange.classList.add('monthchange', styling?.color, styling.direction);
+          monthChange.className = `monthchange ${styling?.color} ${styling?.direction}`;
           itemWrapper.appendChild(monthChange);
         }
 
@@ -250,7 +250,7 @@ class Timeseries {
           const styling = UIUtils.getChangeStatus(latestMoM, changeMeaning);
           const monthChange = document.createElement('span');
           monthChange.textContent = latestMoMStr;
-          monthChange.classList.add('monthchange', styling?.color, styling.direction);
+          monthChange.className = `monthchange ${styling?.color} ${styling?.direction}`;
           card.appendChild(monthChange);
         }
       }