Optional color coded magnitude scale

Author: breadthe

src/Main.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { feedData } from "./store"
+  import { feedData, magnitudeColorScale } from "./store"
   import { tooltip } from "./tooltip"
-  import { round1, timestampToLocalString } from "./utils"
+  import { round1, timestampToLocalString, magBgColor } from "./utils"
   import Header from "./Header.svelte"
 </script>
 
@@ -12,13 +12,19 @@
     <div class="w-full h-full min-h-screen bg-white dark:bg-gray-800">
       {#each $feedData.features as feature (feature.properties.code)}
         <div
-          class="flex items-center justify-between border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-900 py-1"
+          class={`flex items-center justify-between border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-900 py-1 ${
+            $magnitudeColorScale ? `${magBgColor(feature.properties.mag)} bg-opacity-20` : ""
+          }`}
         >
           <!-- Magnitude -->
-          <div class="px-4">
-            <span class:font-bold={feature.properties.mag >= 4.5} class:text-red-600={feature.properties.mag >= 7}>
-              {round1(feature.properties.mag)}
-            </span>
+          <div
+            class={`mx-2 w-8 h-8 flex items-center justify-center rounded-lg text-sm ${
+              $magnitudeColorScale ? `${magBgColor(feature.properties.mag)} text-white` : ""
+            }`}
+            class:font-bold={feature.properties.mag >= 4.5 && !$magnitudeColorScale}
+            class:text-red-600={feature.properties.mag >= 7 && !$magnitudeColorScale}
+          >
+            {round1(feature.properties.mag)}
           </div>
 
           <!-- Location -->

src/Settings.svelte

@@ -9,19 +9,23 @@
     refreshIntervalTimer,
     DEFAULT_MAGNITUDE_NOTIFICATION_THRESHOLD,
     magnitudeNotificationThreshold,
+    magnitudeColorScale,
   } from "./store"
   import { startFeedRefreshInterval } from "./feed"
   import { tooltip } from "./tooltip"
   import { setTheme } from "./utils"
+  import { MagnitudeColor } from "./types"
 
   let selectedTheme = $theme
 
   $: newRefreshInterval = $refreshInterval
   $: newMagnitudeNotificationThreshold = $magnitudeNotificationThreshold
+  $: newMagnitudeColorScale = $magnitudeColorScale
 
   $: refreshIntervalChanged = newRefreshInterval !== $refreshInterval
   $: magnitudeNotificationThresholdChanged = newMagnitudeNotificationThreshold !== $magnitudeNotificationThreshold
-  $: disabled = !refreshIntervalChanged && !magnitudeNotificationThresholdChanged
+  $: magnitudeColorScaleChanged = newMagnitudeColorScale !== $magnitudeColorScale
+  $: disabled = !refreshIntervalChanged && !magnitudeNotificationThresholdChanged && !magnitudeColorScaleChanged
 
   const preferences = {
     themes: [
@@ -48,6 +52,10 @@
     if (magnitudeNotificationThresholdChanged) {
       magnitudeNotificationThreshold.set(newMagnitudeNotificationThreshold || DEFAULT_MAGNITUDE_NOTIFICATION_THRESHOLD)
     }
+
+    if (magnitudeColorScaleChanged) {
+      magnitudeColorScale.set(newMagnitudeColorScale)
+    }
   }
 
   function closeSettings() {
@@ -125,6 +133,35 @@
         </div>
       </div>
 
+      <!-- Color scale -->
+      <div class="flex items-center gap-4 p-2 bg-white dark:bg-gray-800">
+        <div class="w-1/2">
+          <h2 class="text-right">Magnitude color scale</h2>
+        </div>
+        <div class="w-1/2">
+          <input
+            type="checkbox"
+            value="1"
+            bind:checked={newMagnitudeColorScale}
+            class="appearance-none w-6 h-6 rounded bg-white dark:bg-gray-800 border dark:border-gray-600 checked:bg-blue-600 dark:checked:bg-blue-600 checked:border-transparent"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center justify-center pb-4 bg-white dark:bg-gray-800">
+        {#each Object.keys(MagnitudeColor) as magnitude, i (magnitude)}
+          {@const totalMagnitudes = Object.keys(MagnitudeColor).length}
+          <div
+            class={`flex items-center justify-center w-6 h-6 text-xs text-white ${MagnitudeColor[magnitude]}`}
+            class:rounded-l={i === 0}
+            class:rounded-r={i + 1 === totalMagnitudes}
+          >
+            {magnitude.replace("m-", "")}
+          </div>
+        {/each}
+      </div>
+
+      <!-- Save settings -->
       <div class="text-right p-2 bg-white dark:bg-gray-800 border-t dark:border-gray-600 rounded-b-lg">
         <button
           on:click={saveSettings}

src/store.ts

@@ -31,6 +31,13 @@ magnitudeNotificationThreshold.subscribe((value: number) => {
     localStorage.setItem('magnitudeNotificationThreshold', value.toString())
 })
 
+// Magnitude color scale
+const storedMagnitudeColorScale = localStorage.getItem('magnitudeColorScale') === '1' ? '1' : '0'
+export const magnitudeColorScale = writable<boolean>(storedMagnitudeColorScale  === '1' ? true : false)
+magnitudeColorScale.subscribe((value: boolean) => {
+    localStorage.setItem('magnitudeColorScale', value ? '1' : '0')
+})
+
 // Refresh interval timer
 export const refreshIntervalTimer = writable<NodeJS.Timeout>(undefined)
 

src/types.ts

@@ -53,3 +53,14 @@ export interface Geometry {
     type: 'Point';
     coordinates: number[]; // [36.4567, 38.0154, 10]
 }
+
+export enum MagnitudeColor {
+    'm-2.5' = 'bg-teal-600',
+    'm-3' = 'bg-green-600',
+    'm-4' = 'bg-yellow-500',
+    'm-5' = 'bg-orange-400',
+    'm-6' = 'bg-orange-600',
+    'm-7' = 'bg-red-600',
+    'm-8' = 'bg-red-700',
+    'm-9' = 'bg-red-800',
+}

src/utils.ts

@@ -1,3 +1,4 @@
+import { MagnitudeColor } from "./types"
 
 // Round a number to 1 decimal
 export const round1 = function (num: number): string {
@@ -42,6 +43,24 @@ export const timestampToLocalString = function (timestamp: number): string {
 }
 
 
+// Color-coded background based on magnitude
+export const magBgColor = function (magnitude: number) {
+    let mag: number
+
+    if (magnitude >= 9) mag = 9
+    else if (magnitude >= 8) mag = 8
+    else if (magnitude >= 7) mag = 7
+    else if (magnitude >= 6) mag = 6
+    else if (magnitude >= 5) mag = 5
+    else if (magnitude >= 4) mag = 4
+    else if (magnitude >= 3) mag = 3
+    else mag = 2.5
+
+    return MagnitudeColor[`m-${mag}`]
+}
+
+
+
 // Theming functions
 export function setIsDark(dark: boolean) {
     const htmlNode = document.querySelector("html")