adjust colors, fix order

Author: marcodarko

src/templates/portal-summary.html

@@ -215,6 +215,15 @@ <h1>Portal Summary</h1>
                 let self = this;
                 let statuses = {}
 
+                if(field == 'uptime_status'){
+                    statuses = {
+                        'good' : 0,
+                        'unknown' : 0,
+                        'incompatible' : 0,
+                        'bad' : 0,
+                    }
+                }
+
                 self.data.forEach(item => {
                     if(Object.prototype.hasOwnProperty.call(item['_status'], field)){
                         //table data
@@ -322,7 +331,7 @@ <h1>Portal Summary</h1>
                     labels: []
                 };
 
-                yesTF ? (data.datasets[0].data.push(yesTF), data.labels.push(yesTF_label),data.datasets[0].backgroundColor.push('#5ed668')) : false
+                yesTF ? (data.datasets[0].data.push(yesTF), data.labels.push(yesTF_label),data.datasets[0].backgroundColor.push('#20c96a')) : false
                 yesTnoF ? (data.datasets[0].data.push(yesTnoF), data.labels.push(yesTnoF_label),data.datasets[0].backgroundColor.push("#ffbf47")) : false
                 noTyesF ? (data.datasets[0].data.push(noTyesF), data.labels.push(noTyesF_label),data.datasets[0].backgroundColor.push("#925ed6")) : false
                 if (self.summary_type !== 'x-trapi_Compliant') {
@@ -504,23 +513,24 @@ <h6 class="white-text p-1" :style="{backgroundColor: bgColor}" v-show="filter &&
       data: function(){
         return {
             summaries: Array,
-            totalAPIs: 0
+            totalAPIs: 0,
+            colorList: ['#2c98f0', '#4bc0c0', '#8d5bd4', '#ff9f3f', '#224b80', '#ffcd56', '#ff6384', '#d8823e', '#3e6fd8',
+            '#0890aa', '#60878f', '#6354b4', '#e66822', '#c4b5ad', '#dd4aba']
         }
       },
       methods: {
         getSummaries(url){
             let self = this;
             axios.get(url).then(res=>{
-                // console.log('ALL RES', res.data)
                 self.data = res.data.hits
                 self.totalAPIs = res.data.total
                 Vue.set(self, 'summaries', [
-                    {'name': 'x-translator_Compliant', 'colors': ["#5ed668", "#ffbf47","#925ed6","#e65a78"]},
-                    {'name': 'x-trapi_Compliant', 'colors': ["#5ed668", "#ffbf47","#925ed6","#e65a78"]},
-                    {'name': 'By_Teams', 'colors': 'random'},
-                    {'name': 'By_Component', 'colors': 'random'},
-                    {'name': 'Uptime_Status', 'colors': ["#5ed668","#ffc107","#0277bd","#ff5722"]},
-                    {'name': 'Source_Status', 'colors': ["#5ed668","#ffc107","#e65a78","#9c27b0"]},
+                    {'name': 'x-translator_Compliant', 'colors': ["#20c96a", "#ffbf47","#925ed6","#e65a78"]},
+                    {'name': 'x-trapi_Compliant', 'colors': ["#20c96a", "#ffbf47","#925ed6","#e65a78"]},
+                    {'name': 'By_Teams', 'colors': self.colorList},
+                    {'name': 'By_Component', 'colors': self.colorList},
+                    {'name': 'Uptime_Status', 'colors': ["#20c96a","#ffcd56","#0277bd","#ff5722"]},
+                    {'name': 'Source_Status', 'colors': ["#20c96a","#ffcd56","#e65a78","#9c27b0"]},
                 ])
             }).catch(err=>{
                 throw err;