toggle-components-library 1.22.7 → 1.22.9

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -0,0 +1,92 @@
+<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: 1,
+            dataLabels: {
+              offset: -50
+            }
+
+          }
+        },
+        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: '1rem',
+              fontWeight: 300
+            },
+            background: {
+              enabled: false,
+            },
+            dropShadow: {
+              enabled: false,
+            }
+        },
+        
+        legend: {
+          show: false,
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+  }
+  
+};
+</script>

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -0,0 +1,96 @@
+<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() {
+            if (this.value ==  0) {
+                return "-";
+            }
+
+            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,241 @@
+<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,
+            },
+            grid: {
+                padding: {
+                    top: 5,
+                    bottom: 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'
+                : 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'
+                :   this.getTrendImpact() === 0  ? 'Keeping steady'
+                :   'No data';
+        }
+    },
+    methods: {
+        /**
+        * Gets the trend impact from mixing method
+        * @return Integer
+        */
+        getTrendImpact() {
+
+                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;
+
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
+                if (this.inverse_trend_impact === true && result != false)
+                    return result *-1;
+                else
+                    return result;
+
+            } else {
+                return false;
+            }
+        },
+        
+        /**
+        * 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;
+                case false:
+                this.updateChart([this.getColor('gray')]);
+                    break;
+            }
+        },
+
+        /**
+        * Updates the spark line chart component colors
+        * @return Void
+        */
+        updateChart(colors) {
+            this.$refs.sparkLineRef.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,82 @@ export const mixins = {
 
     }
 }
+
+export const charts = {
+    
+    data: function() {
+        return {
+
+            defcolors: [
+            '#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){
+
+            // 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 => {
+                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.defcolors.sort(() => Math.random() - 0.5);
+        },
+
+        //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/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -0,0 +1,69 @@
+<template>
+    <nav class="toggle-multi-tier-sidenav-container">
+        <img :src="logo.src" :alt="logo.alt" class="toggle-multi-tier-sidenav-logo">
+        <ul class="toggle-multi-tier-sidenav-ul">
+            <!-- @slot For ToggleSideNavItems -->
+            <slot></slot>
+        </ul>
+
+        <div class="toggle-multi-tier-sidenav-divider"></div>
+
+        <ToggleHeaderTextLarge class="toggle-multi-tier-sidenav-title">
+            {{ title }}
+        </ToggleHeaderTextLarge>
+
+
+        <div class="toggle-multi-tier-sidenav-select-container">
+            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
+        </div>
+
+        <div class="toggle-multi-tier-sidenav-user-icon"></div>
+    </nav>
+</template>
+
+<script>
+
+import ToggleHeaderTextLarge from '../../text/ToggleHeaderTextLarge.vue';
+import ToggleInputSelect from '../../forms/ToggleInputSelect.vue';
+
+export default {
+    name: 'ToggleMultiTierSideNav',
+    props: {
+        value: {},
+        /**
+         * For the logo that is displayed at the top of the nav
+         */
+        logo: {
+            type: Object,
+            required: true
+        },
+        /**
+         * The main title, displayed below logo
+         */
+        title: {
+            type: String,
+            default: 'Airship'
+        },
+        unitOptions: {
+            type: Array,
+            required: true
+        }
+    },
+    computed: {
+        unitOptionVal: {
+            get: function () {
+                return this.value;
+            },
+
+            set: function (value) {
+                this.$emit('input', value);
+            }
+        }
+    },
+    components: {
+        ToggleHeaderTextLarge,
+        ToggleInputSelect
+    }
+};
+</script>
+

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNavItem.vue

@@ -0,0 +1,40 @@
+<template>
+    <li
+        :class="['toggle-multi-tier-sidenav-item', icon, { 'active': active, 'toggle-multi-tier-sidenav-icon': icon, 'toggle-multi-tier-sidenav-arrow': arrow}]">
+
+        <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+        <slot name="item"></slot>
+        <!--    @slot For sub nav component-->
+        <slot name="sub-nav"></slot>
+    </li>
+</template>
+
+<script>
+
+
+export default {
+    name: 'ToggleMultiTierSideNavItem',
+    props: {
+        /**
+         * Set whether an item is active
+         */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Icon to use `toggle-graph-icon`, `toggle-orders-icon`, `toggle-card-icon`, `toggle-megaphone-icon`, `toggle-form-icon`
+         */
+        icon: {
+            type: String,
+        },
+        /**
+         * Set whether the arrow displays, e.g only for items with sub navs
+         */
+        arrow: {
+            type: Boolean,
+            default: false
+        },
+    }
+};
+</script>

package/src/components/navs/multitiersidenav/ToggleMultiTierSideSubNav.vue

@@ -0,0 +1,23 @@
+<template>
+    <Transition name="drop-down">
+        <ul class="toggle-multi-tier-sidenav-sub-ul" v-if="expanded">
+            <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+            <slot></slot>
+        </ul>
+    </Transition>
+</template>
+
+<script>
+export default {
+    name: 'ToggleMultiTierSideSubNav',
+    props: {
+        /**
+         * Should the subnav display expanded?
+         */
+        expanded: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>

package/src/index.js

@@ -38,6 +38,12 @@ import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
 import ToggleSideNav from './components/navs/sidenav/ToggleSideNav.vue';
 import ToggleSideSubNav from './components/navs/sidenav/ToggleSideSubNav.vue';
 
+import ToggleMultiTierSideNav from './components/navs/multitiersidenav/ToggleMultiTierSideNav.vue';
+import ToggleMultiTierSideNavItem from './components/navs/multitiersidenav/ToggleMultiTierSideNavItem.vue';
+import ToggleMultiTierSideSubNav from './components/navs/multitiersidenav/ToggleMultiTierSideSubNav.vue';
+
+
+
 import ToggleTextClipboardCopy from './components/text/ToggleTextClipboardCopy';
 import ToggleLineBreak from './components/elements/ToggleLineBreak';
 import ToggleSectionCollapse from './components/elements/ToggleSectionCollapse';
@@ -55,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 = {
@@ -102,7 +114,15 @@ const Components = {
     ToggleFontPicker,
     ToggleInputNumberUnit,
     ToggleInputLabelLeft,
-    ToggleInputMultiSelect
+    ToggleInputMultiSelect,
+    ToggleMultiTierSideNav,
+    ToggleMultiTierSideNavItem,
+    ToggleMultiTierSideSubNav,
+    ToggleMetricSingleMetric,
+    ToggleMetricSparkLine,
+    ToggleMetricBarChart,
+    ToggleMetricPieChart,
+    ToggleMetricFunnelChart
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_badges.scss

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