Add sort/limit to metric

app/src/modules/insights/routes/panel-configuration.vue

@@ -40,7 +40,7 @@
 
 				<div class="field half-right">
 					<p class="type-label">{{ $t('name') }}</p>
-					<v-input v-model="edits.name" :disabled="edits.show_header !== true" />
+					<v-input :nullable="false" v-model="edits.name" :disabled="edits.show_header !== true" />
 				</div>
 
 				<div class="field half-left">

app/src/panels/metric/index.ts

@@ -17,20 +17,6 @@ export default definePanel({
 				width: 'half',
 			},
 		},
-		{
-			field: 'field',
-			type: 'string',
-			name: '$t:panels.metric.field',
-			meta: {
-				interface: 'system-field',
-				options: {
-					collectionField: 'collection',
-					typeAllowList: ['integer', 'bigInteger', 'float', 'decimal'],
-					allowPrimaryKey: true,
-				},
-				width: 'half',
-			},
-		},
 		{
 			field: 'function',
 			type: 'string',
@@ -64,15 +50,66 @@ export default definePanel({
 				},
 			},
 		},
+		{
+			field: 'field',
+			type: 'string',
+			name: '$t:panels.metric.field',
+			meta: {
+				interface: 'system-field',
+				options: {
+					collectionField: 'collection',
+					typeAllowList: ['integer', 'bigInteger', 'float', 'decimal'],
+					allowPrimaryKey: true,
+				},
+				width: 'half',
+			},
+		},
 		{
 			field: 'limit',
 			type: 'integer',
 			name: '$t:limit',
+			schema: {
+				default_value: 100,
+			},
 			meta: {
 				interface: 'input',
 				width: 'half',
 			},
 		},
+		{
+			field: 'sortField',
+			type: 'string',
+			name: '$t:sort_field',
+			meta: {
+				interface: 'system-field',
+				options: {
+					collectionField: 'collection',
+					allowPrimaryKey: true,
+				},
+				width: 'half',
+			},
+		},
+		{
+			field: 'sortDirection',
+			type: 'string',
+			name: '$t:sort_direction',
+			meta: {
+				interface: 'select-dropdown',
+				options: {
+					choices: [
+						{
+							text: '$t:sort_asc',
+							value: 'asc',
+						},
+						{
+							text: '$t:sort_desc',
+							value: 'desc',
+						},
+					],
+				},
+				width: 'half',
+			},
+		},
 		{
 			field: 'filter',
 			type: 'json',

app/src/panels/metric/metric.vue

@@ -44,6 +44,8 @@ export default defineComponent({
 			loading.value = true;
 
 			try {
+				const sort =
+					props.options.sortField && `${props.options.sortDirection === 'desc' ? '-' : ''}${props.options.sortField}`;
 				const res = await api.get(`/items/${props.options.collection}`, {
 					params: {
 						aggregate: {
@@ -52,6 +54,8 @@ export default defineComponent({
 							},
 						},
 						filter: props.options.filter,
+						sort: sort,
+						limit: props.options.limit ?? 100,
 					},
 				});