toggle-components-library 1.23.7 → 1.24.1

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 {
+
+            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){
+
+
+            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;
+        },
+
+        //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

@@ -3,7 +3,7 @@
     top:0;
     left:0;
     height:  100vh;
-    width:100vh;
+    width:100vw;
     z-index:10;
     background: white;
     position: fixed !important;

package/src/sass/includes/_as_metrics.scss

@@ -0,0 +1,102 @@
+/* Single metric */
+
+.toggle-metric {
+
+    @include toggle-global-font-config;
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+
+   &.metric-label {
+        font-size: 1.2rem;
+        color: $toggle-metric-label-blue;
+    }
+
+    &.metric-value {
+        font-size: 275%;
+        color: $toggle-metric-label-black;
+    }
+}
+
+
+/* Funnel */
+.toggle-metric-funnel-container {
+    grid-template-rows: auto;
+    grid-template-columns: 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%;
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-row-end: 3;
+    grid-column-end: 4;
+}
+
+.funnel-grid-1 {
+    grid-row-start: 1;
+    grid-column-start: 1;
+    grid-row-end: 2;
+    grid-column-end: 2;
+}
+
+.funnel-grid-2 {
+    grid-row-start: 1;
+    grid-column-start: 2;
+    grid-row-end: 2;
+    grid-column-end: 3;
+}
+
+.funnel-grid-3 {
+    grid-row-start: 1;
+    grid-column-start: 3;
+    grid-row-end: 2;
+    grid-column-end: 4;
+}
+
+.funnel-grid-4 {
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-row-end: 3;
+    grid-column-end: 2;
+    display: flex;
+}
+
+.funnel-grid-5 {
+    grid-row-start: 2;
+    grid-column-start: 2;
+    grid-row-end: 3;
+    grid-column-end: 3;
+     display: flex;
+}
+
+.funnel-grid-6 {
+    grid-row-start: 2;
+    grid-column-start: 3;
+    grid-row-end: 3;
+    grid-column-end: 4;
+    display: flex;
+}
+
+.funnel-spark-line, .funnel-single-metric  {
+    margin-right: 1rem;
+    border-right: 1px solid #BCDBEE;
+
+    &:nth-child(4),  &:last-child {
+        border: 0;
+    }
+}
+
+.funnel-single-metric > * .toggle-metric {
+    font-size: 150%;
+}
+
+.funnel-single-metric-container {
+    margin-left: 40%; 
+    align-self: center;
+}

package/src/sass/includes/_as_variables.scss

@@ -39,11 +39,30 @@ $toggle-button-success:$toggle-success-green;
 $toggle-button-abort:$toggle-error-red;
 $toggle-button-neutral:$toggle-light-blue;
 $toggle-button-disabled:#d6d6d6;
+$toggle-button-amber: #E6A831;
+
+/* metrics */
+$toggle-metric-label-blue: #477EF6;
+$toggle-metric-label-black: #354B64;
+$toggle-metric-label-gray: #F1F5F6;
+$toggle-metric-chart-blue: #B9D9ED;
+$toggle-metric-chart-green: #68B916;
+$toggle-metric-chart-red: #F45959;
+$toggle-metric-chart-amber: #E6A831;
+$toggle-metric-chart-additional: #deafef;
 
 :export {
 	toggleblue     : $toggle-blue;
 	togglelightblue: $toggle-light-blue;
 	togglewhite    : $toggle-white;
 	toggleinputcolour : $toggle-input-colour;
+	
+	toggleMetricLabelBlue : $toggle-metric-label-blue;
+	toggleMetricLabelGray : $toggle-metric-label-gray;
+	toggleMetricLabelBlack : $toggle-metric-label-black;
+	toggleMetricChartGreen : $toggle-metric-chart-green;
+	toggleMetricChartAmber : $toggle-metric-chart-amber;
+	toggleMetricChartRed : $toggle-metric-chart-red;
+	toggleMetricChartAdditional : $toggle-metric-chart-additional;
 
 }

package/src/sass/main.scss

@@ -18,3 +18,4 @@
 @import "./includes/_as_navs.scss";
 @import "./includes/_as_elements.scss";
 @import "./includes/_as_notifications.scss";
+@import "./includes/_as_metrics.scss";