@tekkare/auriga 0.2.183 → 0.2.185

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.183"
+  "version": "0.2.185"
 }

package/dist/runtime/components/argChart.vue

@@ -155,7 +155,14 @@ export default defineComponent({
         zoom: {
           enabled: true,
           allowMouseWheelZoom: false
-        }
+        },
+        // Configure global tooltip and null value handling
+        tooltip: {
+          intersect: false,
+          shared: true
+        },
+        // Critical setting to handle null values correctly
+        nullValues: "connect"
       };
       if (props.titleInChart) {
         props.options["title"] = {
@@ -190,7 +197,16 @@ export default defineComponent({
       } else {
         props.options["title"] = { align: "center" };
       }
-      props.options["yaxis"] = { min: minValue.value, show: false };
+      props.options["yaxis"] = {
+        min: minValue.value,
+        show: false,
+        forceNiceScale: true,
+        labels: {
+          formatter: (val) => {
+            return val === null ? "" : val;
+          }
+        }
+      };
       if (props.colors) {
         props.options["colors"] = props.colors;
       }
@@ -200,6 +216,16 @@ export default defineComponent({
             props.options["stroke"] = { show: false };
           } else props.options["stroke"] = { width: 3, curve: "smooth" };
         }
+        props.options["stroke"] = {
+          ...props.options["stroke"],
+          curve: "smooth",
+          width: 3,
+          // These settings ensure we don't connect through null values
+          dashArray: 0,
+          lineCap: "round",
+          // This is the key setting - it tells ApexCharts to skip null values
+          show: true
+        };
         const defaultDataLabelsConfig = {
           enabled: true,
           position: "top",
@@ -212,6 +238,13 @@ export default defineComponent({
             borderColor: "transparent",
             opacity: 1,
             borderRadius: 2
+          },
+          // This filter function is critical - it prevents data labels from appearing for null values
+          filter: {
+            type: "value",
+            value: "null",
+            condition: "ne"
+            // 'ne' means "not equal to"
           }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
@@ -222,6 +255,9 @@ export default defineComponent({
         } else {
           const defaultDataLabelFormatter = {
             formatter(value, opt) {
+              if (value === null) {
+                return "";
+              }
               let returnValue = value;
               if (compactMode) {
                 returnValue = new Intl.NumberFormat("en-US", {
@@ -245,9 +281,7 @@ export default defineComponent({
                   }
                 }
               }
-              if (seriesData[opt.seriesIndex]?.data[opt.dataPointIndex] !== null) {
-                return returnValue;
-              }
+              return returnValue;
             }
           };
           props.options["dataLabels"] = {
@@ -267,7 +301,7 @@ export default defineComponent({
             width: 10,
             height: 10,
             radius: 1,
-            showNullDataPoints: true
+            showNullDataPoints: false
           },
           itemMargin: { vertical: 8, horizontal: 8 }
         };
@@ -286,7 +320,15 @@ export default defineComponent({
           }
         };
         if (props.options["markers"] === void 0) {
-          props.options["markers"] = { size: 0, showNullDataPoints: true };
+          props.options["markers"] = {
+            size: 0,
+            showNullDataPoints: false,
+            strokeWidth: 0,
+            hover: {
+              size: 5,
+              sizeOffset: 3
+            }
+          };
         }
         if (props.tooltipOptions) {
           props.options["tooltip"] = props.tooltipOptions;
@@ -294,6 +336,9 @@ export default defineComponent({
           props.options["tooltip"] = {
             y: {
               formatter(value, { series, seriesIndex, dataPointIndex, w }) {
+                if (value === null) {
+                  return null;
+                }
                 return value?.toLocaleString("fr-FR", {
                   minimumFractionDigits: 0,
                   maximumFractionDigits: 1

package/dist/runtime/components/argSliderTabs.vue

@@ -38,12 +38,13 @@
           </label>
         </div>
         <div
+          v-show="sliderVisible"
           class="toggle_option_slider"
           :style="{
             background: 'white',
             left: silderInfos.left,
             width: silderInfos.width,
-            height: silderInfos.height,
+            height: silderInfos.height
           }"
         />
       </div>
@@ -52,7 +53,14 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed } from "vue";
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  nextTick,
+  watch
+} from "vue";
 import ArgIcon from "./argIcon.vue";
 export default defineComponent({
   name: "ArgSliderTabs",
@@ -80,6 +88,7 @@ export default defineComponent({
   setup(props) {
     const el = ref();
     const buttonContents = ref(null);
+    const sliderVisible = ref(false);
     const silderInfos = computed(() => {
       return getSliderInfos(props.activeTab);
     });
@@ -87,22 +96,63 @@ export default defineComponent({
       props.switchTab(value);
     };
     const getSliderInfos = (index) => {
-      if (el.value && buttonContents.value) {
+      if (el.value && buttonContents.value && buttonContents.value.length > 0) {
         let left = 0;
         for (let i = 0; i < index; i++) {
-          left += buttonContents.value[i].clientWidth + 18;
+          if (buttonContents.value[i]) {
+            left += buttonContents.value[i].clientWidth + 18;
+          }
         }
-        const width = `${buttonContents.value[index].clientWidth + 16}px`;
+        const activeButton = buttonContents.value[index];
+        if (!activeButton) {
+          return { width: "0", left: "0", height: "0" };
+        }
+        const width = `${activeButton.clientWidth + 16}px`;
+        const height = `${el.value.clientHeight - 6}px`;
         return {
           width,
           left: `${left}px`,
-          height: `${el.value.clientHeight - 6}px`
+          height
         };
       } else {
         return { width: "0", left: "0", height: "0" };
       }
     };
-    return { updateButton, el, buttonContents, silderInfos };
+    const recalculateSlider = async () => {
+      await nextTick();
+      setTimeout(() => {
+        if (el.value && buttonContents.value && buttonContents.value.length > 0) {
+          const newInfos = getSliderInfos(props.activeTab);
+          if (newInfos.width !== "0") {
+            sliderVisible.value = true;
+          }
+        }
+      }, 100);
+    };
+    watch(
+      () => props.activeTab,
+      () => {
+        recalculateSlider();
+      }
+    );
+    watch(
+      () => props.tabs,
+      () => {
+        sliderVisible.value = false;
+        recalculateSlider();
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      recalculateSlider();
+    });
+    return {
+      updateButton,
+      el,
+      buttonContents,
+      silderInfos,
+      sliderVisible
+    };
   }
 });
 </script>

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

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         left: string;
         height: string;
     }>;
+    sliderVisible: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tabs: {
         type: () => Tabs;

package/package.json

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