Use synced charts

app/src/modules/insights/components/panel.vue

@@ -77,7 +77,7 @@
 		</div>
 
 		<div class="panel-content" :class="{ 'has-header': panel.show_header }">
-			<component :is="`panel-${panel.type}`" v-bind="panel" />
+			<component :is="`panel-${panel.type}`" v-bind="panel" :now="now" />
 		</div>
 	</div>
 </template>
@@ -101,6 +101,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		now: {
+			type: Date,
+			required: true,
+		},
 	},
 	setup(props, { emit }) {
 		const { t } = useI18n();

app/src/modules/insights/components/workspace.vue

@@ -5,6 +5,7 @@
 			:key="panel.id"
 			:panel="panel"
 			:edit-mode="editMode"
+			:now="now"
 			@update="$emit('update', { edits: $event, id: panel.id })"
 			@move="$emit('move', panel.id)"
 			@delete="$emit('delete', panel.id)"
@@ -36,6 +37,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		now: {
+			type: Date,
+			required: true,
+		},
 	},
 	setup(props) {
 		const mainElement = inject('main-element', ref<Element>());

app/src/modules/insights/routes/dashboard.vue

@@ -78,6 +78,7 @@
 			:edit-mode="editMode"
 			:panels="panels"
 			:zoom-to-fit="zoomToFit"
+			:now="now"
 			@update="stagePanelEdits"
 			@move="movePanelID = $event"
 			@delete="deletePanel"
@@ -188,6 +189,8 @@ export default defineComponent({
 		const stagedPanels = ref<Partial<Panel & { borderRadius: [boolean, boolean, boolean, boolean] }>[]>([]);
 		const panelsToBeDeleted = ref<string[]>([]);
 
+		const now = new Date();
+
 		const panels = computed(() => {
 			const savedPanels = (currentDashboard.value?.panels || []).filter(
 				(panel) => panelsToBeDeleted.value.includes(panel.id) === false
@@ -290,6 +293,7 @@ export default defineComponent({
 			movePanelTo,
 			confirmLeave,
 			discardAndLeave,
+			now,
 		};
 
 		function stagePanelEdits(event: { edits: Partial<Panel>; id?: string }) {

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

@@ -41,6 +41,18 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		id: {
+			type: String,
+			required: true,
+		},
+		dashboard: {
+			type: String,
+			required: true,
+		},
+		now: {
+			type: Date,
+			required: true,
+		},
 	},
 	setup(props) {
 		const { d, t, n } = useI18n();
@@ -194,6 +206,8 @@ export default defineComponent({
 					},
 					fontFamily: 'var(--family-sans-serif)',
 					foreColor: 'var(--foreground-subdued)',
+					id: props.id,
+					group: props.dashboard,
 				},
 				series: [],
 				stroke: {
@@ -259,8 +273,8 @@ export default defineComponent({
 					axisBorder: {
 						show: false,
 					},
-					range: new Date().getTime() - adjustDate(new Date(), `-${props.options.range}`)!.getTime(),
-					max: new Date().getTime(),
+					range: props.now.getTime() - adjustDate(props.now, `-${props.options.range}`)!.getTime(),
+					max: props.now.getTime(),
 				},
 				yaxis: {
 					forceNiceScale: true,
@@ -271,6 +285,7 @@ export default defineComponent({
 						formatter: (value: number) => {
 							return value > 10000 ? abbreviateNumber(value, 1) : n(value);
 						},
+						minWidth: 40,
 					},
 				},
 			});