Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessarcher
jessarcher committed Oct 6, 2023
1 parent 078e344 commit 61cdc9b
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 95 deletions.
2 changes: 1 addition & 1 deletion dist/pulse.css
View file

Large diffs are not rendered by default.

196 changes: 102 additions & 94 deletions resources/views/livewire/queues.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</x-pulse::card-header>

<x-pulse::card-body :expand="$expand" wire:poll.5s="">
<div class="grid gap-4 mx-px mb-px">
<div class="grid gap-3 mx-px mb-px">
@foreach ($queues as $queue => $readings)
<div>
<h3 class="font-bold text-gray-700 dark:text-gray-300">
Expand All @@ -36,111 +36,119 @@
@endif
</h3>
@php $latest = $readings->last() @endphp
<div
wire:ignore
class="h-12 mt-1"
x-data="{
init() {
let chart = new Chart(
this.$refs.canvas,
{
type: 'line',
data: {
labels: @js(collect($readings)->pluck('date')),
datasets: [
{
label: 'Queued',
borderColor: 'rgba(147,51,234,0.5)',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('queued')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
{
label: 'Processed',
borderColor: '#9333ea',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('processed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
{
label: 'Failed',
borderColor: '#e11d48',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('failed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
],
},
options: {
maintainAspectRatio: false,
layout: {
autoPadding: false,
padding: {
top: 2,
},
@php
$highest = $readings->map(fn ($reading) => max(
$reading->queued,
$reading->processed,
$reading->failed,
))->max()
@endphp

<div class="mt-3 relative">
<div class="absolute -left-px -top-2 max-w-fit h-4 flex items-center px-1 text-xs leading-none text-white font-bold bg-purple-500 rounded after:[--triangle-size:4px] after:border-l-purple-500 after:absolute after:right-[calc(-1*var(--triangle-size))] after:top-[calc(50%-var(--triangle-size))] after:border-t-[length:var(--triangle-size)] after:border-b-[length:var(--triangle-size)] after:border-l-[length:var(--triangle-size)] after:border-transparent">{{ number_format($highest) }}</div>

<div
wire:ignore
class="h-12"
x-data="{
init() {
let chart = new Chart(
this.$refs.canvas,
{
type: 'line',
data: {
labels: @js(collect($readings)->pluck('date')),
datasets: [
{
label: 'Queued',
borderColor: 'rgba(147,51,234,0.5)',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('queued')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
{
label: 'Processed',
borderColor: '#9333ea',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('processed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
{
label: 'Failed',
borderColor: '#e11d48',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('failed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
},
],
},
scales: {
x: {
display: false,
grid: {
display: false,
options: {
maintainAspectRatio: false,
layout: {
autoPadding: false,
padding: {
top: 1,
},
},
y: {
display: false,
min: 1,
// max: 100,
grid: {
scales: {
x: {
display: false,
},
y: {
display: false,
min: 1,
ticks: {
stepSize: 1,
},
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
title: () => '',
label: (context) => `${context.label} - ${context.dataset.label}: ${context.formattedValue}`
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
title: () => '',
label: (context) => `${context.label} - ${context.dataset.label}: ${context.formattedValue}`
},
displayColors: false,
},
displayColors: false,
},
},
},
}
)
}
)
Livewire.on('queues-chart-update', ({ queues }) => {
if (chart === undefined) {
return
}
Livewire.on('queues-chart-update', ({ queues }) => {
if (chart === undefined) {
return
}
if (queues['{{ $queue }}'] === undefined && chart) {
chart.destroy()
chart = undefined
return
}
if (queues['{{ $queue }}'] === undefined && chart) {
chart.destroy()
chart = undefined
return
}
chart.data.labels = queues['{{ $queue }}'].map(reading => reading.date)
chart.data.datasets[0].data = queues['{{ $queue }}'].map(reading => reading.queued)
chart.data.datasets[1].data = queues['{{ $queue }}'].map(reading => reading.processed)
chart.data.datasets[2].data = queues['{{ $queue }}'].map(reading => reading.failed)
chart.update()
})
}
}"
>
<canvas x-ref="canvas" class="w-full ring-1 ring-gray-900/10 dark:ring-gray-100/10 bg-white dark:bg-gray-800 rounded-md shadow-sm"></canvas>
chart.data.labels = queues['{{ $queue }}'].map(reading => reading.date)
chart.data.datasets[0].data = queues['{{ $queue }}'].map(reading => reading.queued)
chart.data.datasets[1].data = queues['{{ $queue }}'].map(reading => reading.processed)
chart.data.datasets[2].data = queues['{{ $queue }}'].map(reading => reading.failed)
chart.update()
})
}
}"
>
<canvas x-ref="canvas" class="ring-1 ring-gray-900/10 dark:ring-gray-100/10 bg-white dark:bg-gray-800 rounded-md shadow-sm"></canvas>
</div>
</div>
</div>
@endforeach
Expand Down
1 change: 1 addition & 0 deletions src/Queries/Queues.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ public function __invoke(Interval $interval): Collection
->get()
->reverse()
->groupBy(fn ($value) => "{$value->connection}:{$value->queue}")
->sortKeys()
->map(function (Collection $readings) use ($secondsPerPeriod, $padding) {
$readings = $readings
->mapWithKeys(function (stdClass $reading) use ($secondsPerPeriod) {
Expand Down

0 comments on commit 61cdc9b

Please sign in to comment.