add apex chart and skeleton for dashboard type pages
This commit is contained in:
hackerESQ
Generated
+106
-1
@@ -1,9 +1,12 @@
|
||||
{
|
||||
"name": "tradethink",
|
||||
"name": "investbrain",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.51.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
@@ -747,6 +750,11 @@
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@yr/monotone-cubic-spline": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
|
||||
@@ -790,6 +798,20 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/apexcharts": {
|
||||
"version": "3.51.0",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.51.0.tgz",
|
||||
"integrity": "sha512-WpCdVdGiJjf9SAyEeg2rl3q5OqCcNqiEmH0+filMraUiH6Vqyn5GFeMMyH0pon44xjNr1G0xzIRERKRmsGEuRA==",
|
||||
"dependencies": {
|
||||
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
@@ -2206,6 +2228,89 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||
"dependencies": {
|
||||
"svg.js": ">=2.3.x"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||
},
|
||||
"node_modules/svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.4.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
|
||||
|
||||
@@ -15,5 +15,8 @@
|
||||
"postcss": "^8.4.40",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"vite": "^5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.51.0"
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+3
@@ -1,3 +1,6 @@
|
||||
import ApexCharts from 'apexcharts'
|
||||
window.ApexCharts = ApexCharts;
|
||||
|
||||
import axios from 'axios';
|
||||
window.axios = axios;
|
||||
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
@props(['data' => [], 'name' => 'apex-chart' ])
|
||||
|
||||
@php
|
||||
$data = array_merge([
|
||||
'chart' => [
|
||||
'type' => "area",
|
||||
'stacked' => true,
|
||||
'height' => 300,
|
||||
'foreColor' => "#999",
|
||||
'dropShadow' => [
|
||||
'enabled' => false,
|
||||
],
|
||||
'toolbar' => [
|
||||
'show' => false,
|
||||
],
|
||||
],
|
||||
|
||||
'colors' => ['#00E396', '#0090FF'],
|
||||
'stroke' => [
|
||||
'curve' => "smooth",
|
||||
'width' => 3
|
||||
],
|
||||
'dataLabels' => [
|
||||
'enabled' => false
|
||||
],
|
||||
'markers' => [
|
||||
'size' => 0,
|
||||
'strokeColor' => "#fff",
|
||||
'strokeWidth' => 3,
|
||||
'strokeOpacity' => 1,
|
||||
'fillOpacity' => 1,
|
||||
'hover' => [
|
||||
'size' => 6
|
||||
]
|
||||
],
|
||||
'xaxis' => [
|
||||
'type' => "datetime",
|
||||
'axisBorder' => [
|
||||
'show' => false
|
||||
],
|
||||
'axisTicks' => [
|
||||
'show' => false
|
||||
],
|
||||
'tooltip' => [
|
||||
'enabled' => false
|
||||
]
|
||||
],
|
||||
'yaxis' => [
|
||||
'labels' => [
|
||||
'offsetX' => 0,
|
||||
'offsetY' => -10
|
||||
],
|
||||
'tooltip' => [
|
||||
'enabled' => false
|
||||
]
|
||||
],
|
||||
'grid' => [
|
||||
'padding' => [
|
||||
'top' => 0,
|
||||
'left' => -30,
|
||||
'right' => 0,
|
||||
'bottom' => 15
|
||||
]
|
||||
],
|
||||
'legend' => [
|
||||
'show' => false,
|
||||
// 'position' => 'top',
|
||||
// 'horizontalAlign' => 'left'
|
||||
],
|
||||
], $data);
|
||||
$data = json_encode($data)
|
||||
@endphp
|
||||
|
||||
<div
|
||||
id="chart"
|
||||
wire:key="{{ rand() }}"
|
||||
x-data="{
|
||||
data: {{ $data }},
|
||||
init(){
|
||||
|
||||
this.data.series = [{
|
||||
'name': 'Total Views',
|
||||
'data': generateDayWiseTimeSeries(0, 18)
|
||||
},{
|
||||
'name': 'Unique Views',
|
||||
'data': generateDayWiseTimeSeries(1, 18)
|
||||
}]
|
||||
|
||||
this.data.chart.events = {
|
||||
mounted: function (chartContext, config) {
|
||||
renderCustomLegend(chartContext);
|
||||
},
|
||||
updated: function (chartContext, config) {
|
||||
renderCustomLegend(chartContext);
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
|
||||
|
||||
chart.render();
|
||||
|
||||
async function renderCustomLegend(chartContext) {
|
||||
var legendContainer = document.querySelector('#chart-legend');
|
||||
legendContainer.innerHTML = ''; // Clear any existing legend items
|
||||
|
||||
chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
|
||||
|
||||
var seriesColor = chartContext.w.config.colors[i];
|
||||
var legendItem = document.createElement('div');
|
||||
legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
|
||||
legendItem.setAttribute('data-series-index', i);
|
||||
|
||||
var colorBox = document.createElement('span');
|
||||
colorBox.id = seriesName
|
||||
colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
|
||||
colorBox.style.backgroundColor = seriesColor;
|
||||
|
||||
var labelText = document.createElement('span');
|
||||
labelText.textContent = seriesName;
|
||||
|
||||
legendItem.appendChild(colorBox);
|
||||
legendItem.appendChild(labelText);
|
||||
legendContainer.appendChild(legendItem);
|
||||
|
||||
// Initial visibility state
|
||||
console.log(chartContext.w.globals.collapsedSeriesIndices.includes(i))
|
||||
var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
|
||||
if (isCollapsed) {
|
||||
legendItem.classList.add('opacity-50');
|
||||
}
|
||||
|
||||
legendItem.addEventListener('click', function () {
|
||||
var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
|
||||
var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
|
||||
|
||||
chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
|
||||
|
||||
if (isCurrentlyCollapsed) {
|
||||
this.classList.remove('opacity-50');
|
||||
} else {
|
||||
this.classList.add('opacity-50');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function generateDayWiseTimeSeries(s, count) {
|
||||
var values = [[
|
||||
4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5
|
||||
], [
|
||||
2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2
|
||||
]];
|
||||
var i = 0;
|
||||
var series = [];
|
||||
var x = new Date('11 Nov 2012').getTime();
|
||||
while (i < count) {
|
||||
series.push([x, values[s][i]]);
|
||||
x += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div id="chart-{{ $name }}"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
<x-app-layout>
|
||||
|
||||
<div class="">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
|
||||
<div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
|
||||
|
||||
<h1 class="mt-3 text-2xl font-medium text-gray-900 dark:text-white">
|
||||
Welcome to your Jetstream application!
|
||||
</h1>
|
||||
|
||||
<p class="mt-6 text-gray-500 dark:text-gray-400 leading-relaxed">
|
||||
Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
|
||||
to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
|
||||
you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
|
||||
ecosystem to be a breath of fresh air. We hope you love it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-200 dark:bg-gray-800 bg-opacity-25 grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 p-6 lg:p-8">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
<a href="https://laravel.com/docs">Documentation</a>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
||||
Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
|
||||
</p>
|
||||
|
||||
<p class="mt-4 text-sm">
|
||||
<a href="https://laravel.com/docs" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
|
||||
Explore the documentation
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
|
||||
<path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
|
||||
<path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
|
||||
</svg>
|
||||
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
<a href="https://laracasts.com">Laracasts</a>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
||||
Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
|
||||
</p>
|
||||
|
||||
<p class="mt-4 text-sm">
|
||||
<a href="https://laracasts.com" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
|
||||
Start watching Laracasts
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
|
||||
<path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
|
||||
</svg>
|
||||
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
<a href="https://tailwindcss.com/">Tailwind</a>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
||||
Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
||||
</svg>
|
||||
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Authentication
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
|
||||
Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started with what matters most: building your application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,209 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Portfolio;
|
||||
use Livewire\Attributes\{Title, Rule};
|
||||
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' => '2M', '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
|
||||
],
|
||||
|
||||
]
|
||||
],
|
||||
'options' => [
|
||||
'scales' => [
|
||||
// 'y' => [
|
||||
// 'display' => false,
|
||||
// ],
|
||||
'x' => [
|
||||
// 'type' => 'time',
|
||||
'time' => [
|
||||
// Luxon format string
|
||||
// 'tooltipFormat' => 'DD'
|
||||
],
|
||||
],
|
||||
],
|
||||
'aspectRatio' => 0,
|
||||
'plugins' => [
|
||||
'htmlLegend' => [
|
||||
// ID of the container to put the legend in
|
||||
'containerID' => 'chart-legend',
|
||||
],
|
||||
'legend' => [
|
||||
'display' => false,
|
||||
// 'position' => 'right'
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
];
|
||||
|
||||
|
||||
}; ?>
|
||||
|
||||
<div x-data>
|
||||
|
||||
<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="mt-6 grid md:grid-cols-7 gap-5">
|
||||
|
||||
<x-ib-card title="My portfolios" 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>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
@@ -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="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="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">
|
||||
<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="mt-6 grid md:grid-cols-7 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