graphieros · graphieros · Nov 9, 2024 · Nov 9, 2024 · Nov 9, 2024 · Nov 9, 2024
diff --git a/TestingArena/ArenaVueUi3dBar.vue b/TestingArena/ArenaVueUi3dBar.vue
@@ -92,7 +92,7 @@ const model = ref([
     { key: 'style.chart.animation.use', def: true, type: 'checkbox'},
     { key: 'style.chart.animation.speed', def: 1,  type: 'number', min: 0.1, max: 2, step: 0.1},
     { key: 'style.chart.animation.acceleration', def: 1, type: 'number', min: 0.1, max: 10, step: 0.1},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.bar.color', def: '#6376DD', type: 'color'},
     { key: 'style.chart.bar.stroke', def: '#6376DD', type: 'color'},
@@ -153,7 +153,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiAgePyramid.vue b/TestingArena/ArenaVueUiAgePyramid.vue
@@ -51,7 +51,7 @@ 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: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.height', def: 200, type: 'number', min: 200, max: 1000},
@@ -135,7 +135,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value)

diff --git a/TestingArena/ArenaVueUiCandlestick.vue b/TestingArena/ArenaVueUiCandlestick.vue
@@ -164,7 +164,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiChestnut.vue b/TestingArena/ArenaVueUiChestnut.vue
@@ -283,7 +283,7 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.layout.grandTotal.show', def: true, type: 'checkbox'},
     { key: 'style.chart.layout.grandTotal.fontSize', def: 20, type: 'number', min: 8, max: 48},
@@ -404,7 +404,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue
@@ -78,7 +78,7 @@ const model = ref([
     { key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' },
     { key: 'style.chart.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'general' },
     { key: 'style.chart.gradientIntensity', def: 40, min: 0, max: 100, type: 'range', label: 'gradientIntensity', category: 'general' },
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' },
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'general' },
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'general' },
     { key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox', label: 'show', category: 'labels' },
     { key: 'style.chart.layout.labels.dataLabels.hideUnderValue', def: 3, type: 'number', min: 0, max: 100, label: 'hideUnderValue', category: 'labels' },
@@ -125,7 +125,7 @@ const model = ref([
     { key: 'style.chart.layout.donut.useShadow', def: true,  type: 'checkbox' },
     { key: 'style.chart.layout.donut.shadowColor', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' },
-    { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'legend' },
+    { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'legend' },
     { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'legend' },
     { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 6, max: 42, label: 'fontSize', category: 'legend' },
     { key: 'style.chart.legend.bold', def: false, type: 'checkbox', label: 'bold', category: 'legend' },

diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue
@@ -35,7 +35,7 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.layout.height', def: 316, type: 'number', min: 200, max: 800},
     { key: 'style.chart.layout.width', def: 500, type: 'number', min: 300, max: 1200},
@@ -115,7 +115,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value)

diff --git a/TestingArena/ArenaVueUiDumbbell.vue b/TestingArena/ArenaVueUiDumbbell.vue
@@ -38,7 +38,7 @@ const model = ref([
     { key: 'useAnimation', def: true, type: 'checkbox'},
     { key: 'animationSpeed', def: 2, type: 'number', min: 1, max: 10},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.width', def: 600, type: 'number', min: 300, max: 1000},
     { key: 'style.chart.rowHeight', def: 40, type: 'number', min: 40, max: 100},
@@ -132,7 +132,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiFlow.vue b/TestingArena/ArenaVueUiFlow.vue
@@ -32,7 +32,7 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
     { key: 'style.fontFamily', def: 'inherit', type: 'text' },
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100 },
     { key: 'style.chart.padding.left', def: 24, type: 'number', min: 0, max: 100 },
@@ -68,7 +68,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue
@@ -33,7 +33,7 @@ const model = ref([
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.layout.arcs.strokeWidth', def: 24, type: 'number', min: 2, max: 48},
     { key: 'style.chart.layout.arcs.borderWidth', def: 12, type: 'number', min: 1, max: 24},
@@ -43,7 +43,7 @@ const model = ref([
     { key: 'style.chart.layout.arcs.hoverEffect.multiplicator', def: 1.1, type: 'number', min: 1, max: 2, step: 0.05},
     { key: 'style.chart.layout.arcs.gradient.show', def: true, type: 'checkbox'},
     { key: 'style.chart.layout.arcs.gradient.intensity', def: 30, type: 'range', min: 0, max: 100},
-    { key: 'style.chart.layout.arcs.gradient.color', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.layout.arcs.gradient.color', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
     { key: 'style.chart.layout.labels.dataLabels.suffix', def: 'S', type: 'text'},
     { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
@@ -96,7 +96,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value)

diff --git a/TestingArena/ArenaVueUiGauge.vue b/TestingArena/ArenaVueUiGauge.vue
@@ -62,7 +62,7 @@ const model = ref([
     { key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.animation.use', def: true, type: 'checkbox'},
     { key: 'style.chart.animation.speed', def: 1, type: 'range', min: 0, max: 100},

diff --git a/TestingArena/ArenaVueUiHeatmap.vue b/TestingArena/ArenaVueUiHeatmap.vue
@@ -81,7 +81,7 @@ const model = ref([
     { key: 'userOptions.buttons.table', def: true, type: 'checkbox' },
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
     { key: 'style.fontFamily', def: "inherit", type: 'text'},
-    { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.layout.padding.top', def: 36, type: 'number', min: 0, max: 100},
     { key: 'style.layout.padding.right', def: 12, type: 'number', min: 0, max: 100},
@@ -164,7 +164,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiKpi.vue b/TestingArena/ArenaVueUiKpi.vue
@@ -19,7 +19,7 @@ const config = ref({
     title: 'Lorem ipsum dolor sit amet',
     analogDigits: {
         show: true
-    }
+    },
 })
 
 

diff --git a/TestingArena/ArenaVueUiMolecule.vue b/TestingArena/ArenaVueUiMolecule.vue
@@ -152,7 +152,7 @@ const model = ref([
     { key: 'userOptions.buttons.labels', def: true, type: 'checkbox'},
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.nodes.stroke', def: '#FFFFFF', type: 'color'},
     { key: 'style.chart.nodes.strokeHovered', def: '#1A1A1A', type: 'color'},
@@ -198,7 +198,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiMoodRadar.vue b/TestingArena/ArenaVueUiMoodRadar.vue
@@ -84,7 +84,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue
@@ -66,7 +66,7 @@ const model = ref([
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
     { key: 'style.chart.useGradient', def: true, type: 'checkbox'},
     { key: 'style.chart.gradientIntensity', def: 40, type: 'range', min: 0, max: 100},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox'},
     { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
@@ -147,7 +147,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value)

diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue
@@ -71,11 +71,11 @@ const model = ref([
     { key: 'useStartAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' },
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' },
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'general' },
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'general' },
     { key: 'style.chart.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'general' },
     { key: 'style.chart.gradientIntensity', def: 20, min: 10, max: 40, type: 'range', label: 'gradientIntensity', category: 'general' },
-    { key: 'style.chart.layout.gutter.color', def: '#e1e5e8', type: 'color'},
+    { key: 'style.chart.layout.gutter.color', def: '#e1e5e820', type: 'color'},
     { key: 'style.chart.layout.gutter.width', def: 0.62, type: 'range', min: 0.1, max: 1, step: 0.01},
     { key: 'style.chart.layout.track.width', def: 0.62, type: 'range', min: 0.1, max: 1, step: 0.01},
     { key: 'style.chart.layout.labels.show', def: true, type: 'checkbox'},
@@ -143,7 +143,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue
@@ -63,7 +63,7 @@ const model = ref([
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'useCssAnimation', def: true, type: 'checkbox' },
     { key: 'style.fontFamily', def: 'inherit', type: 'text' },
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.height', def: 600, type: 'number', min: 300, max: 1000 },
     { key: 'style.chart.width', def: 1000, type: 'number', min: 300, max: 1500 },

diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue
@@ -107,6 +107,7 @@ function alterDataset() {
 const selectedSerie = ref('shortArray');
 
 const model = ref([
+    { key: 'backgroundColor', def: '#FFFFFF', type: 'color'},
     { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'userOptionsButtons.pdf', def: true, type: 'checkbox'},
     { key: 'userOptionsButtons.img', def: true, type: 'checkbox'},
@@ -202,7 +203,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiRelationCircle.vue b/TestingArena/ArenaVueUiRelationCircle.vue
@@ -121,7 +121,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     return {

diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue
@@ -11,15 +11,15 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
 const dataset = ref([
     {
         name: "Serie 1",
-        values: [100]
+        values: [100],
     },
     {
         name: "Serie 2",
         values: [200]
     },
     {
         name: "Serie 3",
-        values: [300, 1]
+        values: [300, 1],
     },
     {
         name: "Serie 4",
@@ -74,7 +74,7 @@ const model = ref([
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'useBlurOnHover', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: 'inherit', type: 'text'},
-    { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
     { key: 'style.chart.layout.labels.dataLabels.suffix', def: '2', type: 'text'},
@@ -137,7 +137,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[2])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue
@@ -106,7 +106,7 @@ const model = ref([
     { key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
     { key: 'style.fontFamily', def: "inherit", type: 'text'},
-    { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.layout.height', def: 316, type: 'number', min: 100, max: 1000},
     { key: 'style.layout.width', def: 512, type: 'number', min: 100, max: 1000},
@@ -191,7 +191,7 @@ const model = ref([
     { key: 'style.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48},
     { key: 'style.title.subtitle.bold', def: false, type: 'checkbox'},
     { key: 'style.legend.show', def: true, type: 'checkbox' },
-    { key: 'style.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.legend.backgroundColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.legend.color', def: '#1A1A1A', type: 'color'},
     { key: 'style.legend.fontSize', def: 14, type: 'number', min: 6, max: 42 },
     { key: 'style.legend.bold', def: false, type: 'checkbox'},
@@ -236,7 +236,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[1])
+const currentTheme = ref(themeOptions.value[4])
 
 
 const config = computed(() => {

diff --git a/TestingArena/ArenaVueUiSparkGauge.vue b/TestingArena/ArenaVueUiSparkGauge.vue
@@ -57,7 +57,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[3])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiSparkHistogram.vue b/TestingArena/ArenaVueUiSparkHistogram.vue
@@ -203,7 +203,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[2])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);

diff --git a/TestingArena/ArenaVueUiSparkStackbar.vue b/TestingArena/ArenaVueUiSparkStackbar.vue
@@ -61,7 +61,7 @@ const model = ref([
     { key: 'style.animation.animationFrames', def: 60, type: 'number', min: 0, max: 300},
     { key: 'style.bar.gradient.show', def: true, type: 'checkbox'},
     { key: 'style.bar.gradient.intensity', def: 40, type: 'range', min: 0, max: 100},
-    { key: 'style.bar.gradient.underlayerColor', def: '#FFFFFF', type: 'color'},
+    { key: 'style.bar.gradient.underlayerColor', def: '#FFFFFF20', type: 'color'},
     { key: 'style.legend.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
     { key: 'style.legend.show', def: true, type: 'checkbox'},
     { key: 'style.legend.fontSize', def: 12, type: 'number', min: 8, max: 48},
@@ -98,7 +98,7 @@ const themeOptions = ref([
     "default"
 ])
 
-const currentTheme = ref(themeOptions.value[2])
+const currentTheme = ref(themeOptions.value[4])
 
 const config = computed(() => {
     const c = convertArrayToObject(model.value);
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ const config = ref({ @@
         title: 'Lorem ipsum dolor sit amet',
         analogDigits: {
             show: true
-        }
+        },
     })
@@ Expand Down @@