VueUiNestedDonuts added display donut name option

Author: Alec Probert

package-lock.json

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

package.json

@@ -2616,11 +2616,14 @@ function selectHistoDatapoint({ datapoint, index }) {
 const nestedDonutsConfig = ref({
   style: {
     chart: {
-      backgroundColor: '#1A1A1A',
-      tooltip: {
-        customFormat: ({ datapoint, seriesIndex, series, config }) => {
-          console.log({ datapoint, seriesIndex, series, config })
-          return 'TEST'
+      layout: {
+        labels: {
+          dataLabels: {
+            showDonutName: true,
+            boldDonutName: true,
+            donutNameAbbreviation: false,
+            donutNameOffsetY: 0
+          }
         }
       }
     }

src/App.vue

@@ -245,7 +245,7 @@ function useTooltip({ datapoint, _relativeIndex, seriesIndex }){
                     }
                 }
         }
-        tooltipContent.value = `<div>${html}</div>`;
+        tooltipContent.value = `<div style="font-size:${donutConfig.value.style.chart.tooltip.fontSize}px">${html}</div>`;
     }
     isTooltip.value = true;
 }
@@ -516,6 +516,23 @@ defineExpose({
                 </g>
             </g>
 
+            <g v-if="donutConfig.style.chart.layout.labels.dataLabels.showDonutName">
+                <g v-for="(item, i) in mutableDataset">
+                    <g v-for="(arc, j) in item.donut">    
+                        <text
+                            v-if="j === 0"
+                            :x="svg.width / 2"
+                            :y="arc.startY - donutConfig.style.chart.layout.labels.dataLabels.fontSize + donutConfig.style.chart.layout.labels.dataLabels.donutNameOffsetY"
+                            text-anchor="middle"
+                            :font-size="donutConfig.style.chart.layout.labels.dataLabels.fontSize"
+                            :font-weight="donutConfig.style.chart.layout.labels.dataLabels.boldDonutName ? 'bold': 'normal'"
+                        >
+                            {{ donutConfig.style.chart.layout.labels.dataLabels.donutNameAbbreviation ? abbreviate({ source: item.name, length: donutConfig.style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize }) : item.name }}
+                        </text>
+                    </g>
+                </g>
+            </g>
+
             <!-- DATALABELS -->
             <g v-if="donutConfig.style.chart.layout.labels.dataLabels.show">
                 <g v-for="(item, i) in mutableDataset">

src/components/vue-ui-nested-donuts.vue

@@ -510,7 +510,12 @@
                             "boldValue": false,
                             "boldPercentage": true,
                             "roundingValue": 0,
-                            "roundingPercentage": 0
+                            "roundingPercentage": 0,
+                            "showDonutName": true,
+                            "boldDonutName": true,
+                            "donutNameAbbreviation": true,
+                            "donutNameMaxAbbreviationSize": 3,
+                            "donutNameOffsetY": 0
                         }
                     },
                     "donut": {

src/default_configs.json

@@ -2336,6 +2336,11 @@ declare module 'vue-data-ui' {
                             showValue?: boolean;
                             suffix?: string;
                             useSerieColor?: boolean;
+                            showDonutName?: boolean;
+                            boldDonutName?: boolean;
+                            donutNameAbbreviation?: boolean;
+                            donutNameOffsetY?: number;
+                            donutNameMaxAbbreviationSize?: number;
                         };
                     };
                     donut?: {