From 8025bc8796f28acea11c3f3b591a8a7863c8af88 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 28 May 2021 18:41:43 -0400
Subject: [PATCH] Add label type panel

---
 app/src/lang/translations/en-US.yaml |  3 +++
 app/src/panels/label/index.ts        | 32 +++++++++++++++++++++++
 app/src/panels/label/label.vue       | 39 ++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+)
 create mode 100644 app/src/panels/label/index.ts
 create mode 100644 app/src/panels/label/label.vue

diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 529253ea03..44aef0d650 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1197,3 +1197,6 @@ panels:
     description: Render a line chart based on values over time
     date_field: Date Field
     value_field: Value Field
+  label:
+    name: Label
+    description: Show some text
diff --git a/app/src/panels/label/index.ts b/app/src/panels/label/index.ts
new file mode 100644
index 0000000000..8772ff14c1
--- /dev/null
+++ b/app/src/panels/label/index.ts
@@ -0,0 +1,32 @@
+import { definePanel } from '../define';
+import PanelLabel from './label.vue';
+
+export default definePanel({
+	id: 'label',
+	name: '$t:panels.label.name',
+	description: '$t:panels.label.description',
+	icon: 'functions',
+	component: PanelLabel,
+	options: [
+		{
+			field: 'text',
+			name: '$t:label',
+			type: 'string',
+			meta: {
+				interface: 'input',
+				width: 'half',
+			},
+		},
+		{
+			field: 'color',
+			name: '$t:color',
+			type: 'string',
+			meta: {
+				interface: 'select-color',
+				width: 'half',
+			},
+		},
+	],
+	minWidth: 10,
+	minHeight: 6,
+});
diff --git a/app/src/panels/label/label.vue b/app/src/panels/label/label.vue
new file mode 100644
index 0000000000..42cbbc5f7e
--- /dev/null
+++ b/app/src/panels/label/label.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="label type-title" :class="{ 'has-header': show_header }" :style="{ color: options.color }">
+		{{ options.text }}
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		options: {
+			type: Object,
+			default: null,
+		},
+		show_header: {
+			type: Boolean,
+			default: false,
+		},
+	},
+});
+</script>
+
+<style scoped>
+.label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	font-weight: 800;
+	font-size: 42px;
+	line-height: 52px;
+}
+
+.label.has-header {
+	height: calc(100% - 24px);
+}
+</style>