added fake data for apex charts using php
also added wishlist badge
This commit is contained in:
hackerESQ
@@ -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);
|
||||
$data = json_encode($data)
|
||||
], $seriesData);
|
||||
$seriesData = json_encode($seriesData)
|
||||
@endphp
|
||||
|
||||
<div
|
||||
id="chart"
|
||||
wire:key="{{ rand() }}"
|
||||
x-data="{
|
||||
data: {{ $data }},
|
||||
data: {{ $seriesData }},
|
||||
init(){
|
||||
|
||||
this.data.series = [{
|
||||
'name': 'Total Views',
|
||||
'data': generateDayWiseTimeSeries(0, 18)
|
||||
},{
|
||||
'name': 'Unique Views',
|
||||
'data': generateDayWiseTimeSeries(1, 18)
|
||||
}]
|
||||
|
||||
var charts = document.querySelectorAll('.apex-chart')
|
||||
charts.forEach((chart)=>{
|
||||
console.log(chart)
|
||||
})
|
||||
|
||||
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>
|
||||
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -30,96 +30,92 @@ 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
|
||||
],
|
||||
|
||||
]
|
||||
],
|
||||
'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'
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
];
|
||||
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')
|
||||
],
|
||||
[
|
||||
'name' => 'Second Views',
|
||||
'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
|
||||
],
|
||||
],
|
||||
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
|
||||
}; ?>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="flex items-center">
|
||||
|
||||
<h2 class="text-xl mr-4">Performance</h2>
|
||||
<div id="chart-legend-dashboard" 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 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-dashboard" 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
|
||||
class="h-[280px] mb-5"
|
||||
>
|
||||
<x-ib-apex-chart :data="[]" name="dashboard" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-[280px] mb-5"
|
||||
>
|
||||
<x-ib-apex-chart :key="Str::uuid()" :series-data="$myChart" name="dashboard" />
|
||||
</div>
|
||||
|
||||
</x-card>
|
||||
|
||||
</div>
|
||||
|
||||
</x-card>
|
||||
|
||||
<div class="grid md:grid-cols-5 gap-5">
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
|
||||
@@ -30,23 +30,47 @@ new class extends Component {
|
||||
|
||||
public ?Portfolio $portfolio;
|
||||
|
||||
public array $myChart = [
|
||||
'type' => 'line',
|
||||
'data' => [
|
||||
'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||||
'datasets' => [
|
||||
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' => [
|
||||
[
|
||||
'label' => '# of Votes',
|
||||
'data' => [2000, 2204, 3001, 2981, 2845],
|
||||
'tension' => 0.4,
|
||||
'pointStyle' => 'rect',
|
||||
'pointRadius' => 4,
|
||||
'pointHoverRadius' => 6
|
||||
],
|
||||
|
||||
]
|
||||
],
|
||||
];
|
||||
'name' => 'Total Views',
|
||||
'data' => $this->generateDateSeries('2024-01-01', '2024-08-01')
|
||||
],
|
||||
[
|
||||
'name' => 'Second Views',
|
||||
'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,48 +98,42 @@ 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">
|
||||
|
||||
<div class="flex items-center">
|
||||
|
||||
<h2 class="text-xl mr-4">Performance</h2>
|
||||
<div id="chart-legend-portfolio-{{ $portfolio->id }}" 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 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-portfolio-{{ $portfolio->id }}" class="flex space-around"></div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- <div
|
||||
class="h-[280px]"
|
||||
|
||||
<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'] }}')"
|
||||
/>
|
||||
|
||||
> --}}
|
||||
<x-ib-apex-chart :data="[]" name="portfolio-{{ $portfolio->id }}" />
|
||||
{{-- </div> --}}
|
||||
@endforeach
|
||||
</x-menu>
|
||||
</x-dropdown>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-[280px] mb-5"
|
||||
|
||||
>
|
||||
<x-ib-apex-chart :series-data="$myChart" :key="Str::uuid()" name="portfolio-{{ $portfolio->id }}" />
|
||||
</div>
|
||||
|
||||
</x-card>
|
||||
</x-card>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-5 gap-5">
|
||||
<x-stat
|
||||
class="bg-slate-100 dark:bg-base-200"
|
||||
|
||||
Reference in New Issue
Block a user