VueUiSparkline layout fixes

Author: graphieros

package-lock.json

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

package.json

@@ -824,73 +824,96 @@ const ratingDataset = ref({
 
 const ratingConfig = ref(getVueDataUiConfig('vue_ui_rating'));
 
-const sparklineConfig = ref(getVueDataUiConfig('vue_ui_sparkline'));
+const sparklineConfig = ref({
+  type: 'line',
+  style: {
+    backgroundColor: "#CCCCCC"
+  }
+})
+const sparklineConfig2 = ref({
+  type: 'bar',
+  style: {
+    backgroundColor: "#CCCCCC"
+  }
+})
 
 const sparklineDataset = ref([
-  {
-    period: "period1",
-    value: 0,
-  },
   {
     period: "period2",
     value: 1,
   },
   {
-    period: "period3",
+    period: "period2",
     value: 2,
   },
   {
-    period: "period4",
+    period: "period2",
     value: 3,
   },
   {
-    period: "period5",
-    value: 4,
+    period: "period2",
+    value: 8,
   },
   {
-    period: "period6",
-    value: 5,
+    period: "period2",
+    value: 13,
+  },
+  {
+    period: "period2",
+    value: 21,
   },
   {
-    period: "period6",
-    value: 6,
+    period: "period2",
+    value: 34,
   },
   {
-    period: "period8",
-    value: 7,
+    period: "period2",
+    value: 55,
   },
   {
-    period: "period9",
-    value: -7,
+    period: "period2",
+    value: 89,
   },
   {
-    period: "period10",
-    value: -6,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period11",
-    value: -5,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period12",
-    value: -4,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period13",
-    value: -3,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period14",
-    value: -2,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period15",
-    value: -1,
+    period: "period2",
+    value: 134,
   },
   {
-    period: "period16",
-    value: 0,
-  }
+    period: "period2",
+    value: 134,
+  },
+
+]);
+const sparklineDataset2 = ref([
+  {
+    period: "period2",
+    value: -2,
+  },
+  {
+    period: "period2",
+    value: 2,
+  },
+
 ]);
 
 const heatmapDataset = computed(() => {
@@ -2944,9 +2967,27 @@ function selectHistoDatapoint({ datapoint, index }) {
             :dataset="sparklineDataset"
             @selectDatapoint="selectSparklineDatapoint"
           >
-          <template #svg="{ svg }">
-              <circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
-            </template>
+          </SparklineTest>
+          <SparklineTest
+             ref="sparkline"
+            :config="sparklineConfig"
+            :dataset="sparklineDataset2"
+            @selectDatapoint="selectSparklineDatapoint"
+          >
+          </SparklineTest>
+          <SparklineTest
+             ref="sparkline"
+            :config="sparklineConfig2"
+            :dataset="sparklineDataset"
+            @selectDatapoint="selectSparklineDatapoint"
+          >
+          </SparklineTest>
+          <SparklineTest
+             ref="sparkline"
+            :config="sparklineConfig2"
+            :dataset="sparklineDataset2"
+            @selectDatapoint="selectSparklineDatapoint"
+          >
           </SparklineTest>
         </template>
         <template #prod>

src/App.vue

@@ -50,6 +50,8 @@ const svg = ref({
 
 const emits = defineEmits(['hoverIndex', 'selectDatapoint'])
 
+const bottomPadding = ref(6)
+
 const drawingArea = computed(() => {
     const topPadding = 12;
     return {
@@ -70,18 +72,18 @@ const max = computed(() => {
     return Math.max(...props.dataset.map(s => isNaN(s.value) || [undefined, null, 'NaN', NaN, Infinity, -Infinity].includes(s.value) ? 0 : s.value))
 });
 
-const bottomPadding = ref(6)
 
 const absoluteMin = computed(() => {
-    return Math.abs(min.value);
+    const num = min.value >= 0 ? 0 : min.value
+    return Math.abs(num);
 });
 
 const absoluteMax = computed(() => {
     return max.value + absoluteMin.value + bottomPadding.value;
 });
 
 const absoluteZero = computed(() => {
-    return drawingArea.value.bottom - (drawingArea.value.height * ratioToMax(absoluteMin.value + bottomPadding.value))
+    return drawingArea.value.bottom - (drawingArea.value.height * ratioToMax(absoluteMin.value))
 })
 
 function ratioToMax(v) {
@@ -98,11 +100,11 @@ const mutableDataset = computed(() => {
             period: s.period,
             plotValue: absoluteValue + absoluteMin.value,
             toMax: ratioToMax(absoluteValue + absoluteMin.value),
-            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}`,
+            x: drawingArea.value.start + (i * ((drawingArea.value.width / (len.value + 1)) > 30 ? 30 : (drawingArea.value.width / (len.value + 1)))),
+            y: drawingArea.value.bottom - (drawingArea.value.height * ratioToMax(absoluteValue + absoluteMin.value)),
+            id: `plot_${uid.value}_${i}`,
             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
+            width: (drawingArea.value.width / (len.value + 1)) > 30 ? 30 : (drawingArea.value.width / (len.value + 1))
         }
     })
 });
@@ -282,10 +284,10 @@ function selectDatapoint(datapoint, index) {
             <rect
                 v-for="(plot, i) in mutableDataset"
                 :data-cy="`sparkline-mouse-trap-${i}`"
-                :x="plot.x - (drawingArea.width / len / 2)"
+                :x="plot.x - ((drawingArea.width / (len + 1) > 30 ? 30 : drawingArea.width / (len + 1)) / 2)"
                 :y="drawingArea.top - 6"
                 :height="drawingArea.height + 6"
-                :width="(drawingArea.width / len)"
+                :width="(drawingArea.width / (len + 1) > 30 ? 30: drawingArea.width / (len + 1))"
                 fill="transparent"
                 @mouseenter="selectPlot(plot, i)"
                 @mouseleave="unselectPlot"