toggle-components-library 1.24.0 → 1.24.2

package/package.json

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

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -14,28 +14,47 @@ export default {
   mixins:[charts],
   
   props: {
+    /**
+    * Used to overwrite the default colors
+    */
     colors: {
-      type: [String]
+      type: [Array]
     },
+    /*
+    * Component's height
+    */
     height: {
       type: String,
       default: "100%"
     },
+    /*
+    *  Component's values
+    */
     values: {
       type: [Array],
       required: true
     },
+    /*
+    *  Component's labels
+    */
     label: {
       type: String,
       required: true  
     },
+    /*
+    *  Component's categories
+    */
     categories: {
-      type: [String],
+      type: [Array],
       required: true
     }
   },
   
   computed: {
+    /**
+    * define the pie chart options
+    * @return Object
+    */
     chartOptions() {
       return {
         plotOptions: {

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -41,6 +41,9 @@ import { mixins } from '../mixins/mixins'
 export default {
     mixins:[mixins],
     props: {
+        /*
+        *  Component's name
+        */
         name: {
             type: String,
             default: "ToggleMetricFunnelChart"

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -14,23 +14,39 @@ export default {
   mixins:[charts],
   
   props: {
+   /**
+    * Used to overwrite the default colors
+    */
     colors: {
       type: [String]
     },
+    /**
+    * Component's values
+    */
     values: {
       type: Array,
       required: true
     },
+    /**
+    * Component's main label
+    */
     label: {
           type: String,
           required: true
       },
+    /**
+    * Component's label for each value
+    */
     labels: {
       type: Array,
       required: true
     }
   },
   computed: {
+    /**
+    * define the pie chart options
+    * @return Object
+    */
     chartOptions() {
       return {
         labels: this.labels,

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -13,52 +13,76 @@ import { mixins } from '../mixins/mixins'
 export default {
     mixins:[mixins],
     props: {
+        /**
+        * Component's name
+        */
         name: {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
+        /**
+        * Type of the value, this will affect on the format shown
+        */
         type : {
             type: String,
             validator: function (value) {
                 return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
+        /**
+        * Component's value
+        */
         value: {
             type: [String, Number],
             required: true
         },
+        /**
+        * Component's label
+        */
         label: {
             type: String,
             default: ""
         },
+        /**
+        * Currency Code
+        */
         currencyCode:{
             type:String,
             required:false,
             default:'GBP'
         },
+        /**
+        * Currency locale
+        */
         currencyLocale:{
             type:String,
             required:false,
             default:'en-GB'
         },
+        /**
+        * Currency denomination
+        */
         currencyDenomination: {
             type: Number,
             default: 100
         }
     },
     computed: {
+        /**
+        * Formats the value to be shown
+        * @return String
+        */
+        metricValue() {
+            switch (this.type) {
+                case 'currency':
+                    return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
+                case'percentage':
+                    return `${this.value} %`
+                default:
+                    return this.value.toLocaleString();
 
-       metricValue() {
-        switch (this.type) {
-            case 'currency':
-                return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
-            case'percentage':
-                return `${this.value} %`
-            default:
-                return this.value.toLocaleString();
-
+            }
         }
-       }
 
        
     }

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -8,7 +8,7 @@
 		
         <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination"/>
         
-        <apexchart type="line" :height="height" :width="width" :options="chartOptions" :series="sparkLineVal" ref="spartLineRef">
+        <apexchart type="line" :height="height" :width="width" :options="chartOptions" :series="sparkLineVal" ref="sparkLineRef">
         </apexchart>
     </div>
 </template>
@@ -27,54 +27,90 @@ Vue.component('apexchart', VueApexCharts);
 export default {
     mixins:[charts],
     props: {
+        /**
+        * Component's name
+        */
         name: {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
+        /**
+        *  The line chart height
+        */
         height : {
             type: String,
             default: "25%"
         },
+        /**
+        *  The line chart width
+        */
         width : {
             type: String,
             default: "25%"
         },
+        /**
+        * Type of the value, this will affect on the format shown for the single value
+        */
         type : {
             type: String,
             validator: function (value) {
                 return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
+        /**
+        * single metric component value
+        */
         singleMetricVal: {
             type: [String, Number],
             required: true
         },
+        /**
+        * spark line component value
+        */
         sparkLineVal: {
             type: Array,
             required: true
         },
+        /**
+        * Component's label
+        */
         label: {
             type: String,
             required: true
         },
+        /**
+        * Currency Code
+        */
         currencyCode:{
             type:String,
             required:false,
             default:'GBP'
         },
+        /**
+        * Currency locale
+        */
         currencyLocale:{
             type:String,
             required:false,
             default:'en-GB'
         },
+        /**
+        * Currency denomination
+        */
         currencyDenomination: {
             type: Number,
             default: 100
         },
+        /**
+        * Percentage base used to calculate the trend impact 
+        */
         trend_impact_percentage :{
             type: Number,
             default: 5
         },
+        /**
+        * This prop will inverse the trend impact
+        */
         inverse_trend_impact: {
             type: Boolean,
             default: false
@@ -119,13 +155,20 @@ export default {
         this.updateTrend();
     },
     computed: {
-
+    
+        /**
+        * Defines the badge class from the trending impact
+        * @return String
+        */
         trendImpactClass() {
            return this.getTrendImpact() === 1  ? 'confirm'
                 : this.getTrendImpact() === -1 ? 'abort'
                 : 'warning'
         },
-
+        /**
+        * Defines the badge title from the trending impact
+        * @return String
+        */
         trendImpactLabel() {
             return  this.getTrendImpact() === 1  ? 'Trending up'
                 : this.getTrendImpact() === -1 ? 'Going down'
@@ -133,6 +176,10 @@ export default {
         }
     },
     methods: {
+        /**
+        * Gets the trend impact from mixing method
+        * @return Integer
+        */
         getTrendImpact() {
 
             // if the value is an object, map to array
@@ -143,6 +190,10 @@ export default {
             return  this.inverse_trend_impact === true ? result = result *-1 : result;
         },
         
+        /**
+        * Gets trend impact and udpates the chart with respective color
+        * @return Void
+        */
         updateTrend() {
         this.trendImpact = this.getTrendImpact();
 
@@ -159,8 +210,12 @@ export default {
             }
         },
 
+        /**
+        * Updates the spark line chart component colors
+        * @return Void
+        */
         updateChart(colors) {
-            this.$refs.spartLineRef.updateOptions({ colors: colors });
+            this.$refs.sparkLineRef.updateOptions({ colors: colors });
         }
     }
 }

package/src/components/mixins/mixins.js

@@ -107,7 +107,7 @@ export const charts = {
     data: function() {
         return {
 
-            colors: [
+            defcolors: [
             '#FF9494','#FFCA8A','#FCFF9D','#B2FFA2','#81F4FF','#85B4FF','#A898FF'
             ]
         }
@@ -152,7 +152,7 @@ export const charts = {
 
         //return an array of default colors
         getDefaultColors() {
-            return this.$data.colors;
+            return this.$data.defcolors;
         },
 
         //return a specific color