formatAspects: NW↷N↷E

package.json

@@ -11,11 +11,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.13",
     "typescript": "^5.7.2",
     "vite": "^6.0.2"
   },
   "dependencies": {
     "@eaws/outline_properties": "^7.0.5",
+    "lodash": "^4.17.21",
     "ol": "^10.3.0",
     "ol-ext": "^4.0.24",
     "ol-pmtiles": "^1.0.2"

src/main.ts

@@ -17,6 +17,7 @@ import View from "ol/View";
 import XYZ from "ol/source/XYZ";
 import "ol/ol.css";
 import "ol-ext/dist/ol-ext.css";
+import { dropWhile, takeWhile } from "lodash";
 import "./style.css";
 import eawsOutlineProperties from "@eaws/outline_properties/index.json";
 
@@ -362,8 +363,25 @@ function formatBulletin(
 
   const formatElevation = (e?: ElevationBoundaryOrBand) =>
     `🏔 ${e?.lowerBound || 0}..${e?.upperBound || "∞"}`;
-  const formatAspects = (a?: Aspect[]) =>
-    Array.isArray(a) ? "🧭 " + a.join() : "";
+  const formatAspects = (aspects0?: Aspect[]) => {
+    if (!Array.isArray(aspects0) || !aspects0.length) return "";
+    let aspects: Aspect[] = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
+    aspects = [...aspects, ...aspects];
+    aspects = dropWhile(aspects, (a) => aspects0.includes(a));
+    aspects = dropWhile(aspects, (a) => !aspects0.includes(a));
+    aspects = takeWhile(aspects, (a) => aspects0.includes(a));
+    if (aspects.length > 3) {
+      const main: Aspect[] = ["N", "S", "W", "E"];
+      aspects = [
+        aspects[0],
+        main.find((a) => aspects0.includes(a))!,
+        aspects[aspects.length - 1],
+      ];
+      return "🧭 " + aspects.join("↷");
+    } else {
+      return "🧭 " + aspects.join(",");
+    }
+  };
   result.appendChild(document.createElement("dd")).innerHTML =
     region +
     [bulletin.validTime?.startTime, bulletin.validTime?.endTime]

yarn.lock

@@ -363,6 +363,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.13":
+  version: 4.17.13
+  resolution: "@types/lodash@npm:4.17.13"
+  checksum: 10c0/c3d0b7efe7933ac0369b99f2f7bff9240d960680fdb74b41ed4bd1b3ca60cca1e31fe4046d9abbde778f941a41bc2a75eb629abf8659fa6c27b66efbbb0802a9
+  languageName: node
+  linkType: hard
+
 "@types/rbush@npm:4.0.0":
   version: 4.0.0
   resolution: "@types/rbush@npm:4.0.0"
@@ -560,6 +567,8 @@ __metadata:
   resolution: "eaws-bulletin-map@workspace:."
   dependencies:
     "@eaws/outline_properties": "npm:^7.0.5"
+    "@types/lodash": "npm:^4.17.13"
+    lodash: "npm:^4.17.21"
     ol: "npm:^10.3.0"
     ol-ext: "npm:^4.0.24"
     ol-pmtiles: "npm:^1.0.2"
@@ -892,6 +901,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.1.0
   resolution: "lru-cache@npm:10.1.0"