chore: merge 'upstream/develop'

frontend/src/widgets/AxisChart/getAxisChartOptions.js

@@ -219,8 +219,18 @@ function makeOptions(chartType, labels, datasets, options) {
 			trigger: 'axis',
 			confine: true,
 			appendToBody: false,
-			valueFormatter: (value) => (isNaN(value) ? value : formatNumber(value)),
+			formatter: (params) => {
+				const filteredParams = params
+					.filter((p) => p.value !== 0 && p.value !== null) 
+					.sort((a, b) => b.value - a.value);
+
+				if (!filteredParams.length) return ''; 
+				return filteredParams
+					.map((p) => `${p.marker} ${p.seriesName}: ${formatNumber(p.value)}`)
+					.join('<br/>');
+			},
 		},
+
 	}
 }
 

frontend/src2/charts/chart.ts

@@ -1,6 +1,7 @@
 import { useDebouncedRefHistory, UseRefHistoryReturn } from '@vueuse/core'
 import { computed, reactive, ref, unref, watch } from 'vue'
 import { areDeeplyEqual, copy, getUniqueId, waitUntil, wheneverChanges } from '../helpers'
+import { GranularityType } from '../helpers/constants'
 import { createToast } from '../helpers/toasts'
 import { column, count, query_table } from '../query/helpers'
 import { getCachedQuery, makeQuery, Query } from '../query/query'
@@ -9,10 +10,11 @@ import {
 	AxisChartConfig,
 	DonutChartConfig,
 	NumberChartConfig,
-	TableChartConfig
+	TableChartConfig,
 } from '../types/chart.types'
-import { FilterArgs, GranularityType, Measure, Operation } from '../types/query.types'
+import { FilterArgs, Measure, Operation } from '../types/query.types'
 import { WorkbookChart } from '../types/workbook.types'
+import { getLinkedQueries } from '../workbook/workbook'
 
 const charts = new Map<string, Chart>()
 
@@ -51,6 +53,9 @@ function makeChart(workbookChart: WorkbookChart) {
 		updateMeasure,
 		removeMeasure,
 
+		getDependentQueries,
+		getDependentQueryColumns,
+
 		history: {} as UseRefHistoryReturn<any, any>,
 	})
 
