chore: merge develop into version-3

frontend/src/query/visual/ColumnSection.vue

@@ -110,13 +110,14 @@ function onColumnSort(e) {
 			:showHandle="false"
 		>
 			<template #item="{ item: column, index: idx }">
-				<ColumnListItem
-					v-if="isExpressionColumn(column)"
-					:column="column"
-					:isActive="activeColumnIdx === idx"
-					@edit-column="activeColumnIdx = idx"
-					@remove-column="assistedQuery.removeColumnAt(idx)"
-				/>
+				<div v-if="isExpressionColumn(column)">
+					<ColumnListItem
+						:column="column"
+						:isActive="activeColumnIdx === idx"
+						@edit-column="activeColumnIdx = idx"
+						@remove-column="assistedQuery.removeColumnAt(idx)"
+					/>
+				</div>
 				<Popover
 					v-else
 					:show="showSimpleColumnEditor && activeColumnIdx === idx"

frontend/src2/charts/ChartBuilder.vue

@@ -68,11 +68,11 @@ const showShareDialog = ref(false)
 
 <template>
 	<div v-if="chart" class="relative flex h-full w-full overflow-hidden">
-		<div class="relative flex h-full w-full flex-col overflow-hidden">
+		<div class="relative flex h-full w-full flex-col gap-4 overflow-hidden p-3 pt-4">
 			<LoadingOverlay v-if="chart.dataQuery.executing" />
 			<div
 				ref="chartEl"
-				class="flex min-h-[24rem] flex-1 flex-shrink-0 items-center justify-center overflow-hidden p-4"
+				class="flex min-h-[24rem] flex-1 flex-shrink-0 items-center justify-center"
 			>
 				<ChartRenderer
 					:title="chart.doc.title"
@@ -87,7 +87,7 @@ const showShareDialog = ref(false)
 			<ChartBuilderTable v-if="chart.dataQuery.result.executedSQL" />
 		</div>
 		<div
-			class="relative z-[1] flex w-[19rem] flex-shrink-0 flex-col divide-y overflow-y-auto bg-white shadow"
+			class="relative z-[1] flex w-[19rem] flex-shrink-0 flex-col divide-y overflow-y-auto bg-white px-3.5"
 		>
 			<CollapsibleSection title="Chart">
 				<div class="flex flex-col gap-3">

frontend/src2/charts/components/ChartBuilderTable.vue

@@ -12,9 +12,9 @@ const drillOn = ref<{ row: QueryResultRow; column: QueryResultColumn } | null>(n
 </script>
 
 <template>
-	<div v-if="chart.doc.chart_type != 'Table'" class="flex h-[18rem] flex-col divide-y border">
+	<div v-if="chart.doc.chart_type != 'Table'" class="flex h-[18rem] flex-col">
 		<DataTable
-			class="bg-white"
+			class="rounded border bg-white"
 			:columns="chart.dataQuery.result.columns"
 			:rows="chart.dataQuery.result.formattedRows"
 			:on-export="chart.dataQuery.downloadResults"

frontend/src2/charts/components/CollapsibleSection.vue

@@ -8,7 +8,7 @@ const collapsed = ref(props.collapsed ?? false)
 </script>
 
 <template>
-	<div class="flex flex-col px-3.5" :class="collapsed ? '' : 'pb-3.5'">
+	<div class="flex flex-col" :class="collapsed ? '' : 'pb-3.5'">
 		<button
 			class="sticky top-0 flex cursor-pointer items-center gap-1 bg-white py-3"
 			@click="collapsed = !collapsed"

frontend/src2/charts/components/NumberChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { formatNumber, getShortNumber, scrub } from '../../helpers'
+import { formatNumber, getShortNumber, sanitizeColumnName } from '../../helpers'
 import { NumberChartConfig } from '../../types/chart.types'
 import { QueryResult } from '../../types/query.types'
 import Sparkline from './Sparkline.vue'
@@ -25,7 +25,8 @@ const numberValuesPerColumn = computed(() => {
 	if (!props.result?.rows?.length) return {}
 
 	return numberColumns.value.reduce((acc: any, measure_name: string) => {
-		acc[scrub(measure_name)] = props.result.rows.map((row: any) => row[scrub(measure_name)])
+		const colName = sanitizeColumnName(measure_name)
+		acc[colName] = props.result.rows.map((row: any) => row[colName])
 		return acc
 	}, {})
 })
@@ -36,7 +37,8 @@ const cards = computed(() => {
 	if (!Object.keys(numberValuesPerColumn.value).length) return []
 
 	return numberColumns.value.map((measure_name: string) => {
-		const numberValues = numberValuesPerColumn.value[scrub(measure_name)]
+		const colName = sanitizeColumnName(measure_name)
+		const numberValues = numberValuesPerColumn.value[colName]
 		const currentValue = numberValues[numberValues.length - 1]
 		const previousValue = numberValues[numberValues.length - 2]
 		const delta = config.value.negative_is_better

frontend/src2/charts/helpers.ts

@@ -1,5 +1,12 @@
 import { graphic } from 'echarts/core'
-import { copy, ellipsis, formatNumber, getShortNumber, getUniqueId } from '../helpers'
+import {
+	copy,
+	ellipsis,
+	formatNumber,
+	getShortNumber,
+	getUniqueId,
+	sanitizeColumnName,
+} from '../helpers'
 import { FIELDTYPES } from '../helpers/constants'
 import { column, getFormattedDate } from '../query/helpers'
 import useQuery from '../query/query'
@@ -9,6 +16,7 @@ import {
 	ChartConfig,
 	DountChartConfig,
 	LineChartConfig,
+	Series,
 	SeriesLine,
 } from '../types/chart.types'
 import {
@@ -83,15 +91,17 @@ export function getLineChartOptions(config: LineChartConfig, result: QueryResult
 			const serie = getSerie(config, c.name) as SeriesLine
 
 			const is_right_axis = serie.align === 'Right'
+			const type = serie.type?.toLowerCase() || 'line'
 			const smooth = serie.smooth ?? config.y_axis.smooth
 			const show_data_points = serie.show_data_points ?? config.y_axis.show_data_points
 			const show_area = serie.show_area ?? config.y_axis.show_area
 			const show_data_labels = serie.show_data_labels ?? config.y_axis.show_data_labels
 			const color = serie.color?.[0] || colors[idx]
+			const name = serie.measure.measure_name || c.name
 
 			return {
-				type: 'line',
-				name: c.name,
+				type,
+				name,
 				data: getSeriesData(c.name),
 				color: color,
 				yAxisIndex: is_right_axis ? 1 : 0,
@@ -189,17 +199,18 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 			const serie = getSerie(config, c.name)
 			const is_right_axis = serie.align === 'Right'
 
-			const stack = config.y_axis.stack
-			const show_data_labels = serie.show_data_labels ?? config.y_axis.show_data_labels
 			const color = serie.color?.[0] || colors[idx]
 			const type = serie.type?.toLowerCase() || 'bar'
+			const stack = type === 'bar' && config.y_axis.stack ? 'stack' : undefined
+			const show_data_labels = serie.show_data_labels ?? config.y_axis.show_data_labels
 
 			const data = getSeriesData(c.name)
+			const name = serie.measure.measure_name || c.name
 
 			return {
 				type,
-				stack: type === 'bar' && stack ? 'stack' : undefined,
-				name: c.name,
+				stack,
+				name,
 				data: swapAxes ? data.reverse() : data,
 				color: color,
 				label: {
@@ -226,19 +237,25 @@ export function getBarChartOptions(config: BarChartConfig, result: QueryResult,
 	}
 }
 
-function getSerie(config: AxisChartConfig, number_column: string) {
+function getSerie(config: AxisChartConfig, number_column: string): Series {
 	let serie
 	if (!config.split_by?.column_name) {
-		serie = config.y_axis.series.find((s) => s.measure.measure_name === number_column)
+		serie = config.y_axis.series.find(
+			(s) => sanitizeColumnName(s.measure.measure_name) === number_column
+		)
 	} else {
 		let seriesCount = config.y_axis.series.filter((s) => s.measure.measure_name).length
 		if (seriesCount === 1) {
 			serie = config.y_axis.series[0]
 		} else {
-			serie = config.y_axis.series.find((s) => number_column.includes(s.measure.measure_name))
+			serie = config.y_axis.series.find((s) =>
+				number_column.includes(sanitizeColumnName(s.measure.measure_name))
+			)
 		}
 	}
-	serie = serie || config.y_axis.series[0]
+	if (!serie) {
+		throw new Error(`Cannot find series for column ${number_column}`)
+	}
 	return serie
 }
 

frontend/src2/components/DataTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Download, Table2Icon } from 'lucide-vue-next'
+import { Download, Search, Table2Icon } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { formatNumber } from '../helpers'
 import { FIELDTYPES } from '../helpers/constants'
@@ -108,7 +108,10 @@ const filterPerColumn = ref<Record<string, string>>({})
 			<table class="relative h-full w-full border-separate border-spacing-0">
 				<thead class="sticky top-0 z-10 bg-white">
 					<tr>
-						<td class="whitespace-nowrap border-b border-r" width="1%"></td>
+						<td
+							class="sticky left-0 z-10 whitespace-nowrap border-b border-r bg-white"
+							width="1%"
+						></td>
 						<td
 							v-for="(column, idx) in props.columns"
 							:key="idx"
@@ -130,15 +133,26 @@ const filterPerColumn = ref<Record<string, string>>({})
 							<div class="truncate pl-3 pr-20"></div>
 						</td>
 					</tr>
-
 					<tr v-if="props.showFilterRow">
-						<td class="whitespace-nowrap border-b border-r" width="1%"></td>
+						<td
+							class="sticky left-0 z-10 whitespace-nowrap border-b border-r bg-white"
+							width="1%"
+						></td>
 						<td
 							v-for="(column, idx) in props.columns"
 							:key="idx"
-							class="z-0 border-b border-r p-1"
+							class="border-b border-r p-0.5"
 						>
-							<FormControl type="text" v-model="filterPerColumn[column.name]" />
+							<FormControl
+								type="text"
+								v-model="filterPerColumn[column.name]"
+								autocomplete="off"
+								class="[&_input]:bg-gray-200/80"
+							>
+								<template #prefix>
+									<Search class="h-4 w-4 text-gray-500" stroke-width="1.5" />
+								</template>
+							</FormControl>
 						</td>
 						<td
 							v-if="props.showRowTotals"
@@ -152,7 +166,7 @@ const filterPerColumn = ref<Record<string, string>>({})
 				<tbody>
 					<tr v-for="(row, idx) in visibleRows?.slice(0, 100)" :key="idx">
 						<td
-							class="whitespace-nowrap border-b border-r px-3 text-right"
+							class="sticky left-0 z-10 whitespace-nowrap border-b border-r bg-white px-2 text-right text-xs"
 							width="1%"
 							height="30px"
 						>
@@ -223,7 +237,7 @@ const filterPerColumn = ref<Record<string, string>>({})
 
 	<div
 		v-else-if="props.loading"
-		class="absolute top-10 z-10 flex h-[calc(100%-2rem)] w-full items-center justify-center rounded bg-gray-50/30 backdrop-blur-sm"
+		class="absolute top-10 z-10 flex h-[calc(100%-2rem)] w-full items-center justify-center rounded bg-white/30 backdrop-blur-sm"
 	>
 		<LoadingIndicator class="h-8 w-8 text-gray-700" />
 	</div>

frontend/src2/components/DraggableList.vue

@@ -36,23 +36,26 @@ function onChange(e) {
 		@change="onChange"
 	>
 		<template #item="{ element: item, index: idx }">
-			<div class="mb-2 flex items-center gap-1 last:mb-0">
+			<div class="mb-1.5 flex items-center gap-1 last:mb-0">
 				<GripVertical
 					v-if="props.showHandle"
 					class="h-4 w-4 flex-shrink-0 cursor-grab text-gray-500"
 				/>
 				<div class="flex flex-1 flex-col justify-center overflow-hidden">
 					<slot name="item" :item="item" :index="idx">
 						<div
-							class="group form-input flex h-7 flex-1 cursor-pointer items-center justify-between px-2"
+							class="group flex flex-1 cursor-pointer items-center justify-between rounded bg-gray-50 py-1.5 px-2 hover:bg-gray-100"
 						>
 							<div class="flex items-center space-x-2">
-								<div>{{ typeof item === 'object' ? item[itemKey] : item }}</div>
+								<slot name="item-content" :item="item" :index="idx">
+									<div>{{ typeof item === 'object' ? item[itemKey] : item }}</div>
+								</slot>
 							</div>
 							<div class="flex items-center space-x-2">
 								<X
 									@click.prevent.stop="items.splice(idx, 1)"
 									class="invisible h-4 w-4 text-gray-600 transition-all hover:text-gray-800 group-hover:visible"
+									stroke-width="1.5"
 								/>
 							</div>
 						</div>

frontend/src2/dashboard/DashboardBuilder.vue

@@ -59,9 +59,9 @@ const showShareDialog = ref(false)
 </script>
 
 <template>
-	<div class="relative flex h-full w-full divide-x overflow-hidden">
+	<div class="relative flex h-full w-full overflow-hidden bg-gray-50">
 		<div class="relative flex h-full w-full flex-col overflow-hidden">
-			<div class="flex items-center justify-between border-x px-4 pt-3">
+			<div class="flex items-center justify-between p-4 pb-3">
 				<ContentEditable
 					class="cursor-text rounded-sm text-lg font-semibold !text-gray-800 focus:ring-2 focus:ring-gray-700 focus:ring-offset-4"
 					v-model="dashboard.doc.title"
@@ -122,7 +122,7 @@ const showShareDialog = ref(false)
 					</Button>
 				</div>
 			</div>
-			<div class="flex-1 overflow-y-auto p-2" @dragover="onDragOver" @drop="onDrop">
+			<div class="flex-1 overflow-y-auto p-2 pt-0" @dragover="onDragOver" @drop="onDrop">
 				<VueGridLayout
 					v-if="dashboard.doc.items.length > 0"
 					class="h-fit w-full"

frontend/src2/dashboard/DashboardFilterSelector.vue

@@ -42,6 +42,7 @@ if (chartQueries.value.length) {
 	})
 }
 
+const sep = '`'
 const columnOptions = computed(() => {
 	return chartQueries.value
 		.map((q) => {
@@ -52,7 +53,7 @@ const columnOptions = computed(() => {
 				label: c.name,
 				data_type: c.type,
 				description: c.type,
-				value: `'${q.name}'.'${c.name}'`,
+				value: `${sep}${q.name}${sep}.${sep}${c.name}${sep}`,
 			}))
 			return {
 				group: query.doc.title || q.name,
@@ -74,7 +75,8 @@ function setInitialFilters() {
 		.map(([queryName, filters]) => {
 			return filters.map((filter) => {
 				if ('column' in filter) {
-					filter.column.column_name = `'${queryName}'.'${filter.column.column_name}'`
+					const col_name = filter.column.column_name
+					filter.column.column_name = `${sep}${queryName}${sep}.${sep}${col_name}${sep}`
 				}
 				return filter
 			})
@@ -87,8 +89,8 @@ function applyFilters(args: FilterGroupArgs) {
 	args.filters.forEach((filter) => {
 		if ('column' in filter) {
 			const [queryName, columnName] = filter.column.column_name
-				.split("'.'")
-				.map((s) => s.replace(/'/g, ''))
+				.split(`${sep}.${sep}`)
+				.map((s) => s.replace(new RegExp(sep, 'g'), ''))
 
 			filter.column.column_name = columnName
 			filtersByQuery[queryName] = filtersByQuery[queryName] || []
@@ -121,6 +123,8 @@ function applyFilters(args: FilterGroupArgs) {
 		v-model="showDialog"
 		:filter-group="filterGroup"
 		:column-options="columnOptions"
+		:disable-logical-operator="true"
+		:disable-expressions="true"
 		@select="applyFilters($event)"
 	/>
 </template>