toggle-components-library 1.24.2 → 1.24.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.24.2",
+  "version": "1.24.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h3 class="toggle-metric metric-label">{{label}}</h3>
+    {{checkWindowSize}}
     <apexchart type="bar" :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
 
@@ -57,11 +58,18 @@ export default {
     */
     chartOptions() {
       return {
+         tooltip: {
+            y: {
+              formatter: function(value, opts) {
+                let percent = opts.w.globals.seriesPercent[opts.seriesIndex][opts.dataPointIndex];
+                return percent.toFixed(0) + '%'
+              }
+            }
+          },
         plotOptions: {
           bar: {
             borderRadius: 5,
             columnWidth: '60%',
-            
           }
           
         },
@@ -71,8 +79,7 @@ export default {
           },
         },
         grid: {
-        
-          show: false,
+          show: false
         },
         dataLabels: {
           enabled: false,

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -52,10 +52,11 @@ export default {
         labels: this.labels,
         plotOptions: {
           pie: {
-            customScale: 0.7,
+            customScale: 1,
             dataLabels: {
-              offset: 125
-            }  
+              offset: -50
+            }
+
           }
         },
         colors: this.colors ? this.colors : this.getDefaultColors(),
@@ -66,7 +67,8 @@ export default {
             },
             style: {
               colors: [this.getColor('black')],
-              fontSize: '2rem',
+              fontSize: '1rem',
+              fontWeight: 300
             },
             background: {
               enabled: false,

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -73,6 +73,10 @@ export default {
         * @return String
         */
         metricValue() {
+            if (this.value ==  0) {
+                return "-";
+            }
+
             switch (this.type) {
                 case 'currency':
                     return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -135,7 +135,13 @@ export default {
             redrawOnWindowResize: true,
             },
             stroke: {
-                width: 5
+                width: 5,
+            },
+            grid: {
+                padding: {
+                    top: 5,
+                    bottom: 5,
+                }
             },
             noData: {
                 text: "No data found",
@@ -155,7 +161,6 @@ export default {
         this.updateTrend();
     },
     computed: {
-    
         /**
         * Defines the badge class from the trending impact
         * @return String
@@ -163,16 +168,18 @@ export default {
         trendImpactClass() {
            return this.getTrendImpact() === 1  ? 'confirm'
                 : this.getTrendImpact() === -1 ? 'abort'
-                : 'warning'
+                : this.getTrendImpact() === 0  ? 'warning' 
+                : 'empty';
         },
         /**
         * Defines the badge title from the trending impact
         * @return String
         */
         trendImpactLabel() {
-            return  this.getTrendImpact() === 1  ? 'Trending up'
-                : this.getTrendImpact() === -1 ? 'Going down'
-                : 'Keeping steady'
+            return  this.getTrendImpact() === 1 ? 'Trending up'
+                :   this.getTrendImpact() === -1  ? 'Going down'
+                :   this.getTrendImpact() === 0  ? 'Keeping steady'
+                :   'No data';
         }
     },
     methods: {
@@ -182,12 +189,20 @@ export default {
         */
         getTrendImpact() {
 
-            // if the value is an object, map to array
+                if (this.sparkLineVal[0].data.length > 0) {
+                // if the value is an object, map to array
+
+                const trendImpactVals = this.sparkLineVal[0].data[0].y ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
 
-            const trendImpactVals = this.sparkLineVal[0].data[0].y ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
+                if (this.inverse_trend_impact === true && result != false)
+                    return result *-1;
+                else
+                    return result;
 
-            let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
-            return  this.inverse_trend_impact === true ? result = result *-1 : result;
+            } else {
+                return false;
+            }
         },
         
         /**
@@ -207,6 +222,9 @@ export default {
                 case -1:
                 this.updateChart([this.getColor('red')]);
                     break;
+                case false:
+                this.updateChart([this.getColor('gray')]);
+                    break;
             }
         },
 

package/src/components/mixins/mixins.js

@@ -124,6 +124,10 @@ export const charts = {
         */
         calcTrendImpact(values, percentageBase){
 
+            // If all values in the values array are 0 return 0;
+            if (values.every((val) => val === 0)){
+               return 0;
+            }
 
             let sum = 0 
             values.forEach(val => {
@@ -152,7 +156,7 @@ export const charts = {
 
         //return an array of default colors
         getDefaultColors() {
-            return this.$data.defcolors;
+            return this.$data.defcolors.sort(() => Math.random() - 0.5);
         },
 
         //return a specific color

package/src/sass/includes/_as_badges.scss

@@ -28,4 +28,8 @@
     &.warning {
         background-color: $toggle-button-amber;
     }
+    
+    &.empty {
+        background-color: $toggle-placeholder-grey;
+    }
 }

package/src/sass/includes/_as_metrics.scss

@@ -99,4 +99,11 @@
 .funnel-single-metric-container {
     margin-left: 40%; 
     align-self: center;
+}
+
+@media (min-width: $toggle-breakpoint-large-desktop) {
+  .funnel-grid-svg {
+    min-height: 15rem;
+    background-size: 100%;
+  }
 }