feat: multi-step measure picker

frappe · Dec 6, 2024 · df08eb0 · df08eb0
1 parent 5206344
commit df08eb0
Show file tree

Hide file tree

Showing 12 changed files with 263 additions and 153 deletions.
diff --git a/frontend/src2/charts/components/BarChartConfigForm.vue b/frontend/src2/charts/components/BarChartConfigForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import { BarChartConfig, YAxisBar } from '../../types/chart.types'
-import { Dimension, DimensionOption, MeasureOption } from '../../types/query.types'
+import { ColumnOption, Dimension, DimensionOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'
 
 const props = defineProps<{
 	dimensions: DimensionOption[]
-	measures: MeasureOption[]
+	columnOptions: ColumnOption[]
 }>()
 
 const config = defineModel<BarChartConfig>({
@@ -36,7 +36,7 @@ watchEffect(() => {
 <template>
 	<XAxisConfig v-model="config.x_axis" :dimensions="props.dimensions"></XAxisConfig>
 
-	<YAxisConfig v-model="config.y_axis" :measures="props.measures">
+	<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="Normalize" v-model="(y_axis as YAxisBar).normalize" />

diff --git a/frontend/src2/charts/components/ChartConfigForm.vue b/frontend/src2/charts/components/ChartConfigForm.vue
@@ -27,20 +27,8 @@ const dimensions = computed<DimensionOption[]>(() => {
 	}))
 })
 
-const measures = computed<MeasureOption[]>(() => {
-	const queryMeasures = props.chart.baseQuery.measures.map((measure) => ({
-		...measure,
-		label: measure.measure_name,
-		value: measure.measure_name,
-	}))
-	const chartMeasures = Object.values(props.chart.doc.calculated_measures || {}).map(
-		(measure) => ({
-			...measure,
-			label: measure.measure_name,
-			value: measure.measure_name,
-		})
-	)
-	return [...queryMeasures, ...chartMeasures]
+const columnOptions = computed(() => {
+	return props.chart.baseQuery.result.columnOptions
 })
 </script>
 
@@ -49,36 +37,36 @@ const measures = computed<MeasureOption[]>(() => {
 		v-if="props.chart.doc.chart_type == 'Number'"
 		v-model="(props.chart.doc.config as NumberChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 	<DonutChartConfigForm
 		v-if="props.chart.doc.chart_type == 'Donut'"
 		v-model="(props.chart.doc.config as DountChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 	<FunnelChartConfigForm
 		v-if="props.chart.doc.chart_type == 'Funnel'"
 		v-model="(props.chart.doc.config as FunnelChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 	<TableChartConfigForm
 		v-if="props.chart.doc.chart_type == 'Table'"
 		v-model="(props.chart.doc.config as TableChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 	<BarChartConfigForm
 		v-if="props.chart.doc.chart_type == 'Bar' || props.chart.doc.chart_type == 'Row'"
 		v-model="(props.chart.doc.config as BarChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 	<LineChartConfigForm
 		v-if="props.chart.doc.chart_type == 'Line'"
 		v-model="(props.chart.doc.config as LineChartConfig)"
 		:dimensions="dimensions"
-		:measures="measures"
+		:column-options="columnOptions"
 	/>
 </template>
diff --git a/frontend/src2/charts/components/DonutChartConfigForm.vue b/frontend/src2/charts/components/DonutChartConfigForm.vue
@@ -2,14 +2,14 @@
 import { computed } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { DountChartConfig } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from '../../types/query.types'
+import { ColumnOption, DimensionOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 import MeasurePicker from './MeasurePicker.vue'
 
 const props = defineProps<{
 	dimensions: DimensionOption[]
-	measures: MeasureOption[]
+	columnOptions: ColumnOption[]
 }>()
 
 const config = defineModel<DountChartConfig>({
@@ -33,7 +33,11 @@ const discrete_dimensions = computed(() =>
 				v-model="config.label_column"
 				:options="discrete_dimensions"
 			/>
-			<MeasurePicker label="Value" :options="props.measures" v-model="config.value_column" />
+			<MeasurePicker
+				label="Value"
+				v-model="config.value_column"
+				:column-options="props.columnOptions"
+			/>
 			<FormControl
 				v-model="config.legend_position"
 				label="Legend Position"

diff --git a/frontend/src2/charts/components/FunnelChartConfigForm.vue b/frontend/src2/charts/components/FunnelChartConfigForm.vue
@@ -2,13 +2,13 @@
 import { computed } from 'vue'
 import { FIELDTYPES } from '../../helpers/constants'
 import { FunnelChartConfig } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from '../../types/query.types'
+import { ColumnOption, DimensionOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import MeasurePicker from './MeasurePicker.vue'
 
 const props = defineProps<{
 	dimensions: DimensionOption[]
-	measures: MeasureOption[]
+	columnOptions: ColumnOption[]
 }>()
 
 const config = defineModel<FunnelChartConfig>({
@@ -32,7 +32,11 @@ const discrete_dimensions = computed(() =>
 				v-model="config.label_column"
 				:options="discrete_dimensions"
 			/>
-			<MeasurePicker label="Value" :options="props.measures" v-model="config.value_column" />
+			<MeasurePicker
+				label="Value"
+				v-model="config.value_column"
+				:column-options="props.columnOptions"
+			/>
 		</div>
 	</CollapsibleSection>
 </template>
diff --git a/frontend/src2/charts/components/LineChartConfigForm.vue b/frontend/src2/charts/components/LineChartConfigForm.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { LineChartConfig, SeriesLine, YAxisLine } from '../../types/chart.types'
-import { DimensionOption, MeasureOption } from '../../types/query.types'
+import { ColumnOption, DimensionOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'
 
 const props = defineProps<{
 	dimensions: DimensionOption[]
-	measures: MeasureOption[]
+	columnOptions: ColumnOption[]
 }>()
 
 const config = defineModel<LineChartConfig>({
@@ -23,7 +23,7 @@ const config = defineModel<LineChartConfig>({
 <template>
 	<XAxisConfig v-model="config.x_axis" :dimensions="props.dimensions"></XAxisConfig>
 
-	<YAxisConfig v-model="config.y_axis" :measures="props.measures">
+	<YAxisConfig v-model="config.y_axis" :column-options="props.columnOptions">
 		<template #y-axis-settings="{ y_axis }">
 			<Checkbox label="Curved Lines" v-model="(y_axis as YAxisLine).smooth" />
 			<Checkbox label="Show Area" v-model="(y_axis as YAxisLine).show_area" />