Add first/last to metric

app/src/panels/metric/index.ts

@@ -37,7 +37,7 @@ export default definePanel({
 			type: 'string',
 			name: '$t:aggregate_function',
 			meta: {
-				width: 'half-space',
+				width: 'half',
 				interface: 'select-dropdown',
 				options: {
 					choices: [
@@ -73,10 +73,31 @@ export default definePanel({
 							text: 'Maximum',
 							value: 'max',
 						},
+						{
+							text: 'First',
+							value: 'first',
+						},
+						{
+							text: 'Last',
+							value: 'last',
+						},
 					],
 				},
 			},
 		},
+		{
+			field: 'sortField',
+			type: 'string',
+			name: '$t:sort_field',
+			meta: {
+				interface: 'system-field',
+				options: {
+					collectionField: 'collection',
+					allowPrimaryKey: true,
+				},
+				width: 'half',
+			},
+		},
 		{
 			field: 'filter',
 			type: 'json',

app/src/panels/metric/metric.vue

@@ -23,7 +23,17 @@ type MetricOptions = {
 	sortDirection: string;
 	collection: string;
 	field: string;
-	function: 'avg' | 'avg_distinct' | 'sum' | 'sum_distinct' | 'count' | 'count_distinct' | 'min' | 'max';
+	function:
+		| 'avg'
+		| 'avg_distinct'
+		| 'sum'
+		| 'sum_distinct'
+		| 'count'
+		| 'count_distinct'
+		| 'min'
+		| 'max'
+		| 'first'
+		| 'last';
 	filter: Filter;
 	decimals: number;
 	conditionalFormatting: {
@@ -113,24 +123,36 @@ export default defineComponent({
 		async function fetchData() {
 			if (!props.options) return;
 
+			const isRawValue = ['first', 'last'].includes(props.options.function);
+
 			loading.value = true;
 
 			try {
 				const sort =
-					props.options.sortField && `${props.options.sortDirection === 'desc' ? '-' : ''}${props.options.sortField}`;
+					props.options.sortField && `${props.options.function === 'last' ? '-' : ''}${props.options.sortField}`;
+
+				const aggregate = isRawValue
+					? undefined
+					: {
+							[props.options.function]: [props.options.field || '*'],
+					  };
 
 				const res = await api.get(`/items/${props.options.collection}`, {
 					params: {
-						aggregate: {
-							[props.options.function]: [props.options.field || '*'],
-						},
+						aggregate,
 						filter: props.options.filter,
 						sort: sort,
+						limit: 1,
+						fields: [props.options.field],
 					},
 				});
 
 				if (props.options.field) {
-					metric.value = Number(res.data.data[0][`${props.options.field}_${props.options.function}`]);
+					if (props.options.function === 'first' || props.options.function === 'last') {
+						metric.value = Number(res.data.data[0][props.options.field]);
+					} else {
+						metric.value = Number(res.data.data[0][`${props.options.field}_${props.options.function}`]);
+					}
 				} else {
 					metric.value = Number(res.data.data[0][props.options.function]);
 				}

app/src/utils/abbreviate-number.ts

@@ -1,5 +1,7 @@
 export function abbreviateNumber(value: number): number | string {
 	if (value >= 1000) {
+		value = Math.round(value);
+
 		const suffixes = ['', 'K', 'M', 'B', 'T'];
 		const suffixNum = Math.floor(('' + value).length / 3);
 		let shortValue: number = value;