Add date range functionality to time-series

app/src/lang/translations/en-US.yaml

@@ -142,6 +142,7 @@ alias: Alias
 bigInteger: Big Integer
 boolean: Boolean
 date: Date
+date_range: Date Range
 datetime: DateTime
 decimal: Decimal
 float: Float

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

@@ -4,7 +4,7 @@
 		:title="panel?.name || t('panel')"
 		:subtitle="t('panel_options')"
 		@cancel="$emit('cancel')"
-		:icon="panel?.icon || insert_chart"
+		:icon="panel?.icon || 'insert_chart'"
 		persistent
 	>
 		<template #actions>

app/src/panels/time-series/index.ts

@@ -26,14 +26,30 @@ export default definePanel({
 				interface: 'select-dropdown',
 				options: {
 					choices: [
+						{
+							text: 'Count',
+							value: 'count',
+						},
+						{
+							text: 'Count (Distinct)',
+							value: 'count_distinct',
+						},
 						{
 							text: 'Average',
 							value: 'avg',
 						},
+						{
+							text: 'Average (Distinct)',
+							value: 'avg_distinct',
+						},
 						{
 							text: 'Sum',
 							value: 'sum',
 						},
+						{
+							text: 'Sum (Distinct)',
+							value: 'sum_distinct',
+						},
 						{
 							text: 'Minimum',
 							value: 'min',
@@ -42,10 +58,6 @@ export default definePanel({
 							text: 'Maximum',
 							value: 'max',
 						},
-						{
-							text: 'Count',
-							value: 'count',
-						},
 					],
 				},
 			},
@@ -58,7 +70,7 @@ export default definePanel({
 				interface: 'system-field',
 				options: {
 					collectionField: 'collection',
-					typeAllowList: ['date'],
+					typeAllowList: ['date', 'datetime', 'timestamp'],
 				},
 				width: 'half',
 			},
@@ -77,15 +89,75 @@ export default definePanel({
 			},
 		},
 		{
-			field: 'limit',
-			type: 'integer',
-			name: '$t:limit',
+			field: 'range',
+			type: 'dropdown',
+			name: '$t:date_range',
 			schema: {
-				default_value: 100,
+				default_value: '1 week',
 			},
+			meta: {
+				interface: 'select-dropdown',
+				width: 'half',
+				options: {
+					choices: [
+						{
+							text: 'Past 5 Minutes',
+							value: '5 minutes',
+						},
+						{
+							text: 'Past 15 Minutes',
+							value: '15 minutes',
+						},
+						{
+							text: 'Past 30 Minutes',
+							value: '30 minutes',
+						},
+						{
+							text: 'Past 1 Hour',
+							value: '1 hour',
+						},
+						{
+							text: 'Past 4 Hours',
+							value: '4 hours',
+						},
+						{
+							text: 'Past 1 Day',
+							value: '1 day',
+						},
+						{
+							text: 'Past 2 Days',
+							value: '2 days',
+						},
+						{
+							text: 'Past 1 Week',
+							value: '1 week',
+						},
+						{
+							text: 'Past 1 Month',
+							value: '1 month',
+						},
+						{
+							text: 'Past 3 Months',
+							value: '3 months',
+						},
+					],
+					allowOther: true,
+				},
+			},
+		},
+		{
+			field: 'decimals',
+			type: 'integer',
+			name: '$t:decimals',
 			meta: {
 				interface: 'input',
 				width: 'half',
+				options: {
+					placeholder: '$t:decimals_placeholder',
+				},
+			},
+			schema: {
+				default_value: 2,
 			},
 		},
 		{

app/src/panels/time-series/time-series.vue

@@ -12,8 +12,9 @@ type TimeSeriesOptions = {
 	dateField: string;
 	valueField: string;
 	function: 'avg' | 'sum' | 'min' | 'max' | 'count';
-	limit: number;
+	range: string; // 1 week, etc
 	color: string;
+	decimals: number;
 };
 
 export default defineComponent({
@@ -38,8 +39,6 @@ export default defineComponent({
 
 		fetchData();
 
-		console.log(props.options.color + 'test');
-
 		onMounted(() => {
 			chart.value = new ApexCharts(chartEl.value, {
 				colors: [props.options.color ? props.options.color : 'var(--primary)'],
@@ -120,12 +119,28 @@ export default defineComponent({
 			try {
 				const results = await api.get(`/items/${props.options.collection}`, {
 					params: {
-						limit: props.options.limit || 100,
-						group: props.options.dateField,
+						group: [
+							`year(${props.options.dateField})`,
+							`month(${props.options.dateField})`,
+							`day(${props.options.dateField})`,
+							`hour(${props.options.dateField})`,
+						],
 						aggregate: {
-							[props.options.function]: {
-								[props.options.valueField]: props.options.valueField,
-							},
+							[props.options.function]: [props.options.valueField],
+						},
+						filter: {
+							_and: [
+								{
+									[props.options.dateField]: {
+										_gte: `$NOW(-${props.options.range || '1 week'})`,
+									},
+								},
+								{
+									[props.options.dateField]: {
+										_lte: `$NOW`,
+									},
+								},
+							],
 						},
 					},
 				});
@@ -134,14 +149,27 @@ export default defineComponent({
 
 				chart.value?.updateOptions({
 					xaxis: {
-						categories: metrics.value.map((metric) => metric[props.options.dateField]),
+						categories: metrics.value.map((metric) => {
+							const year = metric[`${props.options.dateField}_year`];
+							const month = metric[`${props.options.dateField}_month`];
+							const day = metric[`${props.options.dateField}_day`];
+							const hour = metric[`${props.options.dateField}_hour`];
+
+							return `${year}-${month}-${day}T${hour}:00:00`;
+						}),
 					},
 				});
 
 				chart.value?.updateSeries([
 					{
 						name: props.options.collection,
-						data: metrics.value.map((metric) => metric[props.options.valueField]),
+						data: metrics.value.map((metric) =>
+							Number(
+								Number(metric[`${props.options.valueField}_${props.options.function}`]).toFixed(
+									props.options.decimals ?? 0
+								)
+							)
+						),
 					},
 				]);
 			} catch (err) {