Dev environment - Update testing arena

graphieros · Nov 13, 2024 · b738cdc · b738cdc
1 parent ea8fb92
commit b738cdc
Show file tree

Hide file tree

Showing 36 changed files with 70 additions and 0 deletions.
diff --git a/TestingArena/ArenaVueUi3dBar.vue b/TestingArena/ArenaVueUi3dBar.vue
@@ -87,6 +87,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.shape', def: 'bar', type: 'select', options: ['bar', 'tube']},
     { key: 'style.chart.animation.use', def: true, type: 'checkbox'},

diff --git a/TestingArena/ArenaVueUiAgePyramid.vue b/TestingArena/ArenaVueUiAgePyramid.vue
@@ -51,6 +51,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiCandlestick.vue b/TestingArena/ArenaVueUiCandlestick.vue
@@ -66,6 +66,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: "inherit", type: 'text'},
     { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},

diff --git a/TestingArena/ArenaVueUiCarouselTable.vue b/TestingArena/ArenaVueUiCarouselTable.vue
@@ -76,6 +76,7 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.animation', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
 
     { key: 'userOptions.buttonTitles.pdf', def: 'DOWNLOAD PDF', type: 'text'},
     { key: 'userOptions.buttonTitles.csv', def: 'DOWNLOAD CSV', type: 'text'},

