Update the line chart component to be dynamic with gradient option & …

…Add needed variables to BreakdownChart component
consensusnetworks · Jun 12, 2023 · a4793f3 · a4793f3
1 parent 3cd6ede
commit a4793f3
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 104 deletions.
diff --git a/apps/web/src/components/LoadingRing.vue b/apps/web/src/components/LoadingRing.vue
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,35 @@ const props = defineProps({
     yGridLines: {
         type: Boolean,
         default: false
+    }, 
+    data: {
+        type: Object,
+        required: true
+    },
+    gradient: {
+        type: Boolean,
+        default: false
     }
 })
 
-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,24 +81,32 @@ onMounted(() => {
                     },
                 }
             }
-		}
+        }
     })
+})
+
+watch(props, (newVal, oldVal)=> {
+    if(line_chart.data !== props.data){
+        line_chart.data = props.data
 
-    const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
-    let WIDTH = 0
-    let HEIGHT =  0
+        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)
+                    console.log(rgb)
+                    gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
+                    gradient.addColorStop(1, 'rgba(0, 0, 0,0)') 
 
-     // watches for size changes... 
-    const outputsize = () => {
-        if(line_chart_container_el){
-            WIDTH = line_chart_container_el.offsetWidth
-            HEIGHT = line_chart_container_el.offsetHeight
+                    line_chart.data.datasets[i].backgroundColor = gradient
+                }
+            }
         }
-        chart.value.resize(WIDTH -20 , HEIGHT)
-    }
-    if(line_chart_container_el){
-        new ResizeObserver(outputsize).observe(line_chart_container_el)   
+
+        line_chart.update()
     }
+    
 })
 </script>
 

diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
@@ -2,13 +2,12 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Carousel from '@/components/Carousel.vue'
 import Slide from '@/components/Slide.vue'
-import LoadingRing from '@/components/LoadingRing.vue'
 
 import useWallet from '@/composables/wallet'
 
 const authFlowCardNumber = ref(1)
-const selectedAddress = ref(null as string | null)
 const selectedProivder = ref(null as null | string)
+const termsCheckbox = ref(true)
 
 const  {
   activeWallets,
@@ -19,7 +18,6 @@ const  {
 
 const show_setting_modal = ref(false)
 const openWalletConnect = ref(false)
-const openSelectAddressInput = ref(false)
 
 const handleOutsideClick = (event: any) => {
   const setting_modal = document.getElementById('setting_modal')
@@ -41,6 +39,7 @@ const handleOutsideClick = (event: any) => {
   if(connect_wallet_container && connect_wallet_card){
     if(openWalletConnect.value && connect_wallet_container.contains(event.target) && !connect_wallet_card.contains(event.target)) {
       openWalletConnect.value = false
+      authFlowCardNumber.value = 1
     }
   }
 }
@@ -57,11 +56,6 @@ const convertString = (inputString: string) => {
   return start + middle + end
 }
 
-const toggleOpenSelectAddressInput = () => {
-  openSelectAddressInput.value = !openSelectAddressInput.value
-}
-
-
 onMounted(() => {
   window.addEventListener('click', handleOutsideClick)
 })
@@ -77,17 +71,7 @@ onUnmounted(() =>{
   <div class="min-w-[360px]">
     <div>
       <div
-        class="
-      px-[60px]
-      pt-[17px]
-      pb-[19px]
-      flex
-      flex-wrap
-      gap-[20px]
-      justify-between
-      items-center
-      bg-black
-      relative"
+        class=" px-[60px] pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
         :class="openWalletConnect? 'pr-[75px]' : ''"
       >
         <img
@@ -276,6 +260,14 @@ onUnmounted(() =>{
                 </h6>
               </div>
               <div v-else>
+                <div class="my-[20px] nav_items">
+                  <input
+                    v-model="termsCheckbox"
+                    type="checkbox"
+                    class=""
+                  > By connecting my address, I certify that I have read and accept the updated 
+                  <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
+                </div> 
                 <button
                   v-for="act in userAddresses"
                   :key="act.address"