tweaks on time series

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

@@ -126,6 +126,14 @@ global: Global
 admins_have_all_permissions: Admins have all permissions
 camera: Camera
 show_zero: Show Zero
+sum: Sum
+sum_distinct: Sum Distinct
+avg: Average
+avg_distinct: Average Distinct
+count: Count
+count_distinct: Count Distinct
+min: Min
+max: Max
 exposure: Exposure
 shutter: Shutter
 iso: ISO

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

@@ -202,7 +202,7 @@ export default definePanel({
 		},
 		{
 			field: 'showZero',
-			name: '$t:showZero',
+			name: '$t:show_zero',
 			type: 'boolean',
 			meta: {
 				interface: 'boolean',

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

@@ -3,18 +3,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch, onMounted, onUnmounted } from 'vue';
+import { defineComponent, PropType, ref, watch, onMounted, onUnmounted, computed } from 'vue';
 import api from '@/api';
 import ApexCharts from 'apexcharts';
 import { adjustDate } from '@/utils/adjust-date';
 import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';
+import { useFieldsStore } from '@/stores';
 
 type TimeSeriesOptions = {
 	collection: string;
 	dateField: string;
 	valueField: string;
-	function: 'avg' | 'sum' | 'min' | 'max' | 'count';
+	function: 'avg' | 'avg_distinct' | 'sum' | 'sum_distinct' | 'count' | 'count_distinct' | 'min' | 'max';
 	range: string; // 1 week, etc
 	color: string;
 	decimals: number;
@@ -34,7 +35,9 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const { d } = useI18n();
+		const { d, t } = useI18n();
+
+		const fieldsStore = useFieldsStore();
 
 		const metrics = ref<Record<string, any>[]>([]);
 		const loading = ref(false);
@@ -42,6 +45,12 @@ export default defineComponent({
 		const chartEl = ref();
 		const chart = ref<ApexCharts>();
 
+		const valueLabel = computed(() => {
+			const field = fieldsStore.getField(props.options.collection, props.options.valueField);
+			const operation = t(props.options.function);
+			return `${field.name} (${operation})`;
+		});
+
 		watch(
 			() => props.options,
 			(newOptions, oldOptions) => {
@@ -221,6 +230,11 @@ export default defineComponent({
 							return d(new Date(date), 'long');
 						},
 					},
+					y: {
+						title: {
+							formatter: () => valueLabel.value,
+						},
+					},
 				},
 				xaxis: {
 					type: 'datetime',