@tekkare/auriga 0.1.10 → 0.1.11

package/dist/runtime/components/argChart.vue

@@ -2,30 +2,24 @@
   <div class="prmt_chart" :class="`${type}_arg_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>
+    <apexchart
+      :type="chartType"
+      :options="chartOptions"
+      :series="series"
+      :height="height"
+      :width="width"
+      :key="chartKey"
+    />
   </div>
 </template>
 <script>
 import {
-  onMounted,
   ref,
   computed,
   watch,
-  defineProps,
-  defineEmits,
   defineComponent,
-  defineAsyncComponent,
+  defineAsyncComponent
 } from "vue";
-
 const ApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
 export default defineComponent({
   name: "argChart",
@@ -36,27 +30,27 @@ export default defineComponent({
       required: false,
       default() {
         return {};
-      },
+      }
     },
     series: {
       type: Array,
-      required: true,
+      required: true
     },
     type: {
       type: String,
-      required: true,
+      required: true
     },
     height: {
       type: String,
-      default: "auto",
+      default: "auto"
     },
     width: {
       type: String,
-      default: "100%",
+      default: "100%"
     },
     categories: {
       type: Array,
-      required: true,
+      required: true
     },
     colors: {
       type: Array,
@@ -77,29 +71,29 @@ export default defineComponent({
         "#0ea5e9",
         "#84cc16",
         "#d946ef",
-        "#06b6d4",
-      ],
+        "#06b6d4"
+      ]
     },
     withPercentages: {
       type: Boolean,
-      default: false,
+      default: false
     },
     compactValues: {
       type: Boolean,
-      default: false,
+      default: false
     },
     french: {
       type: Boolean,
-      default: false,
+      default: false
     },
     hideLegend: {
       type: Boolean,
-      default: false,
+      default: false
     },
     tooltipOptions: {
       type: Object,
-      default: undefined,
-    },
+      default: void 0
+    }
   },
   setup(props) {
     const chartKey = ref(1);
@@ -108,33 +102,21 @@ export default defineComponent({
       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 },
+        row: { colors: ["transparent"], opacity: 0 }
       };
       props.options["chart"] = {
         animations: { enabled: false },
         redrawOnParentResize: true,
-        redrawOnWindowResize: 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 = {
@@ -143,18 +125,18 @@ export default defineComponent({
           style: {
             fontFamily: "Figtree, sans-serif",
             fontSize: "12px",
-            fontWeight: "400",
+            fontWeight: "400"
           },
           background: {
             borderColor: "transparent",
             opacity: 1,
-            borderRadius: 2,
-          },
+            borderRadius: 2
+          }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
             ...defaultDataLabelsConfig,
-            ...props.options.dataLabels,
+            ...props.options.dataLabels
           };
         } else {
           let defaultDataLabelFormatter = {
@@ -163,30 +145,19 @@ export default defineComponent({
               if (compactMode) {
                 returnValue = new Intl.NumberFormat("en-US", {
                   notation: "compact",
-                  maximumFractionDigits: 1,
+                  maximumFractionDigits: 1
                 }).format(value);
               }
               if (!compactMode) {
-                returnValue = new Intl.NumberFormat("fr-FR")
-                  .format(value)
-                  .replace(",", ".");
+                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 (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).toFixed(1)
+                  ).replace(",", ".");
                   if (percentageValue > 0) {
                     returnValue = returnValue + " (+" + percentageValue + "%)";
                   } else {
@@ -194,19 +165,16 @@ export default defineComponent({
                   }
                 }
               }
-              if (
-                seriesData[opt.seriesIndex].data[opt.dataPointIndex] !== null
-              ) {
+              if (seriesData[opt.seriesIndex].data[opt.dataPointIndex] !== null) {
                 return returnValue;
               }
-            },
+            }
           };
           props.options["dataLabels"] = {
             ...defaultDataLabelsConfig,
-            ...defaultDataLabelFormatter,
+            ...defaultDataLabelFormatter
           };
         }
-
         props.options["legend"] = {
           showForSingleSeries: true,
           showForNullSeries: true,
@@ -219,9 +187,9 @@ export default defineComponent({
             width: 10,
             height: 10,
             radius: 1,
-            showNullDataPoints: true,
+            showNullDataPoints: true
           },
-          itemMargin: { vertical: 8, horizontal: 8 },
+          itemMargin: { vertical: 8, horizontal: 8 }
         };
         props.options["xaxis"] = {
           categories: props.categories,
@@ -233,9 +201,9 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "12px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
         props.options["yaxis"] = { min: 0, show: false };
         props.options["markers"] = { size: 0, showNullDataPoints: true };
@@ -246,12 +214,10 @@ export default defineComponent({
             y: {
               formatter(value, { series, seriesIndex, dataPointIndex, w }) {
                 return value;
-              },
-            },
+              }
+            }
           };
-      }
-      //Column bar charts
-      else if (props.type === "bar-column" || props.type === "bar") {
+      } else if (props.type === "bar-column" || props.type === "bar") {
         let predefinedColors = false;
         if (props.colors) {
           predefinedColors = true;
@@ -261,8 +227,8 @@ export default defineComponent({
             distributed: predefinedColors,
             columnWidth: "50%",
             colors: { backgroundBarOpacity: 1 },
-            dataLabels: { position: "top", hideOverflowingLabels: true },
-          },
+            dataLabels: { position: "top", hideOverflowingLabels: true }
+          }
         };
         props.options["dataLabels"] = {
           position: "top",
@@ -274,7 +240,7 @@ export default defineComponent({
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                maximumFractionDigits: 1
               }).format(value);
             }
             if (!compactMode) {
@@ -285,13 +251,11 @@ export default defineComponent({
                 (a, b) => a + b,
                 0
               );
-              let percentage = new Intl.NumberFormat("fr-FR")
-                .format(((100 * value) / seriesTotal).toFixed(1))
-                .replace(",", ".");
-              returnValue = returnValue + " (" + percentage + "%)";
+              let percentage2 = new Intl.NumberFormat("fr-FR").format((100 * value / seriesTotal).toFixed(1)).replace(",", ".");
+              returnValue = returnValue + " (" + percentage2 + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.hideLegend) {
           props.options["legend"] = { show: false };
@@ -309,14 +273,12 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "14px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
         props.options["yaxis"] = { show: false, min: 0 };
-      }
-      //Horizontal bar chart
-      else if (props.type === "bar-horizontal") {
+      } else if (props.type === "bar-horizontal") {
         let predefinedColors = false;
         if (props.colors) {
           predefinedColors = true;
@@ -328,8 +290,8 @@ export default defineComponent({
             borderRadius: 2,
             barHeight: "50%",
             colors: { backgroundBarOpacity: 1 },
-            dataLabels: { position: "top", hideOverflowingLabels: true },
-          },
+            dataLabels: { position: "top", hideOverflowingLabels: true }
+          }
         };
         props.options["dataLabels"] = {
           position: "top",
@@ -341,7 +303,7 @@ export default defineComponent({
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                maximumFractionDigits: 1
               }).format(value);
             }
             if (!compactMode) {
@@ -352,13 +314,11 @@ export default defineComponent({
                 (a, b) => a + b,
                 0
               );
-              let percentage = new Intl.NumberFormat("fr-FR")
-                .format(((100 * value) / seriesTotal).toFixed(1))
-                .replace(",", ".");
-              returnValue = returnValue + " (" + percentage + "%)";
+              let percentage2 = new Intl.NumberFormat("fr-FR").format((100 * value / seriesTotal).toFixed(1)).replace(",", ".");
+              returnValue = returnValue + " (" + percentage2 + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.hideLegend) {
           props.options["legend"] = { show: false };
@@ -376,21 +336,19 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "14px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
-      }
-      // Horizontal Stacks
-      else if (props.type === "bar-horizontal-stack") {
+      } else if (props.type === "bar-horizontal-stack") {
         props.options["plotOptions"] = {
           bar: {
             horizontal: true,
             borderRadius: 6,
             barHeight: "50%",
             colors: { backgroundBarOpacity: 1 },
-            dataLabels: { position: "top", hideOverflowingLabels: true },
-          },
+            dataLabels: { position: "top", hideOverflowingLabels: true }
+          }
         };
         props.options["dataLabels"] = {
           position: "top",
@@ -402,7 +360,7 @@ export default defineComponent({
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                maximumFractionDigits: 1
               }).format(value);
             }
             if (!compactMode) {
@@ -411,15 +369,13 @@ export default defineComponent({
             if (hasPercentages) {
               let groupTotal = 0;
               seriesData.map(
-                (d) => (groupTotal = groupTotal + d.data[opt.dataPointIndex])
+                (d) => groupTotal = groupTotal + d.data[opt.dataPointIndex]
               );
-              let percentage = new Intl.NumberFormat("fr-FR")
-                .format(((100 * value) / groupTotal).toFixed(1))
-                .replace(",", ".");
-              returnValue = returnValue + " (" + percentage + "%)";
+              let percentage2 = new Intl.NumberFormat("fr-FR").format((100 * value / groupTotal).toFixed(1)).replace(",", ".");
+              returnValue = returnValue + " (" + percentage2 + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.tooltipOptions) {
           props.options["tooltip"] = props.tooltipOptions;
@@ -435,9 +391,9 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "14px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
       } else if (props.type === "full-bar-horizontal-stack") {
         props.options["plotOptions"] = {
@@ -446,8 +402,8 @@ export default defineComponent({
             borderRadius: 6,
             barHeight: "50%",
             colors: { backgroundBarOpacity: 1 },
-            dataLabels: { position: "top", hideOverflowingLabels: true },
-          },
+            dataLabels: { position: "top", hideOverflowingLabels: true }
+          }
         };
         props.options.chart["stacked"] = true;
         props.options.chart["stackType"] = "100%";
@@ -461,9 +417,9 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "14px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
         props.options["dataLabels"] = {
           position: "top",
@@ -471,13 +427,12 @@ export default defineComponent({
           offsetX: -50,
           style: { fontSize: "14px", colors: ["#3E3F5E"] },
           formatter(value, opt) {
-            let dataValue =
-              seriesData[opt.seriesIndex].data[opt.dataPointIndex];
+            let dataValue = seriesData[opt.seriesIndex].data[opt.dataPointIndex];
             let returnValue = dataValue;
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                maximumFractionDigits: 1
               }).format(dataValue);
             }
             if (!compactMode) {
@@ -487,14 +442,12 @@ export default defineComponent({
               returnValue = returnValue + " (" + value.toFixed(1) + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.tooltipOptions) {
           props.options["tooltip"] = props.tooltipOptions;
         }
-      }
-      // Horizontal group
-      else if (props.type === "bar-horizontal-group") {
+      } else if (props.type === "bar-horizontal-group") {
         let predefinedColors = false;
         if (props.colors) {
           predefinedColors = true;
@@ -505,8 +458,8 @@ export default defineComponent({
             borderRadius: 2,
             barHeight: "50%",
             colors: { backgroundBarOpacity: 1 },
-            dataLabels: { position: "top", hideOverflowingLabels: true },
-          },
+            dataLabels: { position: "top", hideOverflowingLabels: true }
+          }
         };
         props.options["dataLabels"] = {
           position: "top",
@@ -518,7 +471,7 @@ export default defineComponent({
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                maximumFractionDigits: 1
               }).format(value);
             }
             if (!compactMode) {
@@ -529,13 +482,11 @@ export default defineComponent({
                 (a, b) => a + b,
                 0
               );
-              let percentage = new Intl.NumberFormat("fr-FR")
-                .format(((100 * value) / seriesTotal).toFixed(1))
-                .replace(",", ".");
-              returnValue = returnValue + " (" + percentage + "%)";
+              let percentage2 = new Intl.NumberFormat("fr-FR").format((100 * value / seriesTotal).toFixed(1)).replace(",", ".");
+              returnValue = returnValue + " (" + percentage2 + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.tooltipOptions) {
           props.options["tooltip"] = props.tooltipOptions;
@@ -550,13 +501,11 @@ export default defineComponent({
               fontFamily: "Figtree, sans-serif",
               fontSize: "14px",
               fontWeight: "400",
-              colors: ["#3E3F5E"],
-            },
-          },
+              colors: ["#3E3F5E"]
+            }
+          }
         };
-      }
-      //Pie/Camambert
-      else if (props.type === "pie") {
+      } else if (props.type === "pie") {
         props.options["labels"] = props.categories;
         props.options["dataLabels"] = {
           offset: -50,
@@ -568,25 +517,21 @@ export default defineComponent({
             if (compactMode) {
               returnValue = new Intl.NumberFormat("en-US", {
                 notation: "compact",
-                maximumFractionDigits: 1,
+                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(",", ".");
+              returnValue = new Intl.NumberFormat("fr-FR").format(opt.w.config.series[opt.seriesIndex]).replace(",", ".");
             }
             if (hasPercentages) {
-              let percentage = new Intl.NumberFormat("fr-FR", {
+              let percentage2 = new Intl.NumberFormat("fr-FR", {
                 notation: "compact",
-                maximumFractionDigits: 1,
-              })
-                .format(value)
-                .replace(",", ".");
-              returnValue = returnValue + " (" + percentage + "%)";
+                maximumFractionDigits: 1
+              }).format(value).replace(",", ".");
+              returnValue = returnValue + " (" + percentage2 + "%)";
             }
             return returnValue;
-          },
+          }
         };
         if (props.tooltipOptions) {
           props.options["tooltip"] = props.tooltipOptions;
@@ -594,12 +539,11 @@ export default defineComponent({
         props.options["plotOptions"] = {
           pie: {
             dataLabels: {
-              offset: -40,
-            },
-          },
+              offset: -40
+            }
+          }
         };
       }
-
       return props.options;
     });
     const chartType = computed(() => {
@@ -611,24 +555,22 @@ export default defineComponent({
       }
       return selectedType.value;
     });
-
     watch(
       () => props.series,
       () => {
         chartKey.value += 1;
       }
     );
-
     function percentage(partialValue, totalValue) {
-      return (100 * partialValue) / totalValue;
+      return 100 * partialValue / totalValue;
     }
     return {
       percentage,
       chartKey,
       chartType,
-      chartOptions,
+      chartOptions
     };
-  },
+  }
 });
 </script>
 <style>

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

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     chartKey: import("vue").Ref<number>;
     chartType: import("vue").ComputedRef<string>;
     chartOptions: import("vue").ComputedRef<Record<string, any>>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     options: {
         type: ObjectConstructor;
         required: false;