Merge pull request #522 from tableau/dev

Merge dev to main for v1.10.0
tableau · Dec 21, 2022 · 3724e65 · 3724e65
2 parents 0a58e84 + a87a4a9
commit 3724e65
Show file tree

Hide file tree

Showing 112 changed files with 29,046 additions and 1,374 deletions.
diff --git a/Samples-Typescript/Annotation/Annotation.trex b/Samples-Typescript/Annotation/Annotation.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.annotation" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Annotation Sample</description>
+    <author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.10</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples-Typescript/Annotation/annotation.html</url>
+    </source-location>
+    <icon>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</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Annotation Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples-Typescript/Annotation/annotation.html b/Samples-Typescript/Annotation/annotation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Annotation 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 -->
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our extension's code -->
+  <script src="../../dist/annotation.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h2>Annotation Sample</h2>
+    <p>Select marks to generate annotations.</p>
+    <div>
+      <p style="display: inline">Worksheet To Annotate:</p>
+      <!-- Options to select will be populated by the Extension -->
+      <select id="worksheet-selection" class="form-select" aria-label="Default select example" style="display: inline" disabled></select>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Samples-Typescript/Annotation/annotation.ts b/Samples-Typescript/Annotation/annotation.ts
@@ -0,0 +1,94 @@
+import { MarksSelectedEvent, TableauEvent, Worksheet } from '@tableau/extensions-api-types';
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(async () => {
+  class Annotation {
+    private worksheets: Worksheet[];
+    private currentWorksheet: Worksheet;
+    private self: Annotation;
+
+    // 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();
+
+      this.worksheets = tableau.extensions.dashboardContent.dashboard.worksheets;
+      if (this.worksheets.length === 0) {
+        return;
+      }
+      // populating selection menu with worksheets
+      this.worksheets.forEach((worksheet, index) => {
+        const menuOption = this._$('<option>').val(index).text(worksheet.name);
+        this._$('#worksheet-selection').append(menuOption);
+      });
+      // selecting the first worksheet by default
+      this.currentWorksheet = this.worksheets[0];
+      this.currentWorksheet.addEventListener(tableau.TableauEventType.MarkSelectionChanged, this.onMarksSelectedEvent);
+      // adding functionality to selection menu
+      this._$('#worksheet-selection').on('click', this.onMenuSelection.bind(this));
+      this._$('#worksheet-selection').prop('disabled', false);
+    }
+
+    // Upon selecting marks, the worksheet will generate annotations replacing the previous ones
+    private async onMarksSelectedEvent(event: TableauEvent) {
+      const markSelectedEvent = event as MarksSelectedEvent;
+      const worksheet = markSelectedEvent.worksheet;
+      const marksCollection = await markSelectedEvent.getMarksAsync();
+      // In most cases the marksCollection will have a single data table
+      const dataTable = marksCollection.data[0];
+      const marksInfo = dataTable.marksInfo;
+      // returning if no marks were selected
+      if (marksInfo.length === 0) {
+        return;
+      }
+
+      // clearing the current annotations
+      const annotations = await worksheet.getAnnotationsAsync();
+      for (const annotation of annotations) {
+        await worksheet.removeAnnotationAsync(annotation);
+      }
+
+      // adding annotations for each of the selected marks
+      marksInfo.forEach(async (markInfo, rowIndex) => {
+        // getting data values corresponding to each markInfo
+        const rowData = dataTable.data[rowIndex];
+        // building annotation text
+        let annotationText = '';
+        dataTable.columns.forEach((column, colIndex) => {
+          annotationText += `${column.fieldName}: ${rowData[colIndex].formattedValue}\n`;
+        });
+        await worksheet.annotateMarkAsync(markInfo, annotationText);
+      });
+    }
+
+    // This function will clear annotations and start listening for marks on the newly selected worksheet.
+    private async onMenuSelection() {
+      const selectedWorksheet = this.worksheets[this._$('#worksheet-selection option:selected').val() as number];
+      if (this.currentWorksheet === selectedWorksheet) {
+        return;
+      }
+      // deactivating current worksheet and clearing annotations
+      this.currentWorksheet.removeEventListener(
+        tableau.TableauEventType.MarkSelectionChanged,
+        this.onMarksSelectedEvent,
+      );
+      const annotations = await this.currentWorksheet.getAnnotationsAsync();
+      for (const annotation of annotations) {
+        await this.currentWorksheet.removeAnnotationAsync(annotation);
+      }
+      // activating selected worksheet
+      selectedWorksheet.addEventListener(tableau.TableauEventType.MarkSelectionChanged, this.onMarksSelectedEvent);
+      this.currentWorksheet = selectedWorksheet;
+    }
+  }
+
+  console.log('Initializing Annotation extension.');
+  await new Annotation($).initialize();
+})();
diff --git a/Samples/Annotation/Annotation.trex b/Samples/Annotation/Annotation.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.annotation" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Annotation Sample</description>
+    <author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.10</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples/Annotation/annotation.html</url>
+    </source-location>
+    <icon>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</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Annotation Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples/Annotation/annotation.html b/Samples/Annotation/annotation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Annotation 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 -->
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our extension's code -->
+  <script src="./annotation.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h2>Annotation Sample</h2>
+    <p>Select marks to generate annotations.</p>
+    <div>
+      <p style="display: inline">Worksheet To Annotate:</p>
+      <!-- Options to select will be populated by the Extension -->
+      <select id="worksheet-selection" class="form-select" aria-label="Default select example" style="display: inline" disabled></select>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Samples/Annotation/annotation.js b/Samples/Annotation/annotation.js
@@ -0,0 +1,75 @@
+'use strict';
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(function () {
+  let worksheets = [];
+  let currentWorksheet;
+
+  $(document).ready(function () {
+    tableau.extensions.initializeAsync().then(function () {
+      worksheets = tableau.extensions.dashboardContent.dashboard.worksheets;
+      if (worksheets.length === 0) {
+        return;
+      }
+      // populating selection menu with worksheets
+      worksheets.forEach((worksheet, index) => {
+        const menuOption = $('<option>').val(index).text(worksheet.name);
+        $('#worksheet-selection').append(menuOption);
+      });
+      // selecting the first worksheet by default
+      currentWorksheet = worksheets[0];
+      currentWorksheet.addEventListener(tableau.TableauEventType.MarkSelectionChanged, onMarksSelectedEvent);
+      // adding functionality to selection menu
+      $('#worksheet-selection').on('click', onMenuSelection);
+      $('#worksheet-selection').prop('disabled', false);
+    });
+  });
+
+  // Upon selecting marks, the worksheet will generate annotations replacing the previous ones
+  async function onMarksSelectedEvent (event) {
+    const worksheet = event.worksheet;
+    const marksCollection = await event.getMarksAsync();
+    // In most cases the marksCollection will have a single data table
+    const dataTable = marksCollection.data[0];
+    const marksInfo = dataTable.marksInfo;
+    // returning if no marks were selected
+    if (marksInfo.length === 0) {
+      return;
+    }
+
+    // clearing the current annotations
+    const annotations = await worksheet.getAnnotationsAsync();
+    for (const annotation of annotations) {
+      await worksheet.removeAnnotationAsync(annotation);
+    }
+
+    // adding annotations for each of the selected marks
+    marksInfo.forEach(async (markInfo, rowIndex) => {
+      // getting data values corresponding to each markInfo
+      const rowData = dataTable.data[rowIndex];
+      // building annotation text
+      let annotationText = '';
+      dataTable.columns.forEach((column, colIndex) => {
+        annotationText += `${column.fieldName}: ${rowData[colIndex].formattedValue}\n`;
+      });
+      await worksheet.annotateMarkAsync(markInfo, annotationText);
+    });
+  }
+
+  // This function will clear annotations and start listening for marks on the newly selected worksheet.
+  async function onMenuSelection () {
+    const selectedWorksheet = worksheets[$('#worksheet-selection option:selected').val()];
+    if (currentWorksheet === selectedWorksheet) {
+      return;
+    }
+    // deactivating current worksheet and clearing annotations
+    currentWorksheet.removeEventListener(tableau.TableauEventType.MarkSelectionChanged, onMarksSelectedEvent);
+    const annotations = await currentWorksheet.getAnnotationsAsync();
+    for (const annotation of annotations) {
+      await currentWorksheet.removeAnnotationAsync(annotation);
+    }
+    // activating selected worksheet
+    selectedWorksheet.addEventListener(tableau.TableauEventType.MarkSelectionChanged, onMarksSelectedEvent);
+    currentWorksheet = selectedWorksheet;
+  }
+})();
diff --git a/Samples/UINamespace-sandboxed/uiNamespace.html b/Samples/UINamespace-sandboxed/uiNamespace.html
@@ -29,6 +29,27 @@
           Configure extension to proceed.
         </div>
       </p>
