VueUiSparkline added config options to control chart width and optional dataLabel display

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.59",
+  "version": "2.0.60",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3525,7 +3525,7 @@ const kpiConfig = ref(
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
         <template #title>
           <BaseIcon name="chartSparkline" />
           VueUiSparkline

src/App.vue

@@ -123,8 +123,8 @@ const drawingArea = computed(() => {
         left: 0,
         right: svg.value.width,
         bottom: svg.value.height - 3,
-        start: props.showInfo && sparklineConfig.value.style.dataLabel.position === 'left' ? 210 : 0,
-        width: props.showInfo ? 290 : svg.value.width,
+        start: props.showInfo && sparklineConfig.value.style.dataLabel.show && sparklineConfig.value.style.dataLabel.position === 'left' ? svg.value.width - sparklineConfig.value.style.chartWidth : 30,
+        width: props.showInfo && sparklineConfig.value.style.dataLabel.show ? sparklineConfig.value.style.chartWidth : svg.value.width - 30,
         height: svg.value.height - topPadding
     }
 });
@@ -333,10 +333,10 @@ function selectDatapoint(datapoint, index) {
 
             <!-- DATALABEL -->
             <text
-                v-if="showInfo"
+                v-if="showInfo && sparklineConfig.style.dataLabel.show"
                 data-cy="sparkline-datalabel"
-                :x="sparklineConfig.style.dataLabel.position === 'left' ? 12 : drawingArea.width + 12"
-                :y="svg.height / 2 + sparklineConfig.style.dataLabel.fontSize / 2.5"
+                :x="sparklineConfig.style.dataLabel.position === 'left' ? 12 + sparklineConfig.style.dataLabel.offsetX : drawingArea.width + 12 + sparklineConfig.style.dataLabel.offsetX"
+                :y="svg.height / 2 + sparklineConfig.style.dataLabel.fontSize / 2.5 + sparklineConfig.style.dataLabel.offsetY"
                 :font-size="sparklineConfig.style.dataLabel.fontSize"
                 :font-weight="sparklineConfig.style.dataLabel.bold ? 'bold' : 'normal'"
                 :fill="sparklineConfig.style.dataLabel.color"

src/components/vue-ui-sparkline.vue

@@ -1685,6 +1685,7 @@
     "vue_ui_sparkline": {
         "type": "line",
         "style": {
+            "chartWidth": 290,
             "animation": {
                 "show": true,
                 "animationFrames": 360
@@ -1717,7 +1718,10 @@
                 "strokeDasharray": 3
             },
             "dataLabel": {
+                "show": true,
                 "position": "left",
+                "offsetX": 0,
+                "offsetY": 0,
                 "fontSize": 20,
                 "bold": true,
                 "color": "#2D353C",

src/default_configs.json

@@ -3813,6 +3813,7 @@ declare module 'vue-data-ui' {
         style?: {
             backgroundColor?: string;
             fontFamily?: string;
+            chartWidth?: number;
             animation?: {
                 show?: boolean;
                 animationFrames?: number;
@@ -3847,7 +3848,10 @@ declare module 'vue-data-ui' {
                 strokeDasharray?: number;
             };
             dataLabel?: {
+                show?: boolean;
                 position?: "left" | "right";
+                offsetX?: number;
+                offsetY?: number;
                 fontSize?: number;
                 bold?: boolean;
                 color?: string;