diff --git a/package-lock.json b/package-lock.json index 1e2a800..eae2e39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 1c22a7c..149f150 100644 --- a/package.json +++ b/package.json @@ -15,5 +15,8 @@ "postcss": "^8.4.40", "tailwindcss": "^3.4.7", "vite": "^5.0" + }, + "dependencies": { + "apexcharts": "^3.51.0" } } diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index 5f1390b..47d6892 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -1,3 +1,6 @@ +import ApexCharts from 'apexcharts' +window.ApexCharts = ApexCharts; + import axios from 'axios'; window.axios = axios; diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php new file mode 100644 index 0000000..0d7d0a8 --- /dev/null +++ b/resources/views/components/ib-apex-chart.blade.php @@ -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 + +
+
+
+ diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php deleted file mode 100644 index f2c62d4..0000000 --- a/resources/views/dashboard.blade.php +++ /dev/null @@ -1,105 +0,0 @@ - - -
-
-
-
- -

- Welcome to your Jetstream application! -

- -

- 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. -

-
- -
-
-
- - - -

- Documentation -

-
- -

- 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. -

- -

- - Explore the documentation - - - - - -

-
- -
-
- - - -

- Laracasts -

-
- -

- 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. -

- -

- - Start watching Laracasts - - - - - -

-
- -
-
- - - -

- Tailwind -

-
- -

- 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. -

-
- -
-
- - - -

- Authentication -

-
- -

- 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. -

-
-
- -
-
-
- diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php new file mode 100644 index 0000000..743ffb6 --- /dev/null +++ b/resources/views/livewire/dashboard.blade.php @@ -0,0 +1,209 @@ +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' + ] + ] + ] + + ]; + + +}; ?> + +
+ +
+ + + + +
+ +
+ +

Performance

+
+ +
+ + + + + @foreach($options as $option) + + + + @endforeach + + + +
+ +
+ +
+ + + + +
+ +
+ + + + + + +
+ +
+ + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + +
+ +
\ No newline at end of file diff --git a/resources/views/livewire/portfolio/show.blade.php b/resources/views/livewire/portfolio/show.blade.php index c73834a..b0fdc10 100644 --- a/resources/views/livewire/portfolio/show.blade.php +++ b/resources/views/livewire/portfolio/show.blade.php @@ -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 + ], + + ] + ], + ]; }; ?> -
+
+ + + + + + + + + + + + +
+ + + + + +
+ +
+ +

Performance

+
+ +
+ + + + + @foreach($options as $option) + + + + @endforeach + + + +
+ +
+ +
+ + + +
+
+ + + + + + +
-
-
-

{{ $portfolio->title }}

- -
+
-
- - - - - - - - -
-
+ + @php $users = App\Models\User::take(3)->get(); @endphp @foreach($users as $user) - + @endforeach -
+ + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + + + + + @php + $users = App\Models\User::take(3)->get(); + @endphp + + @foreach($users as $user) + + @endforeach + + +
- - - - -
\ No newline at end of file