@tekkare/auriga 0.2.188 → 0.2.191

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.188"
+  "version": "0.2.191"
 }

package/dist/runtime/components/argChart.vue

@@ -120,6 +120,18 @@ export default defineComponent({
     showXAxis: {
       type: Boolean,
       default: false
+    },
+    labelFontSize: {
+      type: String,
+      default: "12px"
+    },
+    barSpaceBetween: {
+      type: String,
+      default: "50%"
+    },
+    labelSpacing: {
+      type: Number,
+      default: null
     }
   },
   setup(props) {
@@ -229,9 +241,10 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           enabled: true,
           position: "top",
+          offsetY: props.labelSpacing !== null ? props.labelSpacing : 0,
           style: {
             fontFamily: "Figtree, sans-serif",
-            fontSize: "12px",
+            fontSize: props.labelFontSize,
             fontWeight: "400"
           },
           background: {
@@ -369,7 +382,7 @@ export default defineComponent({
           bar: {
             ...userBarOpts,
             distributed: typeof userBarOpts.distributed === "boolean" ? userBarOpts.distributed : hasColorsProp && !isStacked,
-            columnWidth: "50%",
+            columnWidth: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -377,8 +390,8 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetY: -20,
-          style: { fontSize: "14px", colors: ["#3E3F5E"], fontWeight: "500" }
+          offsetY: props.labelSpacing !== null ? props.labelSpacing : -20,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"], fontWeight: "500" }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -443,7 +456,7 @@ export default defineComponent({
             distributed: predefinedColors,
             horizontal: true,
             borderRadius: 2,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -451,8 +464,8 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: 65,
-          style: { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : 65,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -526,7 +539,7 @@ export default defineComponent({
           bar: {
             horizontal: true,
             borderRadius: 6,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -534,8 +547,8 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: -30,
-          style: { fontSize: "14px", colors: ["#FFFFFF"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : -30,
+          style: { fontSize: props.labelFontSize, colors: ["#FFFFFF"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -607,7 +620,7 @@ export default defineComponent({
           bar: {
             horizontal: true,
             borderRadius: 6,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -631,8 +644,8 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: -50,
-          style: { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : -50,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -676,7 +689,8 @@ export default defineComponent({
           bar: {
             horizontal: props.direction === "horizontal" ? true : false,
             borderRadius: 2,
-            barHeight: "50%",
+            barHeight: props.direction === "horizontal" ? props.barSpaceBetween : "50%",
+            columnWidth: props.direction === "horizontal" ? "50%" : props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -684,8 +698,9 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: props.options?.dataLabels?.position ? props.options?.dataLabels?.position : "top",
           enabled: props.options?.dataLabels?.enabled ? props.options?.dataLabels?.enabled : true,
-          offsetX: props.options?.dataLabels?.offsetX ? props.options?.dataLabels?.offsetX : 65,
-          style: props.options?.dataLabels?.style ? props.options?.dataLabels?.style : { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : props.options?.dataLabels?.offsetX ? props.options?.dataLabels?.offsetX : 65,
+          offsetY: props.labelSpacing !== null && props.direction !== "horizontal" ? props.labelSpacing : 0,
+          style: props.options?.dataLabels?.style ? props.options?.dataLabels?.style : { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -747,10 +762,10 @@ export default defineComponent({
       } else if (props.type === "pie" || props.type === "donut") {
         props.options["labels"] = props.categories;
         let defaultDataLabelsConfig = {
-          offset: -50,
+          offset: props.labelSpacing !== null ? props.labelSpacing : -50,
           enabled: true,
           style: {
-            fontSize: "14px",
+            fontSize: props.labelFontSize,
             colors: props.type === "donut" ? ["#3E3F5E"] : ["#FFFFFF"]
           },
           dropShadow: { enabled: false }

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

@@ -73,6 +73,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    labelFontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    barSpaceBetween: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelSpacing: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>, {
     percentage: (partialValue: any, totalValue: any) => number;
     chartKey: import("vue").Ref<number, number>;
@@ -154,6 +166,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    labelFontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    barSpaceBetween: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelSpacing: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>> & Readonly<{}>, {
     width: string;
     height: string;
@@ -170,6 +194,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     sharedTooltip: boolean;
     direction: string;
     showXAxis: boolean;
+    labelFontSize: string;
+    barSpaceBetween: string;
+    labelSpacing: number;
 }, {}, {
     apexchart: (import("vue").Component & import("vue").ComponentOptionsBase<import("vue3-apexcharts").VueApexChartsComponent, any, any, any, any, any, any, any, string, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions>) & (ThisType<any> & import("vue").Plugin);
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

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