Merge pull request #358 from consensusnetworks/feature/functional-com…

…ponents Feature/functional components
consensusnetworks · Jun 20, 2023 · 1e61f1d · 1e61f1d
2 parents ac0aaa0 + 5c7fb65
commit 1e61f1d
Show file tree

Hide file tree

Showing 15 changed files with 1,092 additions and 340 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -9,10 +9,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-
-
-    <!-- Icon Library -->
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/casimir.svg" />
@@ -22,8 +18,5 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script>
-      feather.replace()
-    </script>
   </body>
 </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -20,7 +20,8 @@
     "util": "^0.12.5",
     "vue": "^3.2.25",
     "vue-router": "^4.0.15",
-    "web3": "^1.8.1"
+    "web3": "^1.8.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
@@ -2,17 +2,11 @@
   import useUsers from '@/composables/users'
   import { RouterView } from 'vue-router'
   import DefaultLayout from '@/layouts/default-layout.vue'
-  // import { onMounted } from 'vue'
+  import { onMounted } from 'vue'
 
   // Need this to fix initilizing bug between user.ts and ssv.ts
   const { user } = useUsers()
-
-  // onMounted(() => {
-    // Needed for new Icon Library
-
-    // eslint-disable-next-line no-undef
-    // feather.replace()
-  // })
+  
 </script>
 
 <template>

diff --git a/apps/web/src/components/Carousel.vue b/apps/web/src/components/Carousel.vue
@@ -0,0 +1,22 @@
+
+<script setup lang="ts">
+    import { defineProps } from 'vue'
+
+    // eslint-disable-next-line no-undef
+    const props = defineProps({
+        currentSlide: {
+            type: Number,
+            required: true
+        }
+    })
+</script>
+
+<template>
+  <div>
+    <slot :current-slide="props.currentSlide" /> 
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/web/src/components/Slide.vue b/apps/web/src/components/Slide.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// 
+</script>
+
+<template>
+  <div class="slide_left">
+    <transition name="slide slide_left">
+      <slot /> 
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-enter-active,
+.slide-leave-active{
+    transition: opacity 0.7s ease-in-out;
+}
+
+.slide-enter-from,
+.slide-leave-to{
+    opacity: 0;
+}
+
+.slide-enter-to,
+.slide-leave-from{
+    opacity: 1;
+}
+
+/*  */
+
+.slide_left-enter-active,
+.slide_left-leave-active{
+    transition: transform 0.5s;
+}
+
+.slide_left-enter-from,
+.slide_left-leave-to{
+  transform: translateX(100%);
+}
+
+.slide_left-enter-to,
+.slide_left-leave-from{
+    
+  transform: translateX(0%);
+}
+</style>
diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import Chart, { ChartItem } from 'chart.js/auto'
+import { ref, onMounted, watch } from 'vue'
+import Chart, { ChartItem, ChartData } from 'chart.js/auto'
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -19,53 +19,40 @@ const props = defineProps({
     yGridLines: {
         type: Boolean,
         default: false
+    }, 
+    data: {
+        type: Object,
+        required: true
+    },
+    gradient: {
+        type: Boolean,
+        default: false
+    },
+    height: {
+        type: Number,
+        default: 400
     }
 })
 
-const chart = ref(null as any)
+const hexToRGB = (hex: string) => {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : {r: 0, g: 0, b: 0}
+}
+
+let ctx: any
+let line_chart: Chart<any, any[], unknown>
 onMounted(() => {
-    // TD: make this gradient dynamic with the data and it's colors
-    var ctx = document.getElementById(props.id)?.getContext('2d')
-    var gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
-        gradient.addColorStop(0, 'rgba(86, 138, 217,0.28)')   
-        gradient.addColorStop(1, 'rgba(86, 138, 217,0)') 
-    chart.value = new Chart(document.getElementById(props.id) as ChartItem , {
+    ctx = document.getElementById(props.id)?.getContext('2d')
+    line_chart = new Chart(ctx, {
         type : 'line',
-		data : {
-			labels : [ 'Jan 22', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
-             'Sep', 'Oct', 'Nov', 'Dec', 'Jan 23', 'Feb', 'Mar' ],
-			datasets : [
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (250 - 200 + 1) + 200)),
-                    label : 'Primary Account',
-                    borderColor : '#2F80ED',
-                    fill: true,
-                    backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (150 - 100 + 1) + 100)),
-                    label : '-',
-                    borderColor : '#A8C8F3',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (50 - 0 + 1) + 50)),
-                    label : '-',
-                    borderColor : '#53389E',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                }
-            ]
-		},
+		data : props.data as ChartData<any>,
 		options : {
-            responsive: false,
+            responsive: true,
             maintainAspectRatio: false,
             plugins: {
                 legend: {
@@ -99,7 +86,7 @@ onMounted(() => {
                     },
                 }
             }
-		}
+        }
     })
 
     const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
@@ -112,17 +99,41 @@ onMounted(() => {
             WIDTH = line_chart_container_el.offsetWidth
             HEIGHT = line_chart_container_el.offsetHeight
         }
-        chart.value.resize(WIDTH -20 , HEIGHT)
+        line_chart.resize(WIDTH , HEIGHT )
     }
     if(line_chart_container_el){
         new ResizeObserver(outputsize).observe(line_chart_container_el)   
     }
 })
+
+watch(props, ()=> {
+    if(line_chart.data !== props.data){
+        line_chart.data = props.data
+
+        if(props.gradient){
+            
+            for (let i = 0; i < line_chart.data.datasets.length; i++) {
+                if(line_chart.data.datasets[i].backgroundColor){
+                    let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
+                    let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
+
+                    gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
+                    gradient.addColorStop(1, 'rgba(0, 0, 0,0)') 
+
+                    line_chart.data.datasets[i].backgroundColor = gradient
+                }
+            }
+        }
+
+        line_chart.update()
+    }
+    
+})
 </script>
 
 <template>
   <div 
-    class="h-full w-full"
+    class="w-full h-full"
   >
     <canvas
       :id="props.id"