@tekkare/auriga 0.1.4 → 0.1.5

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.4"
+  "version": "0.1.5"
 }

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -405,9 +405,10 @@ export default defineComponent({
       removeSelected.value = false;
       closeIndex.value = null;
       searchBar.value.focus();
+      emit("update:Value", searchedWords.value);
     }
     function selectSearch(item) {
-      let searchValue = value.value.replace(regexSearch, "");
+      const searchValue = value.value.replace(regexSearch, "");
       selectedShortcut.value = item.symbol;
       if (searchValue.length > 0) {
         if (searchedWords.value.filter((f) => f.value === searchValue).length === 0) {

package/dist/runtime/components/argChart.vue

@@ -0,0 +1,663 @@
+<template>
+  <div class="prmt_chart">
+    <h1 class="prmt_chart_title"><slot name="title" /></h1>
+    <div class="prmt_chart_source"><slot name="source" /></div>
+    <client-only>
+      <apexchart
+        :type="chartType"
+        :options="chartOptions"
+        :series="series"
+        :height="height"
+        :width="width"
+        :key="chartKey"
+      />
+    </client-only>
+  </div>
+</template>
+<script>
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineProps,
+  defineEmits,
+  defineComponent,
+  defineAsyncComponent,
+} from "vue";
+
+const ApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+export default defineComponent({
+  name: "argChart",
+  components: { apexchart: ApexCharts },
+  props: {
+    options: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "auto",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    categories: {
+      type: Array,
+      required: true,
+    },
+    colors: {
+      type: Array,
+      required: false,
+      default: () => [
+        "#3b82f6",
+        "#10b981",
+        "#f59e0b",
+        "#f43f5e",
+        "#8b5cf6",
+        "#ec4899",
+        "#f97316",
+        "#14b8a6",
+        "#6366f1",
+        "#eab308",
+        "#a855f7",
+        "#22c55e",
+        "#0ea5e9",
+        "#84cc16",
+        "#d946ef",
+        "#06b6d4",
+      ],
+    },
+    withPercentages: {
+      type: Boolean,
+      default: false,
+    },
+    compactValues: {
+      type: Boolean,
+      default: false,
+    },
+    french: {
+      type: Boolean,
+      default: false,
+    },
+    hideLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const chartKey = ref(1);
+    const chartOptions = computed(() => {
+      const seriesData = props.series;
+      const hasPercentages = props.withPercentages;
+      const compactMode = props.compactValues;
+      const hideLegend = props.hideLegend;
+
+      //General styling
+      props.options["grid"] = {
+        borderColor: "#EAEAF5",
+        strokeDashArray: 7,
+        padding: { left: 30, right: 30 },
+        row: { colors: ["transparent"], opacity: 0 },
+      };
+      props.options["chart"] = {
+        animations: { enabled: false },
+        redrawOnParentResize: true,
+        redrawOnWindowResize: true,
+      };
+      props.options["title"] = { align: "center" };
+
+      //Change to French
+      //if(this.french){
+      //  this.options.chart['locales'] = [fr]
+      //  this.options.chart['defaultLocale'] = 'fr'
+      //}
+
+      //Override colors
+
+      if (props.colors) {
+        props.options["colors"] = props.colors;
+      }
+      //Adjustments specific to line charts
+      if (props.type === "line") {
+        props.options["stroke"] = { width: 3, curve: "smooth" };
+        let defaultDataLabelsConfig = {
+          enabled: true,
+          position: "top",
+          style: {
+            fontFamily: "Figtree, sans-serif",
+            fontSize: "12px",
+            fontWeight: "400",
+          },
+          background: {
+            borderColor: "transparent",
+            opacity: 1,
+            borderRadius: 2,
+          },
+        };
+        if (props.options.dataLabels && props.options.dataLabels.formatter) {
+          props.options["dataLabels"] = {
+            ...defaultDataLabelsConfig,
+            ...props.options.dataLabels,
+          };
+        } else {
+          let defaultDataLabelFormatter = {
+            formatter(value, opt) {
+              let returnValue = value;
+              if (compactMode) {
+                returnValue = new Intl.NumberFormat("en-US", {
+                  notation: "compact",
+                  maximumFractionDigits: 1,
+                }).format(value);
+              }
+              if (!compactMode) {
+                returnValue = new Intl.NumberFormat("fr-FR")
+                  .format(value)
+                  .replace(",", ".");
+              }
+              //Make sure data is not null and don't show percentage if null
+              if (hasPercentages) {
+                let seriesLength = seriesData.length;
+                if (
+                  opt.dataPointIndex > 0 &&
+                  seriesData[opt.seriesIndex].data[opt.dataPointIndex - 1] !==
+                    null &&
+                  seriesData[opt.seriesIndex].data[opt.dataPointIndex] !== null
+                ) {
+                  let previousVal =
+                    seriesData[opt.seriesIndex].data[opt.dataPointIndex - 1];
+                  let percentageValue = new Intl.NumberFormat("fr-FR")
+                    .format(
+                      (((value - previousVal) / previousVal) * 100.0).toFixed(1)
+                    )
+                    .replace(",", ".");
+                  if (percentageValue > 0) {
+                    returnValue = returnValue + " (+" + percentageValue + "%)";
+                  } else {
+                    returnValue = returnValue + " (" + percentageValue + "%)";
+                  }
+                }
+              }
+              if (
+                seriesData[opt.seriesIndex].data[opt.dataPointIndex] !== null
+              ) {
+                return returnValue;
+              }
+            },
+          };
+          props.options["dataLabels"] = {
+            ...defaultDataLabelsConfig,
+            ...defaultDataLabelFormatter,
+          };
+        }
+
+        props.options["legend"] = {
+          showForSingleSeries: true,
+          showForNullSeries: true,
+          showForZeroSeries: true,
+          show: true,
+          position: "bottom",
+          fontFamily: "Figtree, sans-serif",
+          fontSize: "14px",
+          markers: {
+            width: 10,
+            height: 10,
+            radius: 1,
+            showNullDataPoints: true,
+          },
+          itemMargin: { vertical: 8, horizontal: 8 },
+        };
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: true,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "12px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+        props.options["yaxis"] = { min: 0, show: false };
+        props.options["markers"] = { size: 0, showNullDataPoints: true };
+        props.options["tooltip"] = {
+          y: {
+            formatter(value, { series, seriesIndex, dataPointIndex, w }) {
+              return value;
+            },
+          },
+        };
+      }
+      //Column bar charts
+      else if (props.type === "bar-column" || props.type === "bar") {
+        let predefinedColors = false;
+        if (props.colors) {
+          predefinedColors = true;
+        }
+        props.options["plotOptions"] = {
+          bar: {
+            distributed: predefinedColors,
+            borderRadius: 2,
+            columnWidth: "50%",
+            colors: { backgroundBarOpacity: 1 },
+            dataLabels: { position: "top", hideOverflowingLabels: true },
+          },
+        };
+        props.options["dataLabels"] = {
+          position: "top",
+          enabled: true,
+          offsetY: -20,
+          style: { fontSize: "14px", colors: ["#3E3F5E"] },
+          formatter(value, opt) {
+            let returnValue = value;
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(value);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR").format(value);
+            }
+            if (hasPercentages) {
+              let seriesTotal = seriesData[opt.seriesIndex].data.reduce(
+                (a, b) => a + b,
+                0
+              );
+              let percentage = new Intl.NumberFormat("fr-FR")
+                .format(((100 * value) / seriesTotal).toFixed(1))
+                .replace(",", ".");
+              returnValue = returnValue + " (" + percentage + "%)";
+            }
+            return returnValue;
+          },
+        };
+        if (props.hideLegend) {
+          props.options["legend"] = { show: false };
+        }
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: true,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "14px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+        props.options["yaxis"] = { show: false, min: 0 };
+      }
+      //Horizontal bar chart
+      else if (props.type === "bar-horizontal") {
+        let predefinedColors = false;
+        if (props.colors) {
+          predefinedColors = true;
+        }
+        props.options["plotOptions"] = {
+          bar: {
+            distributed: predefinedColors,
+            horizontal: true,
+            borderRadius: 2,
+            barHeight: "50%",
+            colors: { backgroundBarOpacity: 1 },
+            dataLabels: { position: "top", hideOverflowingLabels: true },
+          },
+        };
+        props.options["dataLabels"] = {
+          position: "top",
+          enabled: true,
+          offsetX: 65,
+          style: { fontSize: "14px", colors: ["#3E3F5E"] },
+          formatter(value, opt) {
+            let returnValue = value;
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(value);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR").format(value);
+            }
+            if (hasPercentages) {
+              let seriesTotal = seriesData[opt.seriesIndex].data.reduce(
+                (a, b) => a + b,
+                0
+              );
+              let percentage = new Intl.NumberFormat("fr-FR")
+                .format(((100 * value) / seriesTotal).toFixed(1))
+                .replace(",", ".");
+              returnValue = returnValue + " (" + percentage + "%)";
+            }
+            return returnValue;
+          },
+        };
+        if (props.hideLegend) {
+          props.options["legend"] = { show: false };
+        }
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: false,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "14px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+      }
+      // Horizontal Stacks
+      else if (props.type === "bar-horizontal-stack") {
+        props.options["plotOptions"] = {
+          bar: {
+            horizontal: true,
+            borderRadius: 2,
+            barHeight: "50%",
+            colors: { backgroundBarOpacity: 1 },
+            dataLabels: { position: "top", hideOverflowingLabels: true },
+          },
+        };
+        props.options["dataLabels"] = {
+          position: "top",
+          enabled: true,
+          offsetX: -30,
+          style: { fontSize: "14px", colors: ["#FFFFFF"] },
+          formatter(value, opt) {
+            let returnValue = value;
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(value);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR").format(value);
+            }
+            if (hasPercentages) {
+              let groupTotal = 0;
+              seriesData.map(
+                (d) => (groupTotal = groupTotal + d.data[opt.dataPointIndex])
+              );
+              let percentage = new Intl.NumberFormat("fr-FR")
+                .format(((100 * value) / groupTotal).toFixed(1))
+                .replace(",", ".");
+              returnValue = returnValue + " (" + percentage + "%)";
+            }
+            return returnValue;
+          },
+        };
+        props.options.chart["stacked"] = true;
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: false,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "14px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+      } else if (props.type === "full-bar-horizontal-stack") {
+        props.options["plotOptions"] = {
+          bar: {
+            horizontal: true,
+            borderRadius: 2,
+            barHeight: "50%",
+            colors: { backgroundBarOpacity: 1 },
+            dataLabels: { position: "top", hideOverflowingLabels: true },
+          },
+        };
+        props.options.chart["stacked"] = true;
+        props.options.chart["stackType"] = "100%";
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: false,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "14px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+        props.options["dataLabels"] = {
+          position: "top",
+          enabled: true,
+          offsetX: -50,
+          style: { fontSize: "14px", colors: ["#3E3F5E"] },
+          formatter(value, opt) {
+            let dataValue =
+              seriesData[opt.seriesIndex].data[opt.dataPointIndex];
+            let returnValue = dataValue;
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(dataValue);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR").format(dataValue);
+            }
+            if (hasPercentages) {
+              returnValue = returnValue + " (" + value.toFixed(1) + "%)";
+            }
+            return returnValue;
+          },
+        };
+      }
+      // Horizontal group
+      else if (props.type === "bar-horizontal-group") {
+        let predefinedColors = false;
+        if (props.colors) {
+          predefinedColors = true;
+        }
+        props.options["plotOptions"] = {
+          bar: {
+            horizontal: true,
+            borderRadius: 2,
+            barHeight: "50%",
+            colors: { backgroundBarOpacity: 1 },
+            dataLabels: { position: "top", hideOverflowingLabels: true },
+          },
+        };
+        props.options["dataLabels"] = {
+          position: "top",
+          enabled: true,
+          offsetX: 65,
+          style: { fontSize: "14px", colors: ["#3E3F5E"] },
+          formatter(value, opt) {
+            let returnValue = value;
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(value);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR").format(value);
+            }
+            if (hasPercentages) {
+              let seriesTotal = seriesData[opt.seriesIndex].data.reduce(
+                (a, b) => a + b,
+                0
+              );
+              let percentage = new Intl.NumberFormat("fr-FR")
+                .format(((100 * value) / seriesTotal).toFixed(1))
+                .replace(",", ".");
+              returnValue = returnValue + " (" + percentage + "%)";
+            }
+            return returnValue;
+          },
+        };
+        props.options["xaxis"] = {
+          categories: props.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: {
+            show: false,
+            style: {
+              fontFamily: "Figtree, sans-serif",
+              fontSize: "14px",
+              fontWeight: "400",
+              colors: ["#3E3F5E"],
+            },
+          },
+        };
+      }
+      //Pie/Camambert
+      else if (props.type === "pie") {
+        props.options["labels"] = props.categories;
+        props.options["dataLabels"] = {
+          offset: -50,
+          enabled: true,
+          style: { fontSize: "14px", colors: ["#FFFFFF"] },
+          dropShadow: { enabled: false },
+          formatter(value, opt) {
+            let returnValue = opt.w.config.series[opt.seriesIndex];
+            if (compactMode) {
+              returnValue = new Intl.NumberFormat("en-US", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              }).format(opt.w.config.series[opt.seriesIndex]);
+            }
+            if (!compactMode) {
+              returnValue = new Intl.NumberFormat("fr-FR")
+                .format(opt.w.config.series[opt.seriesIndex])
+                .replace(",", ".");
+            }
+            if (hasPercentages) {
+              let percentage = new Intl.NumberFormat("fr-FR", {
+                notation: "compact",
+                maximumFractionDigits: 1,
+              })
+                .format(value)
+                .replace(",", ".");
+              returnValue = returnValue + " (" + percentage + "%)";
+            }
+            return returnValue;
+          },
+        };
+        props.options["plotOptions"] = {
+          pie: {
+            dataLabels: {
+              offset: -40,
+            },
+          },
+        };
+      }
+
+      return props.options;
+    });
+    const chartType = computed(() => {
+      let selectedType = ref("");
+      if (props.type.includes("bar")) {
+        selectedType.value = "bar";
+      } else {
+        selectedType.value = props.type;
+      }
+      return selectedType.value;
+    });
+
+    watch(
+      () => props.series,
+      () => {
+        chartKey.value += 1;
+      }
+    );
+
+    function percentage(partialValue, totalValue) {
+      return (100 * partialValue) / totalValue;
+    }
+    return {
+      percentage,
+      chartKey,
+      chartType,
+      chartOptions,
+    };
+  },
+});
+</script>
+<style>
+.prmt_chart {
+  font-family: "Figtree", sans-serif !important;
+  position: relative;
+}
+.prmt_chart_title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 21px;
+  color: var(--independence);
+  margin-bottom: 8px;
+  margin-right: 150px;
+}
+.prmt_chart_title.prmt_chart_title_without_subtitle {
+  margin-bottom: 22px;
+}
+.prmt_chart_source {
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #2176ff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 14px;
+}
+.prmt_chart_source a {
+  color: #2176ff;
+}
+.prmt_chart_source:empty {
+  visibility: hidden;
+}
+.prmt_chart .apexcharts-toolbar {
+  top: 0 !important;
+}
+.prmt_chart .apexcharts-canvas .apexcharts-svg {
+  overflow: visible;
+}
+.prmt_chart .apexcharts-pie-area {
+  stroke-width: 0;
+}
+
+.prmt_chart .apexcharts-canvas {
+  position: initial;
+}
+</style>