Improvement - Add optional position config to user options menu

graphieros · graphieros · commit 0188f1002371 · 2024-11-13T06:45:03.000+01:00
diff --git a/src/components/vue-ui-3d-bar.vue b/src/components/vue-ui-3d-bar.vue
@@ -550,6 +550,7 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="bar3dChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -452,6 +452,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="agePyramid"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
@@ -501,6 +501,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="candlestickChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-carousel-table.vue b/src/components/vue-ui-carousel-table.vue
@@ -486,9 +486,9 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :isFullscreen="isFullscreen"
             :chartElement="chartContainer"
+            :position="FINAL_CONFIG.userOptions.position"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :zIndex="3"
-            noOffset
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-chestnut.vue b/src/components/vue-ui-chestnut.vue
@@ -528,6 +528,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="chestnutChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
@@ -545,6 +545,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="donutEvolutionChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -641,6 +641,7 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :isFullscreen="isFullscreen"
             :chartElement="donutChart"
+            :position="FINAL_CONFIG.userOptions.position"
             :isTooltip="mutableConfig.showTooltip"
             :titles="{...FINAL_CONFIG.userOptions.buttonTitles }"
             @toggleFullscreen="toggleFullscreen"
diff --git a/src/components/vue-ui-dumbbell.vue b/src/components/vue-ui-dumbbell.vue
@@ -444,6 +444,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="dumbbellChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-flow.vue b/src/components/vue-ui-flow.vue
@@ -511,6 +511,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="flowChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-galaxy.vue b/src/components/vue-ui-galaxy.vue
@@ -459,6 +459,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="galaxyChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-gauge.vue b/src/components/vue-ui-gauge.vue
@@ -417,6 +417,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="gaugeChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
@@ -413,6 +413,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="heatmapChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -52,13 +52,17 @@ const isDataset = computed(() => {
 });
 
 onMounted(() => {
+    prepareChart()
+})
+
+function prepareChart() {
     if(objectIsEmpty(props.dataset)){
         error({
             componentName: 'VueUiMolecule',
             type: 'dataset'
         })
     }
-})
+}
 
 const uid = ref(createUid());
 const details = ref(null);
@@ -551,6 +555,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="moleculeChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
@@ -338,6 +338,7 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="moodRadarChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-nested-donuts.vue b/src/components/vue-ui-nested-donuts.vue
@@ -762,6 +762,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="nestedDonutsChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
@@ -512,6 +512,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="onionChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-parallel-coordinate-plot.vue b/src/components/vue-ui-parallel-coordinate-plot.vue
@@ -578,6 +578,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="pcpChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -974,6 +974,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="quadrantChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-quick-chart.vue b/src/components/vue-ui-quick-chart.vue
@@ -903,6 +903,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptionsButtonTitles }"
             :chartElement="quickChart"
+            :position="FINAL_CONFIG.userOptionsPosition"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -599,6 +599,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="radarChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-relation-circle.vue b/src/components/vue-ui-relation-circle.vue
@@ -376,6 +376,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="relationCircleChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
@@ -522,6 +522,7 @@ defineExpose({
         :isFullscreen="isFullscreen"
         :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
         :chartElement="ringsChart"
+        :position="FINAL_CONFIG.userOptions.position"
         @toggleFullscreen="toggleFullscreen"
         @generatePdf="generatePdf"
         @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -637,6 +637,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="scatterChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-stackbar.vue b/src/components/vue-ui-stackbar.vue
@@ -771,6 +771,7 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :isFullscreen="isFullscreen"
             :chartElement="stackbarChart"
+            :position="FINAL_CONFIG.userOptions.position"
             :isTooltip="mutableConfig.showTooltip"
             :titles="{...FINAL_CONFIG.userOptions.buttonTitles }"
             @toggleFullscreen="toggleFullscreen"
diff --git a/src/components/vue-ui-strip-plot.vue b/src/components/vue-ui-strip-plot.vue
@@ -509,6 +509,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="stripPlotChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-table-heatmap.vue b/src/components/vue-ui-table-heatmap.vue
@@ -212,6 +212,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="tableContainer"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-table-sparkline.vue b/src/components/vue-ui-table-sparkline.vue
@@ -368,6 +368,7 @@ defineExpose({
                                 :isFullscreen="isFullscreen"
                                 :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
                                 :chartElement="tableContainer"
+                                :position="FINAL_CONFIG.userOptions.position"
                                 @toggleFullscreen="toggleFullscreen"
                                 @generatePdf="generatePdf"
                                 @generateImage="generateImage"
diff --git a/src/components/vue-ui-thermometer.vue b/src/components/vue-ui-thermometer.vue
@@ -292,6 +292,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="thermoChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-tiremarks.vue b/src/components/vue-ui-tiremarks.vue
@@ -313,6 +313,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="tiremarksChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateImage="generateImage"
diff --git a/src/components/vue-ui-treemap.vue b/src/components/vue-ui-treemap.vue
@@ -563,6 +563,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="treemapChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
@@ -638,6 +638,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="verticalBarChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
@@ -739,6 +739,7 @@ defineExpose({
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="waffleChart"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-wheel.vue b/src/components/vue-ui-wheel.vue
@@ -178,7 +178,7 @@ const ticks = computed(() => {
     for(let i = 0; i < tickAmount; i += 1) {
         const color = activeValue.value > i ? FINAL_CONFIG.value.style.chart.layout.wheel.ticks.activeColor : FINAL_CONFIG.value.style.chart.layout.wheel.ticks.inactiveColor;
         const { x: x1, y: y1 } = calcTickStart((svg.value.size / tickAmount) * i);
-        const { x: x2, y: y2 } = calcTickStart((svg.value.size / tickAmount) * i, 0.9);
+        const { x: x2, y: y2 } = calcTickStart((svg.value.size / tickAmount) * i, FINAL_CONFIG.value.style.chart.layout.wheel.ticks.sizeRatio);
         tickArray.push({
             x1,
             y1,
@@ -240,6 +240,7 @@ defineExpose({
             :hasFullscreen="FINAL_CONFIG.userOptions.buttons.fullscreen"
             :hasXls="false"
             :isFullscreen="isFullscreen"
+            :position="FINAL_CONFIG.userOptions.position"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="wheelChart"
             @toggleFullscreen="toggleFullscreen"
diff --git a/src/components/vue-ui-word-cloud.vue b/src/components/vue-ui-word-cloud.vue
@@ -390,6 +390,7 @@ defineExpose({
             :isFullscreen="isFullscreen"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="wordCloudChart" 
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf" 
             @generateCsv="generateCsv" 
diff --git a/src/components/vue-ui-xy-canvas.vue b/src/components/vue-ui-xy-canvas.vue
@@ -1331,6 +1331,7 @@ defineExpose({
             :isStacked="mutableConfig.stacked"
             :titles="{ ...FINAL_CONFIG.userOptions.buttonTitles }"
             :chartElement="xy"
+            :position="FINAL_CONFIG.userOptions.position"
             @toggleFullscreen="toggleFullscreen"
             @generatePdf="generatePdf"
             @generateCsv="generateCsv"
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
@@ -38,6 +38,7 @@
             :isStacked="mutableConfig.isStacked"
             :isFullscreen="isFullscreen"
             :chartElement="$refs.chart"
+            :position="FINAL_CONFIG.chart.userOptions.position"
             :isTooltip="mutableConfig.showTooltip"
             :titles="{ ...FINAL_CONFIG.chart.userOptions.buttonTitles }"
             @toggleFullscreen="toggleFullscreen"
