@tekkare/auriga 0.2.99 → 0.2.100

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.99"
+  "version": "0.2.100"
 }

package/dist/runtime/components/argMapsNorway.vue

@@ -16,11 +16,6 @@
       v-if="hoveredRegion !== null"
       :id="`tooltip_map-${title}`"
       class="tooltip_container"
-      :style="{
-        top: tooltipPosition.y + 'px',
-        left: tooltipPosition.x + 'px',
-        width: tooltipPosition.width + 'px',
-      }"
     >
       <div class="tooltip">
         <p class="card_title">{{ hoveredRegion }}</p>
@@ -48,13 +43,28 @@
           v-for="region in RegionsNo"
           :key="region"
           :data="{
-            color: getColor(data.find((x) => x.name == region)?.value),
-            value: data.find((x) => x.name == region)?.value,
-          }"
+    color: getColor(
+      region
+    ),
+    value: data.find((x) => 
+      GroupedRegions[Object.keys(GroupedRegions).find((groupKey) =>
+        GroupedRegions[groupKey as RegionGroupsNo].includes(region)
+      ) as RegionGroupsNo]?.includes(region)
+    )?.value,
+    group: Object.keys(GroupedRegions).find((groupKey) =>
+      GroupedRegions[groupKey as RegionGroupsNo].includes(region)
+    ) as RegionGroupsNo
+  }"
           :current-region="region"
           :title="title"
           :hoveredRegion="hoveredRegion"
-          @hover="handleHover(region)"
+          @hover="
+            handleHover(
+              Object.keys(GroupedRegions).find((groupKey) =>
+                GroupedRegions[groupKey as RegionGroupsNo].includes(region)
+              ) as RegionGroupsNo
+            )
+          "
           @mouseleave="handleMouseLeave"
         />
       </svg>
@@ -72,8 +82,8 @@
 </template>
 
 <script>
