31:T51b,trex = { var title_text = title.innerText; var xml = `

en_US

Tableau Extension

1.3

https://wishyoulization.github.io/tableau.html?notebook=${notebook_path}

${title_text || "Tableau Extension from Observable Notebook"} `; var file_name = encodeURI((title_text || "tableau-extension") + ".trex"); return DOM.download( new Blob([xml], { type: "application/xml" }), file_name, "⚡ Download TREX - " + title_text ); }32:[{"id":"e178ad55a3759ca011e391dcfcaafa8062e9009687a20286ad09d296a35deb7c8b9cdfe1ab64e087f6a0d3f0e7bedda49a594c560e69e8af26c7de122e725c62","href":"https://static.observableusercontent.com/files/e178ad55a3759ca011e391dcfcaafa8062e9009687a20286ad09d296a35deb7c8b9cdfe1ab64e087f6a0d3f0e7bedda49a594c560e69e8af26c7de122e725c62","name":"Configure.png","type":"image/png","lastModified":1589648945170.587,"size":3179},{"id":"98e34780aaf04398b1249ff431d8dd417627beb74b425abb58a6648ade84c45845ba99bc017be2fce66cf90748a9ae8b9b717af1ddc4f5f0dec02e3b4bd97682","href":"https://static.observableusercontent.com/files/98e34780aaf04398b1249ff431d8dd417627beb74b425abb58a6648ade84c45845ba99bc017be2fce66cf90748a9ae8b9b717af1ddc4f5f0dec02e3b4bd97682","name":"tableau.extensions.1.4.0.min.js","type":"application/javascript","lastModified":1589648945170.587,"size":164245},{"id":"538ca1c8384cecf6f727c1b106dbb4a95ca5a2f6a818aed0762012ff0ad30744b415fc3bba7fd2079277896ca78729fecabb8f56aa81e36bc7ad13e492df484c","href":"https://static.observableusercontent.com/files/538ca1c8384cecf6f727c1b106dbb4a95ca5a2f6a818aed0762012ff0ad30744b415fc3bba7fd2079277896ca78729fecabb8f56aa81e36bc7ad13e492df484c","name":"cover@1.png","type":"image/png","lastModified":1589653427846.805,"size":20632}] 2f:{"title":"Tableau Extension: Difference Chart","cells":[{"id":0,"value":"title = md`# Tableau Extension: Difference Chart `","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`Create **Tableau Extensions** using *Observable notebooks* to add bespoke data visualizations to your dashboards effortlessly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"{\n var img = await FileAttachment(\"cover@1.png\").url();\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"md`## 💬 How to use this extension in Tableau?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`*To start using this extention, click on the **Download TREX** button and add it as an extension to your dashboard.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`## ⚙️ Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`Once you downloaded and added the extension to your Tableau dashboard, you will need to configure it. Click on the *Configure* button in the context menu on the extension element, the same*(this)* page as you see now will display in a pop-up window. But the dropdowns will magically start to populate your worksheet's details. Make your selections and click on *Save config* button. *That's it!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"FileAttachment(\"Configure.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof source_sheet = select({\n title: \"📃 Source Sheet\",\n options: [\"\"].concat(worksheets.map(d => d.name)),\n value: (old_config && old_config.source_sheet) || \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"viewof field_date = select({\n title: \"✏️ Field Date\",\n options: [\"\"].concat(field_names_in_selected_sheet),\n value: (old_config && old_config.field_date) || \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof field_a = select({\n title: \"✏️ Field A\",\n options: [\"\"].concat(field_names_in_selected_sheet),\n value: (old_config && old_config.field_a) || \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof field_b = select({\n title: \"✏️ Field B\",\n options: [\"\"].concat(field_names_in_selected_sheet),\n value: (old_config && old_config.field_b) || \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"viewof color_1 = color({\n title: \"✏️ Low color\",\n value: (old_config && old_config.color_1) || \"#91bfdb\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"viewof color_2 = color({\n title: \"✏️ High color\",\n value: (old_config && old_config.color_2) || \"#fc8d59\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof config = {\n var elm = html``;\n var config = JSON.stringify({\n source_sheet,\n field_date,\n field_a,\n field_b,\n color_1,\n color_2\n });\n elm.value = config;\n elm.onclick = () => {\n if (tableau && tableau.extensions && tableau.extensions.settings) {\n tableau.extensions.settings.set('CONFIG', config);\n tableau.extensions.settings.saveAsync();\n }\n };\n return elm;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"md`## 🌟 Custom visual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md`*The **embed** cell will be the canvas of the extension element on your dashboard, any viewof must be set to have this cell name.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"viewof embed = chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"chart_data = {\n //This is mock data for demonstration, when embedded it would be empty unless configured.\n var time_parser = d3.timeParse(\"%Y-%m-%d %H:%M:%S\");\n var data = is_tableau_embed\n ? transformed_data\n : location.href.match(/observable/)\n ? [\n { field_date: \"2019-01-01 00:00:00\", field_a: 70, field_b: 40 },\n { field_date: \"2019-02-01 00:00:00\", field_a: 60, field_b: 30 },\n { field_date: \"2019-03-01 00:00:00\", field_a: 50, field_b: 40 },\n { field_date: \"2019-04-01 00:00:00\", field_a: 40, field_b: 50 },\n { field_date: \"2019-05-01 00:00:00\", field_a: 40, field_b: 50 },\n { field_date: \"2019-06-01 00:00:00\", field_a: 30, field_b: 60 },\n { field_date: \"2019-07-01 00:00:00\", field_a: 20, field_b: 70 }\n ]\n : [];\n return data.map(d => {\n d.date = time_parser(d.field_date);\n d.value0 = +d.field_a;\n d.value1 = +d.field_b;\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"viewof height = {\n var dom = html`

📏 Sets height of visual

`;\n dom.value = getHeight();\n function getHeight() {\n if (is_tableau_embed) {\n return (\n Math.max(\n document.documentElement.clientHeight,\n window.innerHeight || 0\n ) - 8\n );\n } else {\n return 300;\n }\n }\n function setHeight() {\n dom.value = getHeight();\n dom.dispatchEvent(new CustomEvent(\"input\"));\n }\n window.addEventListener('resize', setHeight);\n invalidation.then(() => {\n window.removeEventListener('resize', setHeight);\n });\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"colors = [color_1, color_2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"import { chart, d3 } with {\n chart_data as data,\n height,\n colors,\n margin\n} from '@d3/difference-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`## 🔧 Extension code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"md`*If you are not a developer, the notes will tell you what the code does in each cell.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`*Check if this notebook is running inside Tableau*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof is_tableau_embed = {\n var elm = html`

`;\n elm.value = tableau.extensions.environment ? true : false;\n elm.innerHTML = elm.value ? \"🍭 In Tableau\" : \"🚫 Not Tableau\";\n elm.addEventListener('input', () => {\n elm.innerHTML = elm.value ? \"🍭 In Tableau\" : \"🚫 Not Tableau\";\n });\n return elm;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"viewof old_config = {\n const elm = html`

⌛ Awaiting stored config 

`;\n elm.value = {};\n elm.addEventListener('input', () => {\n elm.innerHTML = \"💽 Restored config\";\n });\n return elm;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"md`*Initialize the extention and register the configure popup. If not loading for the first time, fetch the config saved earlier.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"function tableauExtensionConfig() {\n tableau.extensions.ui\n .displayDialogAsync(\n `https://wishyoulization.github.io/tableau.html?notebook=${notebook_path}&popup`,\n \"\",\n {\n height: 500,\n width: 600\n }\n )\n .then(closePayload => {\n console.log('Dialog close payload: ', closePayload);\n })\n .catch(error => {\n switch (error.errorCode) {\n case tableau.ErrorCodes.DialogClosedByUser:\n console.log('Dialog was closed by user');\n break;\n default:\n console.error(error.message);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"worksheets = {\n yield [];\n try {\n yield tableau.extensions\n .initializeAsync({ configure: tableauExtensionConfig })\n .then(() => {\n viewof old_config.value = JSON.parse(\n tableau.extensions.settings.get('CONFIG') || \"{}\"\n );\n viewof old_config.dispatchEvent(new CustomEvent(\"input\"));\n tableau.extensions.settings.addEventListener(\n tableau.TableauEventType.SettingsChanged,\n () => {\n viewof old_config.value = JSON.parse(\n tableau.extensions.settings.get('CONFIG') || \"{}\"\n );\n viewof old_config.dispatchEvent(new CustomEvent(\"input\"));\n }\n );\n\n viewof is_tableau_embed.value = tableau.extensions.environment\n ? true\n : false;\n viewof is_tableau_embed.dispatchEvent(new CustomEvent(\"input\"));\n return tableau.extensions.dashboardContent.dashboard.worksheets;\n });\n } finally {\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"field_names_in_selected_sheet = (selected_sheet_data &&\n selected_sheet_data.columns &&\n selected_sheet_data.columns.map(d => d.fieldName)) ||\n []","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"selected_sheet_data = {\n if (source_sheet) {\n var sheet = tableau.extensions.dashboardContent.dashboard.worksheets.find(\n d => d.name == source_sheet\n );\n function fetchData() {\n viewof source_sheet.dispatchEvent(new CustomEvent(\"input\"));\n }\n sheet.addEventListener(tableau.TableauEventType.FilterChanged, fetchData);\n invalidation.then(() => {\n sheet.removeEventListener(\n tableau.TableauEventType.FilterChanged,\n fetchData\n );\n });\n yield sheet.getSummaryDataAsync().then(sumdata => sumdata);\n } else {\n yield [];\n\n //No data so load the mock data temporarily...\n //return FileAttachment('mock_tableau_data@1.json').json();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`*Get list of worksheets in the current dashboard and data for the selected columns. And also transform the data to a format required for the chart and provide crossfilter functionality using a call-back, if needed.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"send_selections_to_tableau = {\n highlight_marks(selected);\n return selected;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"function highlight_marks(values) {\n if (is_tableau_embed) {\n tableau.extensions.dashboardContent.dashboard.worksheets\n .find(d => d.name == source_sheet)\n .selectMarksByValueAsync(\n [\n {\n fieldName: field_a,\n value: values\n }\n ],\n tableau.SelectionUpdateType.Replace\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"md`*Use the transformed_data as an array for your custom visual, and from the visual set the selected to apply an action on Tableau.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"transformed_data = {\n if (is_tableau_embed == false) {\n return [];\n } else {\n var data = selected_sheet_data;\n var arr = [];\n if (!data || !field_date || !field_a || !field_b) {\n return arr;\n } else {\n var column_index_cache = {\n field_date: data.columns.filter(c => c.fieldName === field_date)[0]\n .index,\n field_a: data.columns.filter(c => c.fieldName === field_a)[0].index,\n field_b: data.columns.filter(c => c.fieldName === field_b)[0].index\n };\n data.data.map(d => {\n var tmp = {};\n Object.keys(column_index_cache).map(k => {\n tmp[k] = d[column_index_cache[k]].value;\n });\n arr.push(tmp);\n });\n return arr;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"mutable selected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## 📁 Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"md`*Dependencies for the Tableau extensions library and the input elements used on this notebook.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"tableau_extension_api_1_4_0 = FileAttachment(\n \"tableau.extensions.1.4.0.min.js\"\n).url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"tableau = require(tableau_extension_api_1_4_0).catch(() => window[\"tableau\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import { select, slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## 💻 Developer Notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`*If you would like to use this notebook as a template for making a new extension, begin by forking this notebook, and once you make all the changes, update the below cell to the url of your notebook. This will be used for creating the TREX file.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"notebook_path = \"@a10k/tableau-extension-difference-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`## 📌 Footnotes `","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`*These extensions will by default only work on modern browsers and Tableau desktop, and for Tableau online you are requird to whitelist the URL from the TREX file on your Tableau server. It is possible to download these notebooks, compile them to work with IE11 and make them work offline on an on-premise server as well, check other notebooks in the collection for more details! [wishyoulization.com](https://www.wishyoulization.com/about)*`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}