2024-06-11 21:33:37 +00:00
|
|
|
<template>
|
|
|
|
|
<div class="flex-1 h-full overflow-y-auto pb-0.5">
|
2024-09-16 14:26:49 +00:00
|
|
|
<div class="flex flex-wrap gap-4 items-start justify-between p-1">
|
2024-06-11 21:33:37 +00:00
|
|
|
<div class="flex-1">
|
|
|
|
|
<div class="text-muted-color font-medium leading-normal">Overview</div>
|
2024-06-11 22:07:36 +00:00
|
|
|
<div class="text-color text-3xl font-semibold leading-normal">Welcome to PrimeVue</div>
|
2024-06-11 21:33:37 +00:00
|
|
|
</div>
|
2024-09-16 14:26:49 +00:00
|
|
|
<div class="flex gap-2 whitespace-nowrap flex-nowrap">
|
2024-06-11 21:33:37 +00:00
|
|
|
<IconField iconPosition="left">
|
|
|
|
|
<InputIcon class="pi pi-search"> </InputIcon>
|
|
|
|
|
<InputText placeholder="Search" />
|
|
|
|
|
</IconField>
|
|
|
|
|
<Button severity="secondary" outlined>
|
2024-08-02 06:52:39 +00:00
|
|
|
<OverlayBadge
|
|
|
|
|
severity="danger"
|
|
|
|
|
:pt="{
|
|
|
|
|
pcbadge: {
|
|
|
|
|
root: {
|
|
|
|
|
class: '!min-w-0 !w-2.5 !h-2.5'
|
|
|
|
|
}
|
2024-06-11 21:33:37 +00:00
|
|
|
}
|
2024-08-02 06:52:39 +00:00
|
|
|
}"
|
|
|
|
|
>
|
2024-06-11 21:33:37 +00:00
|
|
|
<i class="pi pi-bell" />
|
|
|
|
|
</OverlayBadge>
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-09-16 14:26:49 +00:00
|
|
|
<div class="mt-4 flex flex-wrap gap-6 items-center justify-between p-1">
|
2024-08-02 06:52:39 +00:00
|
|
|
<SelectButton v-model="selectedTime" :options="timeOptions" aria-labelledby="basic" :allowEmpty="false" @change="changeSelect" />
|
2024-06-11 21:33:37 +00:00
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<Button label="Download" icon="pi pi-download" iconPos="right" />
|
2024-08-02 06:52:39 +00:00
|
|
|
<DatePicker v-model="dates" selectionMode="range" :manualInput="false" showIcon iconDisplay="input" placeholder="06/11/2024 - 06/22/2024" />
|
2024-06-11 21:33:37 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col gap-6 mt-6">
|
|
|
|
|
<div class="w-full border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
|
|
|
|
|
<div class="flex items-center gap-6 mb-6">
|
|
|
|
|
<div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div>
|
|
|
|
|
<div class="flex items-center gap-5">
|
|
|
|
|
<div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2">
|
2024-06-11 22:01:35 +00:00
|
|
|
<div class="w-3 h-3 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
|
2024-06-11 21:33:37 +00:00
|
|
|
<span class="font-medium text-color leading-6">{{ item.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex gap-6 xl:flex-row flex-col">
|
|
|
|
|
<div class="flex-1 border border-surface rounded-2xl py-5 px-7">
|
|
|
|
|
<div class="flex items-center gap-6 mb-4">
|
|
|
|
|
<div class="flex-1 text-color font-semibold leading-6">Transactions</div>
|
2024-08-02 06:52:39 +00:00
|
|
|
<Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
|
2024-06-11 21:33:37 +00:00
|
|
|
<Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
|
|
|
|
|
</div>
|
2024-08-02 06:52:39 +00:00
|
|
|
<DataTable
|
|
|
|
|
:value="sampleAppsTableDatas"
|
|
|
|
|
paginator
|
|
|
|
|
:rows="5"
|
|
|
|
|
dataKey="id"
|
2024-06-11 21:33:37 +00:00
|
|
|
tableClass="overflow-x-auto dark:bg-surface-950"
|
|
|
|
|
paginatorTemplate="PrevPageLink PageLinks NextPageLink CurrentPageReport RowsPerPageDropdown"
|
|
|
|
|
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
2024-08-02 06:52:39 +00:00
|
|
|
pt:pcpaginator:root="!bg-transparent"
|
|
|
|
|
:dt="{
|
2024-06-15 23:03:51 +00:00
|
|
|
header: {
|
|
|
|
|
background: 'transparent'
|
|
|
|
|
},
|
|
|
|
|
headerCell: {
|
|
|
|
|
background: 'transparent'
|
|
|
|
|
},
|
|
|
|
|
row: {
|
|
|
|
|
background: 'transparent'
|
|
|
|
|
}
|
2024-08-02 06:52:39 +00:00
|
|
|
}"
|
|
|
|
|
>
|
2024-06-11 21:33:37 +00:00
|
|
|
<Column header="Id" class="w-1/12">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<div class="text-muted-color">{{ slotProps.data.id }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Name" class="w-1/4">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<div class="flex items-center">
|
2024-08-02 06:52:39 +00:00
|
|
|
<Avatar :label="slotProps.data.name.label" class="mr-2 text-xs font-medium" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
|
2024-06-11 21:33:37 +00:00
|
|
|
<div class="leading-6 text-muted-color flex-1">{{ slotProps.data.name.text }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Coin" class="w-1/6">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<div class="flex items-center">
|
2024-08-02 06:52:39 +00:00
|
|
|
<i
|
|
|
|
|
:class="[
|
|
|
|
|
{
|
|
|
|
|
'pi pi-bitcoin text-yellow-500 !text-3xl': slotProps.data.coin !== 'btc',
|
|
|
|
|
'pi pi-ethereum bg-surface-950 text-surface-0 dark:bg-surface-0 dark:text-surface-950 w-7 h-7 rounded-full flex items-center justify-center': slotProps.data.coin !== 'eth'
|
|
|
|
|
}
|
|
|
|
|
]"
|
|
|
|
|
></i>
|
2024-06-11 21:33:37 +00:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Date" class="w-1/6">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<div class="text-muted-color">{{ slotProps.data.date }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Process" class="w-1/6">
|
|
|
|
|
<template #body="slotProps">
|
2024-08-02 06:52:39 +00:00
|
|
|
<Tag :severity="slotProps.data.process.type" :value="slotProps.data.process.value" class="font-medium"></Tag>
|
2024-06-11 21:33:37 +00:00
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Amount" class="w-1/6">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<div class="text-muted-color text-right">{{ slotProps.data.amount }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xl:w-96 border border-surface rounded-2xl py-5 px-7 flex flex-col justify-between">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center gap-6 mb-6">
|
|
|
|
|
<div class="flex-1 text-color font-semibold leading-6">My Wallet</div>
|
2024-08-02 06:52:39 +00:00
|
|
|
<Button type="button" icon="pi pi-ellipsis-h" severity="secondary" text @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
|
2024-06-11 21:33:37 +00:00
|
|
|
<Menu ref="menu" id="overlay_menu" :model="menuItems" :popup="true" />
|
|
|
|
|
</div>
|
|
|
|
|
<MeterGroup :value="metersData" labelPosition="end">
|
|
|
|
|
<template #label="{ value }">
|
|
|
|
|
<div class="flex flex-col gap-6 mt-4">
|
|
|
|
|
<template v-for="val of value" :key="val.label">
|
|
|
|
|
<div class="flex items-center gap-2">
|
2024-08-02 06:52:39 +00:00
|
|
|
<div class="w-2 h-2 rounded-full" :style="{ backgroundColor: val.color }"></div>
|
2024-06-11 21:33:37 +00:00
|
|
|
<div class="text-color uppercase font-medium leading-6 flex-1">
|
|
|
|
|
{{ val.label }}
|
|
|
|
|
<span class="text-muted-color">({{ val.value }}%)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="leading-6 font-medium text-color">{{ val.text }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</MeterGroup>
|
|
|
|
|
</div>
|
|
|
|
|
<Button label="Show All" outlined />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-11-10 19:16:58 +00:00
|
|
|
import EventBus from '@/app/AppEventBus';
|
2024-06-11 21:33:37 +00:00
|
|
|
export default {
|
|
|
|
|
name: 'Overview',
|
|
|
|
|
redrawListener: null,
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chartData: {},
|
|
|
|
|
chartOptions: {},
|
|
|
|
|
dates: [],
|
|
|
|
|
selectedTime: 'Monthly',
|
2024-07-31 19:15:41 +00:00
|
|
|
timeOptions: ['Weekly', 'Monthly', 'Yearly'],
|
2024-06-11 21:33:37 +00:00
|
|
|
menuItems: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Refresh',
|
|
|
|
|
icon: 'pi pi-refresh'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Export',
|
|
|
|
|
icon: 'pi pi-upload'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
sampleAppsTableDatas: [
|
|
|
|
|
{ id: '#1254', name: { text: 'Amy Yelsner', label: 'AY', color: 'blue' }, coin: 'btc', date: 'May 5th', process: { type: 'success', value: 'Buy' }, amount: '3.005 BTC' },
|
|
|
|
|
{ id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'success', value: 'Buy' }, amount: '0.050 ETH' },
|
|
|
|
|
{ id: '#1235', name: { text: 'Stepen Shaw', label: 'SS', color: '#ECFCCB' }, coin: 'btc', date: 'May 24th', process: { type: 'danger', value: 'Sell' }, amount: '3.050 BTC' },
|
|
|
|
|
{ id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
|
|
|
|
|
{ id: '#2355', name: { text: 'Anna Fali', label: 'AF', color: '#ECFCCB' }, coin: 'eth', date: 'Mar 17th', process: { type: 'danger', value: 'Sell' }, amount: '0.050 ETH' },
|
|
|
|
|
{ id: '#7896', name: { text: 'John Doe', label: 'JD', color: 'green' }, coin: 'btc', date: 'Jun 12th', process: { type: 'success', value: 'Buy' }, amount: '2.500 BTC' },
|
|
|
|
|
{ id: '#5648', name: { text: 'Jane Smith', label: 'JS', color: '#FFDDC1' }, coin: 'eth', date: 'Feb 23rd', process: { type: 'success', value: 'Buy' }, amount: '1.200 ETH' },
|
|
|
|
|
{ id: '#3265', name: { text: 'Michael Johnson', label: 'MJ', color: '#FFD700' }, coin: 'btc', date: 'Apr 30th', process: { type: 'danger', value: 'Sell' }, amount: '4.000 BTC' },
|
|
|
|
|
{ id: '#1423', name: { text: 'Emily Davis', label: 'ED', color: '#FFCCCB' }, coin: 'btc', date: 'Jan 15th', process: { type: 'danger', value: 'Sell' }, amount: '5.050 LTC' },
|
|
|
|
|
{ id: '#6854', name: { text: 'Robert Brown', label: 'RB', color: '#C0C0C0' }, coin: 'eth', date: 'Dec 2nd', process: { type: 'success', value: 'Buy' }, amount: '0.300 ETH' }
|
|
|
|
|
],
|
|
|
|
|
metersData: [
|
|
|
|
|
{ label: 'BTC', color: '#F59E0B', value: 15, text: '27.215' },
|
|
|
|
|
{ label: 'ETH', color: '#717179', value: 5, text: '4.367' },
|
|
|
|
|
{ label: 'GBP', color: '#22C55E', value: 25, text: '£ 147.562,32' },
|
|
|
|
|
{ label: 'EUR', color: '#84CC16', value: 11, text: '€ 137.457,25' },
|
|
|
|
|
{ label: 'USD', color: '#14B8A6', value: 29, text: '$ 133.364,12' },
|
|
|
|
|
{ label: 'XAU', color: '#EAB308', value: 29, text: '200 g' }
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount() {
|
|
|
|
|
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
|
|
|
|
|
EventBus.off('theme-palette-change', this.redrawListener);
|
|
|
|
|
},
|
2024-08-02 06:52:39 +00:00
|
|
|
mounted() {
|
2024-07-31 19:15:41 +00:00
|
|
|
this.chartData = this.setChartData(this.selectedTime);
|
2024-06-11 21:33:37 +00:00
|
|
|
this.chartOptions = this.setChartOptions();
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-06-11 21:33:37 +00:00
|
|
|
this.redrawListener = () => {
|
2024-07-31 19:15:41 +00:00
|
|
|
this.chartData = this.setChartData(this.selectedTime);
|
2024-06-11 21:33:37 +00:00
|
|
|
this.chartOptions = this.setChartOptions();
|
|
|
|
|
};
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-06-11 21:33:37 +00:00
|
|
|
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
|
|
|
|
|
EventBus.on('theme-palette-change', this.redrawListener);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2024-07-31 19:15:41 +00:00
|
|
|
changeSelect(e) {
|
2024-08-02 06:52:39 +00:00
|
|
|
this.redrawListener();
|
2024-07-31 19:15:41 +00:00
|
|
|
},
|
|
|
|
|
createDatasets(val) {
|
|
|
|
|
let data, labels;
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-07-31 19:15:41 +00:00
|
|
|
if (val === 'Weekly') {
|
|
|
|
|
labels = ['6 May', '13 May', '20 May', '27 May', '3 June', '10 June', '17 June', '24 June', '1 July', '8 July', '15 July', '22 July'];
|
|
|
|
|
data = [
|
|
|
|
|
[9000, 3000, 13000, 3000, 5000, 17000, 11000, 4000, 15000, 4000, 11000, 5000],
|
|
|
|
|
[1800, 7600, 11100, 6800, 3300, 5800, 3600, 7200, 4300, 8100, 6800, 3700],
|
|
|
|
|
[3800, 4800, 2100, 6600, 1000, 3800, 6500, 4200, 4300, 7000, 6800, 3700]
|
2024-08-02 06:52:39 +00:00
|
|
|
];
|
2024-07-31 19:15:41 +00:00
|
|
|
} else if (val === 'Monthly') {
|
2024-08-02 06:52:39 +00:00
|
|
|
labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
2024-07-31 19:15:41 +00:00
|
|
|
data = [
|
|
|
|
|
[4000, 10000, 15000, 4000, 16000, 8000, 12000, 14000, 17000, 5000, 12000, 6000],
|
|
|
|
|
[2100, 8400, 2400, 7500, 3700, 6500, 7400, 8000, 4800, 9000, 7600, 4200],
|
|
|
|
|
[4100, 5200, 2400, 7400, 2300, 4100, 7200, 8000, 4800, 9000, 7600, 4200]
|
2024-08-02 06:52:39 +00:00
|
|
|
];
|
2024-07-31 19:15:41 +00:00
|
|
|
} else if (val === 'Yearly') {
|
2024-08-02 06:52:39 +00:00
|
|
|
labels = ['2019', '2020', '2021', '2022', '2023', '2024'];
|
2024-07-31 19:15:41 +00:00
|
|
|
data = [
|
|
|
|
|
[4500, 10500, 15500, 4500, 16500, 8500, 12500, 14500, 17500, 5500, 12500, 6500],
|
|
|
|
|
[2250, 8700, 2550, 7650, 3850, 6650, 7650, 8250, 4950, 9250, 7850, 4450],
|
|
|
|
|
[4350, 5450, 2650, 7650, 2550, 4350, 7450, 8250, 4950, 9250, 7850, 4450]
|
2024-08-02 06:52:39 +00:00
|
|
|
];
|
2024-07-31 19:15:41 +00:00
|
|
|
}
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-07-31 19:15:41 +00:00
|
|
|
return {
|
|
|
|
|
data,
|
|
|
|
|
labels
|
2024-08-02 06:52:39 +00:00
|
|
|
};
|
2024-07-31 19:15:41 +00:00
|
|
|
},
|
2024-06-11 21:33:37 +00:00
|
|
|
toggle(event) {
|
|
|
|
|
this.$refs.menu.toggle(event);
|
|
|
|
|
},
|
2024-07-31 19:15:41 +00:00
|
|
|
setChartData(timeUnit) {
|
2024-08-02 06:52:39 +00:00
|
|
|
const datasets = this.createDatasets(timeUnit);
|
2024-08-01 21:08:59 +00:00
|
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
2024-08-02 06:52:39 +00:00
|
|
|
const primary200 = documentStyle.getPropertyValue('--p-primary-200');
|
|
|
|
|
const primary300 = documentStyle.getPropertyValue('--p-primary-300');
|
|
|
|
|
const primary400 = documentStyle.getPropertyValue('--p-primary-400');
|
|
|
|
|
const primary500 = documentStyle.getPropertyValue('--p-primary-500');
|
|
|
|
|
const primary600 = documentStyle.getPropertyValue('--p-primary-600');
|
|
|
|
|
|
2024-06-11 21:33:37 +00:00
|
|
|
return {
|
2024-07-31 19:15:41 +00:00
|
|
|
labels: datasets.labels,
|
2024-06-11 21:33:37 +00:00
|
|
|
datasets: [
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
label: 'Personal Wallet',
|
2024-08-01 21:08:59 +00:00
|
|
|
backgroundColor: primary400,
|
|
|
|
|
hoverBackgroundColor: primary600,
|
2024-07-31 19:15:41 +00:00
|
|
|
data: datasets.data[0],
|
2024-06-11 21:33:37 +00:00
|
|
|
barThickness: 32
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
label: 'Corporate Wallet',
|
2024-08-01 21:08:59 +00:00
|
|
|
backgroundColor: primary300,
|
|
|
|
|
hoverBackgroundColor: primary500,
|
2024-07-31 19:15:41 +00:00
|
|
|
data: datasets.data[1],
|
2024-06-11 21:33:37 +00:00
|
|
|
barThickness: 32
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
label: 'Investment Wallet',
|
2024-08-01 21:08:59 +00:00
|
|
|
backgroundColor: primary200,
|
|
|
|
|
hoverBackgroundColor: primary400,
|
2024-07-31 19:15:41 +00:00
|
|
|
data: datasets.data[2],
|
2024-06-11 21:33:37 +00:00
|
|
|
borderRadius: {
|
|
|
|
|
topLeft: 8,
|
|
|
|
|
topRight: 8
|
|
|
|
|
},
|
|
|
|
|
borderSkipped: true,
|
|
|
|
|
barThickness: 32
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
setChartOptions() {
|
2024-07-31 19:15:41 +00:00
|
|
|
const darkMode = this.$appState.darkTheme;
|
2024-06-11 21:33:37 +00:00
|
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
2024-08-02 06:52:39 +00:00
|
|
|
const surface100 = documentStyle.getPropertyValue('--p-surface-100');
|
|
|
|
|
const surface900 = documentStyle.getPropertyValue('--p-surface-900');
|
|
|
|
|
const surface400 = documentStyle.getPropertyValue('--p-surface-400');
|
|
|
|
|
const surface500 = documentStyle.getPropertyValue('--p-surface-500');
|
2024-06-11 21:33:37 +00:00
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
aspectRatio: 0.8,
|
|
|
|
|
plugins: {
|
|
|
|
|
tooltip: {
|
|
|
|
|
enabled: false,
|
|
|
|
|
position: 'nearest',
|
|
|
|
|
external: function (context) {
|
|
|
|
|
const { chart, tooltip } = context;
|
2024-07-31 19:15:41 +00:00
|
|
|
let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-07-31 19:15:41 +00:00
|
|
|
if (!tooltipEl) {
|
|
|
|
|
tooltipEl = document.createElement('div');
|
2024-08-02 06:52:39 +00:00
|
|
|
tooltipEl.classList.add(
|
|
|
|
|
'chartjs-tooltip',
|
|
|
|
|
'dark:bg-surface-950',
|
|
|
|
|
'bg-surface-0',
|
|
|
|
|
'p-3',
|
|
|
|
|
'rounded-[8px]',
|
|
|
|
|
'overflow-hidden',
|
|
|
|
|
'opacity-100',
|
|
|
|
|
'absolute',
|
|
|
|
|
'transition-all',
|
|
|
|
|
'duration-[0.1s]',
|
|
|
|
|
'pointer-events-none',
|
|
|
|
|
'shadow-[0px_25px_20px_-5px_rgba(0,0,0,0.10),0px_10px_8px_-6px_rgba(0,0,0,0.10)]'
|
|
|
|
|
);
|
2024-07-31 19:15:41 +00:00
|
|
|
chart.canvas.parentNode.appendChild(tooltipEl);
|
|
|
|
|
}
|
2024-06-11 21:33:37 +00:00
|
|
|
|
|
|
|
|
if (tooltip.opacity === 0) {
|
|
|
|
|
tooltipEl.style.opacity = 0;
|
2024-08-02 06:52:39 +00:00
|
|
|
|
2024-06-11 21:33:37 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2024-08-02 06:52:39 +00:00
|
|
|
|
|
|
|
|
const datasetPointsX = tooltip.dataPoints.map((dp) => dp.element.x);
|
2024-07-31 19:15:41 +00:00
|
|
|
const avgX = datasetPointsX.reduce((a, b) => a + b, 0) / datasetPointsX.length;
|
|
|
|
|
const avgY = tooltip.dataPoints[2].element.y;
|
2024-06-11 21:33:37 +00:00
|
|
|
|
|
|
|
|
if (tooltip.body) {
|
|
|
|
|
tooltipEl.innerHTML = '';
|
2024-08-02 06:52:39 +00:00
|
|
|
const tooltipBody = document.createElement('div');
|
|
|
|
|
|
|
|
|
|
tooltipBody.classList.add('flex', 'flex-col', 'gap-4', 'px-3', 'py-3', 'min-w-[18rem]');
|
2024-07-31 19:15:41 +00:00
|
|
|
tooltip.dataPoints.reverse().forEach((body, i) => {
|
|
|
|
|
const row = document.createElement('div');
|
2024-08-02 06:52:39 +00:00
|
|
|
|
|
|
|
|
row.classList.add('flex', 'items-center', 'gap-2', 'w-full');
|
|
|
|
|
const point = document.createElement('div');
|
|
|
|
|
|
|
|
|
|
point.classList.add('w-2.5', 'h-2.5', 'rounded-full');
|
|
|
|
|
point.style.backgroundColor = body.dataset.backgroundColor;
|
|
|
|
|
row.appendChild(point);
|
|
|
|
|
const label = document.createElement('span');
|
|
|
|
|
|
|
|
|
|
label.appendChild(document.createTextNode(body.dataset.label));
|
|
|
|
|
label.classList.add('text-base', 'font-medium', 'text-color', 'flex-1', 'text-left', 'capitalize');
|
|
|
|
|
row.appendChild(label);
|
|
|
|
|
const value = document.createElement('span');
|
|
|
|
|
|
|
|
|
|
value.appendChild(document.createTextNode(body.formattedValue));
|
|
|
|
|
value.classList.add('text-base', 'font-medium', 'text-color', 'text-right');
|
|
|
|
|
row.appendChild(value);
|
|
|
|
|
tooltipBody.appendChild(row);
|
2024-06-11 21:33:37 +00:00
|
|
|
});
|
2024-08-02 06:52:39 +00:00
|
|
|
tooltipEl.appendChild(tooltipBody);
|
2024-06-11 21:33:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
|
|
|
|
|
|
|
|
|
tooltipEl.style.opacity = 1;
|
|
|
|
|
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
2024-07-31 19:15:41 +00:00
|
|
|
tooltipEl.style.padding = 0;
|
|
|
|
|
const chartWidth = chart.width;
|
|
|
|
|
const tooltipWidth = tooltipEl.offsetWidth;
|
|
|
|
|
const chartHeight = chart.height;
|
|
|
|
|
const tooltipHeight = tooltipEl.offsetHeight;
|
|
|
|
|
|
|
|
|
|
let tooltipX = positionX + avgX + 24;
|
|
|
|
|
let tooltipY = avgY;
|
|
|
|
|
|
|
|
|
|
if (tooltipX + tooltipWidth > chartWidth) {
|
|
|
|
|
tooltipX = positionX + avgX - tooltipWidth - 20;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (tooltipY < 0) {
|
|
|
|
|
tooltipY = 0;
|
|
|
|
|
} else if (tooltipY + tooltipHeight > chartHeight) {
|
|
|
|
|
tooltipY = chartHeight - tooltipHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tooltipEl.style.left = tooltipX + 'px';
|
|
|
|
|
tooltipEl.style.top = tooltipY + 'px';
|
2024-06-11 21:33:37 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
display: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
x: {
|
|
|
|
|
stacked: true,
|
|
|
|
|
ticks: {
|
2024-07-31 19:15:41 +00:00
|
|
|
color: darkMode ? surface500 : surface400
|
2024-06-11 21:33:37 +00:00
|
|
|
},
|
|
|
|
|
grid: {
|
2024-07-31 19:15:41 +00:00
|
|
|
display: false,
|
2024-06-11 21:33:37 +00:00
|
|
|
borderColor: 'transparent'
|
2024-07-31 19:15:41 +00:00
|
|
|
},
|
|
|
|
|
border: {
|
|
|
|
|
display: false
|
2024-06-11 21:33:37 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
y: {
|
2024-07-31 19:15:41 +00:00
|
|
|
beginAtZero: true,
|
2024-06-11 21:33:37 +00:00
|
|
|
stacked: true,
|
|
|
|
|
ticks: {
|
2024-07-31 19:15:41 +00:00
|
|
|
color: darkMode ? surface500 : surface400
|
2024-06-11 21:33:37 +00:00
|
|
|
},
|
|
|
|
|
grid: {
|
2024-07-31 19:15:41 +00:00
|
|
|
display: true,
|
|
|
|
|
color: darkMode ? surface900 : surface100,
|
|
|
|
|
borderColor: 'transparent'
|
|
|
|
|
},
|
|
|
|
|
border: {
|
|
|
|
|
display: false
|
2024-06-11 21:33:37 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
2024-08-02 06:52:39 +00:00
|
|
|
}
|
2024-06-11 21:33:37 +00:00
|
|
|
},
|
|
|
|
|
components: {}
|
|
|
|
|
};
|
2024-08-02 06:52:39 +00:00
|
|
|
</script>
|
