undb-io · nichenqin · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023
diff --git a/apps/backend/package.json b/apps/backend/package.json
@@ -2,21 +2,21 @@
   "name": "@undb/backend",
   "version": "0.0.0",
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.354.0",
+    "@aws-sdk/client-s3": "^3.357.0",
     "@json2csv/plainjs": "^7.0.1",
     "@liaoliaots/nestjs-redis-health": "^9.0.4",
     "@mikro-orm/better-sqlite": "^5.7.12",
     "@mikro-orm/core": "^5.7.12",
     "@mikro-orm/migrations": "^5.7.12",
     "@mikro-orm/nestjs": "^5.1.8",
-    "@nestjs/common": "^10.0.2",
+    "@nestjs/common": "^10.0.3",
     "@nestjs/config": "^3.0.0",
-    "@nestjs/core": "^10.0.2",
+    "@nestjs/core": "^10.0.3",
     "@nestjs/cqrs": "^10.0.0",
     "@nestjs/jwt": "^10.1.0",
     "@nestjs/mongoose": "^10.0.0",
     "@nestjs/passport": "^10.0.0",
-    "@nestjs/platform-express": "^10.0.2",
+    "@nestjs/platform-express": "^10.0.3",
     "@nestjs/schedule": "^3.0.1",
     "@nestjs/serve-static": "^4.0.0",
     "@nestjs/terminus": "^10.0.1",
@@ -50,7 +50,7 @@
     "ioredis": "^5.3.2",
     "joi": "^17.9.2",
     "mongodb": "^5.6.0",
-    "mongoose": "^7.3.0",
+    "mongoose": "^7.3.1",
     "nestjs-cls": "^3.5.0",
     "nestjs-pino": "^3.3.0",
     "oxide.ts": "^1.1.0",
@@ -65,14 +65,14 @@
     "rxjs": "^7.8.1",
     "ts-pattern": "^5.0.1",
     "ufo": "^1.1.2",
-    "unstorage": "^1.6.1",
+    "unstorage": "^1.7.0",
     "uuid": "^9.0.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@nestjs/cli": "^10.0.3",
     "@nestjs/schematics": "^10.0.1",
-    "@nestjs/testing": "^10.0.2",
+    "@nestjs/testing": "^10.0.3",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.66",
     "@types/bcrypt": "^5.0.0",

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -15,7 +15,7 @@
     "@types/detect-port": "^1.3.3",
     "@undb/eslint-config": "^0.0.0",
     "detect-port": "^1.5.1",
-    "electron": "^25.1.1",
+    "electron": "^25.2.0",
     "electron-builder": "^24.4.0",
     "electron-is-dev": "^2.0.0",
     "typescript": "^5.1.3",

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -48,7 +48,7 @@
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"flowbite": "^1.6.6",
-		"flowbite-svelte": "^0.38.4",
+		"flowbite-svelte": "^0.38.5",
 		"htm": "^3.1.1",
 		"i18next": "^23.0.0",
 		"i18next-browser-languagedetector": "^7.0.2",
@@ -66,7 +66,7 @@
 		"sortablejs": "^1.15.0",
 		"svelte": "^3.59.2",
 		"svelte-chartjs": "^3.1.2",
-		"svelte-check": "^3.4.3",
+		"svelte-check": "^3.4.4",
 		"svelte-copy": "^1.3.2",
 		"svelte-dnd-action": "^0.9.22",
 		"svelte-grid": "^5.1.1",

diff --git a/apps/frontend/src/lib/field/CreateField.svelte b/apps/frontend/src/lib/field/CreateField.svelte
@@ -28,6 +28,7 @@
 		async onSuccess(data, variables, context) {
 			await invalidate(`table:${$table.id.value}`)
 			await $records.refetch()
+			await $createFieldModal.callback?.()
 			createFieldModal.close()
 		},
 	})

