Improvement - VueUiGauge - Add individual segment name offset dataset option

Author: graphieros

src/components/vue-ui-gauge.vue

@@ -335,9 +335,10 @@ function useAnimation(targetValue) {
 
 const arcSizeSource = computed(() => {
     const src = FINAL_CONFIG.value.responsive ? Math.min(svg.value.width, svg.value.height) : svg.value.width;
+    const arcRatio = 2.5 / FINAL_CONFIG.value.style.chart.layout.radiusRatio;
     return {
-        arcs: src / 2.5,
-        gradients: src / 2.75,
+        arcs: src / arcRatio,
+        gradients: src / (arcRatio * 1.1),
         base: FINAL_CONFIG.value.responsive ? svg.value.height / 2 : svg.value.height * 0.7,
         ratingBase: FINAL_CONFIG.value.responsive ? svg.value.height / 2 + (svg.value.height / 4) : svg.value.height * 0.9,
         pointerSize: FINAL_CONFIG.value.responsive ? Math.min(svg.value.width, svg.value.height) / 3 : svg.value.width / 3.2
@@ -378,7 +379,11 @@ const labelArcs = computed(() => {
     return donut;
 });
 
-const pathRadius = computed(() => arcSizeSource.value.arcs * FINAL_CONFIG.value.style.chart.layout.segmentNames.offsetRatio);
+const pathRadii = computed(() => {
+    return arcs.value.map((arc) => {
+        return arcSizeSource.value.arcs * FINAL_CONFIG.value.style.chart.layout.segmentNames.offsetRatio * (arc.nameOffsetRatio || 1);
+    });
+});
 
 function calculateCumulativeHalfCircleOffsets(percentages) {
     const totalPercentage = percentages.reduce((sum, val) => sum + val, 0);
@@ -548,8 +553,9 @@ defineExpose({
             <template v-if="FINAL_CONFIG.style.chart.layout.segmentNames.show && FINAL_CONFIG.style.chart.layout.segmentNames.curved">            
                 <!-- CIRCLE PATH AS BASE FOR CURVED LABELS -->
                 <path
-                    :id="`curve_${uid}`"
-                    :d="`M ${pointer.x1},${pointer.y1} m -${pathRadius},0 a ${pathRadius},${pathRadius} 0 1,1 ${2 * pathRadius},0 a ${pathRadius},${pathRadius} 0 1,1 -${2 * pathRadius},0`" fill="transparent"
+                    v-for="(arc, i) in arcs"
+                    :id="`curve_${uid}_${i}`"
+                    :d="`M ${pointer.x1},${pointer.y1} m -${pathRadii[i]},0 a ${pathRadii[i]},${pathRadii[i]} 0 1,1 ${2 * pathRadii[i]},0 a ${pathRadii[i]},${pathRadii[i]} 0 1,1 -${2 * pathRadii[i]},0`" fill="transparent"
                 />
 
                 <!-- CURVED LABELS -->
@@ -560,7 +566,7 @@ defineExpose({
                     :font-weight="FINAL_CONFIG.style.chart.layout.segmentNames.bold ? 'bold' : 'normal'"
                     text-anchor="middle"
                 >
-                    <textPath :href="`#curve_${uid}`" :startOffset="curveLabelOffsets[i]">
+                    <textPath :href="`#curve_${uid}_${i}`" :startOffset="curveLabelOffsets[i]">
                         {{ arc.name || '' }}
                     </textPath>
                 </text>