JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.rawgit.com/predictionmachines/InteractiveDataDisplay/v1.0.2/dist/idd.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.min.js"></script>
<script src="https://cdn.rawgit.com/predictionmachines/InteractiveDataDisplay/v1.0.2/dist/idd.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<div id="tabs">
<ul>
<li><a href="#graph1">First</a></li>
<li><a href="#graph2">Second</a></li>
</ul>
<div id="graph1">
<div id="chart1" data-idd-plot="chart" class="chart"></div>
</div>
<div id="graph2">
<div id="chart2" data-idd-plot="chart" class="chart"></div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#graph1 {
background-color: teal;
}
#graph2 {
background-color: lightseagreen;
}
.chart {
width: 100%;
height: 100%;
}
JavaScript
// Tries to get IDD plot object from jQuery selector
// Returns null if selector is null or DOM object is not an IDD master plot
function tryGetIddMasterPlot(jqElem) {
if(jqElem && jqElem.hasClass("idd-plot-master")) {
var domElem = jqElem.get(0);
if('plot' in domElem)
return domElem.plot;
else
return null;
}
return null;
}
// Traverses descendants of jQuery selector and invokes updateLayout
// for all IDD master plots
function updateIddLayout(jqElem) {
var plot = tryGetIddMasterPlot(jqElem);
if(plot)
plot.updateLayout();
else {
var c = jqElem.children();
for(var i = 0;i<c.length;i++)
updateIddLayout(c.eq(i));
}
}
// Ensures that IDD controls within tabs reacts responsively
// to windows resize and tab switching
function makeResponsiveIddTabs(jqTabs) {
var selectedPanel = null;
jqTabs.on("tabsactivate", function(event, ui) {
selectedPanel = ui.newPanel;
updateIddLayout(selectedPanel);
});
$(window).resize(function() {
jqTabs.tabs("refresh");
updateIddLayout(selectedPanel);
});
}
// Application code itself
$(document).ready(function () {
var jqTabs = $("#tabs");
jqTabs.tabs({
heightStyle: "fill"
});
makeResponsiveIddTabs(jqTabs);
InteractiveDataDisplay.asPlot($("#chart1"));
InteractiveDataDisplay.asPlot($("#chart2"));
});