VueUiNestedDonut improvements

Author: Alec Probert

README.md

@@ -6,15 +6,14 @@
     <a href="https://vue-data-ui.graphieros.com/"><img src="https://vue-data-ui.graphieros.com/vue-data-ui-showcase.png"></a>
 </p>
 
-
-
 # vue-data-ui
+
 ![npm](https://img.shields.io/npm/v/vue-data-ui)
 [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-37-green)
+![Static Badge](https://img.shields.io/badge/components-38-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -23,6 +22,7 @@ A user-empowering data visualization Vue components library.
 Available components:
 
 ## Charts
+
 - [VueUiXy](https://vue-data-ui.graphieros.com/docs#vue-ui-xy)
 - [VueUiDonut](https://vue-data-ui.graphieros.com/docs#vue-ui-donut)
 - [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
@@ -44,26 +44,31 @@ Available components:
 - [VueUiDonutEvolution](https://vue-data-ui.graphieros.com/docs#vue-ui-donut-evolution)
 - [VueUiMoodRadar](https://vue-data-ui.graphieros.com/docs#vue-ui-mood-radar)
 - [VueUiMolecule](https://vue-data-ui.graphieros.com/docs#vue-ui-molecule)
-
+- [VueUiNestedDonuts](https://vue-data-ui.graphieros.com/docs#vue-ui-nested-donuts)
 
 ## Mini charts
+
 - [VueUiSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkline)
 - [VueUiSparkbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkbar)
 - [VueUiSparkstackbar](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkstackbar)
 - [VueUiSparkHistogram](https://vue-data-ui.graphieros.com/docs#vue-ui-sparkhistogram)
 
 ## 3d
+
 - [VueUi3dBar](https://vue-data-ui.graphieros.com/docs#vue-ui-3d-bar)
 
 ## Tables
+
 - [VueUiTableSparkline](https://vue-data-ui.graphieros.com/docs#vue-ui-table-sparkline)
 - [VueUiTable](https://vue-data-ui.graphieros.com/docs#vue-ui-table)
 
 ## Rating
+
 - [VueUiRating](https://vue-data-ui.graphieros.com/docs#vue-ui-rating)
 - [VueUiSmiley](https://vue-data-ui.graphieros.com/docs#vue-ui-smiley)
 
 ## Utilities
+
 - [VueUiScreenshot](https://vue-data-ui.graphieros.com/docs#vue-ui-screenshot)
 - [VueUiSkeleton](https://vue-data-ui.graphieros.com/docs#vue-ui-skeleton)
 - [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
@@ -73,6 +78,7 @@ Available components:
 - [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
 
 # Installation
+
 ```
 npm i vue-data-ui
 ```
@@ -103,12 +109,15 @@ Or you can import just what you need in your files:
 ```
 
 ## Typescript
+
 Types are available in the 'vue-data-ui.d.ts' file under the types directory of the package.
 
 ## Nuxt
+
 [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
 
 # Customizable tooltips
+
 Charts with tooltips have a config option to customize tooltip contents:
 
 ```
@@ -120,14 +129,16 @@ customFormat: ({ seriesIndex, datapoint, series, config }) => {
 ```
 
 # Slots
+
 Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
 
 # Config
+
 If for some reason you can't access the documentation website and need to get the default config object for a component:
 
 ```
 import { getVueDataUiConfig } from "vue-data-ui";
 
 const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
 
-```
+```

package.json

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

src/App.vue

@@ -2616,6 +2616,7 @@ function selectHistoDatapoint({ datapoint, index }) {
 const nestedDonutsConfig = ref({
   style: {
     chart: {
+      backgroundColor: '#1A1A1A',
       tooltip: {
         customFormat: ({ datapoint, seriesIndex, series, config }) => {
           console.log({ datapoint, seriesIndex, series, config })

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

@@ -157,6 +157,29 @@ const mutableDataset = computed(() => {
     })
 })
 
+const gradientSets = computed(() => {
+    return [...immutableDataset.value].map((ds, i)  => {
+        const sizeRatio = i * donutSize.value / immutableDataset.value.length;
+
+        return {
+            sizeRatio,
+            donut: makeDonut(
+                { series: [{ value: 1}] },
+                svg.value.width / 2,
+                svg.value.height / 2,
+                donutSize.value - sizeRatio,
+                donutSize.value - sizeRatio,
+                1.99999,
+                2,
+                1,
+                360,
+                105.25,
+                donutSize.value / immutableDataset.value.length * donutConfig.value.style.chart.layout.donut.spacingRatio
+            )[0]
+        }
+    })
+})
+
 const selectedDonut = ref(null);
 const selectedDatapoint = ref(null);
 const selectedDatapointIndex = ref(null);
@@ -476,6 +499,25 @@ defineExpose({
                 </g>
             </g>
 
+            <!-- GRADIENTS -->
+            <defs>
+                <radialGradient v-for="(gradient, i) in gradientSets" :id="`radial_${uid}_${i}`" cx="50%" cy="50%" r="50%" :fr="30 - (1 * (i+1)) + '%'">
+                    <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
+                    <stop :offset="70 - (20 * i) + '%'" stop-color="#FFFFFF" :stop-opacity="donutConfig.style.chart.gradientIntensity / 100"/>
+                    <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
+                </radialGradient>
+            </defs>
+            <g v-if="donutConfig.style.chart.useGradient">
+                <g v-for="(gradient, i) in gradientSets">
+                    <path
+                        :d="gradient.donut.arcSlice"
+                        :fill="`url(#radial_${uid}_${i})`"
+                        stroke="transparent"
+                        stroke-width="0"
+                    />
+                </g>
+            </g>
+
             <!-- DATALABELS -->
             <g v-if="donutConfig.style.chart.layout.labels.dataLabels.show">
                 <g v-for="(item, i) in mutableDataset">