Various tweaks and fixes

api/src/database/system-data/fields/panels.yaml

@@ -8,6 +8,8 @@ fields:
   - field: color
   - field: note
   - field: type
+  - field: show_header
+    special: boolean
   - field: position_x
   - field: position_y
   - field: width

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

@@ -10,7 +10,7 @@
 			<v-icon class="icon" :style="iconColor" :name="panel.icon" />
 			<v-text-overflow class="name" :text="panel.name" />
 			<div class="spacer" />
-			<v-icon v-if="panel.note" name="info" v-tooltip="panel.note" />
+			<v-icon class="note" v-if="panel.note" name="info" v-tooltip="panel.note" />
 		</div>
 
 		<div class="edit-actions" v-if="editMode">
@@ -209,7 +209,6 @@ export default defineComponent({
 	display: block;
 	grid-row: var(--pos-y) / span var(--height);
 	grid-column: var(--pos-x) / span var(--width);
-	overflow: hidden;
 	background-color: var(--background-page);
 	border: 1px solid var(--border-normal);
 	border-radius: var(--border-radius-outline);
@@ -273,7 +272,8 @@ export default defineComponent({
 	flex-grow: 1;
 }
 
-.edit-icon {
+.edit-icon,
+.note {
 	--v-icon-color: var(--foreground-subdued);
 	--v-icon-color-hover: var(--foreground-normal);
 }
@@ -286,6 +286,7 @@ export default defineComponent({
 	align-items: center;
 	padding: 12px;
 	background-color: var(--background-page);
+	border-top-right-radius: var(--border-radius-outline);
 }
 
 .resize-handlers div {
@@ -294,7 +295,7 @@ export default defineComponent({
 }
 
 .resize-handlers .top {
-	top: 0;
+	top: -1px;
 	width: 100%;
 	height: 8px;
 	cursor: ns-resize;
@@ -302,14 +303,14 @@ export default defineComponent({
 
 .resize-handlers .right {
 	top: 0;
-	right: 0;
+	right: -1px;
 	width: 8px;
 	height: 100%;
 	cursor: ew-resize;
 }
 
 .resize-handlers .bottom {
-	bottom: 0;
+	bottom: -1px;
 	width: 100%;
 	height: 8px;
 	cursor: ns-resize;
@@ -317,39 +318,39 @@ export default defineComponent({
 
 .resize-handlers .left {
 	top: 0;
-	left: 0;
+	left: -1px;
 	width: 8px;
 	height: 100%;
 	cursor: ew-resize;
 }
 
 .resize-handlers .top-left {
-	top: 0;
-	left: 0;
+	top: -1px;
+	left: -1px;
 	width: 12px;
 	height: 12px;
 	cursor: nwse-resize;
 }
 
 .resize-handlers .top-right {
-	top: 0;
-	right: 0;
+	top: -1px;
+	right: -1px;
 	width: 12px;
 	height: 12px;
 	cursor: nesw-resize;
 }
 
 .resize-handlers .bottom-right {
-	right: 0;
-	bottom: 0;
+	right: -1px;
+	bottom: -1px;
 	width: 12px;
 	height: 12px;
 	cursor: nwse-resize;
 }
 
 .resize-handlers .bottom-left {
-	bottom: 0;
-	left: 0;
+	bottom: -1px;
+	left: -1px;
 	width: 12px;
 	height: 12px;
 	cursor: nesw-resize;

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

@@ -164,6 +164,7 @@ export default defineComponent({
 					...stagedPanels.value,
 					{
 						id: `_${nanoid()}`,
+						dashboard: props.primaryKey,
 						...edits,
 					},
 				];
@@ -171,13 +172,13 @@ export default defineComponent({
 				if (stagedPanels.value.some((panel) => panel.id === key)) {
 					stagedPanels.value = stagedPanels.value.map((panel) => {
 						if (panel.id === key) {
-							return merge({ id: key }, panel, edits);
+							return merge({ id: key, dashboard: props.primaryKey }, panel, edits);
 						}
 
 						return panel;
 					});
 				} else {
-					stagedPanels.value = [...stagedPanels.value, { id: key, ...edits }];
+					stagedPanels.value = [...stagedPanels.value, { id: key, dashboard: props.primaryKey, ...edits }];
 				}
 			}
 		}
@@ -244,7 +245,7 @@ export default defineComponent({
 	display: block;
 	width: calc(100% + 8px);
 	height: calc(100% + 8px);
-	background-image: radial-gradient(#efefef 10%, transparent 10%);
+	background-image: radial-gradient(var(--border-normal) 10%, transparent 10%);
 	background-position: -6px -6px;
 	background-size: 20px 20px;
 	opacity: 0;

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

@@ -1,5 +1,5 @@
 <template>
-	<v-drawer active :title="(panel && panel.name) || $t('panel')" @cancel="$emit('cancel')">
+	<v-drawer active :title="(panel && panel.name) || $t('panel')" @cancel="$emit('cancel')" icon="insert_chart">
 		<template #actions>
 			<v-button :disabled="!edits.type" @click="emitSave" icon rounded v-tooltip.bottom="$t('done')">
 				<v-icon name="check" />
@@ -21,6 +21,7 @@
 					:fields="selectedPanel.options"
 					primary-key="+"
 					v-model="edits.options"
+					:initial-values="panel && panel.options"
 				/>
 
 				<component v-model="edits.options" :collection="collection" :is="`panel-options-${selectedPanel.id}`" v-else />
@@ -48,6 +49,11 @@
 					<p class="type-label">{{ $t('color') }}</p>
 					<interface-select-color v-model="edits.color" :disabled="edits.show_header !== true" width="half" />
 				</div>
+
+				<div class="field full">
+					<p class="type-label">{{ $t('note') }}</p>
+					<v-input v-model="edits.note" :disabled="edits.show_header !== true" />
+				</div>
 			</div>
 		</div>
 	</v-drawer>
@@ -71,16 +77,16 @@ export default defineComponent({
 		const { panels } = getPanels();
 
 		const edits = reactive<Partial<Panel>>({
-			show_header: false,
-			type: undefined,
-			name: undefined,
-			icon: undefined,
-			color: undefined,
+			show_header: props.panel?.show_header || true,
+			type: props.panel?.type || undefined,
+			name: props.panel?.name,
+			note: props.panel?.note,
+			icon: 'insert_chart',
+			color: props.panel?.color,
 			width: undefined,
 			height: undefined,
 			position_x: 1,
 			position_y: 1,
-			...(props.panel || {}),
 		});
 
 		const selectItems = computed<FancySelectItem[]>(() => {

app/src/panels/metric/metric.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="metric type-title">{{ loading ? 'loading' : metric }}</div>
+	<div class="metric type-title" :class="{ 'has-header': show_header }">
+		<v-progress-circular indeterminate v-if="loading" />
+		<template v-else>{{ metric }}</template>
+	</div>
 </template>
 
 <script lang="ts">
@@ -12,6 +15,10 @@ export default defineComponent({
 			type: Object,
 			default: null,
 		},
+		show_header: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const metric = ref();
@@ -19,7 +26,7 @@ export default defineComponent({
 
 		fetchData();
 
-		watch(props.options, fetchData);
+		watch(() => props.options, fetchData, { deep: true });
 
 		return { metric, loading };
 
@@ -62,4 +69,8 @@ export default defineComponent({
 	font-size: 42px;
 	line-height: 52px;
 }
+
+.metric.has-header {
+	height: calc(100% - 48px);
+}
 </style>

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

@@ -80,6 +80,9 @@ export default definePanel({
 			field: 'limit',
 			type: 'integer',
 			name: '$t:limit',
+			schema: {
+				default_value: 100,
+			},
 			meta: {
 				interface: 'input',
 				width: 'half',

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

@@ -115,7 +115,7 @@ export default defineComponent({
 			try {
 				const results = await api.get(`/items/${props.options.collection}`, {
 					params: {
-						limit: props.options.limit,
+						limit: props.options.limit || 100,
 						group: props.options.dateField,
 						aggregate: {
 							[props.options.function]: {