Add dataSelected event demo.

2016-09-12 15:54:28 -07:00 · 2016-09-12 15:54:28 -07:00 · 69690c301f
--- a/demo/app/dataselection.js
+++ b/demo/app/dataselection.js
@ -0,0 +1,39 @@
+$(function () {
+  var models = window['powerbi-client'].models;
+
+  console.log('Scenario 7: Data Selection');
+
+  var reportUrl = 'https://powerbiembedapi.azurewebsites.net/api/dxt/reports/c4d31ef0-7b34-4d80-9bcb-5974d1405572';
+  var $reportContainer = $('#reportContainer');
+  var report;
+  var $dataSelectedContainer = $("#dataSelectedContainer");
+
+  // Init
+  fetch(reportUrl)
+    .then(function (response) {
+      if (response.ok) {
+        return response.json()
+          .then(function (embedConfig) {
+            report = powerbi.embed($reportContainer.get(0), embedConfig);
+            initializeDataSelection(report, $dataSelectedContainer);
+            return report;
+          });
+      }
+      else {
+        return response.json()
+          .then(function (error) {
+            throw new Error(error);
+          });
+      }
+    });
+});
+
+function initializeDataSelection(report, $dataSelectedContainer) {
+  report.on('dataSelected', event => {
+    console.log('dataSelected: ', event);
+
+    var data = event.detail;
+
+    $dataSelectedContainer.text(JSON.stringify(data, null, '  '));
+  });
+}
--- a/demo/dataselection.html
+++ b/demo/dataselection.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Power BI - Sample - Client - JavaScript</title>
+    <base path="/" />
+    
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="styles/app.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Power BI - Sample - Client - Javascript</h1>
+      <p>Demonstrate how to consume Power BI API and render using core library. <a href="https://github.com/microsoft/PowerBI-JavaScript" target="_blank">PowerBI-JavaScript</a></p>
+      
+      <h2>Scenarios:</h2>
+      <ul id="navigation" class="nav nav-pills">
+          <li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
+          <li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
+          <li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
+          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
+          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
+          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class="active"><a href="dataselection.html">Scenario 7: Data Selection</a></li>
+      </ul>
+
+      <h2>Data Selection Events</h2>
+      <p>Respond to user selecting data.</p>
+
+      <div id="reportContainer" class="powerbi-container"></div>
+
+      <h2>Data Selected Event Data:</h2>
+      <p>Notice the event.detail contains information about the visual the user clicked and the page the visual is on. It also contains details about the data the user clicked such as identity, value, and regions if applicable.</p>
+      <p>Note: the values rendered in the tooltip are currently not returned in event but we hope to have this feature soon.</p>
+      <pre id="dataSelectedContainer">
+      </pre>
+    </div>
+
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="bower_components/es6-promise/es6-promise.js"></script>
+    <script src="bower_components/fetch/fetch.js"></script>
+    <script src="bower_components/powerbi-client/dist/powerbi.js"></script>
+
+    <script src="app/dataselection.js"></script>
+
+  </body>
+</html>
--- a/demo/defaults.html
+++ b/demo/defaults.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class="active"><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Default Page and/or Default Filter</h2>
--- a/demo/dynamic.html
+++ b/demo/dynamic.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Dynamic Embed</h2>
--- a/demo/filters.html
+++ b/demo/filters.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class="active"><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Custom Filter Pane</h2>
--- a/demo/index.html
+++ b/demo/index.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Static Embed</h2>
--- a/demo/pagenavigation.html
+++ b/demo/pagenavigation.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Custom Page Navigation</h2>
--- a/demo/settings.html
+++ b/demo/settings.html
@ -23,6 +23,7 @@
          <li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
          <li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
          <li id="pageLinkSettings" class="active"><a href="settings.html">Scenario 6: Update Settings</a></li>
+          <li id="pageLinkDataSelection" class=""><a href="dataselection.html">Scenario 7: Data Selection</a></li>
      </ul>

      <h2>Update Settings</h2>