From 73501b4dba3bdc896423587d4c948951af4ce6b5 Mon Sep 17 00:00:00 2001
From: kpaxman <kpaxman@uwaterloo.ca>
Date: Thu, 29 Oct 2020 14:23:10 -0400
Subject: [PATCH] ISTWCMS-3752: Create 'tableau' component
---
css/styles.css | 4 ++++
.../04-components/tableau/_tableau.scss | 5 +++++
.../04-components/tableau/tableau.twig | 22 +++++++++++++++++++
.../04-components/tableau/tableau.yml | 8 +++++++
4 files changed, 39 insertions(+)
create mode 100644 source/_patterns/04-components/tableau/_tableau.scss
create mode 100644 source/_patterns/04-components/tableau/tableau.twig
create mode 100644 source/_patterns/04-components/tableau/tableau.yml
diff --git a/css/styles.css b/css/styles.css
index a6d0e126..0c58651a 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -7638,6 +7638,10 @@ picture img {
text-transform: none;
}
+.uw-tableau__placeholder {
+ position: relative;
+}
+
.uw-tabs {
margin: 16px auto;
width: 100%;
diff --git a/source/_patterns/04-components/tableau/_tableau.scss b/source/_patterns/04-components/tableau/_tableau.scss
new file mode 100644
index 00000000..bf7d7a59
--- /dev/null
+++ b/source/_patterns/04-components/tableau/_tableau.scss
@@ -0,0 +1,5 @@
+.uw-tableau {
+ &__placeholder {
+ position: relative;
+ }
+}
diff --git a/source/_patterns/04-components/tableau/tableau.twig b/source/_patterns/04-components/tableau/tableau.twig
new file mode 100644
index 00000000..f45d8b9e
--- /dev/null
+++ b/source/_patterns/04-components/tableau/tableau.twig
@@ -0,0 +1,22 @@
+<div class="uw-tableau">
+ <div class="uw-tableau__wrapper">
+ <div class="uw-tableau__placeholder" id="embedded-tableau-{{ tableau.key }}">
+ <object class="tableauViz" type="text/html">
+ <param name="host_url" value="{{ tableau.host_url }}" />
+ <param name="site_root" value="{{ tableau.tableau_site }}" />
+ <param name="name" value="{{ tableau.url }}" />
+ <param name="tabs" value="{{ tableau.tabs }}" />
+ <div class="uw-tableau__no_js_message">Enable JavaScript to view data visualisation.</div>
+ </object>
+ </div>
+ <script>
+ var divElement = document.getElementById('embedded-tableau-{{ tableau.key }}');
+ var vizElement = divElement.getElementsByTagName('object')[0];
+ vizElement.style.width = '100%';
+ vizElement.style.height = '{{ tableau.height }}px';
+ var scriptElement = document.createElement('script');
+ scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
+ vizElement.parentNode.insertBefore(scriptElement, vizElement);
+ </script>
+ </div>
+</div>
diff --git a/source/_patterns/04-components/tableau/tableau.yml b/source/_patterns/04-components/tableau/tableau.yml
new file mode 100644
index 00000000..e9e632f3
--- /dev/null
+++ b/source/_patterns/04-components/tableau/tableau.yml
@@ -0,0 +1,8 @@
+---
+tableau:
+ key: '1'
+ host_url: 'https://public.tableau.com/'
+ tableau_site:
+ url: 'SPINTERIM_ExperientialLearning/Incoming-IND'
+ tabs: 'no'
+ height: '650'
--
GitLab