Merge pull request #422 from tableau/dev

Release version 1.7
tableau · Oct 11, 2021 · cada28c · cada28c
2 parents b165c8e + 7f89ae5
commit cada28c
Show file tree

Hide file tree

Showing 92 changed files with 22,684 additions and 1,850 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,6 @@ npm-debug.log
 dist/
 
 .DS_Store
+
+# ignore local npmrc files
+.npmrc
diff --git a/Samples-Typescript/DashboardLayout/DashboardLayout.trex b/Samples-Typescript/DashboardLayout/DashboardLayout.trex
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
+  <dashboard-extension id="com.tableau.extensions.samples.dashboardlayout" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Dashboard Layout Sample</description>
+    <author name="tableau" email="[email protected]" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.7</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples-Typescript/DashboardLayout/dashboardLayout.html</url>
+    </source-location>
+    <icon>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</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Dashboard Layout Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples-Typescript/DashboardLayout/dashboardLayout.html b/Samples-Typescript/DashboardLayout/dashboardLayout.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Dashboard Layout Sample</title>
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+  <!-- Extensions Library (this will be hosted on a CDN eventually) -->
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our extension's code -->
+  <script src="../../dist/dashboardLayout.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>Dashboard Layout Sample</h1>
+    <button id="dashboard-event-btn" class="btn btn-primary" disabled="true">Add Dashboard Event</button>
+    <hr>
+    <h3>Dashboard Changes</h3>
+    <div id="dashboard-layout-change-list" class="container">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Samples-Typescript/DashboardLayout/dashboardLayout.ts b/Samples-Typescript/DashboardLayout/dashboardLayout.ts
@@ -0,0 +1,154 @@
+import { DashboardLayoutChange, DashboardLayoutChangedEvent, DashboardObject, TableauEvent } from '@tableau/extensions-api-types';
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(async () => {
+  class DashboardLayout {
+    public dashboardObjects: DashboardObject[];
+    private self: DashboardLayout;
+
+    // Avoid globals.
+    constructor(private _$: JQueryStatic) {}
+
+    /**
+     * Initializes the extension
+     */
+    public async initialize() {
+      console.log('Waiting for DOM ready');
+      await this._$.ready;
+      console.log('Initializing extension API');
+      await tableau.extensions.initializeAsync();
+
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      this.dashboardObjects = dashboard.objects;
+      console.log(this.dashboardObjects);
+
+      // enabling dashboard event button
+      this._$('#dashboard-event-btn').prop('disabled', false);
+      this._$('#dashboard-event-btn').click(this.onEventButtonClick.bind(this));
+    }
+
+    // When changes are made to the dashboard we get all the details for each of the
+    // dashboard objects that were changed and compare it with their previous values.
+    // The dashboardLayoutChangeDetails property is a map of dashboard obj3ct ids to
+    // an array of dashboard layout changes.
+    // Dashboard layout change events are invoked when dashboard objects are resized,
+    // repositioned, added, and more. See DashboardLayoutChange in the API documentation
+    // for all possible actions.
+    // Extension reloads when worksheets are added / removed.
+    private onDashboardLayoutChange(event: TableauEvent) {
+      console.log(event);
+      const dashboardEvent = event as DashboardLayoutChangedEvent;
+      const dashboardEventDetails = dashboardEvent.dashboardLayoutChangeDetails;
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+
+      // updating dashboard objects and storing the previous dashboard objects for referrence.
+      const oldDashboardObjects = this.dashboardObjects;
+      this.dashboardObjects = dashboard.objects;
+
+      // An empty dashboard layout change event may be invoked when loading an extension from the manifest.
+      // In this case we ignore it and return.
+      if (dashboardEventDetails === undefined || dashboardEventDetails.size === 0) {
+        return;
+      }
+
+      // Emptying previous content from the UI's change list.
+      this._$('#dashboard-layout-change-list').empty();
+
+      // Updating UI's change list to display information on the current dashboard event.
+      dashboardEventDetails.forEach((changesMade: DashboardLayoutChange[], dashboardObjectId: number) => {
+        // getting dashboard object from its id
+        const dashboardObject = dashboard.getDashboardObjectById(dashboardObjectId);
+
+        // building a div for the changes made to this dashboard object.
+        const changesDiv = this._$('<div>');
+
+        // checking if this dashboard object was added as part of the event.
+        if (changesMade.includes(tableau.DashboardLayoutChange.Added)) {
+          const toAppend = this._$('<h6/>');
+          toAppend.text(`Dashboard Object ${dashboardObjectId} added: "${dashboardObject.name}"`);
+          changesDiv.append(toAppend);
+          this._$('#dashboard-layout-change-list').append(changesDiv);
+          return;
+        }
+
+        // getting old dashboard object before event to compare it with the current one.
+        const oldDashboardObject = oldDashboardObjects.find(o => o.id === dashboardObjectId);
+
+        // checking if this dashboard object was removed as part of the event.
+        if (changesMade.includes(tableau.DashboardLayoutChange.Removed)) {
+          const toAppend = this._$('<h6/>');
+          toAppend.text(`Dashboard Object ${dashboardObjectId} removed: "${oldDashboardObject.name}"`);
+          changesDiv.append(toAppend);
+          this._$('#dashboard-layout-change-list').append(changesDiv);
+          return;
+        }
+
+        // the following dashboard changes are not mutually exclusive, so we list them together.
+        const h6 = this._$('<h6/>');
+        h6.text(`Dashboard Object ${dashboardObjectId}: "${dashboardObject.name}"`);
+        changesDiv.append(h6);
+        const ul = this._$('<ul/>');
+
+        // checking if the dashboard object had changes to its floating state.
+        if (changesMade.includes(tableau.DashboardLayoutChange.IsFloatingChanged)) {
+          const li = this._$('<li/>');
+          li.text(`Floating is now ${dashboardObject.isFloating}, was ${oldDashboardObject.isFloating}`);
+          ul.append(li);
+        }
+
+        // checking if the dashbaord object had changes to its visibility.
+        if (changesMade.includes(tableau.DashboardLayoutChange.IsVisibleChanged)) {
+          const li = this._$('<li/>');
+          li.text(`Visibility is now ${dashboardObject.isVisible}, was ${oldDashboardObject.isVisible}`);
+          ul.append(li);
+        }
+
+        // checking if the dashboard object was repositioned.
+        if (changesMade.includes(tableau.DashboardLayoutChange.PositionChanged)) {
+          const li = this._$('<li/>');
+          const newPos = dashboardObject.position;
+          const oldPos = oldDashboardObject.position;
+          li.text(`Position is now (${newPos.x},${newPos.y}), was (${oldPos.x},${oldPos.y})`);
+          ul.append(li);
+        }
+
+        // checking if the dashboard object was resized.
+        if (changesMade.includes(tableau.DashboardLayoutChange.SizeChanged)) {
+          const li = this._$('<li/>');
+          const newSize = dashboardObject.size;
+          const oldSize = oldDashboardObject.size;
+          li.text(`Size is now ${newSize.width}x${newSize.height}, was ${oldSize.width}x${oldSize.height}`);
+          ul.append(li);
+        }
+
+        // checking if the dashboard object was renamed.
+        if (changesMade.includes(tableau.DashboardLayoutChange.NameChanged)) {
+          const li = this._$('<li/>');
+          li.text(`Name is now "${dashboardObject.name}", was "${oldDashboardObject.name}"`);
+          ul.append(li);
+        }
+
+        changesDiv.append(ul);
+        this._$('#dashboard-layout-change-list').append(changesDiv);
+      });
+    }
+
+    // This function adds a dashboard event if there is not one already, and removes it if there is.
+    private onEventButtonClick() {
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      if ($('#dashboard-event-btn').text() === 'Add Dashboard Event') {
+        dashboard.addEventListener(tableau.TableauEventType.DashboardLayoutChanged,
+          (event) => this.onDashboardLayoutChange(event));
+        $('#dashboard-event-btn').text('Remove Dashboard Event');
+      } else {
+        dashboard.removeEventListener(tableau.TableauEventType.DashboardLayoutChanged,
+          (event) => this.onDashboardLayoutChange(event));
+        $('#dashboard-layout-change-list').empty();
+        $('#dashboard-event-btn').text('Add Dashboard Event');
+      }
+    }
+  }
+
+  console.log('Initializing DashboardLayout extension.');
+  await new DashboardLayout($).initialize();
+})();
diff --git a/Samples-Typescript/Formatting/formatting.html b/Samples-Typescript/Formatting/formatting.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<style>
+  .tooltip-header {
+    position: relative;
+    display: block;
+  }
+
+  .tooltip-header .tooltiptext {
+    visibility: hidden;
+    width: 250px;
+    background-color: rgb(223, 221, 233);
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .tooltip-header .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgb(223, 221, 233) transparent transparent transparent;
+  }
+
+  .tooltip-header:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
+</style>
+<head>
+  <title>Tableau Formatting Demo</title>
+
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+  <!-- Extensions Library (this will be hosted on a CDN eventually) -->
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our webpack'd extension's code -->
+  <script src="../../dist/formatting.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div>
+      <h1>Tableau Formatting Sample</h1>
+      <div id="formattingExample"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Samples-Typescript/Formatting/formatting.trex b/Samples-Typescript/Formatting/formatting.trex
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
+  <dashboard-extension id="com.tableau.extensions.samples.formatting" extension-version="0.6.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Tableau Formatting Sample</description>
+    <author name="tableau" email="[email protected]" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.1</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples-Typescript/Formatting/formatting.html</url>
+    </source-location>
+    <icon>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH4QgLDTYEcBRoeAAABp9JREFUeNrlm01sHEUWx//vVbs79gThjAd2iflIAkEcEARfEciBSYLEbbV8SJaDEpIAMQgkViuirA8IskKcdiEJX3G0C5dNpAVxQLIyiYw4YYIQBw4RBoMgBBIbCRtnOsx0vbcHd9sTZ3r8ge2p2bQ0B/+7unp+1dX/eX71ivL5TgAwAAQAxR/rsiYidvv2btq6ddcqVRwE8JCqgoigqgAAIvpKVbf29v51cHDwUxWRav2pWbdujcH04cUnPFc1EZGOjtv5hRdebv3tt9I+IupWVSaiGBxgJqhqlpnPj42NnchmsxpFUbX+mJORiE9E8eigorEzmohEHR23U1/fO63j47/+nYh2qqpJ4CcHgKEKMPOxIPBfef75PeUwDNPuoclozGxgXdMq4X/5ZWwfEe1Q1crZO/UKENGxIPCfKBbD4U2bNvo17qEeAHYJNA3+jjtuW2x4TgbAAmhyATRNy+XauK/vndaxsfEXFwk+0SIv/kNR/d2rOzwAc+TIu5ExnCeiR2vA9weB3zNXeM/zImutSUzQWfgYUpnNlapa6eCVP3slIjoShheGN2++Z1b4q6/+Q3T69Jng7Nlz0hAmODFxhq+4ol1S4AHAF5Fe3286u2PH1v5Dh9724nOX9Hf8+IfllpaWm8Mw3E2Eo4wGMMGVK1cLM6fBJ9q6cjna39W1c0tX14PW9/2q8JlMy01hGL4C4GlV/IsxHRnVHTRNi2G5BnyirbPWHty+vSe/YcOt5Pv+JfDFYrgfwBYAUNX1jGkTrDtoLU1E7CzwybEWwBsvvfSPe9evvxHGsKbAg4imwk1yBRTVTRCe5xlr7WzwibYGwOsHDry1O4qi/pnwAMDMEBEkL5YToGlaGP7E1tpaJlhNW2ut3e953rZiMfxnJXxlu4aIBJub/1gyxngiMlf4RLvRWnsQgF+tHRGp8yZYKAyUgiC4RVW75gmfaCtQ3UDLqnrUaRMsFAZKK1asuKVcLr+pqncuAD5NswAONzc3P+lsJDgD/q5Fhu/L5bJ/C8Nw1EkTXHr4tr3nzo2Obtx4NzlngssDPzKaz3d6xrBbJriM8E00mUayzvw7vEB4JaL3VfUDZjYARERgjGFrrY01FZGJtrZsoQI+ua9xIhJcKDwzHWU2T5dKpbP9/e/RNdes1h9++J7b26+TH388QwBw/fVrdGjoFJ869aXOgPcQJ0TQyPDd3Q+Pbtq0sQnTma0IF2e4Es2bCY965wQXA/67777nBX4XBlA/E6wzvEG8SFIXE3QAPtGWPyfoELyH+BXAZQq/vCboIPzymaCD8Mtngo7CJ9rSmqDj8Etrgg0Av3Qm2CDwS2OCDQK/NCbYQPCJtngm2IDwi2eCDQq/OCbYwPC/3wQbGD7dBEUkuuqqHHd0bLDbtj0iJ09+wu3t15XiFFM0mXY6zfff/+dSc3PDwieaoXy+M6mgrKzGWjU+Pp5nNq1xchEAWESsMcZYa4WZPVXtmseKjWvwF+cEK+vwkmosa22yNj8FlSxRz3Oh0kl4JCY4nyLEBWiuwk+a4PnzRXsZwk+ZIKlaam1dtSquvb1c4BONiJmzqvoiEe26zOA9ABER0X+I8CfVqcWE3wsPZnqf2ezq7n74Z5fhEQdCD4poNXgBcGEhAyKiH5TL5XOOwzMAZlWli+vtpwuPmflxAF/PdzYwM6dVajqkEQDLafBB4PdYa//d1OQ9parDc4WPD4n7dQG0lmbiJ6Uz4Z8oFsPhzZvv8ffs+Uu/MaYHwDdzhIeIYGLijFOFFymaXlQ9NbPeXkSijz/+xPT07DxGRI8T0bdzeRWMMbxy5WpxCDTdBIloSCR9s4G1loaGvsZzzz1zAsBjyUyoNRustXZGdUa9QWua4CPM/Krvp282KJVK3ueff6GHDx84bozZDWB4FhN0CbR2JLhly708PPytd+21qyNjTM2LiAiFwkDZ87xt1trXAATVZgMz77LWvpXPd85l20pdI0G21uratTfMCg8AhcJAOZNpucla+0AaPIBIRCYGB080hAl6ACAis15UreS8CrwFcLitLXu8UPgw2YvoAmjNSHDWJzUP+L5crm3vyMjoyMDAR67DT5ogZskJzhe+SilavUFrR4KYzglectGzzz4ZZTKZm4vF8NX/M/hEq7owwgCQybREvb37gmKxuBvAfcD0NpNKwwNwKJfLTpWfVoHnKl/CFU05fvoUN9D4ExWLIZ88+dkFIjoK4KsEXkSmBkBV/xsEwd6RkZ9H8/lOJiKN+7mkP1e1/wFtM6PWK/V/BwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wOC0xMVQxMzo1NDowNC0wNDowMMrC9wEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDgtMTFUMTM6NTQ6MDQtMDQ6MDC7n0+9AAAAAElFTkSuQmCC</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Tableau Formatting Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples-Typescript/Formatting/formatting.tsx b/Samples-Typescript/Formatting/formatting.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(async () => {
+
+  class Formatting {
+    // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
+    // will create elements with appropriate class names to get Tableau formatting
+    public async initialize() {
+      console.log('Initializing extension API');
+      await tableau.extensions.initializeAsync();
+      await this.Render();
+    }
+
+    private async Render() {
+      if (tableau.extensions.environment.workbookFormatting) {
+        await this.RenderFormatting();
+      } else {
+        await this.RenderInfoMissing();
+      }
+    }
+
+    private async RenderFormatting() {
+      const tooltipClassNames = 'tooltiptext ' + tableau.ClassNameKey.Tooltip;
+
+      ReactDOM.render(<>
+        <h2 className={tableau.ClassNameKey.WorksheetTitle}>Subheader, using tableau-worksheet-title class</h2>
+        <text className={tableau.ClassNameKey.Worksheet}>Text, using tableau-worksheet class</text>
+        <h3 className='tooltip-header'>Hover to see tooltip text, which is using tableau-tooltip class
+            <span className={tooltipClassNames}>Tooltip text, using tableau-tooltip class</span>
+        </h3>
+        <li className={tableau.ClassNameKey.StoryTitle}>Bullet Point, using tableau-story-title class</li>
+        <text className={tableau.ClassNameKey.DashboardTitle}>Text, using tableau-dashboard-title class</text>
+      </>, document.getElementById('formattingExample'));
+    }
+
+    private async RenderInfoMissing() {
+      const message = 'Tableau formatting information for extensions is missing from this version of Tableau.';
+
+      ReactDOM.render(<>
+        <div style={{color: 'blue'}}>{message}</div>
+      </>, document.getElementById('formattingExample'));
+    }
+  }
+
+  console.log('Initializing Formatting extension.');
+  await new Formatting().initialize();
+})();