toggle-components-library 1.24.13 → 1.24.14

package/package.json

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

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -70,8 +70,8 @@ export default {
           bar: {
             borderRadius: 5,
             columnWidth: '85%',
-            
-          }
+            distributed : false,
+          },
           
         },
         chart: {

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 class="toggle-metric metric-label">{{label}}</h3>
-    <apexchart type="pie" :options="chartOptions" :series="values"></apexchart>
+    <apexchart type="pie"  :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
 
 </template>
@@ -27,6 +27,13 @@ export default {
       type: Array,
       required: true
     },
+    /*
+    * Component's height
+    */
+    height: {
+      type: String,
+      default: ""
+    },
     /**
     * Component's main label
     */
@@ -52,14 +59,14 @@ export default {
         labels: this.labels,
         plotOptions: {
           pie: {
-            customScale: 1,
+            distributed : false,
+            customScale: 0.7,
             dataLabels: {
-              offset: -50
-            }
-
+              offset: 100
+            }  
           }
         },
-        colors: this.colors ? this.colors : this.getDefaultColors(),
+         colors: this.colors ? this.colors : this.getDefaultColors(),
           dataLabels: {
             enabledOnSeries: true,
             formatter: function (val, {seriesIndex, w}) {
@@ -67,7 +74,7 @@ export default {
             },
             style: {
               colors: [this.getColor('black')],
-              fontSize: '1rem',
+              fontSize: '1.1rem',
               fontWeight: 'bold'
             },
             background: {

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -102,7 +102,7 @@ export default {
         /**
         * Percentage base used to calculate the trend impact 
         */
-        trend_impact_percentage :{
+        trend_impact_base :{
             type: Number,
             default: 5
         },
@@ -193,9 +193,10 @@ export default {
                 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[0].y === 0 ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
+
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base);
 
-                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
                 if (this.inverse_trend_impact === true && result != false)
                     return result *-1;
                 else

package/src/components/mixins/mixins.js

@@ -108,7 +108,7 @@ export const charts = {
         return {
 
             defcolors: [
-            '#FF9494','#FFCA8A','#FCFF9D','#B2FFA2','#81F4FF','#85B4FF','#A898FF'
+                '#85B4FF', '#81F4FF', '#A898FF'
             ]
         }
     },
@@ -122,41 +122,59 @@ export const charts = {
         *
         * @return { {Integer} 1, 0,-1 }
         */
-        calcTrendImpact(values, percentageBase){
+        calcTrendImpact(values, trend_impact_base){
 
             // If all values in the values array are 0 return 0;
             if (values.every((val) => val === 0)){
                return false;
             }
 
-            let sum = 0 
-            values.forEach(val => {
-                sum = sum + val;
-            });
-
-            let average = sum/values.length;
+            let regressionCalc = this.calculateLinearRegression(values);
 
-            // the acceptable difference before it's trending positive or negatively
-            let difference = average/100 * percentageBase;
+            if (regressionCalc >= trend_impact_base){
+                return 1;
+            } else if (regressionCalc < -trend_impact_base) {
+                return -1;
+            } else {
+                return 0;
+            }
+        },
 
-            // lower 'keeping steady value'
-            let lower_base = average-difference;
-            // higher 'keeping steady value'
-            let upper_base = average+difference;
+        /*
+        * Calculates the linear regression for the trend impact
+        * 
+        * @param {Array} [nums] [the array of values to be calculated]
+        * @return {Integer}
+        */
+        calculateLinearRegression(nums)  {
+            let summed_nums = 0;
+            nums.forEach(val => {
+                summed_nums = summed_nums + val;
+            });
 
-            let last_value = values[values.length - 1];
+            let multiplied_data = 0;
+            let summed_index = 0;
+            let squared_index = 0;
 
-            if(last_value >= upper_base)
-                return 1;
-            if(last_value <= lower_base)
-                return -1;
-            return 0;
+            nums.forEach((num, index) => {
+                index += 1;
+                multiplied_data += index * num;
+                summed_index += index;
+                squared_index += index**2;
+            });
 
+            let numerator = ( (nums.length) * multiplied_data) - (summed_nums * summed_index);
+            let denominator = ( (nums.length) * squared_index) - summed_index**2;
+            
+            if (denominator != 0)
+                return numerator/denominator;
+            else
+                return 0;
         },
 
         //return an array of default colors
         getDefaultColors() {
-            return this.$data.defcolors.sort(() => Math.random() - 0.5);
+            return this.$data.defcolors;
         },
 
         //return a specific color

package/src/sass/includes/_as_inputs.scss

@@ -280,7 +280,7 @@
 
     .toggle-input-select {
         padding: 0rem;
-        font-size: 1.1rem;
+        font-size: 0.9rem;
     }
 }
 

package/src/sass/includes/_as_navs.scss

@@ -140,8 +140,8 @@
   min-height: 100vh;
 
   .toggle-multi-tier-sidenav-logo {
-    max-width: 5rem;
-    margin: 1rem 0 1rem 0.6rem;
+    max-width: 7rem;
+    margin: 1rem 0 2rem 0.6rem;
   }
 
   .toggle-multi-tier-sidenav-user-icon {
@@ -215,6 +215,7 @@
   }
 
   .toggle-multi-tier-sidenav-title {
+    font-size: 0.9rem;
     margin: 2rem 0 0 .6rem;
   }
 
@@ -272,7 +273,7 @@
     .toggle-multi-tier-sidenav-item {
       list-style: none;
       font-family: $toggle-font-family;
-      font-size: 1.1rem;
+      font-size: 1rem;
       font-weight: bold !important;
       padding-bottom: 0.25rem;