@tekkare/auriga 0.1.10 → 0.1.11

package/dist/runtime/components/argDate.vue

@@ -0,0 +1,77 @@
+<template>
+  <span>{{ formatDate(rawDate) }}</span>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argDate",
+  props: {
+    rawDate: {
+      type: String,
+      required: true
+    },
+    lang: {
+      type: String,
+      default: "en"
+    },
+    short: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    function monthToString(month) {
+      if (month === 0) {
+        return props.lang === "fr" ? props.short ? "Jan." : "Janvier" : props.short ? "Jan" : "January";
+      }
+      if (month === 1) {
+        return props.lang === "fr" ? props.short ? "F\xE9v." : "F\xE9vrier" : props.short ? "Feb." : "February";
+      }
+      if (month === 2) {
+        return props.lang === "fr" ? props.short ? "Mar." : "Mars" : props.short ? "Mar." : "March";
+      }
+      if (month === 3) {
+        return props.lang === "fr" ? props.short ? "Avr." : "Avril" : props.short ? "Apr." : "April";
+      }
+      if (month === 4) {
+        return props.lang === "fr" ? "Mai" : "May";
+      }
+      if (month === 5) {
+        return props.lang === "fr" ? "Juin" : props.short ? "Jun." : "June";
+      }
+      if (month === 6) {
+        return props.lang === "fr" ? props.short ? "Juil." : "Juillet" : props.short ? "Jul." : "July";
+      }
+      if (month === 7) {
+        return props.lang === "fr" ? props.short ? "Ao\xFB." : "Ao\xFBt" : props.short ? "Aug." : "August";
+      }
+      if (month === 8) {
+        return props.lang === "fr" ? props.short ? "Sep." : "Septembre" : props.short ? "Sep." : "September";
+      }
+      if (month === 9) {
+        return props.lang === "fr" ? props.short ? "Oct." : "Octobre" : props.short ? "Oct." : "October";
+      }
+      if (month === 10) {
+        return props.lang === "fr" ? props.short ? "Nov." : "Novembre" : props.short ? "Nov." : "November";
+      }
+      if (month === 11) {
+        return props.lang === "fr" ? props.short ? "D\xE9c." : "D\xE9cembre" : props.short ? "Dec." : "December";
+      }
+    }
+    function formatDate(str) {
+      const date = new Date(str);
+      const fullDate = `${date.getDate()} ${monthToString(
+        date.getMonth()
+      )}, ${date.getFullYear()}`;
+      return fullDate;
+    }
+    return {
+      formatDate,
+      monthToString
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<{
+    rawDate: {
+        type: StringConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    short: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    formatDate: (str: string) => string;
+    monthToString: (month: number) => "Jan." | "Janvier" | "Jan" | "January" | "Fév." | "Février" | "Feb." | "February" | "Mar." | "Mars" | "March" | "Avr." | "Avril" | "Apr." | "April" | "Mai" | "May" | "Juin" | "Jun." | "June" | "Juil." | "Juillet" | "Jul." | "July" | "Aoû." | "Août" | "Aug." | "August" | "Sep." | "Septembre" | "September" | "Oct." | "Octobre" | "October" | "Nov." | "Novembre" | "November" | "Déc." | "Décembre" | "Dec." | "December" | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rawDate: {
+        type: StringConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    short: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    lang: string;
+    short: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/argErrors.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="oip_error">
+    <div class="icon_circle">
+      <arg-icon :name="getIconName" size="44" color="var(--cool-grey)" />
+    </div>
+    <div class="error_text">
+      <p class="error_title">{{ getErrorName }}</p>
+      <p class="error_descr">{{ getErrorText }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argErrors",
+  components: {
+    argIcon
+  },
+  props: {
+    errorType: {
+      type: String,
+      default: "result"
+    },
+    errorTitle: {
+      type: String,
+      default: null
+    },
+    errorText: {
+      type: String,
+      default: null
+    },
+    errorIcon: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const values = [
+      {
+        type: "selection",
+        title: "No selection yet",
+        text: "You need to select your scope to view any results or data. Please choose one of the options below to proceed."
+      },
+      {
+        type: "result",
+        title: "No results found",
+        text: "Your search criteria did not match any results. Please change your criteria or contact us for assistance."
+      },
+      {
+        type: "access",
+        title: "Unauthorised access",
+        text: "It seems that you do not have access to this page. Reach out to your manager or contact us for assistance."
+      },
+      {
+        type: "network",
+        title: "Network issue",
+        text: "It seems that we are experiencing some network issues. Please try again in a few minutes or contact us for assistance."
+      },
+      {
+        type: "not-found",
+        title: "Page not found",
+        text: "Oops it seems like this page doesn\u2019t exist anymore. Go back to OIP or contact us for assistance."
+      }
+    ];
+    const icons = [
+      { type: "selection", value: "CrosshairSimple" },
+      { type: "result", value: "MagnifyingGlass" },
+      { type: "access", value: "Prohibit" },
+      { type: "network", value: "Plugs" },
+      { type: "not-found", value: "LinkBreak" }
+    ];
+    const getIconName = computed(() => {
+      if (props.errorIcon === null) {
+        let icon = "";
+        for (let i = 0; i < icons.length; i++) {
+          if (icons[i].type === props.errorType) {
+            icon = icons[i].value;
+          }
+        }
+        return icon;
+      } else
+        return props.errorIcon;
+    });
+    const getErrorText = computed(() => {
+      if (props.errorText === null) {
+        let title = "";
+        for (let i = 0; i < values.length; i++) {
+          if (values[i].type === props.errorType) {
+            title = values[i].text;
+          }
+        }
+        return title;
+      } else
+        return props.errorText;
+    });
+    const getErrorName = computed(() => {
+      if (props.errorTitle === null) {
+        let title = "";
+        for (let i = 0; i < values.length; i++) {
+          if (values[i].type === props.errorType) {
+            title = values[i].title;
+          }
+        }
+        return title;
+      } else
+        return props.errorTitle;
+    });
+    return {
+      values,
+      icons,
+      getErrorName,
+      getErrorText,
+      getIconName
+    };
+  }
+});
+</script>
+
+<style scoped>
+.oip_error {
+  display: flex;
+  max-width: 409px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.icon_circle {
+  display: flex;
+  border-radius: 50px;
+  background: var(--base-dividers, #ececf2);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.error_text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  text-align: center;
+}
+
+.error_title {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-align: center;
+}
+
+.error_descr {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--cool-grey);
+}
+</style>

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

@@ -0,0 +1,54 @@
+declare const _default: import("vue").DefineComponent<{
+    errorType: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorTitle: {
+        type: StringConstructor;
+        default: null;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: null;
+    };
+    errorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+}, {
+    values: {
+        type: string;
+        title: string;
+        text: string;
+    }[];
+    icons: {
+        type: string;
+        value: string;
+    }[];
+    getErrorName: import("vue").ComputedRef<string>;
+    getErrorText: import("vue").ComputedRef<string>;
+    getIconName: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    errorType: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorTitle: {
+        type: StringConstructor;
+        default: null;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: null;
+    };
+    errorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+}>>, {
+    errorType: string;
+    errorTitle: string;
+    errorText: string;
+    errorIcon: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argFilterCard.vue

@@ -81,6 +81,7 @@ export default defineComponent({
   transition: all ease 0.7s;
   cursor: pointer;
   z-index: 98;
+  width: calc(100% - 32px);
 }
 
 .filter_card {

package/dist/runtime/components/argHybridChart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <client-only>
+      <table class="oip_hybrid_chart">
+        <thead class="oip_hybrid_chart__header">
+          <tr>
+            <th
+              class="oip_hybrid_chart__header_elem"
+              v-for="(header, index) in heads"
+              :key="index"
+            >
+              {{ header }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="oip_hybrid_chart__body">
+          <tr v-for="(row, tableIndex) in tableBody" :key="tableIndex">
+            <td
+              v-for="(val, index) in row.values"
+              :key="index"
+              class="oip_hybrid_chart__td"
+            >
+              <div class="oip_hybrid_chart__bar_group" v-if="index === 0">
+                <div
+                  class="oip_hybrid_chart__bar"
+                  :style="{
+                    background: barColor + '1a',
+                    width: `${getPercentage(row.values[1].percentage)}%`,
+                  }"
+                ></div>
+                <arg-tooltip
+                  :id="`tooltip-${val}`"
+                  :disable="isEllipsisActive(val)"
+                  :tooltipText="val"
+                  :dir="tableIndex === tableBody.length - 1 ? 'bottom' : 'top'"
+                  class="oip_hybrid_chart__bar_content"
+                >
+                  <div :id="`text-value-${val}`" class="truncated">
+                    {{ val }}
+                  </div>
+                </arg-tooltip>
+              </div>
+              <div class="oip_hybrid_chart__td_content" v-if="index === 1">
+                <p>
+                  {{
+                    new Intl.NumberFormat("fr-FR")
+                      .format(val.value)
+                      .replace(",", ".")
+                  }}
+                  <span class="oip_hybrid_chart__bar_percentage"
+                    >({{ val.percentage }} %)</span
+                  >
+                </p>
+              </div>
+              <div class="oip_hybrid_chart__td_content" v-if="index > 1">
+                {{ val }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </client-only>
+    <div class="oip_hybrid_chart__footer" v-if="limiter">
+      <arg-btn
+        btnStyle="skeleton"
+        prefixIcon="CornersOut"
+        @onClick="changeShowState(true)"
+        v-if="!showAll"
+        >Show all</arg-btn
+      >
+      <arg-btn
+        btnStyle="skeleton"
+        prefixIcon="CornersIn"
+        @onClick="changeShowState(false)"
+        v-if="showAll"
+        >Show less</arg-btn
+      >
+    </div>
+  </div>
+</template>
+<script>
+import argBtn from "./argBtn";
+import argTooltip from "./argTooltip";
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argHybridChart",
+  components: { argBtn, argTooltip },
+  props: {
+    heads: {
+      type: Array,
+      required: true
+    },
+    contents: {
+      type: Array,
+      required: true
+    },
+    barColor: {
+      type: String,
+      default: "#4475FB"
+    },
+    limiter: {
+      type: Number,
+      required: false
+    }
+  },
+  emits: ["showState"],
+  setup(props, { emit }) {
+    const showAll = ref(false);
+    const maxValue = ref(0);
+    const tableBody = computed(() => {
+      let contentValues = [];
+      if (props.limiter) {
+        if (!showAll.value) {
+          contentValues = props.contents.slice(0, props.limiter);
+        } else {
+          contentValues = props.contents;
+        }
+      } else {
+        contentValues = props.contents;
+      }
+      return contentValues;
+    });
+    onMounted(() => {
+      getMaxValue();
+    });
+    watch(
+      () => props.contents,
+      (new_contents) => {
+        maxValue.value = 0;
+        getMaxValue();
+      }
+    );
+    function isEllipsisActive(value) {
+      let textValue = document?.getElementById(`text-value-${value}`);
+      let tooltip = document?.getElementById(`tooltip-${value}`);
+      if (textValue !== void 0 && textValue !== null && tooltip !== null) {
+        tooltip.style.maxWidth = "12000px";
+        textValue.style.overflow = "initial";
+        const noEllipsisWidth = textValue.offsetWidth;
+        tooltip.style.maxWidth = "100%";
+        textValue.style.overflow = "hidden";
+        const ellipsisWidth = textValue.offsetWidth;
+        if (ellipsisWidth < noEllipsisWidth) {
+          return false;
+        } else {
+          return true;
+        }
+      }
+    }
+    function getMaxValue() {
+      for (let i = 0; i < props.contents.length; i++) {
+        if (parseFloat(props.contents[i].values[1].percentage) > maxValue.value) {
+          parseFloat(maxValue.value = props.contents[i].values[1].percentage);
+        }
+      }
+    }
+    function changeShowState(val) {
+      showAll.value = val;
+      emit("showState", val);
+    }
+    function getPercentage(value) {
+      if (maxValue.value === 100) {
+        return value;
+      } else {
+        if (value === maxValue.value) {
+          return 100;
+        } else {
+          return value * 100 / maxValue.value;
+        }
+      }
+    }
+    return {
+      maxValue,
+      showAll,
+      getMaxValue,
+      changeShowState,
+      getPercentage,
+      tableBody,
+      isEllipsisActive
+    };
+  }
+});
+</script>
+<style scoped>
+.oip_hybrid_chart {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  table-layout: auto;
+}
+.oip_hybrid_chart__header th {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--cool-grey);
+}
+.oip_hybrid_chart__header_elem:first-child {
+  text-align: left;
+  padding-left: 0;
+}
+.oip_hybrid_chart__header_elem:last-child {
+  padding-right: 0;
+}
+.oip_hybrid_chart__header_elem {
+  padding: 5px 10px;
+  white-space: nowrap;
+  text-align: right;
+}
+.oip_hybrid_chart__body tr {
+  padding: 4px 0;
+  height: 40px;
+}
+.oip_hybrid_chart__td:first-child {
+  width: 100%;
+  padding-left: 0;
+}
+.oip_hybrid_chart__td:last-child .oip_hybrid_chart__td_content {
+  padding-right: 0;
+}
+.oip_hybrid_chart__td {
+  vertical-align: top !important;
+}
+.oip_hybrid_chart__td_content {
+  padding: 5px 10px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 160%;
+  color: var(--independence);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.oip_hybrid_chart__bar_group {
+  position: relative;
+  width: 100%;
+}
+.oip_hybrid_chart__bar {
+  position: absolute;
+  z-index: 0;
+  height: 32px;
+}
+.oip_hybrid_chart__bar_content {
+  position: absolute;
+  z-index: 1;
+  padding: 8px 10px;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  max-width: 100%;
+}
+
+.oip_hybrid_chart__bar_percentage {
+  margin-left: 4px;
+  font-weight: 400;
+}
+.oip_hybrid_chart__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+}
+
+.truncated {
+  display: block;
+  white-space: nowrap; /* forces text to single line */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

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

@@ -0,0 +1,48 @@
+declare const _default: import("vue").DefineComponent<{
+    heads: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    contents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    barColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    limiter: {
+        type: NumberConstructor;
+        required: false;
+    };
+}, {
+    maxValue: import("vue").Ref<number>;
+    showAll: import("vue").Ref<boolean>;
+    getMaxValue: () => void;
+    changeShowState: (val: boolean) => void;
+    getPercentage: (value: number) => number;
+    tableBody: import("vue").ComputedRef<never[]>;
+    isEllipsisActive: (value: string) => boolean | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "showState"[], "showState", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    heads: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    contents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    barColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    limiter: {
+        type: NumberConstructor;
+        required: false;
+    };
+}>> & {
+    onShowState?: ((...args: any[]) => any) | undefined;
+}, {
+    barColor: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argMainLayout.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="sidebarOpen ? 'arg_main_with_sidebar' : 'arg_main_no_sidebar'">
     <slot name="sidebar" />
+    <slot name="tuto" />
     <div class="arg_main_layout_body">
       <div class="arg_info" id="arg_info_section">
         <slot name="infoBar" />