@@ -124,12 +129,12 @@ function makeChart(workbookChart: WorkbookChart) {
 	}
 
 	function prepareAxisChartQuery(config: AxisChartConfig) {
-		if (!config.x_axis || !config.x_axis.column_name) {
+		if (!config.x_axis.dimension || !config.x_axis.dimension.column_name) {
 			console.warn('X-axis is required')
 			chart.dataQuery.reset()
 			return false
 		}
-		if (config.x_axis.column_name === config.split_by?.column_name) {
+		if (config.x_axis.dimension.column_name === config.split_by?.column_name) {
 			createToast({
 				message: 'X-axis and Split by cannot be the same',
 				variant: 'error',
@@ -143,14 +148,14 @@ function makeChart(workbookChart: WorkbookChart) {
 
 		if (config.split_by?.column_name) {
 			chart.dataQuery.addPivotWider({
-				rows: [config.x_axis],
+				rows: [config.x_axis.dimension],
 				columns: [config.split_by],
 				values: values,
 			})
 		} else {
 			chart.dataQuery.addSummarize({
 				measures: values,
-				dimensions: [config.x_axis],
+				dimensions: [config.x_axis.dimension],
 			})
 		}
 
@@ -331,6 +336,33 @@ function makeChart(workbookChart: WorkbookChart) {
 		delete chart.doc.calculated_measures[measure.measure_name]
 	}
 
+	function getDependentQueries() {
+		return [chart.doc.query, ...getLinkedQueries(chart.doc.query)]
+	}
+
+	function getDependentQueryColumns() {
+		return getDependentQueries()
+			.map((q) => getCachedQuery(q))
+			.filter(Boolean)
+			.map((q) => {
+				const query = q!
+				if (!query.result.executedSQL) {
+					query.execute()
+				}
+				return {
+					group: query.doc.title,
+					items: query.result.columnOptions.map((c) => {
+						const sep = '`'
+						const value = `${sep}${query.doc.name}${sep}.${sep}${c.value}${sep}`
+						return {
+							...c,
+							value,
+						}
+					}),
+				}
+			})
+	}
+
 	chart.history = useDebouncedRefHistory(
 		// @ts-ignore
 		computed({

frontend/src2/charts/components/BarChartConfigForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
-import { BarChartConfig, YAxisBar } from '../../types/chart.types'
-import { ColumnOption, Dimension, DimensionOption } from '../../types/query.types'
+import { BarChartConfig, XAxis, YAxisBar } from '../../types/chart.types'
+import { ColumnOption, DimensionOption } from '../../types/query.types'
 import SplitByConfig from './SplitByConfig.vue'
 import XAxisConfig from './XAxisConfig.vue'
 import YAxisConfig from './YAxisConfig.vue'
@@ -29,7 +29,7 @@ const hasAxisSplit = computed(() => {
 
 watchEffect(() => {
 	if (!config.value.x_axis) {
-		config.value.x_axis = {} as Dimension
+		config.value.x_axis = {} as XAxis
 	}
 	if (!config.value.y_axis) {
 		config.value.y_axis = {} as YAxisBar

frontend/src2/charts/components/ChartBuilderTableColumn.vue

@@ -9,9 +9,9 @@ import {
 } from 'lucide-vue-next'
 import { computed, h, watchEffect } from 'vue'
 import ContentEditable from '../../components/ContentEditable.vue'
-import { FIELDTYPES, granularityOptions } from '../../helpers/constants'
+import { FIELDTYPES, granularityOptions, GranularityType } from '../../helpers/constants'
 import { column } from '../../query/helpers'
-import { GranularityType, QueryResultColumn } from '../../types/query.types'
+import { QueryResultColumn } from '../../types/query.types'
 import { WorkbookChart } from '../../types/workbook.types'
 import { getGranularity } from '../helpers'
 

frontend/src2/charts/components/DrillDown.vue

@@ -34,6 +34,9 @@ watch(
 			drillDownQuery.value = query
 			drillDownQuery.value
 				.execute()
+				.then(() => {
+					return drillDownQuery.value?.fetchResultCount()
+				})
 				.then(() => {
 					showDrillDownResults.value = true
 				})
@@ -57,8 +60,28 @@ function onSort(newSortOrder: Record<string, 'asc' | 'desc'>) {
 		})
 
 		drillDownQuery.value.execute()
+		.then(() => drillDownQuery.value?.fetchResultCount())
+		.catch((error) => {
+			console.error('Failed to sort and fetch row count:', error)
+		});
+	}
+}
+
+function loadAllRows() {
+	if (drillDownQuery.value) {
+		drillDownQuery.value.addLimit(drillDownQuery.value.result.totalRowCount)
+		drillDownQuery.value
+			.execute()
+			.then(() => {
+				return drillDownQuery.value?.fetchResultCount()
+			})
+			.catch((error) => {
+				console.error('Failed to load all rows:', error)
+			})
+
 	}
 }
+
 </script>
 
 <template>
@@ -86,11 +109,22 @@ function onSort(newSortOrder: Record<string, 'asc' | 'desc'>) {
 					@sort="onSort"
 					:on-export="drillDownQuery ? drillDownQuery.downloadResults : undefined"
 				>
-					<template #footer-left>
-						<p class="tnum p-1 text-sm text-gray-600">
-							Showing {{ drillDownQuery.result.rows.length }} of
-							{{ drillDownQuery.result.totalRowCount }} rows
-						</p>
+				<template #footer-left>
+						<div class="flex items-center justify-between p-1 gap-4">
+							<p class="tnum text-sm text-gray-600">
+								Showing {{ drillDownQuery.result.rows.length }} of
+								{{ drillDownQuery.result.totalRowCount }} rows
+							</p>
+							<Button
+							v-if="drillDownQuery.result.rows.length < drillDownQuery.result.totalRowCount"
+								:variant="'ghost'"
+								theme="gray"
+								size="sm"
+								label="Load All Rows"
+								@click="loadAllRows"
+							>
+							</Button>
+						</div>
 					</template>
 				</DataTable>
 			</div>

frontend/src2/charts/components/TableChart.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 	result: QueryResult
 }>()
 
-const chart = inject<Chart>('chart')!
+const chart = inject<Chart | undefined>('chart', undefined)
 const tableConfig = computed(() => props.config as TableChartConfig)
 
 const sortOrder = computed(() => {

frontend/src2/charts/components/XAxisConfig.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue'
 import InlineFormControlLabel from '../../components/InlineFormControlLabel.vue'
 import { AxisChartConfig } from '../../types/chart.types'
-import { DimensionOption } from '../../types/query.types'
+import { Dimension, DimensionOption } from '../../types/query.types'
 import CollapsibleSection from './CollapsibleSection.vue'
 import DimensionPicker from './DimensionPicker.vue'
 
@@ -10,6 +11,17 @@ const x_axis = defineModel<AxisChartConfig['x_axis']>({
 	required: true,
 	default: () => ({}),
 })
+
+watchEffect(() => {
+	if (!x_axis.value) {
+		x_axis.value = {
+			dimension: {} as Dimension,
+		}
+	}
+	if (!x_axis.value.dimension) {
+		x_axis.value.dimension = {} as Dimension
+	}
+})
 </script>
 
 <template>
@@ -18,11 +30,24 @@ const x_axis = defineModel<AxisChartConfig['x_axis']>({
 			<DimensionPicker
 				label="Column"
 				:options="props.dimensions"
-				:modelValue="x_axis"
-				@update:modelValue="x_axis = $event || {}"
+				:modelValue="x_axis.dimension"
+				@update:modelValue="x_axis.dimension = $event || {}"
+			/>
+			<FormControl
+				label="Rotate Values"
+				type="select"
+				v-model="x_axis.label_rotation"
+				:options="[
+					{ label: '0°', value: 0 },
+					{ label: '30°', value: 30 },
+					{ label: '45°', value: 45 },
+					{ label: '60°', value: 60 },
+					{ label: '75°', value: 75 },
+					{ label: '90°', value: 90 },
+				]"
 			/>
-			<Checkbox label="Show Axis Label" />
-			<InlineFormControlLabel v-if="false" label="Axis Label">
+			<Checkbox label="Show Axis Title" />
+			<InlineFormControlLabel v-if="false" label="Axis Title Text">
 				<FormControl />
 			</InlineFormControlLabel>
 		</div>