@tekkare/auriga 0.1.175 → 0.1.177

package/dist/runtime/components/oneCountryEurope.vue

@@ -0,0 +1,62 @@
+<template>
+  <path
+    :id="`interactiveMap-${title}-${currentCountry}`"
+    :class="
+      hoveredCountry && hoveredCountry !== currentCountry && data.value
+        ? 'hovered'
+        : 'hover'
+    "
+    :d="countryEuropPath[currentCountry].path"
+    :fill="data.color"
+    :stroke="data.color"
+    stroke-width="1"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+  />
+</template>
+
+<script>
+import countryEuropPath from "./maps/countryEuropPath.json";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "oneCountryEurope",
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hoveredCountry: {
+      type: [String, null],
+      required: true,
+      default: null
+    },
+    title: {
+      type: [String, null],
+      required: true
+    },
+    currentCountry: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["hover", "mouseleave"],
+  setup(props, { emit }) {
+    function onMouseOver() {
+      emit("hover");
+    }
+    function onMouseLeave() {
+      emit("mouseleave");
+    }
+    return {
+      countryEuropPath,
+      onMouseOver,
+      onMouseLeave
+    };
+  }
+});
+</script>
+
+<style scoped>
+.hovered{opacity:.5;transition:all .2s ease-in-out}.hover{cursor:pointer}
+</style>

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

@@ -0,0 +1,54 @@
+import { EuropeanCountries } from "./maps/interfaces";
+import type { PropType } from "vue";
+type CurrentData = {
+    color?: string;
+    value?: number;
+};
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredCountry: {
+        type: PropType<EuropeanCountries | null>;
+        required: true;
+        default: null;
+    };
+    title: {
+        type: PropType<string | null>;
+        required: true;
+    };
+    currentCountry: {
+        type: PropType<EuropeanCountries>;
+        required: true;
+    };
+}, {
+    countryEuropPath: any;
+    onMouseOver: () => void;
+    onMouseLeave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mouseleave" | "hover")[], "mouseleave" | "hover", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredCountry: {
+        type: PropType<EuropeanCountries | null>;
+        required: true;
+        default: null;
+    };
+    title: {
+        type: PropType<string | null>;
+        required: true;
+    };
+    currentCountry: {
+        type: PropType<EuropeanCountries>;
+        required: true;
+    };
+}>> & {
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    onHover?: ((...args: any[]) => any) | undefined;
+}, {
+    data: CurrentData;
+    hoveredCountry: EuropeanCountries | null;
+}, {}>;
+export default _default;

package/dist/runtime/components/oneDepartementFr.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import departementsPath from "./mapsFr/departementsPath.json";
+import departementsPath from "./maps/departementsPath.json";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "oneDepartementFr",

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

