fix: cannot select aggregation in measure picker

frontend/src2/charts/components/BarChartConfigForm.vue

@@ -20,6 +20,13 @@ const config = defineModel<BarChartConfig>({
 	}),
 })
 
+const hasAxisSplit = computed(() => {
+	return (
+		config.value.y_axis.series?.find((s) => s.align === 'Right') &&
+		config.value.y_axis.series?.find((s) => s.align === 'Left')
+	)
+})
+
 watchEffect(() => {
 	if (!config.value.x_axis) {
 		config.value.x_axis = {} as Dimension
@@ -34,13 +41,6 @@ watchEffect(() => {
 		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>
 
 <template>

frontend/src2/charts/components/DonutChartConfigForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { DountChartConfig } from '../../types/chart.types'
-import { ColumnOption, DimensionOption } from '../../types/query.types'
+import { ColumnOption, Dimension, DimensionOption, Measure } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 import MeasurePicker from './MeasurePicker.vue'
@@ -20,6 +20,15 @@ const config = defineModel<DountChartConfig>({
 	}),
 })
 
+watchEffect(() => {
+	if (!config.value.label_column) {
+		config.value.label_column = {} as Dimension
+	}
+	if (!config.value.value_column) {
+		config.value.value_column = {} as Measure
+	}
+})
+
 const discrete_dimensions = computed(() =>
 	props.dimensions.filter((d) => FIELDTYPES.DISCRETE.includes(d.data_type))
 )

frontend/src2/charts/components/FunnelChartConfigForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { FunnelChartConfig } from '../../types/chart.types'
-import { ColumnOption, DimensionOption } from '../../types/query.types'
+import { ColumnOption, Dimension, DimensionOption, Measure } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import MeasurePicker from './MeasurePicker.vue'
 
@@ -19,6 +19,15 @@ const config = defineModel<FunnelChartConfig>({
 	}),
 })
 
+watchEffect(() => {
+	if (!config.value.label_column) {
+		config.value.label_column = {} as Dimension
+	}
+	if (!config.value.value_column) {
+		config.value.value_column = {} as Measure
+	}
+})
+
 const discrete_dimensions = computed(() =>
 	props.dimensions.filter((d) => FIELDTYPES.DISCRETE.includes(d.data_type))
 )