Time series

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

@@ -125,6 +125,7 @@ aggregate_function: Aggregate Function
 global: Global
 admins_have_all_permissions: Admins have all permissions
 camera: Camera
+show_zero: Show Zero
 exposure: Exposure
 shutter: Shutter
 iso: ISO

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

@@ -200,6 +200,15 @@ export default definePanel({
 				default_value: 'hour',
 			},
 		},
+		{
+			field: 'showZero',
+			name: '$t:showZero',
+			type: 'boolean',
+			meta: {
+				interface: 'boolean',
+				width: 'half',
+			},
+		},
 		{
 			field: 'color',
 			name: '$t:color',

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

@@ -8,6 +8,7 @@ import api from '@/api';
 import ApexCharts from 'apexcharts';
 import { adjustDate } from '@/utils/adjust-date';
 import { useI18n } from 'vue-i18n';
+import { isEqual } from 'lodash';
 
 type TimeSeriesOptions = {
 	collection: string;
@@ -18,6 +19,7 @@ type TimeSeriesOptions = {
 	color: string;
 	decimals: number;
 	precision: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+	showZero: boolean;
 };
 
 export default defineComponent({
@@ -42,10 +44,12 @@ export default defineComponent({
 
 		watch(
 			() => props.options,
-			() => {
-				fetchData();
-				chart.value?.destroy();
-				setupChart();
+			(newOptions, oldOptions) => {
+				if (isEqual(newOptions, oldOptions) === false) {
+					fetchData();
+					chart.value?.destroy();
+					setupChart();
+				}
 			},
 			{ deep: true }
 		);
@@ -232,6 +236,10 @@ export default defineComponent({
 					range: new Date().getTime() - adjustDate(new Date(), `-${props.options.range}`)!.getTime(),
 					max: new Date().getTime(),
 				},
+				yaxis: {
+					forceNiceScale: true,
+					min: props.options.showZero ? 0 : undefined,
+				},
 			});
 
 			chart.value.render();