+      <div class="container" style="border:1px solid #cecece">
+        <h6>Dialog Style</h6>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
+          <label class="form-check-label" for="modalStyle">
+            Modal
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
+          <label class="form-check-label" for="modelessStyle">
+            Modeless
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
+          <label class="form-check-label" for="windowStyle">
+            Window
+          </label>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/Samples/UINamespace-sandboxed/uiNamespace.js b/Samples/UINamespace-sandboxed/uiNamespace.js
@@ -39,6 +39,17 @@
     // to be updated if the extension is deployed to a new location.
     const popupUrl = 'uiNamespaceDialog.html';
 
+    // This checks for the selected dialog style in the radio form.
+    let dialogStyle;
+    const dialogStyleOptions = document.getElementsByName('dialogStyleRadio');
+    if (dialogStyleOptions[0].checked) {
+      dialogStyle = tableau.DialogStyle.Modal;
+    } else if (dialogStyleOptions[1].checked) {
+      dialogStyle = tableau.DialogStyle.Modeless;
+    } else {
+      dialogStyle = tableau.DialogStyle.Window;
+    }
+
     /**
      * This is the API call that actually displays the popup extension to the user.  The
      * popup is always a modal dialog.  The only required parameter is the URL of the popup,
@@ -51,7 +62,7 @@
      * default interval of refresh.
      */
     tableau.extensions.ui
-      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 })
+      .displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500, dialogStyle })
       .then((closePayload) => {
         // The promise is resolved when the dialog has been expectedly closed, meaning that
         // the popup extension has called tableau.extensions.ui.closeDialog.

diff --git a/Samples/UINamespace/uiNamespace.html b/Samples/UINamespace/uiNamespace.html
@@ -10,8 +10,8 @@
     <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>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
     <script src="../../lib/tableau.extensions.1.latest.js"></script>
@@ -29,6 +29,27 @@
           Configure extension to proceed.
         </div>
       </p>
+      <div class="container" style="border:1px solid #cecece">
+        <h6>Dialog Style</h6>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modalStyle" checked>
+          <label class="form-check-label" for="modalStyle">
+            Modal
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="modelessStyle">
+          <label class="form-check-label" for="modelessStyle">
+            Modeless
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="radio" name="dialogStyleRadio" id="windowStyle">
+          <label class="form-check-label" for="windowStyle">
+            Window
+          </label>
+        </div>
+      </div>
     </div>
   </body>
 </html>