add apex chart and skeleton for dashboard type pages
This commit is contained in:
hackerESQ
@@ -7,104 +7,195 @@ use Livewire\Volt\Component;
|
||||
new class extends Component {
|
||||
|
||||
public bool $showDrawer2 = false;
|
||||
public $scope = 'YTD';
|
||||
|
||||
public function changeScope ($scope)
|
||||
{
|
||||
$this->scope = $scope;
|
||||
}
|
||||
|
||||
public function getScopeName ($scope)
|
||||
{
|
||||
return collect($this->options)->where('id', $scope)['name'];
|
||||
}
|
||||
|
||||
public $options = [
|
||||
['id' => '1M', 'name' => '1 month'],
|
||||
['id' => '3M', 'name' => '3 months'],
|
||||
['id' => 'YTD', 'name' => 'Year to date'],
|
||||
['id' => '1Y', 'name' => '1 year'],
|
||||
['id' => '3Y', 'name' => '3 years'],
|
||||
['id' => 'ALL', 'name' => 'All time']
|
||||
];
|
||||
|
||||
public ?Portfolio $portfolio;
|
||||
|
||||
|
||||
public array $myChart = [
|
||||
'type' => 'line',
|
||||
'data' => [
|
||||
'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
'datasets' => [
|
||||
[
|
||||
'label' => '# of Votes',
|
||||
'data' => [2000, 2204, 3001, 2981, 2845],
|
||||
'tension' => 0.4,
|
||||
'pointStyle' => 'rect',
|
||||
'pointRadius' => 4,
|
||||
'pointHoverRadius' => 6
|
||||
],
|
||||
|
||||
]
|
||||
],
|
||||
];
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div x-data>
|
||||
|
||||
<x-ib-drawer
|
||||
key="manage-portfolio"
|
||||
title="{{ $portfolio->title }}"
|
||||
>
|
||||
|
||||
<livewire:portfolio.manage-portfolio-form :portfolio="$portfolio" submit="update" hide-cancel />
|
||||
|
||||
</x-ib-drawer>
|
||||
|
||||
<x-ib-toolbar :title="$portfolio->title">
|
||||
|
||||
<x-button
|
||||
title="Edit Portfolio"
|
||||
icon="o-pencil"
|
||||
class="btn-circle btn-ghost btn-sm text-secondary"
|
||||
@click="$dispatch('toggle-manage-portfolio')"
|
||||
/>
|
||||
</x-ib-toolbar>
|
||||
|
||||
<div class="grid mb-6 gap-5">
|
||||
|
||||
<x-card class="bg-slate-100 dark:bg-base-200 rounded-lg ">
|
||||
|
||||
|
||||
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
|
||||
<div class="flex items-center">
|
||||
|
||||
<h2 class="text-xl mr-4">Performance</h2>
|
||||
<div id="chart-legend" class="flex space-around"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<x-dropdown label="{{ $scope }}" class="btn-ghost btn-sm" >
|
||||
|
||||
<x-menu >
|
||||
@foreach($options as $option)
|
||||
|
||||
<x-menu-item
|
||||
title="{{ $option['name'] }}"
|
||||
x-on:click="$wire.changeScope('{{ $option['id'] }}')"
|
||||
/>
|
||||
|
||||
@endforeach
|
||||
</x-menu>
|
||||
</x-dropdown>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative h-[280px]"
|
||||
|
||||
>
|
||||
<x-ib-apex-chart :data="[]" name="portfolio" />
|
||||
</div>
|
||||
|
||||
</x-card>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-5 gap-5">
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
title="Market Gain/Loss"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
/>
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
title="Total Cost Basis"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
/>
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
title="Total Market Value"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
/>
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
title="Realized Gain/Loss"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
/>
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
title="Dividends Earned"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="p-8 bg-base-200 rounded-md ">
|
||||
<div class="flex justify-between mb-8">
|
||||
<h1 class="text-2xl font-medium">{{ $portfolio->title }} </h1>
|
||||
<x-button
|
||||
title="Edit Portfolio"
|
||||
icon="o-cog-8-tooth"
|
||||
class="btn-circle btn-ghost btn-sm"
|
||||
wire:click="$toggle('showDrawer2')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-6 grid md:grid-cols-7 gap-5">
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-5">
|
||||
<x-stat
|
||||
title="Realized Gain/Loss ($)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Realized Gain/Loss (%)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Market Gain/Loss ($)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Market Gain/Loss (%)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Total Cost Basis ($)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Total Market Value ($)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Number of Transactions"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
<x-stat
|
||||
title="Dividends Earned ($)"
|
||||
description="This month"
|
||||
value="22.124"
|
||||
icon="o-arrow-trending-up"
|
||||
tooltip-bottom="There"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-5">
|
||||
<x-ib-card title="All portfolio holdings" class="md:col-span-4">
|
||||
|
||||
@php
|
||||
$users = App\Models\User::take(3)->get();
|
||||
@endphp
|
||||
|
||||
@foreach($users as $user)
|
||||
<x-list-item :item="$user" link="/docs/installation" />
|
||||
<x-list-item no-separator :item="$user" avatar="profile_photo_url" link="/docs/installation" />
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
</x-ib-card>
|
||||
|
||||
<x-ib-card title="Top performers" class="md:col-span-3">
|
||||
|
||||
@php
|
||||
$users = App\Models\User::take(3)->get();
|
||||
@endphp
|
||||
|
||||
@foreach($users as $user)
|
||||
<x-list-item no-separator :item="$user" avatar="profile_photo_url" link="/docs/installation" />
|
||||
@endforeach
|
||||
|
||||
</x-ib-card>
|
||||
|
||||
<x-ib-card title="Top headlines" class="md:col-span-3">
|
||||
|
||||
@php
|
||||
$users = App\Models\User::take(3)->get();
|
||||
@endphp
|
||||
|
||||
@foreach($users as $user)
|
||||
<x-list-item no-separator :item="$user" avatar="profile_photo_url" link="/docs/installation" />
|
||||
@endforeach
|
||||
|
||||
</x-ib-card>
|
||||
|
||||
<x-ib-card title="Recent activity" class="md:col-span-4">
|
||||
|
||||
@php
|
||||
$users = App\Models\User::take(3)->get();
|
||||
@endphp
|
||||
|
||||
@foreach($users as $user)
|
||||
<x-list-item no-separator :item="$user" avatar="profile_photo_url" link="/docs/installation" />
|
||||
@endforeach
|
||||
|
||||
</x-ib-card>
|
||||
|
||||
</div>
|
||||
|
||||
<x-drawer
|
||||
title="{{ $portfolio->title }}"
|
||||
wire:model="showDrawer2"
|
||||
class="w-11/12 lg:w-1/3"
|
||||
with-close-button
|
||||
close-on-escape
|
||||
right
|
||||
>
|
||||
<livewire:portfolio.manage-portfolio-form :portfolio="$portfolio" submit="update" hide-cancel />
|
||||
|
||||
</x-drawer>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user