Added Tag Tooltip (#82)

**IMPORTANT: Please do not create a Pull Request without creating an issue first.** Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request. Please provide enough information so that we can review your pull request. ## Summary **Issue:** #81 ## Type (Fill in "x" to check) - [ ] Bug Fix - [x] New Feature (Application) - [ ] New Feature (Chart / Map Type) - [ ] New Component ## Checklist Please make sure that all items are checked before submitting this request. - [x] Code linter has been run and issues have all been resolved - [x] The code has been thoroughly tested and no visible bugs have been introduced - [x] The pull request will completely resolve the issue(s) mentioned - [x] The pull request only resolves the issue(s) mentioned and nothing more ## Attribution Thanks for your hard work. If you will like to be attributed in all components that directly benefitted from your contribution, please check the box below. - [x] I would like to be attributed As TUIC ## Additional context N/A
taipei-doit · Dec 5, 2023 · 0af548d · 0af548d
2 parents 0b24a05 + 35d640e
commit 0af548d
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 62 deletions.
diff --git a/src/components/components/ComponentContainer.vue b/src/components/components/ComponentContainer.vue
@@ -9,6 +9,7 @@ import { useDialogStore } from "../../store/dialogStore";
 import { useContentStore } from "../../store/contentStore";
 
 import ComponentTag from "../utilities/ComponentTag.vue";
+import TagTooltip from "../utilities/TagTooltip.vue";
 import { chartTypes } from "../../assets/configs/apexcharts/chartTypes";
 
 const dialogStore = useDialogStore();
@@ -23,6 +24,9 @@ const props = defineProps({
 
 // The default active chart is the first one in the list defined in the dashboard component
 const activeChart = ref(props.content.chart_config.types[0]);
+// stores the location of the mouse when tags are hovered over
+const mousePosition = ref({ x: null, y: null });
+const showTagTooltip = ref(false);
 
 // Parses time data into display format
 const dataTime = computed(() => {
@@ -54,6 +58,13 @@ const updateFreq = computed(() => {
 		unitRef[props.content.update_freq_unit]
 	}更新`;
 });
+// The style for the tag tooltip
+const tooltipPosition = computed(() => {
+	return {
+		left: `${mousePosition.value.x - 40}px`,
+		top: `${mousePosition.value.y - 110}px`,
+	};
+});
 
 // Toggles between chart types defined in the dashboard component
 function changeActiveChart(chartName) {
@@ -66,6 +77,15 @@ function toggleFavorite() {
 		contentStore.favoriteComponent(props.content.id);
 	}
 }
+// Updates the location for the tag tooltip
+function updateMouseLocation(e) {
+	mousePosition.value.x = e.pageX;
+	mousePosition.value.y = e.pageY;
+}
+// Updates whether to show the tag tooltip
+function changeShowTagTooltipState(state) {
+	showTagTooltip.value = state;
+}
 </script>
 
 <template>
@@ -80,7 +100,17 @@ function toggleFavorite() {
 			<div>
 				<h3>
 					{{ content.name }}
-					<ComponentTag icon="" :text="updateFreq" mode="small" />
+					<ComponentTag
+						icon=""
+						:text="updateFreq"
+						mode="small"
+						@click="
+							dialogStore.showNotification(
+								'info',
+								'為內部版本更新頻率，本展示站台均為靜態資料'
+							)
+						"
+					/>
 				</h3>
 				<h4>{{ `${content.source} | ${dataTime}` }}</h4>
 			</div>
@@ -175,40 +205,26 @@ function toggleFavorite() {
 			<div></div>
 		</div>
 		<div class="componentcontainer-footer">
-			<div>
+			<div
+				@mouseenter="changeShowTagTooltipState(true)"
+				@mousemove="updateMouseLocation"
+				@mouseleave="changeShowTagTooltipState(false)"
+			>
 				<ComponentTag
 					v-if="content.chart_config.map_filter && content.map_config"
 					icon="tune"
 					text="篩選地圖"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有篩選地圖功能，歡迎至地圖頁面嘗試'
-						)
-					"
 					class="hide-if-mobile"
 				/>
 				<ComponentTag
 					v-if="content.map_config"
 					icon="map"
 					text="空間資料"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有空間資料，歡迎至地圖頁面查看'
-						)
-					"
 				/>
 				<ComponentTag
 					v-if="content.history_data"
 					icon="insights"
 					text="歷史資料"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有歷史資訊，點擊「組件資訊」以查看'
-						)
-					"
 					class="history-tag"
 				/>
 			</div>
@@ -221,6 +237,16 @@ function toggleFavorite() {
 				<span>arrow_circle_right</span>
 			</button>
 		</div>
+		<Teleport to="body">
+			<!-- The class "chart-tooltip" could be edited in /assets/styles/chartStyles.css -->
+			<TagTooltip
+				v-if="showTagTooltip"
+				:position="tooltipPosition"
+				:hasFilter="content.chart_config.map_filter ? true : false"
+				:hasMapLayer="content.map_config ? true : false"
+				:hasHistory="content.history_data ? true : false"
+			/>
+		</Teleport>
 	</div>
 </template>
 

diff --git a/src/components/components/ComponentMapChart.vue b/src/components/components/ComponentMapChart.vue
@@ -8,6 +8,7 @@ import { ref, computed } from "vue";
 import { useMapStore } from "../../store/mapStore";
 import { useDialogStore } from "../../store/dialogStore";
 
+import TagTooltip from "../utilities/TagTooltip.vue";
 import { chartTypes } from "../../assets/configs/apexcharts/chartTypes";
 
 const mapStore = useMapStore();
@@ -23,6 +24,9 @@ const props = defineProps({
 const activeChart = ref(props.content.chart_config.types[0]);
 // Stores whether the component is toggled on or not
 const checked = ref(false);
+// stores the location of the mouse when tags are hovered over
+const mousePosition = ref({ x: null, y: null });
+const showTagTooltip = ref(false);
 
 // Parses time data into display format
 const dataTime = computed(() => {
@@ -52,6 +56,14 @@ const shouldDisable = computed(() => {
 	);
 });
 
+// The style for the tag tooltip
+const tooltipPosition = computed(() => {
+	return {
+		left: `${mousePosition.value.x - 40}px`,
+		top: `${mousePosition.value.y - 110}px`,
+	};
+});
+
 // Open and closes the component as well as communicates to the mapStore to turn on and off map layers
 function handleToggle() {
 	if (!props.content.map_config) {
@@ -77,6 +89,15 @@ function changeActiveChart(chartName) {
 		`${props.content.map_config[0].index}-${props.content.map_config[0].type}`
 	);
 }
+// Updates the location for the tag tooltip
+function updateMouseLocation(e) {
+	mousePosition.value.x = e.pageX;
+	mousePosition.value.y = e.pageY;
+}
+// Updates whether to show the tag tooltip
+function changeShowTagTooltipState(state) {
+	showTagTooltip.value = state;
+}
 </script>
 
 <template>
@@ -91,39 +112,21 @@ function changeActiveChart(chartName) {
 			<div>
 				<div>
 					<h3>{{ content.name }}</h3>
-					<span
-						v-if="
-							content.chart_config.map_filter &&
-							content.map_config
-						"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'本組件有篩選地圖功能，點擊圖表資料點以篩選'
-							)
-						"
-						>tune</span
-					>
-					<span
-						v-if="content.map_config"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'本組件有空間資料，點擊開關以顯示地圖'
-							)
-						"
-						>map</span
-					>
-					<span
-						v-if="content.history_data"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'回到儀表板頁面並點擊「組件資訊」以查看'
-							)
-						"
-						>insights</span
+					<div
+						@mouseenter="changeShowTagTooltipState(true)"
+						@mousemove="updateMouseLocation"
+						@mouseleave="changeShowTagTooltipState(false)"
 					>
+						<span
+							v-if="
+								content.chart_config.map_filter &&
+								content.map_config
+							"
+							>tune</span
+						>
+						<span v-if="content.map_config">map</span>
+						<span v-if="content.history_data">insights</span>
+					</div>
 				</div>
 				<h4 v-if="checked">{{ `${content.source} | ${dataTime}` }}</h4>
 			</div>
@@ -181,6 +184,16 @@ function changeActiveChart(chartName) {
 				<span>arrow_circle_right</span>
 			</button>
 		</div>
+		<Teleport to="body">
+			<!-- The class "chart-tooltip" could be edited in /assets/styles/chartStyles.css -->
+			<TagTooltip
+				v-if="showTagTooltip"
+				:position="tooltipPosition"
+				:hasFilter="content.chart_config.map_filter ? true : false"
+				:hasMapLayer="content.map_config ? true : false"
+				:hasHistory="content.history_data ? true : false"
+			/>
+		</Teleport>
 	</div>
 </template>
 

diff --git a/src/components/utilities/ComponentTag.vue b/src/components/utilities/ComponentTag.vue
@@ -3,10 +3,6 @@
 <!-- This component has two modes "outline" and "fill" which is controlled via the prop "mode" -->
 
 <script setup>
-import { useDialogStore } from "../../store/dialogStore";
-
-const dialogStore = useDialogStore();
-
 defineProps({
 	icon: String,
 	text: String,
@@ -24,12 +20,6 @@ defineProps({
 			'componenttag-fill': mode === 'fill',
 			'componenttag-small': mode === 'small',
 		}"
-		@click="
-			dialogStore.showNotification(
-				'info',
-				'為內部版本更新頻率，本展示站台均為靜態資料'
-			)
-		"
 	>
 		<span v-if="icon">{{ icon }}</span>
 		<p>{{ text }}</p>

diff --git a/src/components/utilities/TagTooltip.vue b/src/components/utilities/TagTooltip.vue
@@ -0,0 +1,46 @@
+<script setup>
+const props = defineProps({
+	position: { type: Object },
+	hasFilter: { type: Boolean, default: false },
+	hasMapLayer: { type: Boolean, default: false },
+	hasHistory: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+	<div :style="props.position" class="chart-tooltip tagtooltip">
+		<h6>組件資訊與功能</h6>
+		<p>
+			<span>{{ props.hasFilter ? "check" : "clear" }}</span
+			>用圖表篩選地圖
+		</p>
+		<p>
+			<span>{{ props.hasMapLayer ? "check" : "clear" }}</span
+			>具備空間資料(地圖交叉比對)
+		</p>
+		<p>
+			<span>{{ props.hasHistory ? "check" : "clear" }}</span
+			>具備歷史資料(組件資訊)
+		</p>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.tagtooltip {
+	position: fixed;
+	box-shadow: 0px 0px 5px black;
+	z-index: 30;
+
+	p {
+		display: flex;
+		align-items: center;
+		font-size: 16px;
+
+		span {
+			font-family: var(--font-icon);
+			color: var(--color-highlight);
+			font-size: var(--font-m);
+		}
+	}
+}
+</style>