fix: disable stack option when left & right axis is present

frontend/src2/charts/components/BarChartConfigForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { BarChartConfig, YAxisBar } from '../../types/chart.types'
 import { ColumnOption, Dimension, DimensionOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
@@ -30,6 +30,16 @@ watchEffect(() => {
 	if (config.value.y_axis?.stack === undefined) {
 		config.value.y_axis.stack = true
 	}
+	if (hasAxisSplit.value) {
+		config.value.y_axis.stack = false
+	}
+})
+
+const hasAxisSplit = computed(() => {
+	return (
+		config.value.y_axis.series.find((s) => s.align === 'Right') &&
+		config.value.y_axis.series.find((s) => s.align === 'Left')
+	)
 })
 </script>
 
@@ -38,7 +48,7 @@ watchEffect(() => {
 
 	<YAxisConfig v-model="config.y_axis" :column-options="props.columnOptions">
 		<template #y-axis-settings="{ y_axis }">
-			<Checkbox label="Stack" v-model="(y_axis as YAxisBar).stack" />
+			<Checkbox label="Stack" v-model="(y_axis as YAxisBar).stack" :disabled="hasAxisSplit" />
 			<Checkbox label="Normalize" v-model="(y_axis as YAxisBar).normalize" />
 		</template>
 	</YAxisConfig>

frontend/src2/components/Checkbox.vue

@@ -11,6 +11,7 @@
 					enabled ? 'bg-gray-900' : 'bg-gray-300',
 					props.size === 'sm' ? 'h-4 w-6.5' : 'h-4.5 w-8',
 				]"
+				:disabled="props.disabled"
 			>
 				<span
 					:class="[
@@ -31,6 +32,6 @@
 <script setup>
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
 
-const props = defineProps(['label', 'size'])
+const props = defineProps(['label', 'size', 'disabled'])
 const enabled = defineModel({ type: Boolean })
 </script>