VueUiXy add smooth curve option for line types in SVG mode

Author: graphieros

package-lock.json

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

package.json

@@ -96,15 +96,15 @@ const dataset2 = ref([
     name: "Series 3",
     series: [
       -55,
-      -34,
+      34,
       -21,
-      -13,
+      13,
       -8,
-      -5,
+      5,
       -3,
-      -2,
-      -1,
+      2,
       -1,
+      1,
       0,
       1,
       1,
@@ -118,6 +118,7 @@ const dataset2 = ref([
       55,
     ],
     useArea: true,
+    smooth: true,
     type: "line",
     dashed: false,
     dataLabels: true,
@@ -3530,6 +3531,25 @@ const showLocalTest = ref(false);
     <button @click="printRelation">PRINT RELATION CIRCLE</button>
     <button @click="printThermo">PRINT THERMO</button>
 
+    <div style="max-width: 1000px; margin: 0 auto">
+      <VueUiXy
+        ref="xytest"
+        :config="{ ...config, useCanvas: false, useCssAnimation: false }"
+        :dataset="dataset2"
+        v-if="!showLocalTest"
+        @selectLegend="selectLegendXY"
+        @selectX="selectX"
+      />
+      <XyTest
+        ref="xytest"
+        :config="{ ...config, useCanvas: false }"
+        :dataset="dataset2"
+        v-if="showLocalTest"
+        @selectLegend="selectLegendXY"
+        @selectX="selectX"
+      />
+    </div>
+
     <div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
       <VueUiSparkHistogram v-if="!showLocalTest" :dataset="histoDataset" :config="histoConfig"/>
       <HistoTest v-if="showLocalTest" :dataset="histoDataset" :config="histoConfig"/>
@@ -3634,25 +3654,6 @@ const showLocalTest = ref(false);
       />
     </div>
 
-    <div style="max-width: 1000px; margin: 0 auto">
-      <VueUiXy
-        ref="xytest"
-        :config="{ ...config, useCanvas: false, useCssAnimation: false }"
-        :dataset="dataset2"
-        v-if="!showLocalTest"
-        @selectLegend="selectLegendXY"
-        @selectX="selectX"
-      />
-      <XyTest
-        ref="xytest"
-        :config="{ ...config, useCanvas: false }"
-        :dataset="dataset2"
-        v-if="showLocalTest"
-        @selectLegend="selectLegendXY"
-        @selectX="selectX"
-      />
-    </div>
-
     <div style="maw-width:300px;margin: 0 auto; margin-top: 24px; margin-bottom: 24px;">
       <StackTest v-if="showLocalTest" :config="stackConfig" :dataset="stackDataset"/>
       <VueUiSparkStackbar v-if="!showLocalTest" :config="stackConfig" :dataset="stackDataset"/>

src/App.vue

@@ -228,21 +228,26 @@
                 <!-- LINES -->
                 <g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`">
                     <g v-if="serie.useArea">
-                        <path :d="`M${serie.area}Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
+                        <path v-if="serie.smooth" :d="`M ${serie.plots[0].x},${drawingArea.bottom} ${serie.curve} L ${serie.plots.at(-1).x},${drawingArea.bottom} Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
+
+                        <path v-else :d="`M${serie.area}Z`" :fill="chartConfig.line.area.useGradient ? `url(#areaGradient_${i}_${uniqueId})` : `${serie.color}${opacity[chartConfig.line.area.opacity]}`"/>
                     </g>
-                    <g v-for="(plot, j) in serie.plots" :key="`line_${i}_${j}`">
-                        <line 
-                            v-if="j < serie.plots.length - 1 && canShowValue(plot.value) && canShowValue(serie.plots[j+1].value)"
-                            :x1="plot.x"
-                            :x2="serie.plots[j+1].x"
-                            :y1="plot.y"
-                            :y2="serie.plots[j+1].y"
-                            :stroke="serie.color"
-                            :stroke-width="chartConfig.line.strokeWidth"
-                            :stroke-dasharray="serie.dashed ? chartConfig.line.strokeWidth * 2 : 0"
-                            stroke-linejoin="round"
-                            stroke-linecap="round"
-                        />
+                    <path v-if="serie.smooth" :d="`M${serie.curve}`" :stroke="serie.color" :stroke-width="chartConfig.line.strokeWidth" :stroke-dasharray="serie.dashed ? chartConfig.line.strokeWidth * 2 : 0" fill="none" />
+                    <g v-else>
+                        <g v-for="(plot, j) in serie.plots" :key="`line_${i}_${j}`">
+                            <line 
+                                v-if="j < serie.plots.length - 1 && canShowValue(plot.value) && canShowValue(serie.plots[j+1].value)"
+                                :x1="plot.x"
+                                :x2="serie.plots[j+1].x"
+                                :y1="plot.y"
+                                :y2="serie.plots[j+1].y"
+                                :stroke="serie.color"
+                                :stroke-width="chartConfig.line.strokeWidth"
+                                :stroke-dasharray="serie.dashed ? chartConfig.line.strokeWidth * 2 : 0"
+                                stroke-linejoin="round"
+                                stroke-linecap="round"
+                            />
+                        </g>
                     </g>
                     <g v-for="(plot, j) in serie.plots" 
                         :key="`circle_line_${i}_${j}`">
@@ -757,8 +762,10 @@ export default {
                             value: datapoint.absoluteValues[j],
                         }
                     });
+                const curve = this.createSmoothPath(plots);
                 return {
                     ...datapoint,
+                    curve,
                     plots,
                     area: !datapoint.useArea ? '' : this.createArea(plots)
                 }
@@ -1076,6 +1083,40 @@ export default {
             });
             return [ start.x, start.y, ...path, end.x, end.y].toString();
         },
+        createSmoothPath(points) {
+            const smoothing = 0.2;
+            function line(pointA, pointB) {
+                const lengthX = pointB.x - pointA.x;
+                const lengthY = pointB.y - pointA.y;
+                return {
+                    length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+                    angle: Math.atan2(lengthY, lengthX)
+                };
+            }
+            function controlPoint(current, previous, next, reverse) {
+                const p = previous || current;
+                const n = next || current;
+                const o = line(p, n);
+
+                const angle = o.angle + (reverse ? Math.PI : 0);
+                const length = o.length * smoothing;
+
+                const x = current.x + Math.cos(angle) * length;
+                const y = current.y + Math.sin(angle) * length;
+                return { x, y };
+            }
+            function bezierCommand(point, i, a) {
+                const cps = controlPoint(a[i - 1], a[i - 2], point);
+                const cpe = controlPoint(point, a[i - 1], a[i + 1], true);
+                return `C ${cps.x},${cps.y} ${cpe.x},${cpe.y} ${point.x},${point.y}`;
+            }
+            const d = points.reduce((acc, point, i, a) => i === 0
+            ? `${point.x},${point.y} `
+            : `${acc} ${bezierCommand(point, i, a)} `
+            , '');
+
+            return d;
+        },
         /////////////////////////////// CANVAS /////////////////////////////////
         createCanvasArea(plots) {
             const start = { x: plots[0].x, y: this.zero };