Add charts

app/Http/Resources/FloorPricesCollection.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class FloorPricesCollection extends ResourceCollection
+{
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}

app/Http/Resources/FloorPricesResource.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class FloorPricesResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'time' => $this->created_at->getTimeStamp(),
+            'value' => $this->price_in_sats / 100000000,
+        ];
+    }
+}

app/Providers/AppServiceProvider.php

@@ -5,6 +5,7 @@
 use App\Ninja5;
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Http\Resources\Json\JsonResource;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -18,5 +19,7 @@ public function boot(): void
         View::share('ninja5', new Ninja5(
             config('ninja5')
         ));
+
+        JsonResource::withoutWrapping();
     }
 }

resources/js/app.js

@@ -1,4 +1,4 @@
-// import './bootstrap';
+import './bootstrap';
 
 import { codeToHtml } from 'shiki'
 

resources/js/chart.js

@@ -0,0 +1,45 @@
+import { createChart } from 'lightweight-charts';
+
+const url = '/api/chart';
+const response = await axios.get(url);
+
+const chart = createChart(
+    document.getElementById('trading-view-charts'),
+    {
+        layout: {
+            background: { color: '#ff5400' },
+            textColor: '#fff',
+        },
+        grid: {
+            vertLines: { color: '#c2410c' },
+            horzLines: { color: '#c2410c' },
+        },
+        handleScroll: {
+            mouseWheel: false,
+            pressedMouseMove: false,
+            horzTouchDrag: false,
+            vertTouchDrag: false,
+        },
+        handleScale: {
+            mouseWheel: false,
+            pinch: false,
+        },
+    }
+);
+
+const priceFormatter = p => p.toFixed(2);
+
+chart.applyOptions({
+    localization: {
+        priceFormatter: priceFormatter,
+    },
+});
+
+chart.timeScale().fitContent();
+
+const areaSeries = chart.addAreaSeries({
+    lineColor: '#f97316', topColor: '#fb923c',
+    bottomColor: 'rgba(67, 20, 7, 0.28)',
+});
+
+areaSeries.setData(response.data);

resources/views/components/chart.blade.php

@@ -0,0 +1,19 @@
+<div id="trading-view-charts" class="w-full h-96">
+
+</div>
+
+<div class="w-full flex mt-4 pr-4 lg:pr-12 justify-end text-gray-600">
+    <span class="sr-only">Trading View Charts</span>
+    <a
+        href="https://www.tradingview.com"
+        target="_blank"
+        rel="noopener"
+        class="text-white hover:text-gray-200"
+    >
+        <x-icon-tradingview class="h-4 lg:h-6" />
+    </a>
+</div>
+
+@pushOnce('scripts')
+    @vite('resources/js/chart.js')
+@endPushOnce

resources/views/components/layout/main.blade.php

@@ -27,6 +27,7 @@
 
         <x-layout.footer/>
 
+        @vite('resources/js/app.js')
         @stack('scripts')
     </body>
 </html>

resources/views/welcome.blade.php

@@ -11,6 +11,8 @@
 
     <x-stats/>
 
+    <x-chart/>
+
     <div class="mx-auto max-w-7xl px-0 sm:px-4 lg:px-8">
         <div class="mx-auto max-w-2xl">
             <div class="mt-10 flex flex-col md:flex-row justify-center items-center mx-12">

routes/web.php

@@ -1,14 +1,16 @@
 <?php
 
-use App\Http\Controllers\CollectionController;
+use App\Models\FloorPrice;
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\SearchController;
 use App\Http\Controllers\ContentController;
-use App\Http\Controllers\DownloadSvgController;
+use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\HomepageController;
-use App\Http\Controllers\InscriptionController;
+use App\Http\Resources\FloorPricesCollection;
+use App\Http\Controllers\CollectionController;
 use App\Http\Controllers\PizzaNinjaController;
-use App\Http\Controllers\ProfileController;
-use App\Http\Controllers\SearchController;
-use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\DownloadSvgController;
+use App\Http\Controllers\InscriptionController;
 
 Route::get('/', HomepageController::class)
     ->name('home');
@@ -41,3 +43,9 @@
     ->name('download-svg');
 
 Route::post('/search', SearchController::class)->name('search');
+
+Route::get('/api/chart', function () {
+    return new FloorPricesCollection(
+        FloorPrice::take(1000)->latest()->get()->reverse()
+    );
+});

tests/Feature/RetrieveChartDataTest.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class RetrieveChartDataTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function a_request_to_the_homepage_should_return_a_200_status_code(): void
+    {
+        $this->get('/api/chart')->assertOk();
+    }
+}

vite.config.js

@@ -4,7 +4,11 @@ import laravel from 'laravel-vite-plugin';
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: [
+                'resources/css/app.css',
+                'resources/js/app.js',
+                'resources/js/chart.js'
+            ],
             refresh: true,
         }),
     ],