Michelle,
Ok then this should do:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.3.css">
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-3.x.min-v0.3.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/esri/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriPopup .contentPane {
height: 235px;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
#header {
text-align: center;
height: 60px;
border-bottom: solid 1px #ccc;
}
</style>
</head>
<body class="calcite calcite-maps calcite-nav-top calcite-zoom-top-left calcite-layout-small-title">
<!-- Navbar -->
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">
<!-- Menu -->
<div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
<a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
<div class="calcite-dropdown-toggle">
<span class="sr-only">Toggle dropdown menu</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
<ul class="dropdown-menu">
<li><a role="button" data-target="#panelMeasure" aria-haspopup="true"><span class="glyphicon glyphicon-th-large"></span> Measure Panel</a></li>
<li><a role="button" data-target="#panelPopup" aria-haspopup="true"><span class="glyphicon glyphicon-equalizer glyphicon"></span> Popup Panel</a></li>
</ul>
</div>
</nav>
<!--end Navbar -->
<!-- Map Container -->
<div class="calcite-map">
<div id="mapViewDiv" class="calcite-map-absolute"></div>
</div>
<!-- end Map Container -->
<!-- Panels -->
<div class="calcite-panels calcite-panels-right calcite-bg-dark calcite-text-light panel-group" role="tablist" aria-multiselectable="true">
<!-- Measure Panel -->
<div id="panelMeasure" class="panel collapse">
<div id="headingMeasure" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseMeasure" aria-expanded="true" aria-controls="collapseMeasure"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span><span class="panel-label">Measure Panel</span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelMeasure"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseMeasure" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMeasure">
<div class="panel-body">
<div id="measurementDiv"></div>
</div>
</div>
</div>
<!-- Popup Panel -->
<div id="panelPopup" class="panel collapse">
<div id="headingPopup" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapsePopup" aria-expanded="true" aria-controls="collapsePopup"><span class="glyphicon glyphicon-equalizer glyphicon" aria-hidden="true"></span><span class="panel-label">Popup Panel</span></a>
<a class="panel-close" role="button" data-toggle="collapse" data-target="#panelPopup"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapsePopup" class="panel-collapse" role="tabpanel" aria-labelledby="headingPopup">
<div class="panel-body">
<div id="leftPane"></div>
<div id="header">
<div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
<div id="pager" style="display:none;">
<a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
< Prev </a>
<a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
Next >
</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
}, {
name: "calcite-maps",
location: "https://esri.github.io/calcite-maps/dist/js/dojo"
}]
};
</script>
<!-- JavaScript 3.20 -->
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/map",
"esri/InfoTemplate",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojox/charting/Chart2D",
"dojox/charting/action2d/MoveSlice",
"dojo/dom-construct",
"dojo/dom-class",
"esri/arcgis/utils",
"esri/dijit/Measurement",
"esri/dijit/PopupTemplate",
"dojo/query",
"dojo/on",
"esri/dijit/Popup",
"dijit/registry",
"esri/domUtils",
"dojo/dom",
"calcite-maps/calcitemaps-v0.3",
"bootstrap/Collapse",
"bootstrap/Dropdown",
"bootstrap/Tab",
"dojo/domReady!"
],
function(Map, InfoTemplate, TabContainer, ContentPane, Chart2D, MoveSlice, domConstruct, domClass, arcgisUtils, Measurement,
PopupTemplate, query, on, Popup, registry, domUtils, dom, CalciteMaps) {
esri.config.defaults.io.proxyUrl = "/proxy/";
esri.config.defaults.io.alwaysUseProxy = false;
esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
arcgisUtils.createMap("a7892820987c499ea376fe558b54eab3", "mapViewDiv", {
usePopupManager: true
}).then(function(response) {
window.map = response.map;
map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);
var template = new InfoTemplate();
template.setTitle("Title");
template.setContent(getWindowContent);
var featureLayer = map.getLayer(map.graphicsLayerIds[0]);
featureLayer.infoTemplate = template;
function getWindowContent(graphic) {
var tc = new TabContainer({
style: "width:100%;height:100%;",
tabPosition: "left-h"
},
domConstruct.create("div")
);
var cp1 = new ContentPane({
title: "Chart 1"
});
tc.addChild(cp1);
var c1 = domConstruct.create("div", domConstruct.create("div"));
var chart1 = new Chart2D(c1);
domClass.add(chart1, "chart");
chart1.addPlot("default", {
type: "Pie",
labelOffset: 25,
stroke: {
width: 2.5,
color: "#fff"
}
});
tc.watch("selectedChildWidget", function(name, oldVal, newVal) {
if (newVal.title === "Chart") {
chart1.resize(180, 180)
}
});
var L1_ha = graphic.attributes.L1__ha_;
var L1_proc = graphic.attributes.L1____;
var L2_ha = graphic.attributes.L2__ha_;
var L2_proc = graphic.attributes.L2____;
var L3_ha = graphic.attributes.L3__ha_;
var L3_proc = graphic.attributes.L3____;
var L4_ha = graphic.attributes.L4__ha_;
var L4_proc = graphic.attributes.L4____;
var L5_ha = graphic.attributes.L5__ha_;
var L5_proc = graphic.attributes.L5____;
chart1.addSeries("Chart1", [{
y: L1_ha,
fill: "#A50026"
},
{
y: L2_ha,
fill: "#F98D52"
},
{
y: L3_ha,
fill: "#FFFFBF"
},
{
y: L4_ha,
fill: "#86CB67"
},
{
y: L5_ha,
fill: "#006837"
}
]);
new MoveSlice(chart1, "default");
cp1.set("content", chart1.node);
setTimeout(function() {
chart1.resize(180, 180);
}, 200);
return tc.domNode
}
var measurement = new Measurement({
map: window.map,
}, dojo.byId('measurementDiv'));
measurement.startup();
on(measurement, "tool-change", function(evt) {
if (!evt.toolName) {
window.map.setInfoWindowOnClick(true);
} else {
window.map.setInfoWindowOnClick(false);
}
});
},
function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
function initializeSidebar(map) {
var lp = new ContentPane({style:"height:235px"}, dom.byId("leftPane"));
lp.startup();
var popup = window.map.infoWindow;
on(popup, "selection-change", function() {
displayPopupContent(popup.getSelectedFeature());
});
on(popup, "clear-features", function() {
dom.byId("featureCount").innerHTML = "Click to select feature(s)";
registry.byId("leftPane").set("content", "");
domUtils.hide(dom.byId("pager"));
});
on(popup, "set-features", function(evt) {;
if(popup.getSelectedFeature()){
if(!domClass.contains(query("#panelPopup")[0],"in")){
query("#panelPopup").collapse("toggle");
}
displayPopupContent(popup.getSelectedFeature());
}
dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
});
}
function displayPopupContent(feature) {
if (feature) {
var content = feature.getContent();
registry.byId("leftPane").set("content", content);
}
}
function selectPrevious() {
window.map.infoWindow.selectPrevious();
}
function selectNext() {
window.map.infoWindow.selectNext();
}
}
)
</script>
</body>
</html>