From 6974c9c42ac0177ed43f1f312a7aea1c73c5e802 Mon Sep 17 00:00:00 2001 From: graphieros Date: Tue, 26 Aug 2025 17:01:22 +0200 Subject: [PATCH] New feature - Add legend position config option #241 --- TestingArena/ArenaVueUiBullet.vue | 2 + TestingArena/ArenaVueUiChord.vue | 1 + TestingArena/ArenaVueUiDonut.vue | 1 + TestingArena/ArenaVueUiDonutEvolution.vue | 1 + TestingArena/ArenaVueUiDumbbell.vue | 2 + TestingArena/ArenaVueUiFlow.vue | 3 + TestingArena/ArenaVueUiGalaxy.vue | 1 + TestingArena/ArenaVueUiHistoryPlot.vue | 2 + TestingArena/ArenaVueUiMoodRadar.vue | 2 + TestingArena/ArenaVueUiNestedDonuts.vue | 1 + TestingArena/ArenaVueUiOnion.vue | 2 +- .../ArenaVueUiParallelCoordinatePlot.vue | 2 + TestingArena/ArenaVueUiQuadrant.vue | 2 + TestingArena/ArenaVueUiQuickChart.vue | 2 + TestingArena/ArenaVueUiRadar.vue | 2 + TestingArena/ArenaVueUiRings.vue | 1 + TestingArena/ArenaVueUiScatter.vue | 1 + TestingArena/ArenaVueUiStackbar.vue | 1 + TestingArena/ArenaVueUiTreemap.vue | 1 + TestingArena/ArenaVueUiWaffle.vue | 1 + TestingArena/ArenaVueUiWorld.vue | 2 + TestingArena/ArenaVueUiXy.vue | 7 +- TestingArena/ArenaVueUiXyCanvas.vue | 2 + src/App.vue | 2 +- src/components/vue-ui-bullet.vue | 45 +++-- src/components/vue-ui-chord.vue | 73 ++++--- src/components/vue-ui-donut-evolution.vue | 85 ++++---- src/components/vue-ui-donut.vue | 93 +++++---- src/components/vue-ui-dumbbell.vue | 53 +++-- src/components/vue-ui-flow.vue | 33 +-- src/components/vue-ui-galaxy.vue | 87 ++++---- src/components/vue-ui-history-plot.vue | 47 +++-- src/components/vue-ui-mood-radar.vue | 101 ++++----- src/components/vue-ui-nested-donuts.vue | 96 +++++---- src/components/vue-ui-onion.vue | 42 ++-- .../vue-ui-parallel-coordinate-plot.vue | 45 +++-- src/components/vue-ui-quadrant.vue | 43 ++-- src/components/vue-ui-quick-chart.vue | 191 +++++++++--------- src/components/vue-ui-radar.vue | 52 +++-- src/components/vue-ui-rings.vue | 104 +++++----- src/components/vue-ui-scatter.vue | 42 ++-- src/components/vue-ui-stackbar.vue | 51 +++-- src/components/vue-ui-treemap.vue | 79 ++++---- src/components/vue-ui-waffle.vue | 96 +++++---- src/components/vue-ui-world.vue | 45 +++-- src/components/vue-ui-xy-canvas.vue | 35 ++-- src/components/vue-ui-xy.vue | 67 +++--- src/useConfig.js | 75 +++++-- types/vue-data-ui.d.ts | 23 +++ 49 files changed, 1022 insertions(+), 725 deletions(-) diff --git a/TestingArena/ArenaVueUiBullet.vue b/TestingArena/ArenaVueUiBullet.vue index 2b3d97a7..4bfce8c3 100644 --- a/TestingArena/ArenaVueUiBullet.vue +++ b/TestingArena/ArenaVueUiBullet.vue @@ -74,6 +74,8 @@ const model = ref([ { key: 'style.chart.animation.show', def: true, type: 'checkbox' }, { key: 'style.chart.animation.animationFrames', def: 60, type:'range', min: 30, max: 255 }, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.segments.baseColor', def: '#9A9A9A', type: 'color' }, { key: 'style.chart.segments.dataLabels.show', def: true, type: 'checkbox' }, { key: 'style.chart.segments.dataLabels.color', def: '#1A1A1A', type: 'color' }, diff --git a/TestingArena/ArenaVueUiChord.vue b/TestingArena/ArenaVueUiChord.vue index e6a1322d..8116a962 100644 --- a/TestingArena/ArenaVueUiChord.vue +++ b/TestingArena/ArenaVueUiChord.vue @@ -80,6 +80,7 @@ const model = ref([ { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42}, { key: 'style.chart.legend.bold', def: false, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.arcs.innerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 }, { key: 'style.chart.arcs.outerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 }, diff --git a/TestingArena/ArenaVueUiDonut.vue b/TestingArena/ArenaVueUiDonut.vue index 790015ff..fc52a1ee 100644 --- a/TestingArena/ArenaVueUiDonut.vue +++ b/TestingArena/ArenaVueUiDonut.vue @@ -178,6 +178,7 @@ const model = ref([ { key: 'style.chart.legend.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'legend' }, { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'}, { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' }, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'title' }, diff --git a/TestingArena/ArenaVueUiDonutEvolution.vue b/TestingArena/ArenaVueUiDonutEvolution.vue index 569a4640..323fb624 100644 --- a/TestingArena/ArenaVueUiDonutEvolution.vue +++ b/TestingArena/ArenaVueUiDonutEvolution.vue @@ -131,6 +131,7 @@ const model = ref([ { key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.showValue', def: true, type: 'chexkbox'}, { key: 'style.chart.legend.showPercentage', def: false, type: 'chexkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'table.show', def: false, type: 'checkbox'}, { key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800}, diff --git a/TestingArena/ArenaVueUiDumbbell.vue b/TestingArena/ArenaVueUiDumbbell.vue index 4ca5f62f..bbb51964 100644 --- a/TestingArena/ArenaVueUiDumbbell.vue +++ b/TestingArena/ArenaVueUiDumbbell.vue @@ -146,6 +146,8 @@ const model = ref([ { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 48}, { key: 'style.chart.legend.bold', def: false, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'}, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48}, diff --git a/TestingArena/ArenaVueUiFlow.vue b/TestingArena/ArenaVueUiFlow.vue index 28be04cf..c3f1cce8 100644 --- a/TestingArena/ArenaVueUiFlow.vue +++ b/TestingArena/ArenaVueUiFlow.vue @@ -169,6 +169,9 @@ const model = ref([ { key: 'style.chart.padding.left', def: 12, type: 'number', min: 0, max: 100 }, { key: 'style.chart.padding.right', def: 12, type: 'number', min: 0, max: 100 }, { key: 'style.chart.padding.bottom', def: 12, type: 'number', min: 0, max: 100 }, + + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.title.text', def: 'Lorem ipsum dolor', type: 'text' }, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 }, diff --git a/TestingArena/ArenaVueUiGalaxy.vue b/TestingArena/ArenaVueUiGalaxy.vue index 32f51716..92c562ec 100644 --- a/TestingArena/ArenaVueUiGalaxy.vue +++ b/TestingArena/ArenaVueUiGalaxy.vue @@ -73,6 +73,7 @@ const model = ref([ { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.showValue', def: false, type: 'checkbox'}, { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'}, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'}, diff --git a/TestingArena/ArenaVueUiHistoryPlot.vue b/TestingArena/ArenaVueUiHistoryPlot.vue index 258652af..d1a5696f 100644 --- a/TestingArena/ArenaVueUiHistoryPlot.vue +++ b/TestingArena/ArenaVueUiHistoryPlot.vue @@ -101,6 +101,8 @@ const model = ref([ { key: 'style.chart.axes.y.name.offsetY', def: 0, type: 'number', min: -100, max: 100}, { key: 'style.chart.axes.y.name.bold', def: false, type: 'checkbox' }, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.plots.radius', def: 16, type: 'range', min: 8, max: 42}, { key: 'style.chart.plots.stroke', def: '#FFFFFF', type: 'color'}, { key: 'style.chart.plots.strokeWidth', def: 1, type: 'number', min: 0, max: 12}, diff --git a/TestingArena/ArenaVueUiMoodRadar.vue b/TestingArena/ArenaVueUiMoodRadar.vue index 8b229958..85106674 100644 --- a/TestingArena/ArenaVueUiMoodRadar.vue +++ b/TestingArena/ArenaVueUiMoodRadar.vue @@ -79,6 +79,8 @@ const model = ref([ { key: 'style.chart.legend.show', def: true, type: 'checkbox'}, { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'table.show', def: false, type: 'checkbox'}, { key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800}, { key: 'table.columnNames.series', def: 'Series', type: 'text'}, diff --git a/TestingArena/ArenaVueUiNestedDonuts.vue b/TestingArena/ArenaVueUiNestedDonuts.vue index 5a6ca8eb..99d42af7 100644 --- a/TestingArena/ArenaVueUiNestedDonuts.vue +++ b/TestingArena/ArenaVueUiNestedDonuts.vue @@ -130,6 +130,7 @@ const model = ref([ { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'}, { key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'}, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'}, diff --git a/TestingArena/ArenaVueUiOnion.vue b/TestingArena/ArenaVueUiOnion.vue index 5458c189..9b017bc9 100644 --- a/TestingArena/ArenaVueUiOnion.vue +++ b/TestingArena/ArenaVueUiOnion.vue @@ -120,7 +120,7 @@ const model = ref([ { key: 'style.chart.legend.bold', def: false, type: 'checkbox', label: 'bold', category: 'legend' }, { key: 'style.chart.legend.roundingValue', def: 0, type: 'number', min: 0, max: 6, label: ['rounding', 'is', 'value'], category: 'legend' }, { key: 'style.chart.legend.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'legend' }, - { key: 'style.chart.legend.offsetY', def: 0, type: 'number', min: -100, max: 100}, // DEPRECATED (used with useDiv set to false) + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.tooltip.show', def: true, type: 'checkbox' }, { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' }, diff --git a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue index f5852476..6b1cfa81 100644 --- a/TestingArena/ArenaVueUiParallelCoordinatePlot.vue +++ b/TestingArena/ArenaVueUiParallelCoordinatePlot.vue @@ -131,6 +131,8 @@ const model = ref([ { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 42 }, { key: 'style.chart.legend.bold', def: false, type: 'checkbox' }, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.tooltip.show', def: true, type: 'checkbox' }, { key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' }, diff --git a/TestingArena/ArenaVueUiQuadrant.vue b/TestingArena/ArenaVueUiQuadrant.vue index c3fd1eaf..5c9b8c8b 100644 --- a/TestingArena/ArenaVueUiQuadrant.vue +++ b/TestingArena/ArenaVueUiQuadrant.vue @@ -192,6 +192,8 @@ const model = ref([ { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, { key: "style.chart.legend.color", def: '#1A1A1A', type: 'color'}, { key: 'style.chart.legend.fontSize', def: 14, type: 'range', min: 8, max: 48}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'table.show', def: false, type: 'checkbox'}, { key: 'table.responsiveBreakdpoint', def: 400, type: 'number', min: 300, max: 800}, { key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'}, diff --git a/TestingArena/ArenaVueUiQuickChart.vue b/TestingArena/ArenaVueUiQuickChart.vue index 6e113ee3..2e2c496a 100644 --- a/TestingArena/ArenaVueUiQuickChart.vue +++ b/TestingArena/ArenaVueUiQuickChart.vue @@ -166,6 +166,8 @@ const model = ref([ { key: 'legendFontSize', def: 12, type: 'number', min: 8, max: 48}, { key: 'legendIcon', def: 'starFill', type: 'text'}, { key: 'legendIconSize', def: 12, type: 'number', min: 8, max: 48}, + { key: 'legendPosition', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'lineSmooth', def: true, type: 'checkbox'}, { key: 'lineAnimated', def: false, type: 'checkbox' }, { key: 'lineStrokeWidth', def: 2, type:'number', min: 0.5, max: 12, step: 0.5}, diff --git a/TestingArena/ArenaVueUiRadar.vue b/TestingArena/ArenaVueUiRadar.vue index eac467cf..34f6f1d5 100644 --- a/TestingArena/ArenaVueUiRadar.vue +++ b/TestingArena/ArenaVueUiRadar.vue @@ -178,6 +178,8 @@ const model = ref([ { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.legend.fontSize', def: 14, type: 'range', min: 8, max: 48}, { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'range', min: 0, max: 12}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'table.show', def: false, type: 'checkbox'}, { key: 'table.responsiveBreakpoint', def: 400, type: 'range', min: 300, max: 800}, { key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'}, diff --git a/TestingArena/ArenaVueUiRings.vue b/TestingArena/ArenaVueUiRings.vue index 7cca3645..4a6fc587 100644 --- a/TestingArena/ArenaVueUiRings.vue +++ b/TestingArena/ArenaVueUiRings.vue @@ -110,6 +110,7 @@ const model = ref([ { key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.showValue', def: true, type: 'checkbox' }, { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox' }, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'}, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'}, diff --git a/TestingArena/ArenaVueUiScatter.vue b/TestingArena/ArenaVueUiScatter.vue index 75af82b5..1df8662b 100644 --- a/TestingArena/ArenaVueUiScatter.vue +++ b/TestingArena/ArenaVueUiScatter.vue @@ -211,6 +211,7 @@ const model = ref([ { key: 'style.legend.fontSize', def: 14, type: 'number', min: 6, max: 42 }, { key: 'style.legend.bold', def: false, type: 'checkbox'}, { key: 'style.legend.roundingValue', def: 0, type: 'number', min: 0, max: 6}, + { key: 'style.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.tooltip.show', def: true, type: 'checkbox' }, { key: 'style.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' }, diff --git a/TestingArena/ArenaVueUiStackbar.vue b/TestingArena/ArenaVueUiStackbar.vue index 1eaadaaf..998b332e 100644 --- a/TestingArena/ArenaVueUiStackbar.vue +++ b/TestingArena/ArenaVueUiStackbar.vue @@ -116,6 +116,7 @@ const model = ref([ { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'}, { key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'}, { key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.zoom.show', def: true, type: 'checkbox'}, { key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'}, diff --git a/TestingArena/ArenaVueUiTreemap.vue b/TestingArena/ArenaVueUiTreemap.vue index 45747711..0279a5ed 100644 --- a/TestingArena/ArenaVueUiTreemap.vue +++ b/TestingArena/ArenaVueUiTreemap.vue @@ -198,6 +198,7 @@ const model = ref([ { key: 'style.chart.legend.roundingPercentage', def: 1, type: 'number', min: 0, max: 12}, { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'}, { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'style.chart.title.text', def: "Lorem ipsum dolor sic amet", type: "text"}, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'}, diff --git a/TestingArena/ArenaVueUiWaffle.vue b/TestingArena/ArenaVueUiWaffle.vue index 6eca6c40..7aab94d9 100644 --- a/TestingArena/ArenaVueUiWaffle.vue +++ b/TestingArena/ArenaVueUiWaffle.vue @@ -147,6 +147,7 @@ const model = ref([ { key: 'style.chart.legend.showValue', def: true, type: 'checkbox'}, { key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox'}, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, ]) const testCustomTooltip = ref(false); diff --git a/TestingArena/ArenaVueUiWorld.vue b/TestingArena/ArenaVueUiWorld.vue index 28bcd248..d8bc744b 100644 --- a/TestingArena/ArenaVueUiWorld.vue +++ b/TestingArena/ArenaVueUiWorld.vue @@ -245,6 +245,8 @@ const model = ref([ { key: 'style.chart.globe.waterColor', def: '#1F77B4', type: 'color'}, { key: 'style.chart.tooltip.showMinimap', def: true, type: 'checkbox'}, + + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']} ]); const projections = ref([ diff --git a/TestingArena/ArenaVueUiXy.vue b/TestingArena/ArenaVueUiXy.vue index 7c80a9b6..d10176d5 100644 --- a/TestingArena/ArenaVueUiXy.vue +++ b/TestingArena/ArenaVueUiXy.vue @@ -116,13 +116,13 @@ onMounted(() => { setTimeout(() => { dataset.value = [ { - name: "A", + name: "Serie A with a long name", series: [60, 100, 112, 221, 119, 75, null, -226, -243, 198, 156, 127, 120], type: "bar", dataLabels: false, }, { - name: "B", + name: "Serie B with a long name", series: [60, 75, 119, 201, 109, 85, null, 206, 223, 204, 146, 117, 87], type: "line", dataLabels: false, @@ -132,7 +132,7 @@ onMounted(() => { useProgression: true }, { - name: "C", + name: "Serie C with a long name", series: [60, 75, 11, 20, 10, 8, null, 20, 22, 204, 146, 117, 55], type: "plot", dataLabels: false, @@ -469,6 +469,7 @@ const model = ref([ { key: 'chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' }, { key: 'chart.legend.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'legend' }, { key: 'chart.legend.fontSize', def: 16, type: 'number', min: 10, max: 36, label: 'fontSize', category: 'legend' }, + { key: 'chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, { key: 'chart.title.show', def: true, type: 'checkbox', label: 'show', category: 'title' }, { key: 'chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' }, diff --git a/TestingArena/ArenaVueUiXyCanvas.vue b/TestingArena/ArenaVueUiXyCanvas.vue index fd47e5bb..40bf72a6 100644 --- a/TestingArena/ArenaVueUiXyCanvas.vue +++ b/TestingArena/ArenaVueUiXyCanvas.vue @@ -131,6 +131,8 @@ const model = ref([ { key: 'style.chart.legend.show', def: true, type: 'checkbox' }, { key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 42 }, { key: 'style.chart.legend.bold', def: false, type: 'checkbox' }, + { key: 'style.chart.legend.position', def: 'bottom', type: 'select', options: ['top', 'bottom']}, + { key: 'style.chart.title.text', def: 'Lorem ipsum placer', type: 'text' }, { key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' }, { key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 }, diff --git a/src/App.vue b/src/App.vue index 41db49f6..44610766 100755 --- a/src/App.vue +++ b/src/App.vue @@ -125,7 +125,7 @@ const mapping = ref({ }) const options = computed(() => Object.keys(mapping.value)); -const selectedComponent = ref('VueUiHeatmap'); +const selectedComponent = ref('VueUiWorld'); /** * Legacy testing arena where some non chart components can be tested diff --git a/src/components/vue-ui-bullet.vue b/src/components/vue-ui-bullet.vue index 8aadadff..e7c6c900 100644 --- a/src/components/vue-ui-bullet.vue +++ b/src/components/vue-ui-bullet.vue @@ -49,6 +49,7 @@ const source = ref(null); const step = ref(0); const resizeObserver = ref(null); const observedEl = ref(null); +const readyTeleport = ref(false); const isDataset = computed({ get: () => { @@ -178,7 +179,10 @@ function prepareChart() { } } -onMounted(prepareChart); +onMounted(() => { + readyTeleport.value = true; + prepareChart(); +}); const uid = ref(createUid()); @@ -525,6 +529,8 @@ defineExpose({ /> +
+
-
- - - - -
+
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-chord.vue b/src/components/vue-ui-chord.vue index 2b205797..1a74d0ad 100644 --- a/src/components/vue-ui-chord.vue +++ b/src/components/vue-ui-chord.vue @@ -88,6 +88,7 @@ const legendStep = ref(0); const loaded = ref(false); const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -314,6 +315,7 @@ function checkDataset(){ const loadingTimeout = ref(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -1010,6 +1012,8 @@ defineExpose({ }" />
+
+
-
- - - - - -
- +
+ + + +
+ + + + + +
+ +
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue index 606abd89..7e831e67 100644 --- a/src/components/vue-ui-donut-evolution.vue +++ b/src/components/vue-ui-donut-evolution.vue @@ -88,6 +88,7 @@ const scaleLabels = ref(null); const timeLabelsEls = ref(null); const xAxisLabel = ref(null); const yAxisLabel = ref(null); +const readyTeleport = ref(false); const chartTitle = ref(null); const chartLegend = ref(null); @@ -108,6 +109,7 @@ const isDataset = computed(() => { }) onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -931,6 +933,8 @@ defineExpose({ />
+
+
-
- - - - - -
+
+ + + +
+ + + + + +
+
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue index 1813b569..94b7cfc7 100644 --- a/src/components/vue-ui-donut.vue +++ b/src/components/vue-ui-donut.vue @@ -105,6 +105,7 @@ const noTitle = shallowRef(null); const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); +const readyTeleport = ref(false); const labels_value_fontSize = computed({ get: () => FINAL_CONFIG.value.style.chart.layout.labels.percentage.fontSize, @@ -187,6 +188,7 @@ const resizeAndReflow = () => { } onMounted( async() => { + readyTeleport.value = true; prepareChart(); requestAnimationFrame(resizeAndReflow); }); @@ -1171,6 +1173,8 @@ defineExpose({ }" />
+
+
-
- - +
- + + +
+
diff --git a/src/components/vue-ui-dumbbell.vue b/src/components/vue-ui-dumbbell.vue index 58be7275..f674082b 100644 --- a/src/components/vue-ui-dumbbell.vue +++ b/src/components/vue-ui-dumbbell.vue @@ -87,6 +87,7 @@ const noTitle = ref(null); const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); +const readyTeleport = ref(false); const yAxisLabel = ref(null); const serieLabels = ref(null); @@ -203,6 +204,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -872,6 +874,8 @@ defineExpose({ />
+
+
- -
- - - - -
+
+ + + +
+ + + + +
+ +
diff --git a/src/components/vue-ui-flow.vue b/src/components/vue-ui-flow.vue index 68ce2a38..0a23090a 100644 --- a/src/components/vue-ui-flow.vue +++ b/src/components/vue-ui-flow.vue @@ -68,12 +68,14 @@ const chartTitle = ref(null); const source = ref(null); const responsiveObserver = ref(null); const observedEl = ref(null); +const readyTeleport = ref(false); const isDataset = computed(() => { return !!props.dataset && props.dataset.length; }); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -950,6 +952,8 @@ defineExpose({ }" />
+
+
-
- - - - -
+
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue index f8d1c58b..956e30f7 100644 --- a/src/components/vue-ui-galaxy.vue +++ b/src/components/vue-ui-galaxy.vue @@ -82,6 +82,7 @@ const source = ref(null); const noTitle = ref(null); const resizeObserver = ref(null); const observedEl = ref(null); +const readyTeleport = ref(false); const isDataset = computed(() => { return !!props.dataset && props.dataset.length; @@ -117,6 +118,7 @@ const { loading, FINAL_DATASET } = useLoading({ }) onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -630,6 +632,8 @@ defineExpose({ />
+
+
- -
- - - - - -
- +
+ + + +
+ + + + + +
+
diff --git a/src/components/vue-ui-history-plot.vue b/src/components/vue-ui-history-plot.vue index 16eb6842..8eee58f7 100644 --- a/src/components/vue-ui-history-plot.vue +++ b/src/components/vue-ui-history-plot.vue @@ -92,6 +92,7 @@ const isFullscreen = ref(false); const selectedDatapoint = ref(null); const useCustomFormat = ref(false); const source = ref(null); +const readyTeleport = ref(false); const xAxisLabel = ref(null); const yAxisLabel = ref(null); @@ -109,7 +110,10 @@ const isDataset = computed({ const emit = defineEmits(['selectLegend', 'selectDatapoint']) -onMounted(prepareChart); +onMounted(() => { + readyTeleport.value = true; + prepareChart(); +}); const debug = computed(() => !!FINAL_CONFIG.value.debug); @@ -953,6 +957,8 @@ defineExpose({ />
+
+
-
- - - - - -
+
+ + + +
+ + + + + +
+
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue index 773a59ee..fd2ffba5 100644 --- a/src/components/vue-ui-mood-radar.vue +++ b/src/components/vue-ui-mood-radar.vue @@ -74,6 +74,7 @@ const chartLegend = ref(null); const resizeObserver = ref(null); const observedEl = ref(null); const source = ref(null); +const readyTeleport = ref(false); const isDataset = computed(() => { return !!props.dataset && Object.keys(props.dataset).length; @@ -135,6 +136,7 @@ const { loading, FINAL_DATASET } = useLoading({ }); onMounted(() => { + readyTeleport.value = true; prepareChart(); }) @@ -517,6 +519,8 @@ defineExpose({ }" />
+
+
-
- - - - - -
+
+ + + +
+ + + + + +
+
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue index 6fd2e9f6..c897f3a9 100644 --- a/src/components/vue-ui-nested-donuts.vue +++ b/src/components/vue-ui-nested-donuts.vue @@ -99,6 +99,7 @@ const legendStep = ref(0); const isFirstLoad = ref(true); const animatedValues = ref([]); const ghostSlices = ref([]); +const readyTeleport = ref(false); const isFullscreen = ref(false); function toggleFullscreen(state) { @@ -368,6 +369,7 @@ async function triggerAnim() { } onMounted(async () => { + readyTeleport.value = true; prepareChart(); await triggerAnim(); }); @@ -1279,6 +1281,8 @@ defineExpose({ }" />
+
+ - - - - -
+
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue index a5bf6fdb..484746de 100644 --- a/src/components/vue-ui-onion.vue +++ b/src/components/vue-ui-onion.vue @@ -76,6 +76,7 @@ const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); const resizing = ref(false); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -197,6 +198,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -681,6 +683,8 @@ defineExpose({ }" />
+ +
- -
- - - - -
+
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue index 6a05864b..b70cd122 100644 --- a/src/components/vue-ui-parallel-coordinate-plot.vue +++ b/src/components/vue-ui-parallel-coordinate-plot.vue @@ -82,6 +82,7 @@ const noTitle = ref(null); const titleStep = ref(0); const legendStep = ref(0); const tableStep = ref(0); +const readyTeleport = ref(false); const xAxisLabels = ref(null); @@ -209,6 +210,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -801,6 +803,8 @@ defineExpose({ />
+
+
- -
- - - - - -
+
+ + + +
+ + + + + +
+ +
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue index 6ca58848..872ac679 100644 --- a/src/components/vue-ui-quadrant.vue +++ b/src/components/vue-ui-quadrant.vue @@ -91,6 +91,7 @@ const noTitle = ref(null); const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -284,6 +285,7 @@ function prepareChart() { } onMounted(() => { + readyTeleport.value = true; prepareChart() }); @@ -1137,6 +1139,8 @@ defineExpose({ />
+
+
- -
- - - - -
+ +
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue index 9a973a19..e0eeca65 100644 --- a/src/components/vue-ui-quick-chart.vue +++ b/src/components/vue-ui-quick-chart.vue @@ -88,6 +88,7 @@ const noTitle = ref(null); const segregated = ref([]); const step = ref(0); const slicerStep = ref(0); +const readyTeleport = ref(false); const timeLabelsEls = ref(null); const scaleLabels = ref(null); @@ -287,6 +288,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }) @@ -1319,6 +1321,9 @@ defineExpose({
{{ FINAL_CONFIG.title }}
+ +
+
- -
- +
- - - -
+ + +
+ + + + + +
+ +
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue index 3d0cfe59..6c2348ac 100644 --- a/src/components/vue-ui-radar.vue +++ b/src/components/vue-ui-radar.vue @@ -90,6 +90,7 @@ const noTitle = ref(null); const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -218,6 +219,7 @@ function prepareChart() { } onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -760,6 +762,8 @@ defineExpose({ />
+
+
+
+ -
- - - - -
+ +
+ + + + +
+
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue index 9883dd39..1c156189 100644 --- a/src/components/vue-ui-rings.vue +++ b/src/components/vue-ui-rings.vue @@ -94,6 +94,7 @@ const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); const resizing = ref(false); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -179,6 +180,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -679,6 +681,8 @@ defineExpose({ />
+
+
- -
- - - - - - -
+
+ + + +
+ + + + + + +
+
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue index c0d5bdf0..9d0b88d6 100644 --- a/src/components/vue-ui-scatter.vue +++ b/src/components/vue-ui-scatter.vue @@ -91,6 +91,7 @@ const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); const segregated = ref([]); +const readyTeleport = ref(false); const xAxisLabelLeft = ref(null); const xAxisLabelRight = ref(null); @@ -233,6 +234,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -970,6 +972,8 @@ defineExpose({ />
+
+
- -
- - - - -
+
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue index dbcd0b8c..c3d3ba17 100755 --- a/src/components/vue-ui-stackbar.vue +++ b/src/components/vue-ui-stackbar.vue @@ -112,6 +112,7 @@ const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); const slicerComponent = ref(null); +const readyTeleport = ref(false); const xAxisLabel = ref(null); const yAxisLabel = ref(null); @@ -121,6 +122,7 @@ const sumTop = ref(null); const sumRight = ref(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }) @@ -1204,6 +1206,8 @@ defineExpose({ />
+
+ -
- - - - - +
+ + + +
+ + - -
+ + + + +
+
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue index 5fdfb0d1..4238744f 100644 --- a/src/components/vue-ui-treemap.vue +++ b/src/components/vue-ui-treemap.vue @@ -94,6 +94,7 @@ const tableStep = ref(0); const legendStep = ref(0); const drillStack = ref([]); const breadcrumbsNav = ref(null); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -296,6 +297,7 @@ const resizeObserver = shallowRef(null); const observedEl = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -831,6 +833,8 @@ defineExpose({ />
+
+
- -
- - - - -
- +
+ + + +
+ + + + +
+
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue index 014c3100..0f699342 100644 --- a/src/components/vue-ui-waffle.vue +++ b/src/components/vue-ui-waffle.vue @@ -81,6 +81,7 @@ const noTitle = ref(null); const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); +const readyTeleport = ref(false); const FINAL_CONFIG = ref(prepareConfig()); @@ -244,6 +245,7 @@ function prepareChart() { } onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -969,6 +971,8 @@ defineExpose({ />
+
+
- -
- - - - - +
+ + + +
+ + - -
+ + + + +
+
diff --git a/src/components/vue-ui-world.vue b/src/components/vue-ui-world.vue index 37c99e4c..9716ee3d 100644 --- a/src/components/vue-ui-world.vue +++ b/src/components/vue-ui-world.vue @@ -3,6 +3,7 @@ import { computed, defineAsyncComponent, nextTick, + onMounted, ref, toRefs, watch, @@ -90,6 +91,11 @@ const uid = ref(createUid()); const isTooltip = ref(false); const tooltipContent = ref(''); const step = ref(0); +const readyTeleport = ref(false); + +onMounted(() => { + readyTeleport.value = true; +}) let worldGeo = WORLD_DATA; const { projections, getProjectedBounds, setupTerritories } = geo; @@ -736,6 +742,8 @@ defineExpose({ }" />
+
+
-
- - +
- - - -
+ + +
+ + + + + + +
+
diff --git a/src/components/vue-ui-xy-canvas.vue b/src/components/vue-ui-xy-canvas.vue index 59a161be..df45ee3a 100644 --- a/src/components/vue-ui-xy-canvas.vue +++ b/src/components/vue-ui-xy-canvas.vue @@ -105,6 +105,7 @@ const titleStep = ref(0); const tableStep = ref(0); const legendStep = ref(0); const mouseY = ref(null); +const readyTeleport = ref(false); const isDataset = computed(() => { return !!props.dataset && props.dataset.length; @@ -1343,6 +1344,7 @@ const observedEl = shallowRef(null); const resizeObserver = shallowRef(null); onMounted(() => { + readyTeleport.value = true; prepareChart(); }); @@ -1599,6 +1601,8 @@ defineExpose({ } }" />
+ +
- -
- - - - - -
+ +
+ + + +
+ + + + + +
+
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue index fdd7ce92..d3fd2337 100644 --- a/src/components/vue-ui-xy.vue +++ b/src/components/vue-ui-xy.vue @@ -142,6 +142,7 @@ const userOptionsVisible = ref(true); const svgRef = ref(null); const tagRefs = ref({}); const textMeasurer = ref(null); +const readyTeleport = ref(false); const selectedSerieIndex = ref(null); @@ -197,6 +198,7 @@ const fontSizes = ref({ const plotRadii = ref({ plot: 3, line: 3 }); onMounted(() => { + readyTeleport.value = true; if (props.dataset.length) { props.dataset.forEach((ds, i) => { if ([null, undefined].includes(ds.series)) { @@ -2535,6 +2537,8 @@ defineExpose({ }" />
+
+ - - -
-
- - - - - - - - - - - - {{ legendItem.name }} +
+ + + +
+
+ + + + + + + + + + + + {{ legendItem.name }} +
-
+
+ +
+ -
- -
diff --git a/src/useConfig.js b/src/useConfig.js index c1ed110b..784ec490 100755 --- a/src/useConfig.js +++ b/src/useConfig.js @@ -313,7 +313,10 @@ export function useConfig() { width: 800, padding: PADDING([12, 12, 12, 12]), title: TITLE, - legend: LEGEND, + legend: { + ...LEGEND, + position: 'bottom' + }, zoom: ZOOM, tooltip: { ...TOOLTIP, @@ -618,7 +621,8 @@ export function useConfig() { legend: { color: COLOR_BLACK, show: true, - fontSize: FONT._14 + fontSize: FONT._14, + position: 'bottom', // bottom | top }, title: { ...TITLE, @@ -897,7 +901,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showPercentage: true, - showValue: true + showValue: true, + position: 'bottom' }, tooltip: { ...TOOLTIP, @@ -972,7 +977,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' }, title: TITLE, tooltip: { @@ -1064,7 +1070,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' } } }, @@ -1153,7 +1160,8 @@ export function useConfig() { }, legend: { ...LEGEND, - roundingPercentage: 0 + roundingPercentage: 0, + position: 'bottom' } } }, @@ -1299,7 +1307,10 @@ export function useConfig() { roundingValue: 0, showShape: true, }, - legend: LEGEND + legend: { + ...LEGEND, + position: 'bottom' + } } }, table: { @@ -1760,7 +1771,8 @@ export function useConfig() { legend: { ...LEGEND, roundingValue: 0, - roundingPercentage: 0 + roundingPercentage: 0, + position: 'bottom' }, tooltip: { ...TOOLTIP, @@ -2179,7 +2191,8 @@ export function useConfig() { title: TITLE, legend: { ...LEGEND, - roundingValue: 0 + roundingValue: 0, + position: 'bottom' }, tooltip: { ...TOOLTIP, @@ -2788,6 +2801,7 @@ export function useConfig() { legendFontSize: FONT._12, legendIcon: 'circleFill', legendIconSize: FONT._12, + legendPosition: 'bottom', lineAnimated: true, lineSmooth: true, lineStrokeWidth: 2, @@ -3157,7 +3171,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' }, title: TITLE, tooltip: { @@ -3339,7 +3354,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' } } }, @@ -3425,7 +3441,8 @@ export function useConfig() { legend: { ...LEGEND, roundingValue: 0, - roundingPercentage: 0 + roundingPercentage: 0, + position: 'bottom' } } }, @@ -3590,7 +3607,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' }, title: TITLE, tooltip: { @@ -3666,7 +3684,8 @@ export function useConfig() { roundingValue: 0, roundingPercentage: 0, showValue: true, - showPercentage: true + showPercentage: true, + position: 'bottom' }, title: TITLE, tooltip: { @@ -3966,7 +3985,8 @@ export function useConfig() { labelEnd: 'end', labelPositive: 'positive', // v3 labelNegative: 'negative', // v3 - labelNeutral: 'neutral' // v3 + labelNeutral: 'neutral', // v3 + position: 'bottom' }, title: TITLE } @@ -4304,7 +4324,10 @@ export function useConfig() { showHorizontalSelector: false, }, tooltip: TOOLTIP, - legend: LEGEND, + legend: { + ...LEGEND, + position: 'bottom', + }, title: TITLE, grid: { y: { @@ -4445,6 +4468,7 @@ export function useConfig() { }, legend: { ...LEGEND, + position: 'bottom' }, nodes: { gap: 10, @@ -4572,7 +4596,10 @@ export function useConfig() { } }, title: TITLE, - legend: LEGEND, + legend: { + ...LEGEND, + position: 'bottom' + }, tooltip: TOOLTIP } }, @@ -5549,7 +5576,8 @@ export function useConfig() { }, legend: { ...LEGEND, - roundingValue: 0 + roundingValue: 0, + position: 'bottom' }, } } @@ -5806,6 +5834,7 @@ export function useConfig() { }, legend: { ...LEGEND, + position: 'bottom' }, title: TITLE, tooltip: TOOLTIP @@ -5973,7 +6002,10 @@ export function useConfig() { showMinimap: true }, title: TITLE, - legend: LEGEND + legend: { + ...LEGEND, + position: 'bottom' + } } }, table: { @@ -6189,7 +6221,10 @@ export function useConfig() { chart: { backgroundColor: COLOR_WHITE, color: COLOR_BLACK, - legend: LEGEND, + legend: { + ...LEGEND, + position: 'bottom' + }, title: TITLE, arcs: { innerRadiusRatio: 1, diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts index 77f61758..a2479614 100644 --- a/types/vue-data-ui.d.ts +++ b/types/vue-data-ui.d.ts @@ -458,6 +458,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'top'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -621,6 +622,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'top'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -1199,6 +1201,7 @@ declare module "vue-data-ui" { backgroundColor?: string; roundingPercentage?: number; roundingValue?: number; + position?: 'bottom' | 'top'; }; }; }; @@ -1537,6 +1540,7 @@ declare module "vue-data-ui" { roundingValue?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'top'; }; }; }; @@ -1769,6 +1773,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'top'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -2910,6 +2915,7 @@ declare module "vue-data-ui" { legend?: ChartBaseLegend & { backgroundColor?: string; roundingValue?: number; + position?: 'bottom' | 'top'; }; tooltip?: ChartTooltip & { roundingValue?: number; @@ -3358,6 +3364,7 @@ declare module "vue-data-ui" { color?: string; show?: boolean; fontSize?: number; + position?: 'bottom' | 'top'; }; title?: { show?: boolean; @@ -3715,6 +3722,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showPercentage?: boolean; showValue?: boolean; + position?: 'bottom' | 'top'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -3896,6 +3904,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'bottom'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -4095,6 +4104,7 @@ declare module "vue-data-ui" { roundingPercentage?: number; showValue?: boolean; showPercentage?: boolean; + position?: 'bottom' | 'top'; }; }; }; @@ -4237,6 +4247,7 @@ declare module "vue-data-ui" { legend?: ChartBaseLegend & { backgroundColor?: string; roundingPercentage?: number; + position?: 'bottom' | 'top'; }; }; }; @@ -4464,6 +4475,7 @@ declare module "vue-data-ui" { }; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top' }; }; }; @@ -4942,6 +4954,7 @@ declare module "vue-data-ui" { backgroundColor?: string; roundingValue?: number; roundingPercentage?: number; + position?: 'bottom' | 'top'; }; tooltip?: ChartTooltip & { showValue?: boolean; @@ -6024,6 +6037,7 @@ declare module "vue-data-ui" { legendFontSize?: number; legendIcon?: VueUiIconName; legendIconSize?: number; + legendPosition?: 'bottom' | 'top'; lineAnimated?: boolean; lineSmooth?: boolean; lineStrokeWidth?: number; @@ -6574,6 +6588,7 @@ declare module "vue-data-ui" { labelPositive?: string; // v3 labelNegative?: string; // v3 labelNeutral?: string; // v3 + position?: 'bottom' | 'top'; }; title?: ChartTitle; }; @@ -6802,6 +6817,7 @@ declare module "vue-data-ui" { show?: boolean; fontSize?: number; bold?: boolean; + position?: 'bottom' | 'top'; }; title?: ChartTitle; grid?: { @@ -6989,6 +7005,7 @@ declare module "vue-data-ui" { color?: string; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; tooltip?: ChartTooltip & { showPercentage?: boolean; @@ -7195,6 +7212,7 @@ declare module "vue-data-ui" { title?: ChartTitle; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; tooltip?: ChartTooltip & { customFormat?: @@ -7543,6 +7561,7 @@ declare module "vue-data-ui" { title?: ChartTitle; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; zoom?: ChartZoom; tooltip?: ChartTooltip & { @@ -7776,6 +7795,7 @@ declare module "vue-data-ui" { title?: ChartTitle; legend?: ChartBaseLegend & { roundingValue?: number; + position?: 'bottom' | 'top'; }; }; } @@ -8077,6 +8097,7 @@ declare module "vue-data-ui" { }; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; title?: ChartTitle; tooltip?: ChartTooltip & { @@ -8356,6 +8377,7 @@ declare module "vue-data-ui" { title?: ChartTitle; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; } }; @@ -8663,6 +8685,7 @@ declare module "vue-data-ui" { color?: string; legend?: ChartBaseLegend & { backgroundColor?: string; + position?: 'bottom' | 'top'; }; title?: ChartTitle; arcs?: {