fix: filters on dashboard load and column sort (#381)

frontend/src2/dashboard/DashboardItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { watchDebounced } from '@vueuse/core'
+import { AlertTriangle } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
 import { Chart, getCachedChart } from '../charts/chart'
 import ChartRenderer from '../charts/components/ChartRenderer.vue'
 import { WorkbookDashboardChart, WorkbookDashboardItem } from '../types/workbook.types'
 import { Dashboard } from './dashboard'
 import DashboardItemActions from './DashboardItemActions.vue'
-import { watchDebounced } from '@vueuse/core'
-import { AlertTriangle } from 'lucide-vue-next'
 
 const props = defineProps<{
 	index: number
@@ -23,7 +23,7 @@ const chart = computed(() => {
 
 watchDebounced(
 	() => chart.value?.doc.config.order_by,
-	() => chart.value?.refresh(),
+	() => dashboard.refreshChart(props.item.chart),
 	{
 		deep: true,
 		debounce: 500,

frontend/src2/dashboard/dashboard.ts

@@ -3,10 +3,7 @@ import { getCachedChart } from '../charts/chart'
 import { getUniqueId, store } from '../helpers'
 import { getCachedQuery } from '../query/query'
 import { FilterArgs } from '../types/query.types'
-import {
-	WorkbookChart,
-	WorkbookDashboard
-} from '../types/workbook.types'
+import { WorkbookChart, WorkbookDashboard } from '../types/workbook.types'
 
 const dashboards = new Map<string, Dashboard>()
 
@@ -72,21 +69,23 @@ function makeDashboard(workbookDashboard: WorkbookDashboard) {
 		refresh() {
 			dashboard.doc.items
 				.filter((item) => item.type === 'chart')
-				.forEach((chartItem) => {
-					const chart = getCachedChart(chartItem.chart)
-					if (!chart || !chart.doc.query) return
-
-					Object.keys(dashboard.filters).forEach((query) => {
-						const _query = getCachedQuery(query)
-						if (!_query) return
-						_query.dashboardFilters = {
-							logical_operator: 'And',
-							filters: dashboard.filters[query],
-						}
-					})
+				.forEach((item) => dashboard.refreshChart(item.chart))
+		},
+
+		refreshChart(chart_name: string) {
+			const chart = getCachedChart(chart_name)
+			if (!chart || !chart.doc.query) return
+
+			Object.keys(dashboard.filters).forEach((query) => {
+				const _query = getCachedQuery(query)
+				if (!_query) return
+				_query.dashboardFilters = {
+					logical_operator: 'And',
+					filters: dashboard.filters[query],
+				}
+			})
 
-					chart.refresh()
-				})
+			chart.refresh()
 		},
 
 		getShareLink() {