chart bug fix
This commit is contained in:
Naser Mansour
parent
b69b4c8be2
commit
a052266950
|
|
@ -375,99 +375,19 @@ new class extends Component
|
|||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="trendsChart($wire.chartData)"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Consultation Breakdown Chart --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<flux:heading size="sm" class="mb-4">{{ __('admin_metrics.consultation_breakdown') }}</flux:heading>
|
||||
@if ($chartData['consultationBreakdown']['free'] === 0 && $chartData['consultationBreakdown']['paid'] === 0)
|
||||
<div class="flex h-64 items-center justify-center">
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('admin_metrics.no_data_available') }}</flux:text>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="breakdownChart($wire.chartData.consultationBreakdown)"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- No-show Rate Chart --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-2">
|
||||
<flux:heading size="sm" class="mb-4">{{ __('admin_metrics.noshow_rate_trend') }}</flux:heading>
|
||||
@if (array_sum($chartData['noShowRates']) === 0)
|
||||
<div class="flex h-64 items-center justify-center">
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('admin_metrics.no_data_available') }}</flux:text>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="noShowChart($wire.chartData)"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Quick Actions Panel Section --}}
|
||||
<div class="mt-8">
|
||||
<flux:heading size="lg" class="mb-6">{{ __('widgets.quick_actions') }}</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{{-- Quick Actions Panel --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-3">
|
||||
<livewire:admin.widgets.quick-actions />
|
||||
</div>
|
||||
|
||||
{{-- Pending Bookings Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.pending-bookings />
|
||||
</div>
|
||||
|
||||
{{-- Today's Schedule Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.todays-schedule />
|
||||
</div>
|
||||
|
||||
{{-- Recent Updates Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.recent-updates />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@script
|
||||
<script>
|
||||
// Ensure Chart.js is available
|
||||
if (typeof Chart === 'undefined') {
|
||||
console.error('Chart.js is not loaded');
|
||||
}
|
||||
|
||||
Alpine.data('trendsChart', (data) => ({
|
||||
x-data="{
|
||||
chart: null,
|
||||
data: @js($chartData),
|
||||
init() {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
|
||||
this.chart = new Chart(this.$refs.canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
labels: this.data.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: @js(__('admin_metrics.new_clients')),
|
||||
data: data.newClients,
|
||||
data: this.data.newClients,
|
||||
borderColor: '#D4AF37',
|
||||
backgroundColor: 'rgba(212, 175, 55, 0.1)',
|
||||
tension: 0.3,
|
||||
|
|
@ -475,7 +395,7 @@ new class extends Component
|
|||
},
|
||||
{
|
||||
label: @js(__('admin_metrics.consultations')),
|
||||
data: data.consultations,
|
||||
data: this.data.consultations,
|
||||
borderColor: '#0A1F44',
|
||||
backgroundColor: 'rgba(10, 31, 68, 0.1)',
|
||||
tension: 0.3,
|
||||
|
|
@ -503,30 +423,41 @@ new class extends Component
|
|||
});
|
||||
},
|
||||
destroy() {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
if (this.chart) this.chart.destroy();
|
||||
}
|
||||
}
|
||||
}));
|
||||
}"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Alpine.data('breakdownChart', (data) => ({
|
||||
{{-- Consultation Breakdown Chart --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<flux:heading size="sm" class="mb-4">{{ __('admin_metrics.consultation_breakdown') }}</flux:heading>
|
||||
@if ($chartData['consultationBreakdown']['free'] === 0 && $chartData['consultationBreakdown']['paid'] === 0)
|
||||
<div class="flex h-64 items-center justify-center">
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('admin_metrics.no_data_available') }}</flux:text>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
chart: null,
|
||||
data: @js($chartData['consultationBreakdown']),
|
||||
init() {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
|
||||
const total = data.free + data.paid;
|
||||
const freePercent = total > 0 ? Math.round((data.free / total) * 100) : 0;
|
||||
const paidPercent = total > 0 ? Math.round((data.paid / total) * 100) : 0;
|
||||
|
||||
const total = this.data.free + this.data.paid;
|
||||
this.chart = new Chart(this.$refs.canvas, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
@js(__('admin_metrics.free')) + ` (${data.free})`,
|
||||
@js(__('admin_metrics.paid')) + ` (${data.paid})`
|
||||
@js(__('admin_metrics.free')) + ` (${this.data.free})`,
|
||||
@js(__('admin_metrics.paid')) + ` (${this.data.paid})`
|
||||
],
|
||||
datasets: [{
|
||||
data: [data.free, data.paid],
|
||||
data: [this.data.free, this.data.paid],
|
||||
backgroundColor: ['#D4AF37', '#0A1F44'],
|
||||
borderWidth: 0,
|
||||
}]
|
||||
|
|
@ -553,24 +484,38 @@ new class extends Component
|
|||
});
|
||||
},
|
||||
destroy() {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
if (this.chart) this.chart.destroy();
|
||||
}
|
||||
}
|
||||
}));
|
||||
}"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Alpine.data('noShowChart', (data) => ({
|
||||
{{-- No-show Rate Chart --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-2">
|
||||
<flux:heading size="sm" class="mb-4">{{ __('admin_metrics.noshow_rate_trend') }}</flux:heading>
|
||||
@if (array_sum($chartData['noShowRates']) === 0)
|
||||
<div class="flex h-64 items-center justify-center">
|
||||
<flux:text class="text-zinc-500 dark:text-zinc-400">{{ __('admin_metrics.no_data_available') }}</flux:text>
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
chart: null,
|
||||
data: @js($chartData),
|
||||
init() {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
|
||||
this.chart = new Chart(this.$refs.canvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
labels: this.data.labels,
|
||||
datasets: [{
|
||||
label: @js(__('admin_metrics.noshow_rate_percent')),
|
||||
data: data.noShowRates,
|
||||
data: this.data.noShowRates,
|
||||
borderColor: '#E74C3C',
|
||||
backgroundColor: 'rgba(231, 76, 60, 0.1)',
|
||||
fill: true,
|
||||
|
|
@ -625,11 +570,43 @@ new class extends Component
|
|||
});
|
||||
},
|
||||
destroy() {
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
if (this.chart) this.chart.destroy();
|
||||
}
|
||||
}
|
||||
}));
|
||||
</script>
|
||||
@endscript
|
||||
}"
|
||||
class="h-64"
|
||||
>
|
||||
<canvas x-ref="canvas"></canvas>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Quick Actions Panel Section --}}
|
||||
<div class="mt-8">
|
||||
<flux:heading size="lg" class="mb-6">{{ __('widgets.quick_actions') }}</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{{-- Quick Actions Panel --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800 lg:col-span-3">
|
||||
<livewire:admin.widgets.quick-actions />
|
||||
</div>
|
||||
|
||||
{{-- Pending Bookings Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.pending-bookings />
|
||||
</div>
|
||||
|
||||
{{-- Today's Schedule Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.todays-schedule />
|
||||
</div>
|
||||
|
||||
{{-- Recent Updates Widget --}}
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
<livewire:admin.widgets.recent-updates />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue