toggle-components-library 1.25.15 → 1.25.17

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -69,8 +69,9 @@ export default {
         plotOptions: {
           bar: {
             borderRadius: 5,
-            columnWidth: '60%',
-          }
+            columnWidth: '85%',
+            distributed : false,
+          },
           
         },
         chart: {
@@ -112,17 +113,17 @@ export default {
        
         colors: this.colors ? this.colors : this.getDefaultColors(),
         legend: {
-          horizontalAlign: 'left',
-          offsetX: -12,
+          horizontalAlign: 'center',
           showForSingleSeries: true,
+          fontSize: '16px',
           markers: {
             width: 50,
+            height: 12,
             radius: 5,
-            offsetY: 3
           },
         
         itemMargin: {
-            horizontal: 5,
+            horizontal: 30,
             vertical: 0
         },
           

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -12,25 +12,34 @@
          <div class="funnel-spark-line funnel-grid-3">
             <slot name="sparkLine3"></slot>
         </div>
+        <div class="funnel-spark-line funnel-grid-4">
+            <slot name="sparkLine4"></slot>
+        </div>
 
-        <div class="funnel-single-metric funnel-grid-4">
+        <div class="funnel-single-metric funnel-grid-5">
             <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 funnel-grid-6">
             <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 funnel-grid-7">
             <div class="funnel-single-metric-container">
                 <slot name="funnel3" class="funnel-single-metric"></slot>
             </div>
         </div>
 
+        <div class="funnel-single-metric funnel-grid-8">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel4" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
     </div>
 </template>
 

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,8 +74,8 @@ export default {
             },
             style: {
               colors: [this.getColor('black')],
-              fontSize: '1rem',
-              fontWeight: 300
+              fontSize: '1.1rem',
+              fontWeight: 'bold'
             },
             background: {
               enabled: false,

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -48,7 +48,6 @@ export default {
         */
         currencyCode:{
             type:String,
-            required:false,
             default:'GBP'
         },
         /**
@@ -56,7 +55,6 @@ export default {
         */
         currencyLocale:{
             type:String,
-            required:false,
             default:'en-GB'
         },
         /**
@@ -64,7 +62,7 @@ export default {
         */
         currencyDenomination: {
             type: Number,
-            default: 100
+            default: 1
         }
     },
     computed: {
@@ -73,7 +71,7 @@ export default {
         * @return String
         */
         metricValue() {
-            if (this.value ==  0) {
+            if (this.value === null) {
                 return "-";
             }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -83,7 +83,6 @@ export default {
         */
         currencyCode:{
             type:String,
-            required:false,
             default:'GBP'
         },
         /**
@@ -91,7 +90,6 @@ export default {
         */
         currencyLocale:{
             type:String,
-            required:false,
             default:'en-GB'
         },
         /**
@@ -99,14 +97,14 @@ export default {
         */
         currencyDenomination: {
             type: Number,
-            default: 100
+            default: 1
         },
         /**
         * Percentage base used to calculate the trend impact 
         */
-        trend_impact_percentage :{
+        trend_impact_base :{
             type: Number,
-            default: 5
+            default: 0.5
         },
         /**
         * This prop will inverse the trend impact
@@ -136,6 +134,9 @@ export default {
             },
             stroke: {
                 width: 5,
+                curve: 'smooth',
+                lineCap: 'butt',
+                
             },
             grid: {
                 padding: {
@@ -192,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

@@ -1,8 +1,11 @@
 import styleInfo from '../../../src/sass/includes/_as_variables.scss';
+import jsonCharCodesData from '../json/char_list.json';
 
 export const mixins = {
     data(){
-        return {}
+        return {
+            jsonCharCodes: jsonCharCodesData
+        }
     },
     methods:{
 
@@ -59,6 +62,20 @@ export const mixins = {
 
             //converts a character into an HTML entity 
             const char2Html = (char) => {
+                // Check for special characters first
+                let codepointVals = Object.values(this.jsonCharCodes).map(value => value.codepoints[0]);
+
+                let codesArray = Object.entries(this.jsonCharCodes)
+
+                if (codepointVals.includes(char.codePointAt())) {
+
+                    let namedChar = codesArray.filter(nestedArr => {
+                        return nestedArr[1].codepoints[0] == char.codePointAt()
+                    })
+                    // If it's a special character return now
+                    return `${namedChar[0][0]}`
+                }
+
                 let item = `${char}`;
 
                 //spread operator can detect emoji surrogate pairs 
@@ -108,7 +125,7 @@ export const charts = {
         return {
 
             defcolors: [
-            '#FF9494','#FFCA8A','#FCFF9D','#B2FFA2','#81F4FF','#85B4FF','#A898FF'
+                '#85B4FF', '#81F4FF', '#A898FF'
             ]
         }
     },
@@ -122,41 +139,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 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/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -3,7 +3,7 @@
         <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>
+            <slot name="nav-items"></slot>
         </ul>
 
         <div class="toggle-multi-tier-sidenav-divider"></div>
@@ -14,10 +14,22 @@
 
 
         <div class="toggle-multi-tier-sidenav-select-container">
-            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
+            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptionsSorted" v-model="unitOptionVal" />
         </div>
 
-        <div class="toggle-multi-tier-sidenav-user-icon"></div>
+        <div  v-if="userMenuOpen" class="toggle-multi-tier-sidenav-user-menu-container">
+            <div class="toggle-multi-tier-sidenav-user-menu">
+                <ToggleHeaderTextLarge class="toggle-multi-tier-sidenav-user-name">
+                    {{ user }}
+                </ToggleHeaderTextLarge>
+                <div class="toggle-multi-tier-sidenav-user-menu-divider"></div>
+                <ul class="toggle-multi-tier-sidenav-user-menu-ul">
+                    <slot name="user-menu"></slot>
+                </ul>
+            </div>
+        </div>
+        <div @click="userMenuOpen = !userMenuOpen" :class="userMenuOpen ? 'toggle-multi-tier-sidenav-user-icon-menu-open' : 'toggle-multi-tier-sidenav-user-icon'">
+        </div>
     </nav>
 </template>
 
@@ -28,6 +40,11 @@ import ToggleInputSelect from '../../forms/ToggleInputSelect.vue';
 
 export default {
     name: 'ToggleMultiTierSideNav',
+    data() {
+        return {
+            userMenuOpen: false,
+        }
+    },
     props: {
         value: {},
         /**
@@ -44,6 +61,13 @@ export default {
             type: String,
             default: 'Airship'
         },
+        /**
+         * Name of the user, displayed in the user menu
+         */
+        user: {
+            type: String,
+            default: 'User'
+        },
         unitOptions: {
             type: Array,
             required: true
@@ -58,7 +82,19 @@ export default {
             set: function (value) {
                 this.$emit('input', value);
             }
+        },
+
+        unitOptionsSorted() {
+            // Create a new array and populate it with the elements from the original unitOptions array
+            const sortedUnitOptions = [...this.unitOptions];
+
+            // Sort the new array in ascending alphabetical order according to the label property of each element
+            sortedUnitOptions.sort((a, b) => a.label.localeCompare(b.label));
+
+            // Return the new sorted array
+            return sortedUnitOptions;
         }
+        
     },
     components: {
         ToggleHeaderTextLarge,

package/src/components/text/ToggleTextClipboardCopy.vue

@@ -45,7 +45,16 @@ export default {
                 window.getSelection().removeAllRanges();
                 window.getSelection().addRange(range);
                 document.execCommand("copy");
-      }
+                this.click();
+      },
+      click(){
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
     }
 };
 </script>

package/src/index.js

@@ -25,6 +25,7 @@ import ToggleModal from "./components/modals/ToggleModal.vue";
 import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
 import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
 import ToggleButton from "./components/buttons/ToggleButton.vue";
+import ToggleLoginButton from "./components/buttons/ToggleLoginButton.vue";
 import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
 
 
@@ -90,6 +91,7 @@ const Components = {
     ToggleFillLoader,
     ToggleInputImage,
     ToggleButton,
+    ToggleLoginButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,

package/src/sass/includes/_as_buttons.scss

@@ -18,7 +18,6 @@
 .toggle-button-container{
     background:white;
     display: inline-block;
-
     border-radius: 0.3rem;
     &--login{
         border-radius: 23px;
@@ -145,7 +144,7 @@
     background-image: url("../assets/icons/delete-grey.svg");
 }
 
-// Neutral Button styles
+// Neutral Button styls
 .toggle-button.neutral, .toggle-button-a.neutral a{
     color: $toggle-button-neutral;
     border-color: $toggle-button-neutral;
@@ -157,10 +156,6 @@
 .toggle-button.neutral:disabled, .toggle-button-a.disabled a{
 }
 
-
-
-
-
 // Mini buttons
 // 
 .toggle-button-container-mini{

package/src/sass/includes/_as_inputs.scss

@@ -154,8 +154,8 @@
     font-size: $toggle-font-size-small;
     color    : $toggle-error-red !important;
     display  : block;
-    margin-top: 1rem;
-    margin-bottom: -1.1rem;
+    position : absolute;
+    bottom   : 0.3rem;
 }
 
 // date picker
@@ -280,7 +280,7 @@
 
     .toggle-input-select {
         padding: 0rem;
-        font-size: 1.1rem;
+        font-size: 0.9rem;
     }
 }
 
@@ -507,20 +507,20 @@ $iconWidth:20px;
                     background-size: cover !important;
                     background-position: center;
                     border-radius:4px;
-                    cursor: move;
                 }
-                .toggle-item-img::after{
+                .toggle-center {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .toggle-move-icon::after {
                     position: absolute;
                     content:'';
                     height: 100%;
                     width: 100%;
+                    background-size: $iconWidth!important;
                     background: url('../assets/icons/draggable.svg') no-repeat center center;
-                    background-size: $iconWidth;
-                }
-                .toggle-center {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
+                    cursor: move;
                 }
               
             }
@@ -893,8 +893,6 @@ $iconWidth:20px;
     }
 
     .toggle-input-label-error  {
-        margin-top: 0rem;
-        margin-bottom: 0rem;
         position: absolute;
         bottom:-17px;
     }

package/src/sass/includes/_as_metrics.scss

@@ -22,20 +22,20 @@
 /* Funnel */
 .toggle-metric-funnel-container {
     grid-template-rows: auto;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     display: grid;
     grid-auto-flow: column;
 
 }
 
 .funnel-grid-svg {
-    min-height: 13rem;
-    background: transparent url('../assets/img/funnel.svg') no-repeat padding-box bottom;
-    background-size: 100% 100%;
+    min-height: 12rem;
+    background: transparent url('../assets/img/funnel.svg') no-repeat padding-box center;
+    background-size: 100% auto;
     grid-row-start: 2;
     grid-column-start: 1;
     grid-row-end: 3;
-    grid-column-end: 4;
+    grid-column-end: 5;
 }
 
 .funnel-grid-1 {
@@ -60,6 +60,13 @@
 }
 
 .funnel-grid-4 {
+    grid-row-start: 1;
+    grid-column-start: 4;
+    grid-row-end: 2;
+    grid-column-end: 5;
+}
+
+.funnel-grid-5 {
     grid-row-start: 2;
     grid-column-start: 1;
     grid-row-end: 3;
@@ -67,7 +74,7 @@
     display: flex;
 }
 
-.funnel-grid-5 {
+.funnel-grid-6 {
     grid-row-start: 2;
     grid-column-start: 2;
     grid-row-end: 3;
@@ -75,7 +82,7 @@
      display: flex;
 }
 
-.funnel-grid-6 {
+.funnel-grid-7 {
     grid-row-start: 2;
     grid-column-start: 3;
     grid-row-end: 3;
@@ -83,11 +90,19 @@
     display: flex;
 }
 
+.funnel-grid-8 {
+    grid-row-start: 2;
+    grid-column-start: 4;
+    grid-row-end: 3;
+    grid-column-end: 5;
+    display: flex;
+}
+
 .funnel-spark-line, .funnel-single-metric  {
     margin-right: 1rem;
     border-right: 1px solid #BCDBEE;
 
-    &:nth-child(4),  &:last-child {
+    &:nth-child(5),  &:last-child {
         border: 0;
     }
 }
@@ -97,13 +112,9 @@
 }
 
 .funnel-single-metric-container {
-    margin-left: 40%; 
-    align-self: center;
-}
-
-@media (min-width: $toggle-breakpoint-large-desktop) {
-  .funnel-grid-svg {
-    min-height: 15rem;
-    background-size: 100%;
-  }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 }