Improvement - VueUiDonut & VueUiNestedDonuts - Expose chart dimensions to config

Author: graphieros

TestingArena/ArenaVueUiDonut.vue

@@ -66,7 +66,10 @@ function alterDataset() {
 }
 
 const model = ref([
-    { key: 'type', def: 'polar', type: 'select', options: ['classic', 'polar']},
+    { key: 'type', def: 'classic', type: 'select', options: ['classic', 'polar']},
+    { key: 'style.chart.width', def: 512, type: 'number', min: 0, max: 512 },
+    { key: 'style.chart.height', def: 512, type: 'number', min: 0, max: 512 },
+
     { key: 'serieToggleAnimation.show', def: true, type: 'checkbox'},
     { key: 'serieToggleAnimation.durationMs', def: 500, type: 'number', min: 0, max: 5000, step: 100},
     { key: 'loadAnimation.show', def: true, type: 'checkbox'},

TestingArena/ArenaVueUiNestedDonuts.vue

@@ -78,6 +78,9 @@ const model = ref([
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
 
+    { key: 'style.chart.width', def: 512, type: 'number', min: 0, max: 512 },
+    { key: 'style.chart.height', def: 512, type: 'number', min: 0, max: 512 },
+
     { key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100},
     { key: 'style.chart.padding.right', def: 48, type: 'number', min: 0, max: 100},
     { key: 'style.chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100},

src/components/vue-ui-donut.vue

@@ -251,6 +251,10 @@ watch(() => props.config, (_newCfg) => {
     mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
     mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
     mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
+
+    // Other ref resets
+    svg.value.height = FINAL_CONFIG.value.style.chart.height;
+    svg.value.width = FINAL_CONFIG.value.style.chart.width;
 }, { deep: true });
 
 const padding = computed(() => {
@@ -287,8 +291,8 @@ const mutableConfig = ref({
 });
 
 const svg = ref({
-    height: 360,
-    width: 512
+    height: FINAL_CONFIG.value.style.chart.height,
+    width: FINAL_CONFIG.value.style.chart.width
 });
 
 const donutThickness = computed(() => {

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

@@ -139,11 +139,13 @@ watch(
         tableStep.value += 1;
         legendStep.value += 1;
 
-        mutableConfig.value.dataLabels.show =
-            FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
+        mutableConfig.value.dataLabels.show = FINAL_CONFIG.value.style.chart.layout.labels.dataLabels.show;
         mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
-        mutableConfig.value.showTooltip =
-            FINAL_CONFIG.value.style.chart.tooltip.show;
+        mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
+
+        // Other ref resets
+        svg.value.width = FINAL_CONFIG.value.style.chart.width;
+        svg.value.height = FINAL_CONFIG.value.style.chart.height;
     },
     { deep: true }
 );
@@ -357,8 +359,8 @@ const mutableConfig = ref({
 });
 
 const svg = ref({
-    height: 512,
-    width: 512,
+    width: FINAL_CONFIG.value.style.chart.width,
+    height: FINAL_CONFIG.value.style.chart.height,
 });
 
 const emit = defineEmits(["selectLegend", "selectDatapoint"]);

src/useConfig.js

@@ -740,6 +740,8 @@ export function useConfig() {
                 backgroundColor: COLOR_WHITE,
                 color: COLOR_BLACK,
                 padding: PADDING([0,0,0,0]),
+                width: 512,
+                height: 360,
                 layout: {
                     curvedMarkers: false,
                     labels: {
@@ -3225,6 +3227,8 @@ export function useConfig() {
                 useGradient: true,
                 gradientIntensity: 40,
                 padding: PADDING([0,0,0,0]),
+                width: 512,
+                height: 512,
                 layout: {
                     labels: {
                         dataLabels: {

types/vue-data-ui.d.ts

@@ -3033,6 +3033,8 @@ declare module "vue-data-ui" {
                 backgroundColor?: string;
                 color?: string;
                 padding?: ChartPadding;
+                width?: number;
+                height?: number;
                 layout?: {
                     curvedMarkers?: boolean;
                     labels?: {
@@ -3221,6 +3223,8 @@ declare module "vue-data-ui" {
                 backgroundColor?: string;
                 color?: string;
                 padding?: ChartPadding;
+                width?: number;
+                height?: number;
                 layout?: {
                     labels?: {
                         dataLabels?: {