toggle-components-library 1.23.7 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.23.7",
+  "version": "1.24.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -24,25 +24,27 @@
     "*.js"
   ],
   "dependencies": {
-    "core-js": "^3.6.4",
+    "apexcharts": "^3.35.5",
+    "core-js": "^3.25.0",
     "countries-list": "^2.6.1",
     "date-fns": "^1.30.1",
     "storybook-vue-router": "^1.0.7",
-    "vue": "^2.6.11",
+    "vue": "^2.7.10",
     "vue-airbnb-style-datepicker": "^2.7.1",
+    "vue-apexcharts": "^1.6.2",
     "vue-color": "^2.7.1",
     "vue-moment": "^4.1.0",
     "vue-multiselect": "^2.0.8",
-    "vue-router": "^3.4.3",
+    "vue-router": "^3.6.4",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.24.3",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@storybook/addon-actions": "^6.0.6",
-    "@storybook/addon-docs": "^6.0.6",
-    "@storybook/vue": "^6.0.6",
+    "@babel/core": "^7.18.13",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
     "@vue/cli-plugin-babel": "^4.5.3",
     "@vue/cli-plugin-eslint": "^4.5.3",
     "@vue/cli-service": "^4.5.3",
@@ -53,9 +55,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "react": "^16.13.1",
     "react-is": "^16.13.1",
-    "sass": "^1.26.8",
+    "sass": "^1.54.5",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.10"
   },
   "eslintConfig": {
     "root": true,

package/src/assets/img/funnel.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1070.503" height="166.653" viewBox="0 0 1070.503 166.653">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.993" y1="0.5" x2="0" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f7f7f7"/>
+      <stop offset="1" stop-color="#dce9f7"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_222" data-name="Group 222" transform="translate(-182.585 -931.326)">
+    <path id="Union_1" data-name="Union 1" d="M0,166.653V0H84.287C169.914,0,342.83,37.691,448.053,37.691H625.967c132,0,148.131,20.785,269.689,20.785s174.859-.288,174.846,0c-.027.233-.012,16.421,0,22.1h0s0,.359,0,.993c0,.607,0,.952,0,.952h0c-.01,5.848-.025,22.889,0,23.137.014.3-53.289,0-174.846,0S757.971,127.34,625.967,127.34H448.053c-105.223,0-278.139,39.313-363.766,39.313Zm0,0ZM0,0Z" transform="translate(182.586 931.326)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <apexchart type="bar" :height="height" :options="chartOptions" :series="values"></apexchart>
+  </div>
+
+</template>
+
+<script>
+import {charts} from "../mixins/mixins";
+
+export default {
+  
+  mixins:[charts],
+  
+  props: {
+    /**
+    * Used to overwrite the default colors
+    */
+    colors: {
+      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: [Array],
+      required: true
+    }
+  },
+  
+  computed: {
+    /**
+    * define the pie chart options
+    * @return Object
+    */
+    chartOptions() {
+      return {
+        plotOptions: {
+          bar: {
+            borderRadius: 5,
+            columnWidth: '60%',
+            
+          }
+          
+        },
+        chart: {
+          toolbar: {
+            show: false
+          },
+        },
+        grid: {
+        
+          show: false,
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        xaxis: {
+          categories: this.categories,
+          labels: {
+            style: {
+              padding: '20px',
+              fontSize: '1rem',
+            }
+          },
+          
+        },
+        yaxis: {  
+        
+          show: true,
+          labels: {
+            show: false
+          },
+          axisBorder: {
+            show: true,
+            color: this.getColor('gray'),
+            width: 3
+          },
+          axisTicks: {
+            show: false
+          }
+        },
+       
+        colors: this.colors ? this.colors : this.getDefaultColors(),
+        legend: {
+          horizontalAlign: 'left',
+          offsetX: -12,
+          showForSingleSeries: true,
+          markers: {
+            width: 50,
+            radius: 5,
+            offsetY: 3
+          },
+        
+        itemMargin: {
+            horizontal: 5,
+            vertical: 0
+        },
+          
+        }
+      }
+    }
+  }
+  
+};
+</script>

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="toggle-metric-funnel-container">
+        
+        <div class="funnel-grid-svg"></div>
+
+         <div class="funnel-spark-line funnel-grid-1">
+            <slot name="sparkLine1"></slot>
+        </div>
+         <div class="funnel-spark-line funnel-grid-2">
+            <slot name="sparkLine2"></slot>
+        </div>
+         <div class="funnel-spark-line funnel-grid-3">
+            <slot name="sparkLine3"></slot>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-4">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel1" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-5">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel2" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-6">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel3" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        /*
+        *  Component's name
+        */
+        name: {
+            type: String,
+            default: "ToggleMetricFunnelChart"
+        }
+    }
+}
+
+</script>

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <apexchart type="pie" :options="chartOptions" :series="values"></apexchart>
+  </div>
+
+</template>
+
+<script>
+
+import {charts} from "../mixins/mixins";
+
+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,
+        plotOptions: {
+          pie: {
+            customScale: 0.7,
+            dataLabels: {
+              offset: 125
+            }  
+          }
+        },
+        colors: this.colors ? this.colors : this.getDefaultColors(),
+          dataLabels: {
+            enabledOnSeries: true,
+            formatter: function (val, {seriesIndex, w}) {
+              return `${w.globals.labels[seriesIndex]} ${val}%`
+            },
+            style: {
+              colors: [this.getColor('black')],
+              fontSize: '2rem',
+            },
+            background: {
+              enabled: false,
+            },
+            dropShadow: {
+              enabled: false,
+            }
+        },
+        
+        legend: {
+          show: false,
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+  }
+  
+};
+</script>

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+    <h3 class="toggle-metric metric-label">{{label}}</h3>
+        <h1 class="toggle-metric metric-value">{{metricValue}}</h1>
+    </div>
+</template>
+
+<script>
+
+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();
+
+            }
+        }
+
+       
+    }
+}
+
+
+</script>

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -0,0 +1,223 @@
+<template>
+    <div>
+        <ToggleBadge style="margin-bottom: 10px"
+            :badgeStyle="trendImpactClass"
+        >
+            {{trendImpactLabel}}
+        </ToggleBadge>
+		
+        <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="sparkLineRef">
+        </apexchart>
+    </div>
+</template>
+
+<script>
+
+import Vue from "vue";
+import {charts} from "../mixins/mixins";
+import ToggleMetricSingleMetric from './ToggleMetricSingleMetric.vue';
+import ToggleBadge from '../badges/ToggleBadge.vue';
+import VueApexCharts from 'vue-apexcharts'
+
+Vue.use(VueApexCharts);
+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
+        }
+    },
+
+    components: {
+        ToggleMetricSingleMetric,
+        ToggleBadge
+    },
+
+    data : function(){
+        return {
+         trendImpact: 0,
+          chartOptions: {
+            chart: {
+               sparkline: {
+                enabled: true,
+            },
+            defaultLocale: 'en',
+            redrawOnParentResize: true,
+            redrawOnWindowResize: true,
+            },
+            stroke: {
+                width: 5
+            },
+            noData: {
+                text: "No data found",
+                align: 'left',
+                verticalAlign: 'top',
+                offsetX: 0,
+                offsetY: 0
+            },
+          
+          }
+        }; 
+    },
+    mounted() {
+        this.updateTrend();
+    },
+    updated() {
+        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'
+                : 'Keeping steady'
+        }
+    },
+    methods: {
+        /**
+        * Gets the trend impact from mixing method
+        * @return Integer
+        */
+        getTrendImpact() {
+
+            // 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;
+
+            let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
+            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();
+
+            switch (this.trendImpact) {
+                case 1:
+                this.updateChart([this.getColor('green')]);
+                    break;
+                case 0:
+                this.updateChart([this.getColor('amber')]);
+                    break;
+                case -1:
+                this.updateChart([this.getColor('red')]);
+                    break;
+            }
+        },
+
+        /**
+        * Updates the spark line chart component colors
+        * @return Void
+        */
+        updateChart(colors) {
+            this.$refs.sparkLineRef.updateOptions({ colors: colors });
+        }
+    }
+}
+
+</script>