-import { onMounted, ref, watch, defineComponent, nextTick } from "vue";
-import { RegionsNo } from "./maps/interfaces";
+import { onMounted, ref, watch, defineComponent } from "vue";
+import { GroupedRegions, RegionsNo } from "./maps/interfaces";
 import oneRegionNo from "./oneRegionNo.vue";
 import ArgSourceContainer from "./argSourceContainer.vue";
 export default defineComponent({
@@ -115,11 +125,19 @@ export default defineComponent({
     const minimalValue = ref(null);
     const maximalValue = ref(null);
     const hoveredRegion = ref(null);
-    const tooltipPosition = ref({ x: 0, y: 0, width: 0 });
     const scale = ref([]);
-    function getColor(value) {
-      if (!value)
+    function getColor(region) {
+      if (!region)
         return "var(--lightest)";
+      const regionGroup = Object.keys(GroupedRegions).find(
+        (groupKey) => GroupedRegions[groupKey].includes(region)
+      );
+      if (!regionGroup)
+        return "var(--lightest)";
+      const groupData = props.data.find((x) => x.name === regionGroup);
+      if (!groupData || !groupData.value)
+        return "var(--lightest)";
+      const value = groupData.value;
       if (value >= scale.value[9]) {
         return "#3F1151";
       } else if (value >= scale.value[8]) {
@@ -141,6 +159,7 @@ export default defineComponent({
       } else if (value >= scale.value[0]) {
         return "#F9E855";
       }
+      return "var(--lightest)";
     }
     function handleHover(region) {
       hoveredRegion.value = region;
@@ -185,34 +204,6 @@ export default defineComponent({
           const containerPosition = document.getElementById(`container_map-${props.title}-${props.uniqueID}`)?.getBoundingClientRect();
           if (!selectedRegion || !containerPosition)
             return;
-          tooltipPosition.value = {
-            x: selectedRegion?.x - containerPosition?.x,
-            y: selectedRegion?.top - containerPosition?.top - 60,
-            width: selectedRegion?.width
-          };
-        }
-      }
-    );
-    watch(
-      () => hoveredRegion.value,
-      async () => {
-        if (hoveredRegion.value) {
-          await nextTick();
-          const selectedRegion = document.getElementById(
-            `interactiveMap-${props.title}-${hoveredRegion.value}`
-          )?.getBoundingClientRect();
-          const containerPosition = document.getElementById(`container_map-${props.title}`)?.getBoundingClientRect();
-          const tooltipElement = document.getElementById(
-            `tooltip_map-${props.title}`
-          );
-          const tooltipHeight = tooltipElement ? tooltipElement.getBoundingClientRect().height : 60;
-          if (!selectedRegion || !containerPosition)
-            return;
-          tooltipPosition.value = {
-            x: selectedRegion?.x - containerPosition?.x,
-            y: selectedRegion?.top - containerPosition?.top - tooltipHeight,
-            width: selectedRegion?.width
-          };
         }
       }
     );
@@ -222,14 +213,14 @@ export default defineComponent({
       handleMouseLeave,
       RegionsNo,
       hoveredRegion,
-      tooltipPosition,
       scale,
-      openSource
+      openSource,
+      GroupedRegions
     };
   }
 });
 </script>
 
 <style scoped>
-.map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:0;min-width:-moz-fit-content;min-width:fit-content;position:absolute;top:0;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855);height:10px;transform:rotate(180deg)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}
+.map{margin-top:24px;width:100%}.p24{padding:24px}.map path{stroke-width:2px;stroke:rgba(0,0,0,.2);max-height:400px;position:relative}.map path:hover{transition:all .2s}.map_card-container{display:flex;flex-direction:column;gap:8px;min-width:400px;position:relative;width:100%}.test{margin-bottom:200px}.tooltip_container{align-items:center;display:flex;flex-direction:column;justify-content:center;left:30%;position:absolute;top:250px;width:200px;z-index:96}.tooltip{background:#fff;border:1px solid var(--light);border-radius:4px;box-shadow:var(--medium-shadow);color:var(--darkest);font-size:12px}.card_title{background-color:var(--light);border-radius:4px 4px 0 0;font-size:14px;font-weight:600;padding:2px 8px;width:calc(100% - 15px)}.card_text{color:var(--dark);font-size:12px;font-weight:400;line-height:160%;padding:8px;width:100%}.legend{display:flex;flex-direction:column;gap:8px;margin:auto;width:50%}.scale{background:linear-gradient(45deg,#3f1151,#432974,#404a85,#3f668a,#43808c,#4c9c8a,#5fb57e,#85cb68,#bddd51,#f9e855);height:10px;transform:rotate(180deg)}.legend-text{align-items:center;color:var(--dark);display:flex;font-size:12px;font-weight:400;justify-content:space-between;line-height:160%}.p-24{padding:0 24px}
 </style>

package/dist/runtime/components/argMapsNorway.vue.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from "vue";
-import { RegionsNo } from "./maps/interfaces";
+import { RegionGroupsNo, RegionsNo } from "./maps/interfaces";
 type dataRegion = {
-    name: RegionsNo;
+    name: RegionGroupsNo;
     value: number;
 };
 declare const _default: import("vue").DefineComponent<{
@@ -35,18 +35,14 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
     };
 }, {
-    getColor: (value?: number) => "var(--lightest)" | "#3F1151" | "#432974" | "#404A85" | "#3F668A" | "#43808C" | "#4C9C8A" | "#5FB57E" | "#85CB68" | "#BDDD51" | "#F9E855" | undefined;
-    handleHover: (region: RegionsNo) => void;
+    getColor: (region?: RegionsNo) => "var(--lightest)" | "#3F1151" | "#432974" | "#404A85" | "#3F668A" | "#43808C" | "#4C9C8A" | "#5FB57E" | "#85CB68" | "#BDDD51" | "#F9E855";
+    handleHover: (region?: RegionGroupsNo) => void;
     handleMouseLeave: () => void;
     RegionsNo: typeof RegionsNo;
-    hoveredRegion: import("vue").Ref<RegionsNo | null>;
-    tooltipPosition: import("vue").Ref<{
-        x: number;
-        y: number;
-        width: number;
-    }>;
+    hoveredRegion: import("vue").Ref<RegionGroupsNo | null>;
     scale: import("vue").Ref<number[]>;
     openSource: () => void;
+    GroupedRegions: Record<RegionGroupsNo, RegionsNo[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "openSource"[], "openSource", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<dataRegion[]>;

package/dist/runtime/components/maps/interfaces.d.ts

@@ -57,6 +57,13 @@ export declare enum RegionsNo {
     VestAgder = "Vest-Agder",
     Vestfold = "Vestfold"
 }
+export declare enum RegionGroupsNo {
+    Nord = "Helse Nord",
+    Sord = "Helse S\u00F8r-\u00D8st",
+    Vest = "Helse Vest",
+    Norge = "Helse Midt-Norge"
+}
+export declare const GroupedRegions: Record<RegionGroupsNo, RegionsNo[]>;
 export declare enum RegionsKr {
     NorthChungcheong = "Chungcheongbuk-do",
     SouthChungcheong = "Chungcheongnam-do",

package/dist/runtime/components/maps/interfaces.mjs

@@ -60,6 +60,42 @@ export var RegionsNo = /* @__PURE__ */ ((RegionsNo2) => {
   RegionsNo2["Vestfold"] = "Vestfold";
   return RegionsNo2;
 })(RegionsNo || {});
+export var RegionGroupsNo = /* @__PURE__ */ ((RegionGroupsNo2) => {
+  RegionGroupsNo2["Nord"] = "Helse Nord";
+  RegionGroupsNo2["Sord"] = "Helse S\xF8r-\xD8st";
+  RegionGroupsNo2["Vest"] = "Helse Vest";
+  RegionGroupsNo2["Norge"] = "Helse Midt-Norge";
+  return RegionGroupsNo2;
+})(RegionGroupsNo || {});
+export const GroupedRegions = {
+  ["Helse Nord" /* Nord */]: [
+    "Nordland" /* Nordland */,
+    "Troms" /* Troms */,
+    "Finnmark" /* Finnmark */
+  ],
+  ["Helse Midt-Norge" /* Norge */]: [
+    "M\xF8re og Romsdal" /* MoreOgRomsdal */,
+    "S\xF8r-Tr\xF8ndelag" /* SørTrondelag */,
+    "Nord-Tr\xF8ndelag" /* NordTrondelag */
+  ],
+  ["Helse S\xF8r-\xD8st" /* Sord */]: [
+    "Akershus" /* Akershus */,
+    "Buskerud" /* Buskerud */,
+    "Hedmark" /* Hedmark */,
+    "Oppland" /* Oppland */,
+    "Oslo" /* Oslo */,
+    "\xD8stfold" /* Ostfold */,
+    "Telemark" /* Telemark */,
+    "Vestfold" /* Vestfold */,
+    "Aust-Agder" /* AustAgder */,
+    "Vest-Agder" /* VestAgder */
+  ],
+  ["Helse Vest" /* Vest */]: [
+    "Hordaland" /* Hordaland */,
+    "Rogaland" /* Rogaland */,
+    "Sogn og Fjordane" /* SognOgFjordane */
+  ]
+};
 export var RegionsKr = /* @__PURE__ */ ((RegionsKr2) => {
   RegionsKr2["NorthChungcheong"] = "Chungcheongbuk-do";
   RegionsKr2["SouthChungcheong"] = "Chungcheongnam-do";

package/dist/runtime/components/oneRegionNo.vue

@@ -1,7 +1,7 @@
 <template>
   <path
     :class="
-      hoveredRegion && hoveredRegion !== currentRegion && data.value
+      hoveredRegion && hoveredRegion !== data.group && data.value
         ? 'hovered'
         : 'hover'
     "
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { RegionGroupsNo } from "./maps/interfaces";
 import regionsPathNo from "./maps/regionsPathNo.json";
 import { defineComponent } from "vue";
 export default defineComponent({
@@ -51,12 +52,13 @@ export default defineComponent({
     return {
       regionsPathNo,
       onMouseOver,
-      onMouseLeave
+      onMouseLeave,
+      RegionGroupsNo
     };
   }
 });
 </script>
 
 <style scoped>
-.hovered{opacity:.5;transition:all .2s ease-in-out}.hover{cursor:pointer}
+.hovered{opacity:.3;transition:all .2s ease-in-out}.hover{cursor:pointer}.hover,.hover>path{stroke:blue}
 </style>

package/dist/runtime/components/oneRegionNo.vue.d.ts

@@ -1,8 +1,9 @@
-import { RegionsNo } from "./maps/interfaces";
+import { RegionGroupsNo, RegionsNo } from "./maps/interfaces";
 import type { PropType } from "vue";
 type CurrentData = {
     color?: string;
     value?: number;
+    group?: string;
 };
 declare const _default: import("vue").DefineComponent<{
     data: {
@@ -10,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => void;
     };
     hoveredRegion: {
-        type: PropType<RegionsNo | null>;
+        type: PropType<RegionGroupsNo | null>;
         required: false;
         default: null;
     };
@@ -26,13 +27,14 @@ declare const _default: import("vue").DefineComponent<{
     regionsPathNo: any;
     onMouseOver: () => void;
     onMouseLeave: () => void;
+    RegionGroupsNo: typeof RegionGroupsNo;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mouseleave" | "hover")[], "mouseleave" | "hover", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<CurrentData>;
         default: () => void;
     };
     hoveredRegion: {
-        type: PropType<RegionsNo | null>;
+        type: PropType<RegionGroupsNo | null>;
         required: false;
         default: null;
     };
@@ -49,6 +51,6 @@ declare const _default: import("vue").DefineComponent<{
     onHover?: ((...args: any[]) => any) | undefined;
 }, {
     data: CurrentData;
-    hoveredRegion: RegionsNo | null;
+    hoveredRegion: RegionGroupsNo | null;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.99",
+  "version": "0.2.100",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",