diff --git a/TestingArena/ArenaVueUiChestnut.vue b/TestingArena/ArenaVueUiChestnut.vue
@@ -282,6 +282,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue
@@ -73,6 +73,8 @@ const model = ref([
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'useCssAnimation', def: true, type: 'checkbox', label: 'useCssAnimation', category: 'general' },
     { key: 'useBlurOnHover', def: true, type: 'checkbox', label: "useBlurOnHover", category: 'general' },
     { key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' },

diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue
@@ -34,6 +34,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiDumbbell.vue b/TestingArena/ArenaVueUiDumbbell.vue
@@ -35,6 +35,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useAnimation', def: true, type: 'checkbox'},
     { key: 'animationSpeed', def: 2, type: 'number', min: 1, max: 10},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiFlow.vue b/TestingArena/ArenaVueUiFlow.vue
@@ -31,6 +31,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text' },
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color' },

diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue
@@ -30,6 +30,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiGauge.vue b/TestingArena/ArenaVueUiGauge.vue
@@ -61,6 +61,8 @@ const model = ref([
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiHeatmap.vue b/TestingArena/ArenaVueUiHeatmap.vue
@@ -80,6 +80,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: "inherit", type: 'text'},
     { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiMolecule.vue b/TestingArena/ArenaVueUiMolecule.vue
@@ -151,6 +151,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiMoodRadar.vue b/TestingArena/ArenaVueUiMoodRadar.vue
@@ -23,6 +23,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue
@@ -61,6 +61,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue
@@ -67,6 +67,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox' },
     { key: 'useStartAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},

diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
@@ -61,6 +61,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox' },
     { key: 'style.fontFamily', def: 'inherit', type: 'text' },
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },

diff --git a/TestingArena/ArenaVueUiQuadrant.vue b/TestingArena/ArenaVueUiQuadrant.vue
@@ -152,6 +152,8 @@ const model = ref([
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'zoomAnimationFrames', def: 20, type: 'range', min: 0, max: 100},
     { key: 'style.fontFamily', def: 'inherit', type: "text"},

diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue
@@ -112,6 +112,8 @@ const model = ref([
     { key: 'userOptionsButtons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptionsButtons.img', def: true, type: 'checkbox'},
     { key: 'userOptionsButtons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptionsPosition', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'axisLabelsFontSize', def: 12, type: 'number', min: 8, max: 24},
     { key: 'barGap', def: 12, type: 'range', min: 0, max: 48},
     { key: 'barAnimated', def: true, type: 'checkbox' },

diff --git a/TestingArena/ArenaVueUiRadar.vue b/TestingArena/ArenaVueUiRadar.vue
@@ -108,6 +108,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},

diff --git a/TestingArena/ArenaVueUiRelationCircle.vue b/TestingArena/ArenaVueUiRelationCircle.vue
@@ -86,6 +86,8 @@ const model = ref([
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue
@@ -71,6 +71,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue
@@ -104,6 +104,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: "inherit", type: 'text'},
     { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},

diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue
@@ -51,6 +51,8 @@ onMounted(() => {
 })
 
 const model = ref([
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'orientation', def: 'vertical', type:'select', options: ['vertical', 'horizontal']},
     { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']},

diff --git a/TestingArena/ArenaVueUiStripPlot.vue b/TestingArena/ArenaVueUiStripPlot.vue
@@ -97,6 +97,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiTableHeatmap.vue b/TestingArena/ArenaVueUiTableHeatmap.vue
@@ -50,6 +50,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},

diff --git a/TestingArena/ArenaVueUiTableSparkline.vue b/TestingArena/ArenaVueUiTableSparkline.vue
@@ -43,6 +43,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'responsiveBreakpoint', def: 500, type: 'number', min: 300, max: 800},
     { key: 'showAverage', def: true, type: 'checkbox'},
     { key: 'showMedian', def: true, type: 'checkbox'},

diff --git a/TestingArena/ArenaVueUiThermometer.vue b/TestingArena/ArenaVueUiThermometer.vue
@@ -44,6 +44,8 @@ const model = ref([
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiTiremarks.vue b/TestingArena/ArenaVueUiTiremarks.vue
@@ -40,6 +40,8 @@ const model = ref([
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue
@@ -141,6 +141,8 @@ const model = ref([
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'style.fontFamily', def: 'inherit', type: 'text' },
     { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},

diff --git a/TestingArena/ArenaVueUiVerticalBar.vue b/TestingArena/ArenaVueUiVerticalBar.vue
@@ -109,6 +109,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.sort', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},

diff --git a/TestingArena/ArenaVueUiWaffle.vue b/TestingArena/ArenaVueUiWaffle.vue
@@ -65,6 +65,8 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'useCustomCells', def: false, type: 'checkbox'},
     { key: 'useAnimation', def: true, type: 'checkbox'},

diff --git a/TestingArena/ArenaVueUiWheel.vue b/TestingArena/ArenaVueUiWheel.vue
@@ -42,6 +42,7 @@ const model = ref([
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
+    { key: 'userOptions.position', def: 'left', type: 'select', options: ['left', 'right']},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF40', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
@@ -51,6 +52,7 @@ const model = ref([
     { key: 'style.chart.layout.wheel.ticks.rounded', def: true, type: 'checkbox'},
     { key: 'style.chart.layout.wheel.ticks.inactiveColor', def: '#e1e5e8', type: 'color'},
     { key: 'style.chart.layout.wheel.ticks.activeColor', def: '#5f8bee', type: 'color'},
+    { key: 'style.chart.layout.wheel.ticks.sizeRatio', def: 0.9, type: 'range', min: 0, max: 1, step: 0.01 },
     { key: 'style.chart.layout.wheel.ticks.gradient.show', def: true, type: 'checkbox'},
     { key: 'style.chart.layout.wheel.ticks.gradient.shiftHueIntensity', def: 100, type:'range', min: 0, max: 100},
     { key: 'style.chart.layout.innerCircle.show', def: true, type: 'checkbox'},

diff --git a/TestingArena/ArenaVueUiWordCloud.vue b/TestingArena/ArenaVueUiWordCloud.vue
@@ -22,6 +22,8 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
+    { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
+    
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'animationDelayMs', def: 20, type: 'number', min: 0, max: 100},
     { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},

diff --git a/TestingArena/ArenaVueUiXy.vue b/TestingArena/ArenaVueUiXy.vue
@@ -159,6 +159,7 @@ const model = ref([
     { key: 'chart.userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'chart.userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'chart.userOptions.buttons.stack', def: true, type: 'checkbox'},
+    { key: 'chart.userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
 
     { key: 'useCanvas', def: false, type: 'checkbox'}, // DEPRECATED (removed)
     { key: 'useCssAnimation', def: true, type: 'checkbox', label: 'useCssAnimation', category: 'general' },