From ee2747a16227f839c9ea83e31710dcceccef9fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrei=20Ioni=C8=9B=C4=83?= <hi@andrei.io>
Date: Wed, 13 Nov 2024 16:12:57 +0000
Subject: [PATCH] wip

---
 app/Livewire/Pages/ElectionResults.php        |  9 ++--
 app/View/Components/StackedBar.php            |  7 ++-
 app/helpers.php                               |  4 +-
 resources/views/components/legend.blade.php   | 25 ++++++----
 .../views/components/stacked-bar.blade.php    | 48 ++++++++++++-------
 .../livewire/pages/election-results.blade.php | 25 ++++------
 6 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/app/Livewire/Pages/ElectionResults.php b/app/Livewire/Pages/ElectionResults.php
index c052f9b..3e4d11a 100644
--- a/app/Livewire/Pages/ElectionResults.php
+++ b/app/Livewire/Pages/ElectionResults.php
@@ -9,7 +9,6 @@
 use App\Models\Vote;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
-use Illuminate\Support\Number;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\Layout;
 use stdClass;
@@ -58,7 +57,7 @@ public function aggregate(): Collection
                 locality: $this->locality,
                 aggregate: true,
             )
-            ->withVotable()
+            ->withVotable(true)
             ->get();
 
         $total = $result->sum('votes');
@@ -66,7 +65,8 @@ public function aggregate(): Collection
         return $result
             ->map(fn (Vote $vote) => [
                 'name' => $vote->votable->acronym ?? $vote->votable->name,
-                'votes' => Number::format(ensureNumeric($vote->votes)),
+                'image' => $vote->votable->getFirstMediaUrl(),
+                'votes' => ensureNumeric($vote->votes),
                 'percent' => percent($vote->votes, $total),
                 'color' => hex2rgb($vote->votable->color ?? $this->fallbackColor),
             ]);
@@ -106,8 +106,7 @@ public function data(): Collection
 
                 return [
                     $vote->place => [
-                        'value' => Number::format(ensureNumeric($vote->votes)),
-                        'percent' => percent($vote->votes, $vote->total_votes, formatted: true),
+                        'value' => percent($vote->votes, $vote->total_votes, formatted: true),
                         'color' => $votable->color,
                         'label' => $votable->getDisplayName(),
                     ],
diff --git a/app/View/Components/StackedBar.php b/app/View/Components/StackedBar.php
index ceb7036..5d0c40c 100644
--- a/app/View/Components/StackedBar.php
+++ b/app/View/Components/StackedBar.php
@@ -32,12 +32,15 @@ protected function limit(Collection $items): Collection
             return $items;
         }
 
+        $totalVotes = $items->sum('votes');
+
         $items = $items->take($this->maxItems);
 
         $items->push([
-            'name' => 'Other',
+            'name' => __('app.others'),
             'percent' => 100 - $items->sum('percent'),
-            'color' => $this->fallbackColor,
+            'votes' => $totalVotes - $items->sum('votes'),
+            'color' => hex2rgb($this->fallbackColor),
         ]);
 
         return $items;
diff --git a/app/helpers.php b/app/helpers.php
index 3fc8f45..e5fe75a 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -2,6 +2,8 @@
 
 declare(strict_types=1);
 
