[star-rating] Update rating color

Author: widatama

plugins/star-rating/frontend/public/javascripts/countly.views.js

@@ -393,9 +393,10 @@
         computed: {
             preparedRows: function() {
                 return this.ratings.map(function(rating) {
-                    rating.rating += 1;
-                    rating.percentage = parseFloat(rating.percent) || 0;
-                    return rating;
+                    return Object.assign({}, rating, {
+                        rating: (Number(rating.rating) || 0) + 1,
+                        percentage: Number.parseFloat(rating.percent) || 0,
+                    });
                 });
             }
         },

plugins/star-rating/frontend/public/stylesheets/ratings.scss

@@ -478,22 +478,22 @@
     margin-left: 8px;
 }
 
-.rating-color-0 {
+.rating-color-1 {
     background-color: #d23f00;
 }
 
-.rating-color-1 {
+.rating-color-2 {
     background-color: #f96300;
 }
 
-.rating-color-2 {
+.rating-color-3 {
     background-color: #f5c900;
 }
 
-.rating-color-3 {
+.rating-color-4 {
     background-color: #aabb5d;
 }
 
-.rating-color-4 {
+.rating-color-5 {
     background-color: #10a14a;
 }

plugins/star-rating/frontend/public/templates/ratings-table.html

@@ -4,7 +4,7 @@
       <el-table-column  sortable="true" prop="rating" :label="i18n('feedback.rating')">
           <template v-slot="rowScope">
               <span :data-test-id="'ratings-data-table-rating-' + rowScope.$index" class="text-medium">
-                <span :class="'rating-color rating-color-' + (rowScope.row.rating - 1)"></span> {{ rowScope.row.rating }}
+                <span :class="'rating-color rating-color-' + rowScope.row.rating"></span> {{ rowScope.row.rating }}
               </span>
           </template>
       </el-table-column>