#10 Added embed chart code, label and appearance improvement

SSHOC · Feb 1, 2022 · d7de370 · d7de370
1 parent 32d21ff
commit d7de370
Showing 1 changed file with 57 additions and 22 deletions.
diff --git a/src/main/resources/templates/main.html b/src/main/resources/templates/main.html
@@ -1,61 +1,96 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="UTF-8">
-<title th:text="#{main.title}"></title>
+	<meta charset="UTF-8">
+	<title th:text="#{main.title}"></title>
+	<style>
+		.embedCode {
+			font-family: 'Courier New';
+			border: 1px solid;
+			border-color: black;
+			padding: 5px;
+			width: 500px;
+			height: 80px;
+			font-size:10pt
+		}
+		#chartIFrame {
+			width:95%;
+			height:1000px;
+			margin: 20px;
+			border:0;
+		}
+	</style>
+	<script>
+		function showHideEmbedCode(embedChartId, embedChartButtonId) {
+			var embedChartStyle = document.getElementById(embedChartId).style;
+			embedChartStyle.display = (embedChartStyle.display === "none" ? "block" : "none");
+			document.getElementById(embedChartButtonId).textContent = (embedChart.style.display === "none" ? "Embed chart" : "Hide embed code");
+		}
+		function changeChart(chartFrameId, chartSelectorId) {
+			document.getElementById('chartIFrame').setAttribute('src', document.getElementById('chartSelector').value);
+			document.getElementById('embedChart').textContent =
+				'<iframe width="600" height="400" seamless frameBorder="0" scrolling="no" src="' + document.getElementById('chartSelector').value + '&height=400"></iframe>';
+		}
+	</script>
 </head>
 <body>
 	<h1 th:text="#{main.title}"></h1>
 	<p>
 		<a th:href="${data.fileUrl}" th:text="${data.fileName}"></a>
 		<span th:text="${'('+ data.fileSize + ')'}"></span>
 	</p>
-	<table th:if="${!data.columns.isEmpty()}">
-		<thead>
-			<tr>
-				<th>Column</th>
-				<th>Type</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr th:each="column: ${data.columns}">
-				<td th:text="${column.name}"></td>
-				<td th:text="${column.type}"></td>
-			</tr>
-		</tbody>
-	</table>
 
 	<th:block th:switch="${data.status.name()}">
 		<div th:case="'READY'">
+			<table th:if="${!data.columns.isEmpty()}">
+				<thead>
+				<tr>
+					<th>Column</th>
+					<th>Type</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr th:each="column: ${data.columns}">
+					<td th:text="${column.name}"></td>
+					<td th:text="${column.type}"></td>
+				</tr>
+				</tbody>
+			</table>
 			<form method="POST" action="#" th:action="@{/dataverse-superset}">
 				<input type="hidden" id="name" name="datasetName" th:value="${data.getName()}">
 				<button type="submit">Import to Superset</button>
 			</form>
 		</div>
+
 		<div th:case="'IN_PROGRESS'">
 			<p>Import to Superset in progress... <button onClick="window.location.reload();">Refresh</button></p>
 		</div>
+
 		<div th:case="'COMPLETE'">
 			<p>
-				Import to Superset complete! ID: <a
+				Dataset imported to superset! Explore the data:  <a
 					th:href="${@environment.getProperty('superset.uri') + 'superset/explore/table/' + data.datasetId}"
 					th:text="${@environment.getProperty('superset.uri') + 'superset/explore/table/' + data.datasetId}"></a>
 			</p>
 
 			<div th:if="${chartToUrl != null && chartToUrl.size() > 0}">
-				Select chart:
-				<select id="chartSelector" th:field="*{chartToUrl}" onchange="document.getElementById('chartIFrame').setAttribute('src', document.getElementById('chartSelector').value)">
+				Related charts:
+				<select id="chartSelector" th:field="*{chartToUrl}" onchange="changeChart('chartIFrame', 'chartSelector');">
 					<option th:each="entry : ${chartToUrl.entrySet()}" th:value="${@environment.getProperty('superset.uri') + entry.value}" th:text="${entry.key}"></option>
 				</select>
-				<iframe id="chartIFrame" style="width:95%; height:1000px; margin: 20px; border:0;"
-						th:src="${@environment.getProperty('superset.uri') + chartToUrl.get(chartToUrl.keySet().iterator().next())}" ></iframe>
+				<button id="showHideEmbedChart" onclick="showHideEmbedCode('embedChart', 'showHideEmbedChart');">Embed chart</button>
+				<p id="embedChart" class="embedCode" style="display:none;">
+					&lt;iframe width="600" height="400" seamless frameBorder="0" scrolling="no" src="http://127.0.0.1:8088//superset/explore/?form_data=%7B%22slice_id%22%3A%20839%7D&amp;standalone=1&amp;height=400"&gt;&lt;/iframe&gt;
+				</p>
+				<iframe id="chartIFrame" th:src="${@environment.getProperty('superset.uri') + chartToUrl.get(chartToUrl.keySet().iterator().next())}" ></iframe>
 			</div>
 
 			<div th:unless="${chartToUrl != null && chartToUrl.size() > 0}">
-				<div>No charts found</div>
+				<div>No related charts found</div>
 			</div>
 
 		</div>
+
 		<div th:case="'ERROR'">
 			<p>Import to Superset failed. Message: <span th:text="${data.error}"></span></p>
 		</div>