toggle-components-library 1.23.6 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.23.6",
+  "version": "1.24.0",
   "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/loaders/ToggleFillLoader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="toggle-fill-loader-container">
+    <div class="toggle-fill-loader-container" :class="{'toggle-fill-loader-container-transparent':transparent}">
         <div class="toggle-fill-loader-container-background">
             <div class="toggle-fill-loader" ></div>
         </div>
@@ -10,6 +10,10 @@
 export default {
     name: 'ButtonPrimary',
     props: {
+        transparent:{
+            typer:Boolean,
+            default:true
+        },
         buttonText: {
             type: String,
             default: "button"

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -0,0 +1,109 @@
+<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: {
+    colors: {
+      type: [String]
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    values: {
+      type: [Array],
+      required: true
+    },
+    label: {
+      type: String,
+      required: true  
+    },
+    categories: {
+      type: [String],
+      required: true
+    }
+  },
+  
+  computed: {
+    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,51 @@
+<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: {
+        name: {
+            type: String,
+            default: "ToggleMetricFunnelChart"
+        }
+    }
+}
+
+</script>

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -0,0 +1,74 @@
+<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: {
+    colors: {
+      type: [String]
+    },
+    values: {
+      type: Array,
+      required: true
+    },
+    label: {
+          type: String,
+          required: true
+      },
+    labels: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    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,68 @@
+<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: {
+        name: {
+            type: String,
+            default: "ToggleMetricSingleMetric"
+        },
+        type : {
+            type: String,
+            validator: function (value) {
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+            }
+        },
+        value: {
+            type: [String, Number],
+            required: true
+        },
+        label: {
+            type: String,
+            default: ""
+        },
+        currencyCode:{
+            type:String,
+            required:false,
+            default:'GBP'
+        },
+        currencyLocale:{
+            type:String,
+            required:false,
+            default:'en-GB'
+        },
+        currencyDenomination: {
+            type: Number,
+            default: 100
+        }
+    },
+    computed: {
+
+       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,168 @@
+<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="spartLineRef">
+        </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: {
+        name: {
+            type: String,
+            default: "ToggleMetricSingleMetric"
+        },
+        height : {
+            type: String,
+            default: "25%"
+        },
+        width : {
+            type: String,
+            default: "25%"
+        },
+        type : {
+            type: String,
+            validator: function (value) {
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+            }
+        },
+        singleMetricVal: {
+            type: [String, Number],
+            required: true
+        },
+        sparkLineVal: {
+            type: Array,
+            required: true
+        },
+        label: {
+            type: String,
+            required: true
+        },
+        currencyCode:{
+            type:String,
+            required:false,
+            default:'GBP'
+        },
+        currencyLocale:{
+            type:String,
+            required:false,
+            default:'en-GB'
+        },
+        currencyDenomination: {
+            type: Number,
+            default: 100
+        },
+        trend_impact_percentage :{
+            type: Number,
+            default: 5
+        },
+        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: {
+
+        trendImpactClass() {
+           return this.getTrendImpact() === 1  ? 'confirm'
+                : this.getTrendImpact() === -1 ? 'abort'
+                : 'warning'
+        },
+
+        trendImpactLabel() {
+            return  this.getTrendImpact() === 1  ? 'Trending up'
+                : this.getTrendImpact() === -1 ? 'Going down'
+                : 'Keeping steady'
+        }
+    },
+    methods: {
+        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;
+        },
+        
+        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;
+            }
+        },
+
+        updateChart(colors) {
+            this.$refs.spartLineRef.updateOptions({ colors: colors });
+        }
+    }
+}
+
+</script>

package/src/components/mixins/mixins.js

@@ -1,3 +1,4 @@
+import styleInfo from '../../../src/sass/includes/_as_variables.scss';
 
 export const mixins = {
     data(){
@@ -100,3 +101,78 @@ export const mixins = {
 
     }
 }
+
+export const charts = {
+    
+    data: function() {
+        return {
+
+            colors: [
+            '#FF9494','#FFCA8A','#FCFF9D','#B2FFA2','#81F4FF','#85B4FF','#A898FF'
+            ]
+        }
+    },
+    methods: {
+
+        /*
+        * Calculates the trend impact
+        * 
+        * @param {Array} [values] [the array of values to be calculated]
+        * @param {Number} [percentage] [Percentage that dertermiens if it's success, neutral or negative ]
+        *
+        * @return { {Integer} 1, 0,-1 }
+        */
+        calcTrendImpact(values, percentageBase){
+
+
+            let sum = 0 
+            values.forEach(val => {
+                sum = sum + val;
+            });
+
+            let average = sum/values.length;
+
+            // the acceptable difference before it's trending positive or negatively
+            let difference = average/100 * percentageBase;
+
+            // lower 'keeping steady value'
+            let lower_base = average-difference;
+            // higher 'keeping steady value'
+            let upper_base = average+difference;
+
+            let last_value = values[values.length - 1];
+
+            if(last_value >= upper_base)
+                return 1;
+            if(last_value <= lower_base)
+                return -1;
+            return 0;
+
+        },
+
+        //return an array of default colors
+        getDefaultColors() {
+            return this.$data.colors;
+        },
+
+        //return a specific color
+        getColor(color) {
+            switch (color) {
+                case 'black':
+                    return styleInfo.toggleMetricLabelBlack;
+                case 'gray':
+                    return styleInfo.toggleMetricLabelGray;
+                case 'green':
+                    return styleInfo.toggleMetricChartGreen;
+                case 'amber':
+                    return styleInfo.toggleMetricChartAmber;
+                case 'red':
+                    return styleInfo.toggleMetricChartRed;
+                case 'blue':
+                     return styleInfo.toggleMetricChartBlue;
+                case 'additional':
+                    return styleInfo.toggleMetricChartAdditional;
+            }
+        }
+    }
+}

package/src/index.js

@@ -61,6 +61,12 @@ import ToggleInputNumberUnit from "./components/forms/ToggleInputNumberUnit.vue"
 import ToggleInputLabelLeft from "./components/forms/ToggleInputLabelLeft.vue";
 import ToggleInputMultiSelect from "./components/forms/ToggleInputMultiSelect.vue";
 
+import ToggleMetricSingleMetric from "./components/metrics/ToggleMetricSingleMetric.vue";
+import ToggleMetricSparkLine from "./components/metrics/ToggleMetricSparkLine.vue";
+import ToggleMetricBarChart from "./components/metrics/ToggleMetricBarChart.vue";
+import ToggleMetricPieChart from "./components/metrics/ToggleMetricPieChart.vue";
+import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChart.vue";
+
 import './sass/main.scss';
 
 const Components = {
@@ -111,7 +117,12 @@ const Components = {
     ToggleInputMultiSelect,
     ToggleMultiTierSideNav,
     ToggleMultiTierSideNavItem,
-    ToggleMultiTierSideSubNav
+    ToggleMultiTierSideSubNav,
+    ToggleMetricSingleMetric,
+    ToggleMetricSparkLine,
+    ToggleMetricBarChart,
+    ToggleMetricPieChart,
+    ToggleMetricFunnelChart
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

@@ -24,4 +24,8 @@
     &.inactive {
         background-color: $toggle-button-disabled;
     }
+
+    &.warning {
+        background-color: $toggle-button-amber;
+    }
 }

package/src/sass/includes/_as_loaders.scss

@@ -1,12 +1,15 @@
 
   .toggle-fill-loader-container{
-    position:absolute;
     top:0;
     left:0;
-    height:100%;
-    width:100%;
+    height:  100vh;
+    width:100vw;
     z-index:10;
     background: white;
+    position: fixed !important;
+    &.toggle-fill-loader-container-transparent{
+      background: rgba(255,255,255,0.8) !important;
+    }
   }
   .toggle-fill-loader-container-background{