@@ -1,4 +1,4 @@
-import { Departements } from "./mapsFr/interfaces";
+import { Departements } from "./maps/interfaces";
 import type { PropType } from "vue";
 type CurrentData = {
     color?: string;

package/dist/runtime/components/oneRegionFr.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import regionsPath from "./mapsFr/regionsPath.json";
+import regionsPath from "./maps/regionsPath.json";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "oneRegionFr",

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

@@ -1,4 +1,4 @@
-import { Regions } from "./mapsFr/interfaces";
+import { Regions } from "./maps/interfaces";
 import type { PropType } from "vue";
 type CurrentData = {
     color?: string;

package/dist/runtime/components/oneRegionToDepartements.vue

@@ -0,0 +1,178 @@
+<template>
+  <path
+    v-if="clickedRegion !== currentRegion"
+    @click.stop
+    :class="
+      clickedRegion &&
+      clickedRegion !== currentRegion &&
+      hoveredRegion === currentRegion
+        ? ' hover region hovered_dark'
+        : clickedRegion && clickedRegion !== currentRegion
+        ? 'dark hover region'
+        : hoveredRegion && hoveredRegion !== currentRegion && data.value
+        ? 'hovered region'
+        : 'hover region'
+    "
+    :id="`interactiveMap-${title}-${currentRegion}`"
+    :d="regionsPath[currentRegion].path"
+    :fill="data.color"
+    :stroke="data.color"
+    stroke-width="1"
+    @click="onMouseClick"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+  />
+  <path
+    v-else
+    @click.stop
+    v-for="departement in departements"
+    :key="departement"
+    :class="
+      currentDepartement && currentDepartement !== departement && data.value
+        ? 'hoveredDpt dpt'
+        : 'hover dpt'
+    "
+    :id="`interactiveMap-${title}-${departement}`"
+    :d="departmentsPath[departement].path"
+    :fill="getColor(dptData.find((x) => x.name == departement)?.value)"
+    stroke="rgba(0, 0, 0, 0.2)"
+    stroke-width="1"
+    @click="onMouseClick"
+    @mouseover="onDptMouseOver(departement)"
+    @mouseleave="onDptMouseLeave(departement)"
+  />
+</template>
+
+<script>
+import { ref, computed, nextTick } from "vue";
+import regionsPath from "./maps/regionsPath.json";
+import departmentsPath from "./maps/departementsPath.json";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "oneRegionFr",
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hoveredRegion: {
+      type: String,
+      required: false,
+      default: null
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    currentRegion: {
+      type: String,
+      required: true
+    },
+    currentDepartement: {
+      type: [String, null],
+      required: true
+    },
+    clickedRegion: {
+      type: [String, null],
+      required: false,
+      default: null
+    },
+    dptData: {
+      type: Array,
+      required: true
+    },
+    scale: {
+      type: Array,
+      required: true
+    },
+    setTooltipPosition: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: [
+    "hover",
+    "mouseleave",
+    "click",
+    "departementHover",
+    "mouseLeaveDepartement"
+  ],
+  setup(props, { emit }) {
+    const displayDepartements = ref(false);
+    const departements = computed(() => {
+      return regionsPath[props.currentRegion].departments;
+    });
+    function getColor(value) {
+      if (!value)
+        return "var(--lightest)";
+      if (value >= props.scale[9]) {
+        return "#3F1151";
+      } else if (value >= props.scale[8]) {
+        return "#432974";
+      } else if (value >= props.scale[7]) {
+        return "#404A85";
+      } else if (value >= props.scale[6]) {
+        return "#3F668A";
+      } else if (value >= props.scale[5]) {
+        return "#43808C";
+      } else if (value >= props.scale[4]) {
+        return "#4C9C8A";
+      } else if (value >= props.scale[3]) {
+        return "#5FB57E";
+      } else if (value >= props.scale[2]) {
+        return "#85CB68";
+      } else if (value >= props.scale[1]) {
+        return "#BDDD51";
+      } else if (value >= props.scale[0]) {
+        return "#F9E855";
+      }
+    }
+    async function onMouseOver(event) {
+      emit("hover");
+      if (props.clickedRegion !== null && props.clickedRegion !== props.currentRegion) {
+        await nextTick();
+        const containerPosition = document.getElementById(`container_map-${props.title}`)?.getBoundingClientRect();
+        const tooltipElement = document.getElementById(
+          `tooltip_map-${props.title}`
+        );
+        const tooltipHeight = tooltipElement ? tooltipElement.getBoundingClientRect().height : 60;
+        props.setTooltipPosition(
+          event.clientX - containerPosition?.x - 150,
+          event.clientY - containerPosition?.y - tooltipHeight - 40,
+          300
+        );
+      }
+    }
+    function onDptMouseOver(departement) {
+      emit("departementHover", departement);
+    }
+    function onMouseLeave() {
+      emit("mouseleave");
+    }
+    function onDptMouseLeave(departement) {
+      emit("mouseLeaveDepartement");
+    }
+    function onMouseClick() {
+      displayDepartements.value = !displayDepartements.value;
+      emit("click");
+    }
+    return {
+      regionsPath,
+      onMouseOver,
+      onMouseLeave,
+      onDptMouseOver,
+      onDptMouseLeave,
+      onMouseClick,
+      getColor,
+      displayDepartements,
+      departements,
+      departmentsPath
+    };
+  }
+});
+</script>
+
+<style scoped>
+.dark,.hovered,.hoveredDpt{opacity:.3;transition:all .2s ease-in-out}.dark{filter:grayscale(1)}.hover{cursor:pointer}.dpt{transition:all .2s ease-in-out;z-index:20}.dpt:hover{filter:drop-shadow(0 0 10px rgba(53,53,53,.5))}.region{z-index:10}.hovered_dark,.region{transition:all .2s ease-in-out}.hovered_dark{filter:brightness(1);opacity:.6}
+</style>

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

@@ -0,0 +1,111 @@
+import { Departements, Regions } from "./maps/interfaces";
+import type { PropType } from "vue";
+type CurrentData = {
+    color: string;
+    value: number | null;
+};
+type Data = {
+    name: Departements;
+    value: number;
+};
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredRegion: {
+        type: PropType<Regions | null>;
+        required: false;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    currentRegion: {
+        type: PropType<Regions>;
+        required: true;
+    };
+    currentDepartement: {
+        type: PropType<Departements | null>;
+        required: true;
+    };
+    clickedRegion: {
+        type: PropType<Regions | null>;
+        required: false;
+        default: null;
+    };
+    dptData: {
+        type: PropType<Data[]>;
+        required: true;
+    };
+    scale: {
+        type: PropType<number[]>;
+        required: true;
+    };
+    setTooltipPosition: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}, {
+    regionsPath: any;
+    onMouseOver: (event: any) => Promise<void>;
+    onMouseLeave: () => void;
+    onDptMouseOver: (departement?: string) => void;
+    onDptMouseLeave: (departement?: string) => void;
+    onMouseClick: () => void;
+    getColor: (value?: number) => "var(--lightest)" | "#3F1151" | "#432974" | "#404A85" | "#3F668A" | "#43808C" | "#4C9C8A" | "#5FB57E" | "#85CB68" | "#BDDD51" | "#F9E855" | undefined;
+    displayDepartements: import("vue").Ref<boolean>;
+    departements: import("vue").ComputedRef<any>;
+    departmentsPath: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseleave" | "hover" | "departementHover" | "mouseLeaveDepartement")[], "click" | "mouseleave" | "hover" | "departementHover" | "mouseLeaveDepartement", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredRegion: {
+        type: PropType<Regions | null>;
+        required: false;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    currentRegion: {
+        type: PropType<Regions>;
+        required: true;
+    };
+    currentDepartement: {
+        type: PropType<Departements | null>;
+        required: true;
+    };
+    clickedRegion: {
+        type: PropType<Regions | null>;
+        required: false;
+        default: null;
+    };
+    dptData: {
+        type: PropType<Data[]>;
+        required: true;
+    };
+    scale: {
+        type: PropType<number[]>;
+        required: true;
+    };
+    setTooltipPosition: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    onHover?: ((...args: any[]) => any) | undefined;
+    onDepartementHover?: ((...args: any[]) => any) | undefined;
+    onMouseLeaveDepartement?: ((...args: any[]) => any) | undefined;
+}, {
+    data: CurrentData;
+    hoveredRegion: Regions | null;
+    clickedRegion: Regions | null;
+}, {}>;
+export default _default;

package/dist/runtime/components/oneStateUs.vue

@@ -0,0 +1,62 @@
+<template>
+  <path
+    :id="`interactiveMap-${title}-${currentState}`"
+    :class="
+      hoveredState && hoveredState !== currentState && data.value
+        ? 'hovered'
+        : 'hover'
+    "
+    :d="usStatesPath[currentState].path"
+    :fill="data.color"
+    :stroke="data.color"
+    stroke-width="1"
+    @mouseover="onMouseOver"
+    @mouseleave="onMouseLeave"
+  />
+</template>
+
+<script>
+import usStatesPath from "./maps/usStatesPath.json";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "oneStateUs",
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hoveredState: {
+      type: [String, null],
+      required: true,
+      default: null
+    },
+    title: {
+      type: [String, null],
+      required: true
+    },
+    currentState: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["hover", "mouseleave"],
+  setup(props, { emit }) {
+    function onMouseOver() {
+      emit("hover");
+    }
+    function onMouseLeave() {
+      emit("mouseleave");
+    }
+    return {
+      usStatesPath,
+      onMouseOver,
+      onMouseLeave
+    };
+  }
+});
+</script>
+
+<style scoped>
+.hovered{opacity:.5;transition:all .2s ease-in-out}.hover{cursor:pointer}
+</style>

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

@@ -0,0 +1,54 @@
+import { UsStates } from "./maps/interfaces";
+import type { PropType } from "vue";
+type CurrentData = {
+    color?: string;
+    value?: number;
+};
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredState: {
+        type: PropType<UsStates | null>;
+        required: true;
+        default: null;
+    };
+    title: {
+        type: PropType<string | null>;
+        required: true;
+    };
+    currentState: {
+        type: PropType<UsStates>;
+        required: true;
+    };
+}, {
+    usStatesPath: any;
+    onMouseOver: () => void;
+    onMouseLeave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mouseleave" | "hover")[], "mouseleave" | "hover", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CurrentData>;
+        default: () => void;
+    };
+    hoveredState: {
+        type: PropType<UsStates | null>;
+        required: true;
+        default: null;
+    };
+    title: {
+        type: PropType<string | null>;
+        required: true;
+    };
+    currentState: {
+        type: PropType<UsStates>;
+        required: true;
+    };
+}>> & {
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    onHover?: ((...args: any[]) => any) | undefined;
+}, {
+    data: CurrentData;
+    hoveredState: UsStates | null;
+}, {}>;
+export default _default;

package/package.json

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