feat: map totals (#93)

* feat: map totals

* embed

app/Livewire/Map.php

@@ -22,6 +22,12 @@ class Map extends Component
 
     public bool $embed = false;
 
+    public int|float|null $totalValue = null;
+
+    public ?string $totalValueFormatted = null;
+
+    public ?string $totalLabel = null;
+
     #[Computed]
     public function file(): string
     {
@@ -32,6 +38,16 @@ public function file(): string
         };
     }
 
+    #[Computed]
+    public function showOverlay(): bool
+    {
+        if ($this->level->isNot(DataLevel::TOTAL)) {
+            return false;
+        }
+
+        return filled($this->totalValue) || filled($this->totalValueFormatted) || filled($this->totalLabel);
+    }
+
     public function render()
     {
         return view('livewire.map');

package.json

@@ -8,6 +8,7 @@
     "devDependencies": {
         "@iframe-resizer/child": "^5.3.2",
         "@ryangjchandler/alpine-clipboard": "^2.3.0",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
         "autoprefixer": "^10.4.20",

resources/views/livewire/embeds/election-turnouts.blade.php

@@ -21,6 +21,10 @@
         :country="$country"
         :county="$county"
         :level="$level"
+        :total-value="percent($this->aggregate?->value, $this->aggregate?->max)"
+        :total-value-formatted="percent($this->aggregate?->value, $this->aggregate?->max, formatted: true)"
+        :total-label="__('app.navigation.turnout')"
         :data="$this->data->toArray()"
+        :legend="$this->getLegend()"
         embed />
 </div>

resources/views/livewire/map.blade.php

@@ -1,6 +1,24 @@
-<div
-    class="block h-[600px] outline-none z-[1]"
-    data-url="{{ Vite::asset("resources/geojson/{$this->file}.geojson") }}"
-    x-data="map"
-    x-resize="resize"
-    x-cloak></div>
+<div class="relative">
+    <div
+        class="block h-[600px] outline-none z-[1]"
+        data-url="{{ Vite::asset("resources/geojson/{$this->file}.geojson") }}"
+        x-data="map"
+        x-resize="resize"
+        x-cloak></div>
+
+    @if ($this->showOverlay)
+        <div @class([
+            'absolute inset-0 z-10 flex flex-col items-center justify-center leading-0',
+            '@container',
+            'text-purple-950' => filled($legend) && $this->totalValue < 50,
+            'text-purple-50' => filled($legend) && $this->totalValue >= 50,
+        ])>
+            <div class="text-3xl font-bold @md:text-5xl @xl:text-6xl">
+                {{ $this->totalValueFormatted ?? $this->totalValue }}
+            </div>
+            <div class="text-sm @sm:text-base @md:text-lg @lg:text-xl">
+                {{ $this->totalLabel }}
+            </div>
+        </div>
+    @endif
+</div>

resources/views/livewire/pages/election-turnouts.blade.php

@@ -34,6 +34,9 @@
             :country="$country"
             :county="$county"
             :level="$level"
+            :total-value="percent($this->aggregate?->value, $this->aggregate?->max)"
+            :total-value-formatted="percent($this->aggregate?->value, $this->aggregate?->max, formatted: true)"
+            :total-label="__('app.navigation.turnout')"
             :data="$this->data->toArray()"
             :legend="$this->getLegend()" />
 

tailwind.config.js

@@ -38,5 +38,9 @@ export default {
             },
         },
     },
-    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+    plugins: [
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/container-queries'),
+    ],
 };