VueUiSparkline add bar type

graphieros · Nov 26, 2023 · 7db1b4e · 7db1b4e
1 parent e13da26
commit 7db1b4e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.5",
+  "version": "1.9.6",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2186,6 +2186,7 @@ const skeletonConfig = ref({
 });
 
 const sparklineConfig = ref({
+  type: 'bar',
   style: {
     backgroundColor: "#1A1A1A",
     sparkline: {
@@ -2243,7 +2244,7 @@ const sparklineDataset = ref([
   },
   {
     period: "period2",
-    value: -1,
+    value: 1,
   },
   {
     period: "period3",
@@ -2255,56 +2256,52 @@ const sparklineDataset = ref([
   },
   {
     period: "period5",
-    value: -4,
+    value: 4,
   },
   {
     period: "period6",
     value: 5,
   },
   {
     period: "period6",
-    value: -6,
+    value: 6,
   },
   {
     period: "period8",
     value: 7,
   },
   {
     period: "period9",
-    value: -8,
+    value: -7,
   },
   {
     period: "period10",
-    value: 9,
+    value: -6,
   },
   {
     period: "period11",
-    value: -10,
+    value: -5,
   },
   {
     period: "period12",
-    value: 11,
+    value: -4,
   },
   {
     period: "period13",
-    value: -12,
+    value: -3,
   },
   {
     period: "period14",
-    value: 13,
+    value: -2,
   },
   {
     period: "period15",
-    value: -14,
+    value: -1,
   },
   {
     period: "period16",
-    value: 15,
-  },
-  {
-    period: "period17",
-    value: -16,
-  },
+    value: 0,
+  }
 ]);
 
 const heatmapDataset = computed(() => {

diff --git a/src/components/vue-ui-sparkline.vue b/src/components/vue-ui-sparkline.vue
@@ -91,7 +91,8 @@ const mutableDataset = computed(() => {
             x: drawingArea.value.start + (i * (drawingArea.value.width / len.value)),
             y: drawingArea.value.bottom - (drawingArea.value.height * ratioToMax(absoluteValue + bottomPadding.value + absoluteMin.value)),
             id: `plot_${uid}_${i}`,
-            color: sparklineConfig.value.style.area.useGradient ? shiftHue(sparklineConfig.value.style.line.color, 0.05 * ( 1 - (i / len.value))) : sparklineConfig.value.style.line.color
+            color: isBar.value ? sparklineConfig.value.style.bar.color : sparklineConfig.value.style.area.useGradient ? shiftHue(sparklineConfig.value.style.line.color, 0.05 * ( 1 - (i / len.value))) : sparklineConfig.value.style.line.color,
+            width: drawingArea.value.width / len.value
         }
     })
 });
@@ -126,6 +127,10 @@ const dataLabel = computed(() => {
     }
 });
 
+const isBar = computed(() => {
+    return sparklineConfig.value.type && sparklineConfig.value.type === 'bar';
+});
+
 </script>
 
 <template>
@@ -147,10 +152,18 @@ const dataLabel = computed(() => {
                     <stop offset="0%" :stop-color="`${shiftHue(sparklineConfig.style.area.color, 0.05)}${opacity[sparklineConfig.style.area.opacity]}`"/>
                     <stop offset="100%" :stop-color="sparklineConfig.style.area.color + opacity[sparklineConfig.style.area.opacity]" />
                 </linearGradient>
+                <linearGradient x2="0%" y2="100%" :id="`sparkline_bar_gradient_pos_${uid}`">
+                    <stop offset="0%" :stop-color="sparklineConfig.style.bar.color"/>
+                    <stop offset="100%" :stop-color="`${shiftHue(sparklineConfig.style.bar.color, 0.05)}`"/>
+                </linearGradient>
+                <linearGradient x2="0%" y2="100%" :id="`sparkline_bar_gradient_neg_${uid}`">
+                    <stop offset="0%" :stop-color="`${shiftHue(sparklineConfig.style.bar.color, 0.05)}`"/>
+                    <stop offset="100%" :stop-color="sparklineConfig.style.bar.color"/>
+                </linearGradient>
             </defs>
 
             <!-- AREA -->
-            <g v-if="sparklineConfig.style.area.show">
+            <g v-if="sparklineConfig.style.area.show && !isBar">
                 <path
                     data-cy="sparkline-smooth-area"
                     v-if="sparklineConfig.style.line.smooth"
@@ -165,11 +178,11 @@ const dataLabel = computed(() => {
                 />
             </g>
 
-            <path data-cy="sparkline-smooth-path" v-if="sparklineConfig.style.line.smooth" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
+            <path data-cy="sparkline-smooth-path" v-if="sparklineConfig.style.line.smooth && !isBar" :d="`M ${createSmoothPath(mutableDataset)}`" :stroke="sparklineConfig.style.line.color" fill="none" :stroke-width="sparklineConfig.style.line.strokeWidth" stroke-linecap="round"/>
 
             <g v-for="(plot, i) in mutableDataset">
                 <line 
-                    v-if="i < mutableDataset.length - 1 && !sparklineConfig.style.line.smooth"
+                    v-if="i < mutableDataset.length - 1 && !sparklineConfig.style.line.smooth && !isBar"
                     :data-cy="`sparkline-segment-${i}`"
                     :x1="plot.x"
                     :x2="mutableDataset[i + 1].x"
@@ -181,6 +194,15 @@ const dataLabel = computed(() => {
                     stroke-linejoin="round"
                     shape-rendering="geometricPrecision"
                 />
+                <rect 
+                    v-if="isBar"
+                    :x="plot.x - plot.width / 2"
+                    :y="plot.absoluteValue > 0 ? plot.y : absoluteZero"
+                    :width="plot.width"
+                    :height="Math.abs(plot.y - absoluteZero)"
+                    :fill="plot.absoluteValue > 0 ? `url(#sparkline_bar_gradient_pos_${uid})` : `url(#sparkline_bar_gradient_neg_${uid})`"
+                    :rx="sparklineConfig.style.bar.borderRadius"
+                />
                 <!-- VERTICAL INDICATORS -->
                 <line
                     :data-cy="`sparkline-vertical-indicator-${i}`"

diff --git a/src/default_configs.json b/src/default_configs.json
@@ -1459,6 +1459,7 @@
         }
     },
     "vue_ui_sparkline": {
+        "type": "line",
         "style": {
             "backgroundColor":"#FFFFFF",
             "fontFamily": "inherit",
@@ -1467,6 +1468,10 @@
                 "strokeWidth": 3,
                 "smooth": false
             },
+            "bar": {
+                "borderRadius": 3,
+                "color":"#3366cc"
+            },
             "zeroLine": {
                 "color": "#2D353C",
                 "strokeWidth": 1

diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -2205,6 +2205,7 @@ declare module 'vue-data-ui' {
     };
 
     export type VueUiSparklineConfig = {
+        type?: "line" | "bar";
         style?: {
             backgroundColor?: string;
             fontFamily?: string;
@@ -2217,6 +2218,10 @@ declare module 'vue-data-ui' {
                 strokeWidth?: number;
                 smooth?: boolean;
             };
+            bar?: {
+                borderRadius?: number;
+                color?: string;
+            };
             zeroLine?: {
                 color?: string;
                 strokeWidth?: number;