VueUiDonutEvolution minor fixes

graphieros · Mar 3, 2024 · 3b858c1 · 3b858c1
1 parent b50f34e
commit 3b858c1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 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": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2401,6 +2401,23 @@ const moodRadarConfig = ref({
     }
   })
 
+  const donutEvolutionConfig = ref({
+    style: {
+      chart: {
+        layout: {
+          grid: {
+            xAxis: {
+              dataLabels: {
+                values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN'],
+                showOnlyFirstAndLast: true
+              }
+            }
+          }
+        }
+      }
+    }
+  })
+
 </script>
 
 <template>
@@ -2656,7 +2673,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_donut_evolution)">
         <template #title>
           <BaseIcon name="chartDonutEvolution"/>
           VueUiDonutEvolution
@@ -2671,6 +2688,7 @@ const moodRadarConfig = ref({
         <template #dev>
           <DonutEvolutionTest
             :dataset="donutEvolutionDataset"
+            :config="donutEvolutionConfig"
           >
           <template #svg="{ svg }">
               <circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>
@@ -2680,6 +2698,7 @@ const moodRadarConfig = ref({
         <template #prod>
           <VueUiDonutEvolution
             :dataset="donutEvolutionDataset"
+            :config="donutEvolutionConfig"
           >
           <template #svg="{ svg }">
             <circle :cx="svg.absoluteWidth / 2" :cy="svg.absoluteHeight / 2" :r="30" fill="#FF000033"/>

diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
@@ -493,17 +493,19 @@ defineExpose({
 
             <!-- X LABELS -->
             <g v-if="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.show" :class="{'donut-opacity': true, 'donut-behind': isFixed}">
-                <text 
-                    v-for="(_, i) in maxLength"
-                    :x="padding.left + (slit * i) + (slit / 2)"
-                    :y="svg.absoluteHeight - padding.bottom + donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2"
-                    text-anchor="middle"
-                    :font-size="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.fontSize"
-                    :fill="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.color"
+                <g v-for="(_, i) in maxLength">
+                    <text
+                        v-if="(donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast && (i === 0 || i === maxLength - 1)) || !donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast"
+                        :x="padding.left + (slit * i) + (slit / 2)"
+                        :y="svg.absoluteHeight - padding.bottom + donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.fontSize * 2"
+                        text-anchor="middle"
+                        :font-size="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.fontSize"
+                        :fill="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.color"
 
-                >
-                    {{ donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.values[i] ?? '' }}
-                </text>
+                    >
+                        {{ donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.values[i] ?? '' }}
+                    </text>
+                </g>
             </g>
             
             <!-- DATAPOINTS -->
@@ -606,7 +608,7 @@ defineExpose({
             <!-- DATALABELS -->
             <g v-for="(datapoint, i ) in drawableDataset" :class="{'donut-opacity': true, 'donut-behind': (i !== hoveredIndex && hoveredIndex !== null) || isFixed}">
                 <text 
-                    v-if="datapoint.subtotal !== null"
+                    v-if="datapoint.subtotal !== null && donutEvolutionConfig.style.chart.layout.dataLabels.show"
                     text-anchor="middle"
                     :x="datapoint.x"
                     :y="hoveredIndex === datapoint.index && datapoint.subtotal ? datapoint.y + donutEvolutionConfig.style.chart.layout.dataLabels.fontSize / 3 : datapoint.y - datapoint.radius - donutEvolutionConfig.style.chart.layout.dataLabels.fontSize + donutEvolutionConfig.style.chart.layout.dataLabels.offsetY"