diff --git a/apps/frontend/src/lib/field/FieldInputs/FieldPicker.svelte b/apps/frontend/src/lib/field/FieldInputs/FieldPicker.svelte
@@ -39,7 +39,7 @@
 		<span class="text-gray-500 font-normal">{$t('Select Field')}</span>
 	{/if}
 </Button>
-<Dropdown class="z-[99999] fixed" bind:open>
+<Dropdown class="w-[400px] z-[99999] border rounded-sm bg-white" bind:open>
 	{#if filteredFields.length}
 		{#each filteredFields as field (field.id)}
 			<Radio value={field.id} bind:group={value} custom on:change={() => (open = false)}>

diff --git a/apps/frontend/src/lib/field/FieldInputs/FieldTypePicker.svelte b/apps/frontend/src/lib/field/FieldInputs/FieldTypePicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import cx from 'classnames'
-	import { Button, Dropdown, Radio } from 'flowbite-svelte'
+	import { Button, Dropdown, DropdownItem, Radio } from 'flowbite-svelte'
 	import Portal from 'svelte-portal'
 	import FieldIcon from '../FieldIcon.svelte'
 	import { FIELD_SELECT_ITEMS } from '../types'
@@ -35,12 +35,15 @@
 			<Radio
 				value={type.value}
 				bind:group={value}
-				class={cx('px-3 py-2 hover:bg-gray-100 cursor-pointer', selected && 'bg-gray-100')}
+				class={cx('px-3 py-2 hover:bg-gray-100 cursor-pointer w-full block', selected && 'bg-gray-100')}
 				custom
-				on:change={() => (open = false)}
+				on:change={() => {
+					console.log('wtf')
+					open = false
+				}}
 			>
-				<li class="w-full flex justify-between items-center text-gray-700">
-					<div class="flex flex-1 items-center gap-2">
+				<li class="w-full p-2 flex justify-between items-center text-gray-700 hover:bg-gray-100 cursor-pointer">
+					<div class="flex flex-1 items-center gap-2 w-full">
 						<FieldIcon type={type.value} size={16} />
 						<span>
 							{$t(type.value)}

diff --git a/apps/frontend/src/lib/option/OptionPicker.svelte b/apps/frontend/src/lib/option/OptionPicker.svelte
@@ -25,7 +25,7 @@
 		</span>
 	{/if}
 </Button>
-<Dropdown bind:open placement="bottom-start" class="w-full">
+<Dropdown bind:open placement="bottom-start" class="w-[400px] border">
 	<div class="w-full">
 		{#each options as option}
 			<Radio

diff --git a/apps/frontend/src/lib/table/AddWidgeButton.svelte b/apps/frontend/src/lib/table/AddWidgeButton.svelte
@@ -75,7 +75,7 @@
 		{$t('add widge')}
 	</span>
 </Button>
-<Dropdown bind:open>
+<Dropdown bind:open class="z-[99999] w-48">
 	<DropdownItem class="flex items-center gap-3" on:click={addNumbers}>
 		<i class="ti ti-123" />
 		<span>{$t('Numbers', { ns: 'common' })}</span>

diff --git a/apps/frontend/src/lib/visualization/ChartVisualization.svelte b/apps/frontend/src/lib/visualization/ChartVisualization.svelte
@@ -16,14 +16,15 @@
 	$: fieldId = visualization.fieldId?.value
 	$: field = fieldId ? $table.schema.getFieldById(fieldId).into() : undefined
 
-	const getChartData = trpc().table.aggregate.chart.query(
+	$: getChartData = trpc().table.aggregate.chart.query(
 		{
 			tableId: $table.id.value,
 			viewId: $view.id.value,
 			visualizationId: visualization.id.value,
 		},
 		{
 			queryHash: visualization.id.value,
+			enabled: !!field,
 		},
 	)
 
@@ -36,7 +37,7 @@
 </script>
 
 {#if !fieldId}
-	<EmptyChartVisualization {...$$restProps} />
+	<EmptyChartVisualization {visualization} {...$$restProps} />
 {:else if $getChartData.isLoading}
 	<div class="w-full h-full animate-pulse bg-slate-100" />
 {:else if field}

diff --git a/apps/frontend/src/lib/visualization/EmptyChartVisualization.svelte b/apps/frontend/src/lib/visualization/EmptyChartVisualization.svelte
@@ -1,8 +1,35 @@
 <script lang="ts">
+	import { invalidate } from '$app/navigation'
 	import FieldIcon from '$lib/field/FieldIcon.svelte'
 	import { t } from '$lib/i18n'
 	import { createFieldInitial, createFieldModal } from '$lib/store/modal'
+	import { getTable, getView } from '$lib/store/table'
+	import { trpc } from '$lib/trpc/client'
+	import { FieldId, type ChartVisualization } from '@undb/core'
 	import { Button } from 'flowbite-svelte'
+
+	const table = getTable()
+	const view = getView()
+	export let visualization: ChartVisualization
+
+	const getChartData = trpc().table.aggregate.chart.query(
+		{
+			tableId: $table.id.value,
+			viewId: $view.id.value,
+			visualizationId: visualization.id.value,
+		},
+		{
+			queryHash: visualization.id.value,
+			enabled: false,
+		},
+	)
+
+	const updateVisualization = trpc().table.visualization.update.mutation({
+		async onSuccess() {
+			await invalidate(`table:${$table.id.value}`)
+			await $getChartData.refetch()
+		},
+	})
 </script>
 
 <div {...$$restProps}>
@@ -12,10 +39,23 @@
 			color="light"
 			class="flex gap-2"
 			on:click={() => {
+				const fieldId = FieldId.createId()
 				$createFieldInitial = {
+					id: fieldId,
 					type: 'select',
 				}
-				createFieldModal.open()
+				createFieldModal.open(async () => {
+					$updateVisualization.mutate({
+						tableId: $table.id.value,
+						visualization: {
+							id: visualization.id.value,
+							type: 'chart',
+							fieldId,
+							// TODO: select from user input
+							chartAggregateFunction: 'count',
+						},
+					})
+				})
 			}}
 		>
 			<i class="ti ti-plus" />

diff --git a/apps/frontend/src/lib/visualization/setting/NumberVisualizationSetting.svelte b/apps/frontend/src/lib/visualization/setting/NumberVisualizationSetting.svelte
@@ -74,12 +74,11 @@
 	<ul
 		class="items-center w-full rounded-md border border-gray-200 sm:flex dark:bg-gray-800 dark:border-gray-600 divide-x divide-gray-200 dark:divide-gray-600 mb-4 p-0"
 	>
-		<li class="w-full">
+		<li
+			class="inline-block cursor-pointer rounded-l-md hover:text-white hover:bg-blue-500 w-full h-full px-4 py-2 peer-checked:bg-sky-100 peer-checked:text-blue-600 transition"
+		>
 			<Radio value="table" bind:group={mode} name="mode" custom>
-				<div
-					role="button"
-					class="cursor-pointer rounded-l-md hover:text-white hover:bg-blue-500 w-full h-full px-4 py-2 peer-checked:bg-sky-100 peer-checked:text-blue-600 transition"
-				>
+				<div role="button">
 					{$t('aggregate mode table')}
 				</div>
 			</Radio>

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
     "taze": "^0.10.2",
-    "turbo": "^1.10.3",
+    "turbo": "^1.10.4",
     "typescript": "^5.1.3",
     "zx": "^7.2.2"
   },

diff --git a/packages/database/cache/package.json b/packages/database/cache/package.json
@@ -11,7 +11,7 @@
     "tsconfig": "^0.0.0",
     "tsup": "^7.0.0",
     "typescript": "^5.1.3",
-    "unstorage": "^1.6.1",
+    "unstorage": "^1.7.0",
     "vitest": "^0.32.2"
   },
   "exports": {

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -4,7 +4,7 @@
   "dependencies": {
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-config-turbo": "^1.10.3",
+    "eslint-config-turbo": "^1.10.4",
     "eslint-plugin-react": "^7.32.2"
   },
   "devDependencies": {