added fake data for apex charts using php

also added wishlist badge

resources/views/components/ib-apex-chart.blade.php

@@ -1,7 +1,7 @@
-@props(['data' => [], 'name' => 'apex-chart' ])
+@props(['seriesData' => [], 'name' => 'apex-chart' ])
 
 @php
-    $data = array_merge([
+    $seriesData = array_merge([
       'chart' => [
         'type' => "area",
         'stacked' => true,
@@ -40,6 +40,10 @@
         'axisTicks' => [
           'show' => false
         ],
+        'labels' => [
+          'offsetX' => 15,
+          'offsetY' => 0
+        ],
         'tooltip' => [
           'enabled' => false
         ]
@@ -65,30 +69,37 @@
       'legend' => [
         'show' => false,
       ],
-    ], $data);
+    ], $seriesData);
-    $data = json_encode($data)
+    $seriesData = json_encode($seriesData)
 @endphp
 
     <div 
         id="chart"
         wire:key="{{ rand() }}"
         x-data="{
-            data: {{ $data }},
+            data: {{ $seriesData }},
             init(){
 
-                this.data.series = [{
+                var charts = document.querySelectorAll('.apex-chart')
-                    'name': 'Total Views',
+                charts.forEach((chart)=>{
-                    'data': generateDayWiseTimeSeries(0, 18)
+                  console.log(chart)
-                },{
+                })
-                    'name': 'Unique Views',
+
-                    'data': generateDayWiseTimeSeries(1, 18)
+                var existingChart = ApexCharts.getChartByID('{{ $name }}');
-                }]
+                if (existingChart) {
+                console.log('found it')
+                    existingChart.destroy();
+                }
+
+                console.log('did not find')
 
                 this.data.chart.events = {
                     mounted: function (chartContext, config) {
+                        console.log('moount', chartContext)
                         renderCustomLegend(chartContext);
                     },
                     updated: function (chartContext, config) {
+                        console.log('update')
                         renderCustomLegend(chartContext);
                     }
                 }
@@ -97,7 +108,7 @@
 
                 chart.render();
 
-                async function renderCustomLegend(chartContext) {
+                function renderCustomLegend(chartContext) {
                     var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
 
                     if (!legendContainer) return;
@@ -145,37 +156,9 @@
                     });
                 }
 
-                function generateRandomArray(length, min, max) {
-                  const randomArray = [];
-                  for (let i = 0; i < length; i++) {
-                    randomArray.push(Math.floor(Math.random() * (max - min + 1)) + min);
-                  }
-                  return randomArray;
-                }
-
-                function generateDayWiseTimeSeries(s, count) {
-                    var values = [
-                      generateRandomArray(20, 2, 60), 
-                      generateRandomArray(20, 2, 60)
-                    ];
-                    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 id="chart-{{ $name }}" class="apex-chart"></div>
     </div>
     

resources/views/components/ib-toolbar.blade.php

@@ -1,6 +1,6 @@
 @props(['title' => ''])
 
-<div {{ $attributes->merge(['class' => 'flex mb-6']) }} class="">
+<div {{ $attributes->merge(['class' => 'flex items-center mb-6']) }} class="">
     <h1 class="text-2xl font-medium mr-3"> {{ $title }} </h1>
     
     {{ $slot }}

resources/views/livewire/dashboard.blade.php

@@ -30,58 +30,56 @@ new class extends Component {
 
     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
-                ],
 
-            ]
+    private function generateDateSeries($startDate, $endDate) {
+        $dateArray = [];
+        $currentDate = strtotime($startDate);
+        $endDate = strtotime($endDate);
+
+        while ($currentDate <= $endDate) {
+            // Generate a random integer
+            $randomInt = rand(1000, 3000);
+
+            // Format the current date to 'Y-m-d'
+            $formattedDate = date('Y-m-d', $currentDate);
+
+            // Append the date and random integer to the array
+            $dateArray[] = [$formattedDate, $randomInt];
+
+            // Move to the next day
+            $currentDate = strtotime("+1 day", $currentDate);
+        }
+
+        return $dateArray;
+    }
+
+    public array $myChart;
+
+    public function mount() {
+
+        $this->myChart = [
+            'series' => [
+                [
+                    'name' => 'Total Views',
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
                 ],      
-        'options' => [
+                [
-            'scales' => [
+                    'name' => 'Second Views',
-                // 'y' => [
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
-                //     '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 ">
+    <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
 
 
         <div class="flex justify-between items-center mb-2">
@@ -112,14 +110,12 @@ new class extends Component {
         <div
             class="h-[280px] mb-5"
         >
-                <x-ib-apex-chart :data="[]" name="dashboard"  />
+            <x-ib-apex-chart :key="Str::uuid()" :series-data="$myChart" name="dashboard"  />
         </div>
 
 
     </x-card>
 
-    </div>
-    
     <div class="grid md:grid-cols-5 gap-5">
         <x-stat
             class="bg-slate-100 dark:bg-base-200"

resources/views/livewire/portfolio/show.blade.php

@@ -30,23 +30,47 @@ new class extends Component {
 
     public ?Portfolio $portfolio;
 
-    public array $myChart = [
+    private function generateDateSeries($startDate, $endDate) {
-        'type' => 'line',
+        $dateArray = [];
-        'data' => [
+        $currentDate = strtotime($startDate);
-            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+        $endDate = strtotime($endDate);
-            'datasets' => [
+
+        while ($currentDate <= $endDate) {
+            // Generate a random integer
+            $randomInt = rand(1000, 3000);
+
+            // Format the current date to 'Y-m-d'
+            $formattedDate = date('Y-m-d', $currentDate);
+
+            // Append the date and random integer to the array
+            $dateArray[] = [$formattedDate, $randomInt];
+
+            // Move to the next day
+            $currentDate = strtotime("+1 day", $currentDate);
+        }
+
+        return $dateArray;
+    }
+
+    public array $myChart;
+
+    public function mount() {
+
+        $this->myChart = [
+            'series' => [
                 [
-                    'label' => '# of Votes',
+                    'name' => 'Total Views',
-                    'data' => [2000, 2204, 3001, 2981, 2845],
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
-                    'tension' => 0.4,
+                ],      
-                    'pointStyle' => 'rect',
+                [
-                    'pointRadius' => 4,
+                    'name' => 'Second Views',
-                    'pointHoverRadius' => 6
+                    'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
+                ],    
             ],
 
-            ]
-        ],
         ];
+
+    }
 }; ?>
   
 <div x-data>
@@ -62,6 +86,10 @@ new class extends Component {
 
     <x-ib-toolbar :title="$portfolio->title">
 
+        @if($portfolio->wishlist)
+        <x-badge value="Wishlist" class="badge-primary mr-3" />
+        @endif
+
         <x-button 
             title="Edit Portfolio" 
             icon="o-pencil" 
@@ -70,11 +98,7 @@ new class extends Component {
         />
     </x-ib-toolbar>
 
-    <div class="grid mb-6 gap-5">
+    <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
-
-        <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg ">
-
-            
 
         <div class="flex justify-between items-center mb-2">
                 
@@ -101,17 +125,15 @@ new class extends Component {
             
         </div>
         
-            {{-- <div
+        <div
-                class="h-[280px]"
+            class="h-[280px] mb-5"
             
-            > --}}
+        >
-                <x-ib-apex-chart :data="[]" name="portfolio-{{ $portfolio->id }}" />
+            <x-ib-apex-chart :series-data="$myChart" :key="Str::uuid()" name="portfolio-{{ $portfolio->id }}" />
-            {{-- </div> --}}
+        </div>
 
     </x-card>
 
-    </div>
-    
     <div class="grid md:grid-cols-5 gap-5">
         <x-stat
             class="bg-slate-100 dark:bg-base-200"