JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#fragment-1">Paris</a></li>
    <li><a href="#fragment-2">New York</a></li>
    <li><a href="#fragment-3">Gross_Profit_Margin_by_Location</a></li>
    <li><a href="#fragment-4">Pie_Chart</a></li>
  </ul>
  <div id="fragment-1">
    <span class="rainy">&nbsp;</span>
    <div class="weather">
      <h2>17<span>&ordm;C</span></h2>
      <p>Rainy weather in Paris.</p>

    </div>
  </div>
  <div id="fragment-2">
    <span class="sunny">&nbsp;</span>
    <div class="weather">
      <h2>29<span>&ordm;C</span></h2>
      <p>Sunny weather in New York.</p>
    </div>
  </div>
  <div id="fragment-3">

    <span class="sunny">&nbsp;</span>
    <div class="weather">
      <h2>21<span>&ordm;C</span></h2>
      <p>Gross_Profit_Margin_by_Location.</p>
      <div id="xcontainer2">

      </div>
    </div>

  </div>

  <div id="fragment-4">
    <div class="weather">
      <h2>16<span>&ordm;C</span></h2>
      <p>Pie_Chart.</p>
      <div id="xcontainer1">

      </div>

    </div>
  </div>
</div>

JavaScript

$("#tabs").tabs({});

visualize(function(v) {
  let cDashboard = v.dashboard({
    resource: "/Self_Service/Gross_Profit_Margin_by_Location",
    container: "#xcontainer2",
    success: function() {
      console.log("dashboard rendered");
    },
    error: function(e) {
      alert(e);
    },
    params: {},
    runImmediately: true
  });

  let cDashboard2 = v.dashboard({
    resource: "/Self_Service/Pie_Chart",
    container: "#xcontainer1",
    success: function() {
      console.log("dashboard rendered");
    },
    error: function(e) {
      alert(e);
    },
    params: {},
    runImmediately: true
  });

});