@fmidev/smartmet-alert-client 4.2.7 → 4.7.0-alpha.0

package/src/mixins/utils.js

@@ -1,5 +1,3 @@
-import 'url-search-params-polyfill'
-
 import { DOMParser } from '@xmldom/xmldom'
 import he from 'he'
 import xpath from 'xpath'
@@ -43,7 +41,7 @@ export default {
       extreme: 4,
     }),
     strokeColor() {
-      return this.colors[this.theme].stroke
+      return this.colors?.[this.theme]?.stroke || 'DarkSlateGray'
     },
     bluePaths() {
       return this.paths({
@@ -76,10 +74,10 @@ export default {
     },
     overlayPaths() {
       return this.regionIds.reduce((regions, regionId) => {
+        const region = this.geometries?.[this.geometryId]?.[regionId]
         if (
-          this.geometries[this.geometryId][regionId].pathLarge &&
-          (this.geometries[this.geometryId][regionId].type === 'land' ||
-            this.geometries[this.geometryId][regionId].subType === 'lake')
+          region?.pathLarge &&
+          (region.type === 'land' || region.subType === 'lake')
         ) {
           const visualization = this.regionVisualization(regionId)
           regions.push({
@@ -140,7 +138,10 @@ export default {
       return [
         {
           key: `border.${area}`,
-          d: this.geometries[this.geometryId]['borders'][area][`path${this.size}`],
+          d:
+            this.geometries?.[this.geometryId]?.borders?.[area]?.[
+              `path${this.size}`
+            ] || '',
           opacity: '1',
           strokeWidth: this.strokeWidth,
         },
@@ -195,7 +196,9 @@ export default {
     },
     msSinceStartOfDay(timestamp) {
       const moment = this.toTimeZone(timestamp)
-      const ms = ((moment.hour * 60 + moment.minute) * 60 + moment.second) * 1000 + moment.millisecond
+      const ms =
+        ((moment.hour * 60 + moment.minute) * 60 + moment.second) * 1000 +
+        moment.millisecond
       // Daylight saving time
       const ref = this.toTimeZone(timestamp - ms)
       if (ref.day !== moment.day) {
@@ -479,7 +482,7 @@ export default {
                     if (covRegions.has(regionId)) {
                       warningItem.coverage += covRegions.get(regionId)
                     } else {
-                      warningItem.coverage = 1
+                      warningItem.coverage = 100
                     }
                   }
                 })
@@ -546,8 +549,11 @@ export default {
           if (!this.coverageWarnings.includes(key)) {
             ;[...this.warnings[key].covRegions.keys()].forEach((covRegion) => {
               if (
-                this.coverageRegions[covRegion] == null ||
-                this.coverageRegions[covRegion] < this.warnings[key].severity
+                (this.coverageRegions[covRegion] == null ||
+                  this.coverageRegions[covRegion] <
+                    this.warnings[key].severity) &&
+                this.warnings[key].covRegions.get(covRegion) >=
+                  this.coverageCriterion
               ) {
                 this.coverageRegions[covRegion] = this.warnings[key].severity
               }
@@ -748,6 +754,7 @@ export default {
       const maxSeverities = this.getMaxSeverities(warnings)
       const legend = this.createLegend(maxSeverities)
       const regions = this.createRegions(warnings)
+      this.optimizeCovRegions(warnings, regions)
       return {
         warnings,
         days,
@@ -760,8 +767,10 @@ export default {
       return typeof document !== 'undefined' && document
     },
     regionData(regionId) {
-      const regionType = this.geometries[this.geometryId][regionId].type
-      return this.input[regionType].find(
+      const region = this.geometries?.[this.geometryId]?.[regionId]
+      if (!region) return null
+      const regionType = region.type
+      return this.input?.[regionType]?.find(
         (regionData) => regionData.key === regionId
       )
     },
@@ -794,10 +803,11 @@ export default {
       const severity = this.regionSeverity(regionId)
       const isLand =
         this.geometries[this.geometryId][regionId].type === this.REGION_LAND
+      const themeColors = this.colors?.[this.theme]
       const color =
         severity || isLand
-          ? this.colors[this.theme].levels[severity]
-          : this.colors[this.theme].sea
+          ? themeColors?.levels?.[severity] || '#cccccc'
+          : themeColors?.sea || '#add8e6'
       const visible = severity > 0 || geom.subType !== this.REGION_LAKE
       return {
         geom,
@@ -806,6 +816,27 @@ export default {
         visible,
       }
     },
+    // Include also lakes to prevent overlapping symbols in Saimaa
+    optimizeCovRegions(warnings, regions) {
+      Object.keys(this.geometries[this.geometryId])
+        .filter(
+          (regionId) =>
+            this.geometries[this.geometryId][regionId]?.type === 'sea' &&
+            this.geometries[this.geometryId][regionId]?.subType === 'lake'
+        )
+        .filter((regionId) =>
+          regions.some((day) =>
+            day.sea.some((region) => region.key === regionId)
+          )
+        )
+        .forEach((regionId) =>
+          Object.keys(warnings)
+            .filter((warningKey) => warnings[warningKey].covRegions.size > 0)
+            .forEach((warningKey) => {
+              warnings[warningKey].covRegions.set(regionId, 0)
+            })
+        )
+    },
     regionsDefault() {
       return [
         {

package/src/plugins/index.js

@@ -1,3 +1,3 @@
 export const pluginsWrapper = {
-  install(GivenVue) {},
+  install() {},
 }

package/src/scss/_utilities.scss

@@ -0,0 +1,193 @@
+// Responsive display utilities
+.mobile-only {
+  display: block;
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.desktop-only {
+  display: none;
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+// Medium breakpoint and up (768px+)
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+
+  .d-md-block {
+    display: block !important;
+  }
+
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+}
+
+// Display inline
+.d-inline {
+  display: inline !important;
+}
+
+// For screen readers
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Accessibility utilities
+.visually-hidden-focusable {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+
+  &:focus,
+  &:focus-within {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+    clip: auto !important;
+    white-space: normal !important;
+  }
+}
+
+.focus-ring {
+  outline: none;
+
+  &:focus {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+}
+
+// Small breakpoint specific (576px+)
+@media (min-width: 576px) {
+  .d-sm-block {
+    display: block !important;
+  }
+
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+// Spacing utilities
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+// Position utilities
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+// Grid/Layout utilities
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Tab navigation utilities
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-tabs {
+  border-bottom: none;
+}
+
+.nav-item {
+  margin-bottom: 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 0;
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+
+    &.active,
+    &.show {
+      display: block;
+    }
+  }
+
+  .spinner-border {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border-animation 0.75s linear infinite;
+  }
+
+  @keyframes spinner-border-animation {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+}

package/src/scss/backgrounds.scss

@@ -0,0 +1,2 @@
+$disabled-zoom-in: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjM0cHgiIGhlaWdodD0iMzRweCIgdmlld0JveD0iMCAwIDM0IDM0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPnBsdXMtc3ltYm9sPC90aXRsZT4KICAgIDxnIGlkPSJpY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IlN5bWJvbHMiPgogICAgICAgICAgICA8ZyBpZD0icGx1cy1zeW1ib2wiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9ImZpbGwtMyIgZmlsbD0iIzkyOTI5MiIgeD0iMCIgeT0iMCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcsMjQgTDE3LDEwIiBpZD0iZmlsbC0yIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAsMTcgTDI0LDE3IiBpZD0iZmlsbC0xIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
+$disabled-zoom-out: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjM0cHgiIGhlaWdodD0iMzRweCIgdmlld0JveD0iMCAwIDM0IDM0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPm1pbnVzLXN5bWJvbDwvdGl0bGU+CiAgICA8ZyBpZD0iaWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJTeW1ib2xzIj4KICAgICAgICAgICAgPGcgaWQ9Im1pbnVzLXN5bWJvbCI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iZmlsbC0yIiBmaWxsPSIjOTI5MjkyIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMCwxNyBMMjQsMTciIGlkPSJmaWxsLTEiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);

package/src/scss/colors.scss

@@ -13,7 +13,7 @@ $lightest-gray: #f8f8f8;
 $lighter-gray: #eee;
 $light-gray: #e8e8e8;
 $gray: #e3e3e3;
-$dark-gray: #979797; // from arrow-*.svg
+$dark-gray: #929292;
 $darker-gray: #434752;
 $darkest-gray: #282b34;
 $variant-gray-lightest: #f4f4f4;
@@ -21,8 +21,8 @@ $variant-gray-lighter: #e8e8e8;
 $variant-gray-light: #e4e4e4;
 $variant-gray: #e1e1e1;
 $variant-gray-dark: #aaaaaa;
-$variant-gray-darker: #555555;
-$variant-gray-darkest: #2d2d2d;
+$variant-gray-darker: #858585;
+$variant-gray-darkest: #555555;
 $light-blue: #e7f0fa;
 $blue: #3a66e3;
 $dark-blue: #303193;
@@ -31,3 +31,5 @@ $tooltip-background-color: $white;
 $tooltip-inner-color: $black;
 $turquoise: rgba(2, 184, 206, 0.4);
 $notification-color: #e7f0fa;
+$toggle-on-text: $white;
+$toggle-off-text: #606060;

package/src/scss/constants.scss

@@ -9,7 +9,7 @@ $warning-symbol-font-size: 0.625rem;
 $current-warning-height: 38px;
 $current-warning-image-height: 28px;
 $current-description-image-height: 48px;
-$symbol-list-width: 250px;
+$symbol-list-width: 260px;
 $symbol-list-line-height: 50px;
 $symbol-list-select-height: 30px;
 $symbol-list-image-size: 44px;
@@ -35,7 +35,8 @@ $popup-width: 250px;
   font-family: 'Noto Sans';
   font-weight: normal;
   font-style: normal;
-  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2') format('woff2');
+  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2')
+    format('woff2');
   font-display: swap;
 }
 $font-family: Roboto, Helvetica, Arial, 'Noto Sans', sans-serif;

package/src/scss/themes/dark-gray.scss

@@ -12,8 +12,8 @@ $dark-gray-current-warning-toggle-color: $darker-gray;
 $dark-gray-current-warning-toggle-active-color: $darkest-gray;
 $dark-gray-legend-heading-background-color: $black;
 $dark-gray-legend-container-background-color: $black;
-$dark-gray-legend-background-color: $darker-gray;
-$dark-gray-legend-toggle-background-color: $variant-gray-darkest;
+$dark-gray-legend-background-color: $variant-gray-darker;
+$dark-gray-legend-toggle-background-color: $darker-gray;
 $dark-gray-legend-active-toggle-background-color: $lighter-gray;
 $dark-gray-description-background-color: $darker-gray;
 $dark-gray-description-border-color: $dark-gray;
@@ -26,7 +26,7 @@ $dark-gray-popup-border-color: $dark-gray;
 $dark-gray-popup-table-background-color: $darker-gray;
 $dark-gray-green: white;
 $dark-gray-yellow: $variant-gray-dark;
-$dark-gray-orange: $variant-gray-darker;
+$dark-gray-orange: $variant-gray-darkest;
 $dark-gray-red: black;
 $dark-gray-green-shadow: $dark-gray;
 $dark-gray-yellow-shadow: $dark-gray;

package/src/scss/themes/dark.scss

@@ -12,7 +12,7 @@ $dark-current-warning-toggle-color: $darker-gray;
 $dark-current-warning-toggle-active-color: $darkest-gray;
 $dark-legend-container-background-color: $darkest-gray;
 $dark-legend-heading-background-color: $darkest-gray;
-$dark-legend-background-color: $darkest-gray;
+$dark-legend-background-color: $variant-gray-darker;
 $dark-legend-toggle-background-color: $darker-gray;
 $dark-legend-active-toggle-background-color: $dark-gray;
 $dark-description-background-color: $darker-gray;

package/src/scss/themes/light-gray.scss

@@ -8,12 +8,12 @@ $light-gray-date-selector-mobile-text-color: $black;
 $light-gray-border-color: $white;
 $light-gray-horizontal-rule-color: $lighter-gray;
 $light-gray-current-warning-heading-color: $lightest-gray;
-$light-gray-current-warning-toggle-color: $light-gray;
+$light-gray-current-warning-toggle-color: $dark-gray;
 $light-gray-current-warning-toggle-active-color: $darker-gray;
 $light-gray-legend-heading-background-color: $white;
 $light-gray-legend-container-background-color: $white;
-$light-gray-legend-background-color: $lighter-gray;
-$light-gray-legend-toggle-background-color: $variant-gray-lightest;
+$light-gray-legend-background-color: $variant-gray-darker;
+$light-gray-legend-toggle-background-color: $dark-gray;
 $light-gray-legend-active-toggle-background-color: $darker-gray;
 $light-gray-description-background-color: $lighter-gray;
 $light-gray-description-border-color: $gray;
@@ -26,10 +26,10 @@ $light-gray-popup-border-color: $light-gray;
 $light-gray-popup-table-background-color: $lighter-gray;
 $light-gray-green: white;
 $light-gray-yellow: $variant-gray-dark;
-$light-gray-orange: $variant-gray-darker;
+$light-gray-orange: $variant-gray-darkest;
 $light-gray-red: black;
 $light-gray-green-shadow: $light-gray;
 $light-gray-yellow-shadow: $light-gray;
 $light-gray-orange-shadow: $light-gray;
 $light-gray-red-shadow: $light-gray;
-$light-gray-border: #666666;
+$light-gray-border: $variant-gray-darker;

package/src/scss/themes/light.scss

@@ -8,12 +8,12 @@ $light-date-selector-mobile-text-color: $black;
 $light-border-color: $white;
 $light-horizontal-rule-color: $lighter-gray;
 $light-current-warning-heading-color: $lightest-gray;
-$light-current-warning-toggle-color: $light-gray;
+$light-current-warning-toggle-color: $dark-gray;
 $light-current-warning-toggle-active-color: $blue;
 $light-legend-heading-background-color: $white;
 $light-legend-container-background-color: $white;
-$light-legend-background-color: $lighter-gray;
-$light-legend-toggle-background-color: $light-gray;
+$light-legend-background-color: $variant-gray-darker;
+$light-legend-toggle-background-color: $dark-gray;
 $light-legend-active-toggle-background-color: $blue;
 $light-description-background-color: $lighter-gray;
 $light-description-border-color: $gray;

package/src/scss/warningImages.scss

@@ -1,8 +1,9 @@
-@import "./constants.scss";
+@use 'sass:string';
+@import './constants.scss';
 
 @for $i from 0 through 72 {
   $angle: 5 * $i;
-  $rotationDegree: unquote($angle + 'deg');
+  $rotationDegree: string.unquote($angle + 'deg');
   .transform-rotate-#{$angle} {
     transform: rotate($rotationDegree);
   }
@@ -101,7 +102,11 @@ div.symbol-image {
 }
 
 @media (forced-colors: active) {
-  .level-0, .level-1, .level-2, .level-3, .level-4 {
+  .level-0,
+  .level-1,
+  .level-2,
+  .level-3,
+  .level-4 {
     forced-color-adjust: none;
   }
 }
@@ -181,7 +186,6 @@ div.symbol-image {
 span.symbol-text {
   display: table-cell;
   vertical-align: middle;
-  line-height: $current-warning-image-height;
   width: 100%;
   text-align: center;
   margin: 0 auto;
@@ -192,7 +196,7 @@ span.symbol-text {
   font-weight: 700;
 }
 
-@media (max-width: 575px) {
+@media (width < 576px) {
   .symbol-text {
     display: none;
   }

package/src/vue.js

@@ -0,0 +1,41 @@
+/**
+ * Vue component exports for use in Vue/Nuxt applications.
+ *
+ * Usage:
+ *   import { SmartMetAlertClient } from '@fmidev/smartmet-alert-client/vue'
+ *   import '@fmidev/smartmet-alert-client/vue/style.css'
+ *
+ *   <SmartMetAlertClient
+ *     :refresh-interval="900000"
+ *     :selected-day="0"
+ *     :geometry-id="2021"
+ *     language="fi"
+ *   />
+ *
+ * Props:
+ *   language            String                   'fi'           Language code: 'fi', 'sv', 'en'
+ *   theme               String                   'light'        Theme: 'light', 'dark', 'light-gray', 'dark-gray'
+ *   geometry-id         String|Number            2021           Geometry version ID
+ *   selected-day        String|Number            0              Initially selected day (0-4)
+ *   refresh-interval    String|Number            900000         Data refresh interval in ms (0 to disable)
+ *   region-list-enabled String|Boolean           true           Show region list below the map
+ *   static-days         String|Boolean           true           Use static day labels
+ *   spinner-enabled     String|Boolean           true           Show loading spinner
+ *   gray-scale-selector String|Boolean           true           Show grayscale theme toggle
+ *   sleep               String|Boolean           true           Pause updates when tab is hidden
+ *   font-scale          String|Number            1              Font size multiplier
+ *   base-url            String                   (FMI GeoServer) Base URL for WFS queries
+ *   start-from          String                   ''             Start date override (ISO format)
+ *   current-date        String|Date              null           Override current date for testing
+ *   warnings            String|Object            null           Pre-loaded warnings data (skip fetch)
+ *   weather-warnings    String                   ''             Custom weather warnings query
+ *   flood-warnings      String                   ''             Custom flood warnings query
+ *   weather-updated     String                   ''             Custom weather update time query
+ *   flood-updated       String                   ''             Custom flood update time query
+ *   daily-warning-types String|Array             []             Filter specific warning types
+ *   debug-mode          String|Boolean           false          Enable debug logging
+ */
+import AlertClientVue from './AlertClientVue.vue'
+
+export { AlertClientVue as SmartMetAlertClient }
+export default AlertClientVue

package/svgo.config.js

@@ -0,0 +1,45 @@
+export default {
+  multipass: true,
+  js2svg: {
+    indent: 2,
+    pretty: true,
+  },
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          // Keep useful IDs in case they're referenced
+          cleanupIds: {
+            minify: false,
+          },
+        },
+      },
+    },
+    // Keep viewBox as it's needed for responsive scaling
+    {
+      name: 'removeViewBox',
+      active: false,
+    },
+    // Remove XML declaration (<?xml version="1.0"?>)
+    'removeXMLProcInst',
+    // Remove unnecessary xmlns:xlink
+    {
+      name: 'removeUnusedNS',
+    },
+    // Clean up numeric values (reduce decimal precision with rounding)
+    {
+      name: 'cleanupNumericValues',
+      params: {
+        floatPrecision: 3,
+      },
+    },
+    // Convert style attributes to attributes where possible
+    {
+      name: 'convertStyleToAttrs',
+      params: {
+        keepImportant: true,
+      },
+    },
+  ],
+}