Merge pull request frappe#208 from frappe/develop

chore: merge `develop` into `main`

frontend/src/dashboard/PublicDashboard.vue

@@ -2,9 +2,9 @@
 import VueGridLayout from '@/dashboard/VueGridLayout.vue'
 import usePublicDashboard from '@/dashboard/usePublicDashboard'
 import BaseLayout from '@/layouts/BaseLayout.vue'
+import { provide } from 'vue'
 import DashboardEmptyState from './DashboardEmptyState.vue'
 import PublicDashboardItem from './PublicDashboardItem.vue'
-import { provide } from 'vue'
 
 const props = defineProps({ public_key: String })
 const dashboard = usePublicDashboard(props.public_key)
@@ -26,6 +26,7 @@ provide('dashboard', dashboard)
 					class="dashboard relative flex h-fit min-h-screen w-full flex-1 flex-col"
 				>
 					<VueGridLayout
+						:key="JSON.stringify(dashboard.itemLayouts)"
 						class="h-fit w-full"
 						:items="dashboard.doc.items"
 						:disabled="true"

frontend/src/datasource/PostgreSQLForm.vue

@@ -22,9 +22,9 @@ const fields = computed(() => [
 		label: 'Port',
 		name: 'port',
 		type: 'number',
-		placeholder: '3306',
+		placeholder: '5432',
 		required: !database.connection_string,
-		defaultValue: 3306,
+		defaultValue: 5432,
 	},
 	{
 		label: 'Database Name',

frontend/src/query/ChartActionButtons.vue

@@ -1,9 +1,9 @@
 <script setup>
 import PublicShareDialog from '@/components/PublicShareDialog.vue'
 import useDashboards from '@/dashboard/useDashboards'
-import { computed, inject, ref, watch } from 'vue'
 import { downloadImage } from '@/utils'
-import { FullscreenIcon, Maximize } from 'lucide-vue-next'
+import { Maximize } from 'lucide-vue-next'
+import { computed, inject, ref, watch } from 'vue'
 
 const emit = defineEmits(['fullscreen'])
 const query = inject('query')
@@ -43,12 +43,6 @@ const addChartToDashboard = async () => {
 }
 
 watch(showDashboardDialog, (val) => val && dashboards.reload(), { immediate: true })
-
-const chartRef = inject('chartRef')
-function downloadChartImage() {
-	const title = query.chart.doc.options.title || query.doc.title
-	downloadImage(chartRef.value.$el, `${title}.png`)
-}
 </script>
 
 <template>
@@ -57,7 +51,6 @@ function downloadChartImage() {
 			<template #icon> <Maximize class="h-4 w-4" /> </template>
 		</Button>
 		<Button variant="outline" @click="onAddToDashboard()"> Add to Dashboard </Button>
-		<Button variant="outline" @click="downloadChartImage"> Download </Button>
 		<Button variant="outline" @click="showShareDialog = true"> Share </Button>
 	</div>
 

frontend/src/query/ChartSection.vue

@@ -1,13 +1,13 @@
 <script setup>
 import widgets from '@/widgets/widgets'
-import { computed, inject, provide, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import ChartActionButtons from './ChartActionButtons.vue'
 import ChartSectionEmptySvg from './ChartSectionEmptySvg.vue'
 import ChartTypeSelector from './ChartTypeSelector.vue'
+import { downloadImage } from '@/utils'
 
 const query = inject('query')
 const chartRef = ref(null)
-provide('chartRef', chartRef)
 
 const showChart = computed(() => {
 	return (
@@ -44,6 +44,17 @@ const fullscreenDialog = ref(false)
 function showInFullscreenDialog() {
 	fullscreenDialog.value = true
 }
+function downloadChartImage() {
+	if (!chartRef.value) {
+		$notify({
+			variant: 'error',
+			title: 'Chart container reference not found',
+		})
+		return
+	}
+	const title = query.chart.doc.options.title || query.doc.title
+	downloadImage(chartRef.value.$el, `${title}.png`)
+}
 </script>
 
 <template>
@@ -71,9 +82,15 @@ function showInFullscreenDialog() {
 			</div>
 		</template>
 
-		<Dialog v-if="chart.type" v-model="fullscreenDialog" :options="{ size: '7xl' }">
+		<Dialog
+			v-if="chart.type"
+			v-model="fullscreenDialog"
+			:options="{
+				size: '7xl',
+			}"
+		>
 			<template #body>
-				<div class="flex h-[40rem] w-full p-1">
+				<div class="relative flex h-[40rem] w-full p-1">
 					<component
 						v-if="chart.type"
 						ref="chartRef"
@@ -82,6 +99,10 @@ function showInFullscreenDialog() {
 						:data="chart.data"
 						:key="JSON.stringify(query.chart.doc)"
 					/>
+					<div class="absolute top-0 right-0 p-2">
+						<Button variant="outline" @click="downloadChartImage" icon="download">
+						</Button>
+					</div>
 				</div>
 			</template>
 		</Dialog>

frontend/src/query/NativeQueryBuilder.vue

@@ -23,14 +23,23 @@ const displayedRowCount = computed(() => Math.min(query.MAX_ROWS, queriedRowCoun
 		<div class="flex w-full flex-1 flex-shrink-0 overflow-hidden py-4">
 			<ResultSection>
 				<template #footer>
-					<div v-if="queriedRowCount >= 0" class="flex items-center space-x-1">
-						<span class="text-gray-600">Showing</span>
-						<span class="font-mono"> {{ displayedRowCount }}</span>
-						<span class="text-gray-600">out of</span>
-						<span class="font-mono">{{ queriedRowCount }}</span>
-						<span class="text-gray-600">rows in</span>
-						<span class="font-mono">{{ executionTime }}</span>
-						<span class="text-gray-600">seconds</span>
+					<div class="flex justify-between">
+						<div v-if="queriedRowCount >= 0" class="flex items-center space-x-1">
+							<span class="text-gray-600">Showing</span>
+							<span class="font-mono"> {{ displayedRowCount }}</span>
+							<span class="text-gray-600">out of</span>
+							<span class="font-mono">{{ queriedRowCount }}</span>
+							<span class="text-gray-600">rows in</span>
+							<span class="font-mono">{{ executionTime }}</span>
+							<span class="text-gray-600">seconds</span>
+						</div>
+						<Button
+							variant="ghost"
+							class="ml-1"
+							icon="download"
+							@click="query.downloadResults"
+						>
+						</Button>
 					</div>
 				</template>
 			</ResultSection>

frontend/src/query/QueryMenu.vue

@@ -47,7 +47,7 @@
 				{
 					label: 'Download CSV',
 					icon: 'download',
-					onClick: downloadCSV,
+					onClick: query.downloadResults,
 				},
 				{
 					label: query.doc.is_assisted_query
@@ -209,20 +209,4 @@ function unstoreQuery() {
 		})
 	})
 }
-
-function downloadCSV() {
-	let data = query.doc.results
-	if (data.length === 0) return
-	data[0] = data[0].map((d) => d.label)
-	const csvString = data.map((row) => row.join(',')).join('\n')
-	const blob = new Blob([csvString], { type: 'text/csv' })
-	const url = window.URL.createObjectURL(blob)
-	const a = document.createElement('a')
-	a.setAttribute('hidden', '')
-	a.setAttribute('href', url)
-	a.setAttribute('download', `${query.doc.title || 'data'}.csv`)
-	document.body.appendChild(a)
-	a.click()
-	document.body.removeChild(a)
-}
 </script>

frontend/src/query/resources/useChart.js

@@ -10,7 +10,7 @@ export default async function useChart(chart_name) {
 	await resource.get.fetch()
 
 	const chart = reactive({
-		doc: resource.doc,
+		doc: computed(() => resource.doc),
 		data: [],
 		togglePublicAccess,
 		addToDashboard,

frontend/src/query/resources/useQuery.js

@@ -195,5 +195,22 @@ function makeQuery(name) {
 		return run(() => resource.setValue.submit({ variables }).finally(() => setLoading(false)))
 	}, 500)
 
+	state.downloadResults = () => {
+		if (!state.doc.results) return
+		let data = [...state.doc.results]
+		if (data.length === 0) return
+		data[0] = data[0].map((d) => d.label)
+		const csvString = data.map((row) => row.join(',')).join('\n')
+		const blob = new Blob([csvString], { type: 'text/csv' })
+		const url = window.URL.createObjectURL(blob)
+		const a = document.createElement('a')
+		a.setAttribute('hidden', '')
+		a.setAttribute('href', url)
+		a.setAttribute('download', `${state.doc.title || 'data'}.csv`)
+		document.body.appendChild(a)
+		a.click()
+		document.body.removeChild(a)
+	}
+
 	return state
 }

frontend/src/query/visual/ResultFooter.vue

@@ -23,7 +23,7 @@
 			<span class="font-mono">{{ executionTime }}</span>
 			<span class="text-gray-600">seconds</span>
 		</div>
-		<div class="ml-auto flex items-center space-x-1">
+		<div class="ml-auto flex items-center gap-1">
 			<span class="text-gray-600">Limit to</span>
 			<input
 				type="text"
@@ -35,11 +35,14 @@
 				@keydown.esc.stop="$refs.limitInput.blur()"
 			/>
 			<span class="text-gray-600">rows</span>
+			<Button variant="ghost" class="ml-1" icon="download" @click="query.downloadResults">
+			</Button>
 		</div>
 	</div>
 </template>
 
 <script setup>
+import { Download } from 'lucide-vue-next'
 import { computed, inject, ref } from 'vue'
 
 const query = inject('query')

frontend/src/utils/query/index.js

@@ -188,4 +188,9 @@ export const FUNCTIONS = {
 		description: 'Lists all descendants and self of the given value.',
 		example: 'descendants_and_self("India", "tabTerritory", `territory`)',
 	},
+	sql: {
+		syntax: 'sql("query")',
+		description: 'Write raw SQL queries.',
+		example: 'sql("MONTH(invoice.posting_date)")',
+	},
 }

frontend/src/widgets/PivotTable/PivotTable.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ChartTitle from '@/components/Charts/ChartTitle.vue'
 import TanstackTable from '@/components/Table/TanstackTable.vue'
+import { watchDebounced } from '@vueuse/core'
 import { call } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { convertToNestedObject, convertToTanstackColumns } from './utils'
@@ -16,12 +17,27 @@ const pivotColumns = computed(() => props.options.columns?.map((column) => colum
 const valueColumns = computed(() => props.options.values?.map((column) => column.value) || [])
 
 const pivotedData = ref([])
-call('insights.api.queries.pivot', {
-	data: _data.value,
-	indexes: indexColumns.value,
-	columns: pivotColumns.value,
-	values: valueColumns.value,
-}).then((data) => (pivotedData.value = sortIndexKeys(data)))
+watchDebounced(
+	[indexColumns, pivotColumns, valueColumns],
+	(newVal, oldVal) => {
+		if (JSON.stringify(newVal) == JSON.stringify(oldVal)) return
+		reloadPivotData()
+	},
+	{
+		deep: true,
+		immediate: true,
+		debounce: 500,
+	}
+)
+
+function reloadPivotData() {
+	call('insights.api.queries.pivot', {
+		data: _data.value,
+		indexes: indexColumns.value,
+		columns: pivotColumns.value,
+		values: valueColumns.value,
+	}).then((data) => (pivotedData.value = sortIndexKeys(data)))
+}
 
 function sortIndexKeys(data) {
 	// move the index columns (keys) to the front of the object

frontend/src/widgets/useChartData.js

@@ -127,6 +127,20 @@ export function guessChart(dataset, chart_type) {
 		}
 	}
 
+	const shouldGuessPivotChart = chart_type === 'Pivot Table'
+	if (shouldGuessPivotChart) {
+		return {
+			type: 'Pivot Table',
+			options: {
+				rows: [...dateColumns, ...stringColumns].map((col) => ({
+					label: col.label,
+					value: col.label,
+				})),
+				values: [...numberColumns].map((col) => ({ label: col.label, value: col.label })),
+			},
+		}
+	}
+
 	const autoGuessTableChart = chart_type === 'Auto'
 	const shouldGuessTableChart = chart_type === 'Table'
 	if (autoGuessTableChart || shouldGuessTableChart) {

insights/api/telemetry.py

@@ -38,7 +38,8 @@ def track(event):
 
 @frappe.whitelist()
 def track_active_site():
-    if frappe.conf.developer_mode or not should_track_active_status():
+    is_frappe_cloud_site = frappe.conf.get("sk_insights")
+    if frappe.conf.developer_mode or not should_track_active_status() or not is_frappe_cloud_site:
         return
 
     with suppress(Exception):

insights/insights/doctype/insights_dashboard_item/insights_dashboard_item.json

@@ -25,10 +25,9 @@
   },
   {
    "fieldname": "item_type",
-   "fieldtype": "Select",
+   "fieldtype": "Data",
    "in_list_view": 1,
-   "label": "Type",
-   "options": "\nBar\nLine\nScatter\nPie\nFunnel\nNumber\nTrend\nProgress\nMixed Axis\nTable\nFilter\nText"
+   "label": "Type"
   },
   {
    "fieldname": "section_break_2",
@@ -48,7 +47,7 @@
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2023-08-23 17:48:22.702046",
+ "modified": "2024-01-09 12:53:46.364752",
  "modified_by": "Administrator",
  "module": "Insights",
  "name": "Insights Dashboard Item",