Skip to content

Commit

Permalink
Update table chart to include multiple lines
Browse files Browse the repository at this point in the history
  • Loading branch information
@DemogorGod
DemogorGod committed May 22, 2023
1 parent 31a7389 commit 7db8044
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 114 deletions.
40 changes: 33 additions & 7 deletions apps/web/src/components/charts/LineChartJS.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,45 @@ const props = defineProps({
const chart = ref(null as any)
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 , {
type : 'line',
data : {
labels : [ 'Jan 22', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec', 'Jan 23', 'Feb', 'Mar' ],
datasets : [
{
data : [ 186, 205, 1321, 1516, 2107, 5478, 186, 205,
2191, 3133, 3221, 4783, 5478, 186, 205 ],
label : 'Net Value',
borderColor : '#C1D3F8',
fill: false,
}]
{
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
}
]
},
options : {
responsive: false,
Expand Down
276 changes: 174 additions & 102 deletions apps/web/src/layouts/default-layout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import useWallet from '@/composables/wallet'
const {
activeWallets
} = useWallet()
const show_setting_modal = ref(false)
const openWalletConnect = ref(false)
const handleOutsideClick = (event: any) => {
const setting_modal = document.getElementById('setting_modal')
Expand All @@ -16,8 +24,18 @@ const handleOutsideClick = (event: any) => {
}
}
}
const connect_wallet_container = document.getElementById('connect_wallet_container')
const connect_wallet_card = document.getElementById('connect_wallet_card')
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
}
}
}
onMounted(() => {
window.addEventListener('click', handleOutsideClick)
})
Expand All @@ -29,124 +47,178 @@ onUnmounted(() =>{

<template>
<div>
<div class="px-[60px] pt-[17px] pb-[19px] flex justify-between items-center bg-black relative">
<img
src="/casimir.svg"
alt="Casimir Logo"
class="w-[21px]"
<div>
<div
class="px-[60px] pt-[17px] pb-[19px] flex justify-between items-center bg-black relative"
>

<div class="flex items-center gap-50 h-full">
<router-link
to="/"
class="nav_items_active"
<img
src="/casimir.svg"
alt="Casimir Logo"
class="w-[21px]"
>
Overview
</router-link>
<router-link
to="/"
class="nav_items"
>
Staking
</router-link>
<router-link
to="/"
class="nav_items"
>
Exports
</router-link>
<router-link
to="/"
class="nav_items"
>
Resources
</router-link>
</div>

<div class="flex items-center justify-between gap-[45px] text-white">
<button
id="setting_modal_button"
<div class="flex items-center gap-50 h-full">
<router-link
to="/"
class="nav_items_active"
>
Overview
</router-link>
<router-link
to="/"
class="nav_items"
>
Staking
</router-link>
<router-link
to="/"
class="nav_items"
>
Exports
</router-link>
<router-link
to="/"
class="nav_items"
>
Resources
</router-link>
</div>

<div class="flex items-center justify-between gap-[45px] text-white">
<button
id="setting_modal_button"
>
<i
data-feather="settings"
class="w-[19px] h-min"
/>
</button>

<div class="connect_wallet_gradient">
<button
class="connect_wallet flex justify-between items-center gap-[8px]"
@click="openWalletConnect = true"
>
Connect Wallet
</button>
</div>
</div>

<div
v-show="show_setting_modal"
id="setting_modal"
class="absolute right-[60px] bg-white top-[100%] w-[200px] setting_modal"
>
<i
data-feather="settings"
class="w-[19px] h-min"
/>
</button>

<div class="connect_wallet_gradient">
<button class="connect_wallet flex justify-between items-center gap-[8px]">
Connect Wallet
<button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="user"
class="w-[17px] h-min"
/>
<span>
Account
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="layers"
class="w-[17px] h-min"
/>
<span>
Chanelog
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="help-circle"
class="w-[17px] h-min"
/>
<span>
Support
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="code"
class="w-[17px] h-min"
/>
<span>
API
</span>
</button>
<button class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="log-out"
class="w-[17px] h-min"
/>
<span>
Log out
</span>
</button>
</div>
</div>

<div
v-show="show_setting_modal"
id="setting_modal"
class="absolute right-[60px] bg-white top-[100%] w-[200px] setting_modal"
class="relative text-black"
:class="openWalletConnect? 'overflow-hidden h-[90vh]' : 'overflow-auto'"
>
<button class="border-b border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="user"
class="w-[17px] h-min"
/>
<span>
Account
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="layers"
class="w-[17px] h-min"
/>
<span>
Chanelog
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="help-circle"
class="w-[17px] h-min"
/>
<span>
Support
</span>
</button>
<button class="flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="code"
class="w-[17px] h-min"
/>
<span>
API
</span>
</button>
<button class="border-t border-[#EAECF0] flex items-center px-[16px] py-[10px] gap-[12px] w-full">
<i
data-feather="log-out"
class="w-[17px] h-min"
/>
<span>
Log out
</span>
</button>
<slot style="z-index: 1;" />
<div
class="bg-black h-[207px] w-full absolute top-0 left-0"
style="z-index: -1;"
/>

<div class="bg-black w-full h-[67px] mt-[160px]" />
</div>
</div>


<div class="relative text-black">
<slot style="z-index: 1;" />
<div
class="bg-black h-[207px] w-full absolute top-0 left-0"
style="z-index: -1;"
/>

<div class="bg-black w-full h-[67px] mt-[160px]" />
<div
v-if="openWalletConnect"
id="connect_wallet_container"
class="w-full h-full bg-[#121212]/[0.23] absolute
z-[20] top-0 left-0 flex items-center justify-center"
>
<div
id="connect_wallet_card"
class="bg-white text-black card px-[40px] py-[25px] min-w-[300px] max-w-[500px] h-min"
>
<div class="nav_items">
Connect Wallet
</div>
<div class="my-[20px] nav_items">
<input
type="checkbox"
class="mb-10"
> I certify that I have read and accept teh updated
<span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
</div>
<div class="flex flex-wrap justify-between gap-[20px]">
<button
v-for="wallet in activeWallets"
:key="wallet"
class="w-[180px] h-[100px] border flex flex-col justify-center items-center rounded-[8px]"
>
<img
:src="`/${wallet.toLowerCase()}.svg`"
:alt="`${wallet} logo`"
class="w-[32px] h-[32px] rounded-[999px] mb-[10px]"
>
<h6>
{{ wallet }}
</h6>
</button>
</div>
</div>
</div>
</div>
</template>

<style scoped>
.card{
background: #FFFFFF;
border: 1px solid #D0D5DD;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.04);
border-radius: 8px;
}
.setting_modal{
background: #FFFFFF;
border: 1px solid #F2F4F7;
Expand All @@ -172,10 +244,10 @@ onUnmounted(() =>{
color: #ABABAB;
}
.nav_items:hover{
/* .nav_items:hover{
color: #FFFFFF;
border-bottom: 1px solid #9BA4B5;
}
} */
.nav_items_active{
font-family: 'IBM Plex Sans';
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/pages/overview/components/BreakdownChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ onMounted(() => {
<hr class="w-full bg-[#EAECF0] mt-[20px] mb-[24px]">
<div class="flex justify-between items-center gap-[4px]">
<div class="chart_y_label w-[18px]">
Y-axis label
Value (USD)
</div>
<div
:id="'line_chart_container_cross_provider_chart'"
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/pages/overview/components/BreakdownTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ onMounted(() => {
class="w-full text-grey_5 text-body border-b border-grey_2 h-[72px]"
>
<td class="px-[24px] py-[12px]">
<div class="flex gap-[12px] items-center">
<div class="flex gap-[12px] items-center underline">
<button class="checkbox_button mr-[12px]">
<i
data-feather="check"
Expand Down
Loading

0 comments on commit 7db8044

Please sign in to comment.