diff --git a/TestingArena/ArenaVueUi3dBar.vue b/TestingArena/ArenaVueUi3dBar.vue index a1a1e699..49ae12d6 100644 --- 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 index f57d2ac5..deb138a6 100644 --- 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 index 30d7490c..73100dae 100644 --- 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 index 98d8ff3a..1c2677f1 100644 --- 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 index 8d0ae03a..7b000966 100644 --- 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 index e44aa833..4a0aaae6 100644 --- 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 index 1e239323..b632411c 100644 --- 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 index bea13519..6bb910b3 100644 --- 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 index 0fd1ed6b..06bb6fe2 100644 --- 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 index 45c27693..bd7d2784 100644 --- 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 index d098b3cd..390250bc 100644 --- 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 index 9456b5a2..398db0ba 100644 --- 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 index 0c981556..ae52c348 100644 --- 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 index 7f50b4da..af9d6922 100644 --- 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 index b3903ddf..978c2018 100644 --- 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 index 8e8a1a0a..238e1212 100644 --- 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 index 515d2a5c..ad0c3d93 100644 --- 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 index c6b1fb2a..d83bb8d9 100644 --- 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 index 7b73a17d..8f9e0503 100644 --- 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 index 6355f367..b5b66e26 100644 --- a/TestingArena/ArenaVueUiRings.vue +++ b/TestingArena/ArenaVueUiRings.vue @@ -11,7 +11,7 @@ const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena() const dataset = ref([ { name: "Serie 1", - values: [100] + values: [100], }, { name: "Serie 2", @@ -19,7 +19,7 @@ const dataset = ref([ }, { 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 index ea590b28..f21bb41c 100644 --- 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 index 131b4134..b08aad0d 100644 --- 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 index 435f358e..25f181bc 100644 --- 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 index da7e2e6e..ec11ef08 100644 --- 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); diff --git a/TestingArena/ArenaVueUiSparkTrend.vue b/TestingArena/ArenaVueUiSparkTrend.vue index a7dc02e4..a946226e 100644 --- a/TestingArena/ArenaVueUiSparkTrend.vue +++ b/TestingArena/ArenaVueUiSparkTrend.vue @@ -78,7 +78,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/ArenaVueUiSparkline.vue b/TestingArena/ArenaVueUiSparkline.vue index 2a0be3a8..049e2f9f 100644 --- a/TestingArena/ArenaVueUiSparkline.vue +++ b/TestingArena/ArenaVueUiSparkline.vue @@ -126,7 +126,7 @@ const model = ref([ { key: 'style.chartWidth', def: 400, type: 'number', min: 100, max: 500}, { key: 'style.animation.show', def: true, type: 'checkbox'}, { key: 'style.animation.animationFrames', def: 360, type: 'number', min: 0, max: 1000}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.fontFamily', def: 'inherit', type: 'text'}, { key: 'style.line.color', def: '#3366CC', type: 'color'}, { key: 'style.line.strokeWidth', def: 3, type: 'number', min: 0, max: 20}, @@ -174,7 +174,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/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue index a904a5d2..40c8d0e0 100644 --- a/TestingArena/ArenaVueUiStackbar.vue +++ b/TestingArena/ArenaVueUiStackbar.vue @@ -21,6 +21,7 @@ const dataset = ref([ { name: "Serie 1", series: [10, 20, 30], + color: "rgba(255,0,0,0.5)" }, { name: "Serie 2", @@ -54,7 +55,7 @@ const model = ref([ { key: 'responsive', def: false, type: 'checkbox'}, { key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']}, { key: 'useCssAnimation', def: true, type: 'checkbox'}, - { key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.chart.backgroundColor', def: '#FFFFFF00', type: 'color'}, { key: 'style.chart.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.height', def: 500, type: 'number', min: 200, max: 1000}, { key: 'style.chart.width', def: 800, type: 'number', min: 200, max: 1000}, @@ -91,7 +92,7 @@ const model = ref([ { key: 'style.chart.tooltip.borderRadius', def: 4, type: 'number', min: 0, max: 24}, { key: 'style.chart.tooltip.borderColor', def: '#E1E5E8', type: 'color'}, { key: 'style.chart.tooltip.borderWidth', def: 1, type: 'number', min: 0, max: 12}, - { key: 'style.chart.tooltip.backgroundOpacity', def: 100, type: 'range', min: 0, max: 100}, + { key: 'style.chart.tooltip.backgroundOpacity', def: 20, type: 'range', min: 0, max: 100}, { key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']}, { key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 64}, { key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'}, diff --git a/TestingArena/ArenaVueUiStripPlot.vue b/TestingArena/ArenaVueUiStripPlot.vue index 2641ef04..3d4a9256 100644 --- a/TestingArena/ArenaVueUiStripPlot.vue +++ b/TestingArena/ArenaVueUiStripPlot.vue @@ -98,7 +98,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.height', def: 600, type: 'number', min: 200, max: 1000}, { key: 'style.chart.stripWidth', def: 120, type: 'number', min: 48, max: 300}, @@ -188,7 +188,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/ArenaVueUiTableHeatmap.vue b/TestingArena/ArenaVueUiTableHeatmap.vue index 27c1adbd..623630ff 100644 --- a/TestingArena/ArenaVueUiTableHeatmap.vue +++ b/TestingArena/ArenaVueUiTableHeatmap.vue @@ -73,7 +73,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/ArenaVueUiTableSparkline.vue b/TestingArena/ArenaVueUiTableSparkline.vue index b7645b5b..9afeb2f4 100644 --- a/TestingArena/ArenaVueUiTableSparkline.vue +++ b/TestingArena/ArenaVueUiTableSparkline.vue @@ -75,13 +75,13 @@ const model = ref([ { key: 'title.subtitle.color', def: '#1A1A1A', type: 'color'}, { key: 'title.subtitle.fontSize', def: 14, type: 'number', min: 8, max: 48}, { key: 'title.subtitle.bold', def: false, type: 'checkbox'}, - { key: 'thead.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'thead.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'thead.color', def: '#1A1A1A', type: 'color'}, { key: 'thead.fontSize', def: 14, type: 'number', min: 8, max: 24}, { key: 'thead.outline', def: 'none', type: 'text'}, { key: 'thead.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']}, { key: 'thead.bold', def: false, type: 'checkbox'}, - { key: 'tbody.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'tbody.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'tbody.color', def: '#1A1A1A', type: 'color'}, { key: 'tbody.fontSize', def: 14, type: 'number', min: 8, max: 24}, { key: 'tbody.outline', def: 'none', type: 'text'}, @@ -97,7 +97,7 @@ const themeOptions = ref([ "default" ]) -const currentTheme = ref(themeOptions.value[2]) +const currentTheme = ref(themeOptions.value[4]) const config = computed(() => { return { diff --git a/TestingArena/ArenaVueUiThermometer.vue b/TestingArena/ArenaVueUiThermometer.vue index 02ab884a..3608f6ad 100644 --- a/TestingArena/ArenaVueUiThermometer.vue +++ b/TestingArena/ArenaVueUiThermometer.vue @@ -45,7 +45,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.height', def: 360, type: 'number', min: 100, max: 1000}, { key: 'style.chart.thermometer.width', def: 48, type: 'number', min: 12, max: 64}, @@ -87,7 +87,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/ArenaVueUiTimer.vue b/TestingArena/ArenaVueUiTimer.vue index 4d8a5c35..a2a4387c 100644 --- a/TestingArena/ArenaVueUiTimer.vue +++ b/TestingArena/ArenaVueUiTimer.vue @@ -8,7 +8,7 @@ import convertArrayToObject from "./convertModel"; const model = ref([ { key: 'responsive', def: false, type: 'checkbox'}, { key: 'type', def: 'stopwatch', type: 'select', options: ['stopwatch']}, - { key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'style.backgroundColor', def: '#FFFFFF20', type: 'color'}, { key: 'style.height', def: 300, type: 'number', min: 100, max: 1000}, { key: 'style.width', def: 300, type: 'number', min: 100, max: 1000}, { key: 'style.title.text', def: 'Title', type: 'text'}, @@ -24,7 +24,7 @@ const model = ref([ { key: 'stopwatch.cycleSeconds', def: 5, type: 'number', min: 1, max: 60}, { key: 'stopwatch.track.radiusRatio', def: 1, type: 'range', min: 0.3, max: 1, step: 0.01}, { key: 'stopwatch.track.stroke', def: '#e1e5e8', type: "color"}, - { key: 'stopwatch.track.fill', def: '#FFFFFF', type: "color"}, + { key: 'stopwatch.track.fill', def: '#FFFFFF20', type: "color"}, { key: 'stopwatch.track.strokeWidth', def: 2, type: 'number', min: 0, max: 24 }, { key: 'stopwatch.tracker.radiusRatio', def: 1, type: 'range', min: 0.1, max: 2, step: 0.01}, { key: 'stopwatch.tracker.stroke', def: '#FFFFFF', type: 'color'}, @@ -43,7 +43,7 @@ const model = ref([ { key: 'stopwatch.label.fontSize', def: 24, type: 'number', min: 8, max: 42}, { key: 'stopwatch.label.color', def: '#1A1A1A', type: 'color'}, { key: 'stopwatch.label.bold', def: false, type: 'checkbox'}, - { key: 'stopwatch.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, + { key: 'stopwatch.legend.backgroundColor', def: '#FFFFFF20s', type: 'color'}, { key: 'stopwatch.legend.buttons.start', def: true, type: 'checkbox'}, { key: 'stopwatch.legend.buttons.pause', def: true, type: 'checkbox'}, { key: 'stopwatch.legend.buttons.reset', def: true, type: 'checkbox'}, diff --git a/TestingArena/ArenaVueUiTiremarks.vue b/TestingArena/ArenaVueUiTiremarks.vue index 0c93c267..737703fd 100644 --- a/TestingArena/ArenaVueUiTiremarks.vue +++ b/TestingArena/ArenaVueUiTiremarks.vue @@ -41,7 +41,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: 0.5, type: 'number', min: 0, max: 2, step: 0.01}, @@ -83,7 +83,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/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue index bc9f4ad7..617fb7f7 100644 --- a/TestingArena/ArenaVueUiTreemap.vue +++ b/TestingArena/ArenaVueUiTreemap.vue @@ -125,7 +125,7 @@ function alterDataset() { const alternateConfig = ref({ style: { chart: { - backgroundColor: '#FF0000', + backgroundColor: '#FF000020', title: { text: 'Alternate' } @@ -142,7 +142,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.height', def: 500, type: 'number', min: 100, max: 1000}, { key: 'style.chart.width', def: 800, type: 'number', min: 100, max: 1500}, @@ -188,7 +188,7 @@ const model = ref([ { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'}, { key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48}, { key: 'style.chart.tooltip.roundingValue', def: 1, type: 'number', min: 0, max: 12}, - { key: 'style.chart.tooltip.backgroundOpacity', def: 100, type: 'range', min: 0, max: 100}, + { key: 'style.chart.tooltip.backgroundOpacity', def: 20, type: 'range', min: 0, max: 100}, { key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']}, { key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 48}, diff --git a/TestingArena/ArenaVueUiVerticalBar.vue b/TestingArena/ArenaVueUiVerticalBar.vue index 5dab38eb..7b950972 100644 --- a/TestingArena/ArenaVueUiVerticalBar.vue +++ b/TestingArena/ArenaVueUiVerticalBar.vue @@ -111,7 +111,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.layout.bars.sort', def: 'desc', type: 'select', options: ['asc', 'desc']}, { key: 'style.chart.layout.bars.useStroke', def: false, type: 'checkbox'}, @@ -208,7 +208,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); @@ -316,12 +316,12 @@ function selectLegend(legend) { {{ datapoint.name }} : {{ percentage }} - - - -