+use Illuminate\Support\Number;
+
 if (! function_exists('ensureNumeric')) {
     function ensureNumeric(int|float|string $value): int|float
     {
@@ -34,7 +36,7 @@ function percent(int|float|string $value, int|float|string $max, int $precision
         $percent = (float) number_format(min(100, max(0, $value / $max * 100)), $precision);
 
         if ($formatted) {
-            $percent = sprintf('%s%%', $percent);
+            $percent = Number::percentage($percent, $precision);
         }
 
         return $percent;
diff --git a/resources/views/components/legend.blade.php b/resources/views/components/legend.blade.php
index 2ebf910..47a7365 100644
--- a/resources/views/components/legend.blade.php
+++ b/resources/views/components/legend.blade.php
@@ -1,12 +1,19 @@
-@php
+<li
+    {{ $attributes->merge(['style' => "--color-custom: {$color};"])->class(['flex gap-2', 'items-center flex-wrap' => blank($image), 'items-start' => filled($image)]) }}>
+    @if ($image)
+        <img src="{{ $image }}" alt="{{ $label }}" class="w-12 h-12" />
 
-@endphp
+        <div class="overflow-hidden">
+            <div class="flex items-center gap-2">
+                <span class="block w-4 h-4 bg-custom shrink-0"></span>
+                <span class="truncate">{{ $label }}</span>
+            </div>
+            <span>{{ $description }}</span>
+        </div>
+    @else
+        <span class="block w-4 h-4 bg-custom shrink-0"></span>
 
-<li {{ $attributes->merge([
-    'class' => 'flex items-center gap-2',
-    'style' => "--color-custom: {$color};",
-]) }}>
-    <span class="block w-4 h-4 bg-custom"></span>
-    <span>{{ $label }}</span>
-    <span>{{ $description }}</span>
+        <span class="inline">{{ $label }}</span>
+        <span class="inline">{{ $description }}</span>
+    @endif
 </li>
diff --git a/resources/views/components/stacked-bar.blade.php b/resources/views/components/stacked-bar.blade.php
index 00d952e..f1830d7 100644
--- a/resources/views/components/stacked-bar.blade.php
+++ b/resources/views/components/stacked-bar.blade.php
@@ -2,23 +2,35 @@
     $cursor = 0;
 @endphp
 
-<svg preserveAspectRatio="none" viewBox="0 0 100 80" class="w-full h-20">
-    @foreach ($items as $item)
-        <rect
-            x="{{ $cursor }}"
-            width="{{ $item['percent'] }}"
-            y="8"
-            height="64"
-            fill="rgb({{ $item['color'] }})" />
+<div class="grid gap-2">
+    <svg preserveAspectRatio="none" viewBox="0 0 100 80" class="w-full h-20">
+        @foreach ($items as $item)
+            <rect
+                x="{{ $cursor }}"
+                width="{{ $item['percent'] }}"
+                y="8"
+                height="64"
+                fill="rgb({{ $item['color'] }})" />
 
-        @php
-            $cursor += $item['percent'];
-        @endphp
-    @endforeach
+            @php
+                $cursor += $item['percent'];
+            @endphp
+        @endforeach
 
-    @if ($showThreshold)
-        <line x1="50" x2="50" y1="0" y2="80" vector-effect="non-scaling-stroke"
-            strokeWidth="1.5"
-            stroke="#443F46" />
-    @endif
-</svg>
+        @if ($showThreshold)
+            <line x1="50" x2="50" y1="0" y2="80" vector-effect="non-scaling-stroke"
+                strokeWidth="1.5"
+                stroke="#443F46" />
+        @endif
+    </svg>
+
+    <ul class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        @foreach ($items as $item)
+            <x-legend
+                :image="data_get($item, 'image')"
+                :label="$item['name']"
+                :description="sprintf('%s (%s)', Number::percentage($item['percent'], 2), Number::format($item['votes']))"
+                :color="$item['color']" />
+        @endforeach
+    </ul>
+</div>
diff --git a/resources/views/livewire/pages/election-results.blade.php b/resources/views/livewire/pages/election-results.blade.php
index da9696b..62ddbe7 100644
--- a/resources/views/livewire/pages/election-results.blade.php
+++ b/resources/views/livewire/pages/election-results.blade.php
@@ -4,19 +4,7 @@
     {{ $this->form }}
 
     @if (filled($this->aggregate))
-        <div class="grid gap-2">
-            <x-stacked-bar :maxItems="4" :items="$this->aggregate" />
-
-            <ul>
-                @foreach ($this->aggregate as $item)
-                    <x-legend
-                        :label="$item['name']"
-                        :description="sprintf('%s (%s)', $item['percent'], $item['votes'])"
-                        :color="$item['color']" />
-                @endforeach
-
-            </ul>
-        </div>
+        <x-stacked-bar :maxItems="4" :items="$this->aggregate" />
     @endif
 
     <livewire:map
@@ -29,6 +17,7 @@
     <x-table>
         <x-slot:header>
             <x-table.row>
+                <x-table.th></x-table.th>
                 <x-table.th align="left">
                     Partid / Alianță / Candidat independent
                 </x-table.th>
@@ -45,16 +34,20 @@
 
         @foreach ($this->aggregate as $row)
             <x-table.row :hiddenByDefault="$loop->index >= 5">
+                <x-table.td class="w-16 ">
+                    <img src="{{ data_get($row, 'image') }}" alt="" class="w-10 h-10" />
+                </x-table.td>
+
                 <x-table.td align="left">
-                    {{ data_get($row, 'name', '-') }}
+                    {{ $row['name'] }}
                 </x-table.td>
 
                 <x-table.td align="right" class="w-1">
-                    {{ data_get($row, 'votes', '-') }}
+                    {{ Number::format($row['votes']) }}
                 </x-table.td>
 
                 <x-table.td align="right" class="w-1">
-                    {{ data_get($row, 'percent', '-') }}
+                    {{ Number::percentage($row['percent'], 2) }}
                 </x-table.td>
             </x-table.row>
         @endforeach