<div class="qmod-ui-tool qmod-heatmap-module"><h2 class="qmod-heading qmod-hbg">{'Heatmap Module' | i8ln tLang}</h2><div class="qmod-invalid-symbol" rv-if="scope.invalidsymbol">{'invalidmix' | i8ln tLang}</div><div class="qmod-heatmap-nav" rv-ifclass="scope.loading" data-qmod-true-class="qmod-disabled"><button class="qmod-no-btn qmod-back-btn" rv-if="scope.binders.previous.visible" rv-on-click="scope.binders.menu.change" rv-hide="scope.loading" data-type="4"><i class="qmod-icon qm_icon-arrow-left-med" aria-hidden="true"></i><span>{'back to performance' | i8ln tLang}</span></button><div class="qmod-heatmap-nav-inner"><div class="qmod-nav-source"><div class="qmod-drop-wrap" rv-ifclass="scope.loading" data-qmod-true-class="qmod-disabled"><button class="qmod-drop-cont" id="heatmap-dropdown" rv-on-click="scope.binders.menu.click" aria-label="Select a view" aria-haspopup="listbox" rv-aria-expanded="scope.dropdown.open" rv-on-blur="scope.binders.menu.blur"><span class="qmod-dd-text">{scope.binders.menu.list | getMode scope.mode}</span><i class="qmod-icon qmod-dd-arrow qm_icon-arrow-chevron-down-med" rv-ifclass="scope.binders.menu.open" data-qmod-true-class="rotate-chevron-up" data-qmod-false-class="rotate-chevron-down" aria-hidden="aria-hidden"></i></button><div class="qmod-drop-menus"> <div class="qmod-drop-items" rv-show="scope.binders.menu.open" rv-on-blur="scope.binders.menu.blur"><ul class="qmod-drop-menu" id="heatmap-dropdown-list" tabindex="-1" role="listbox" aria-labelledby="qmod-dropdown" rv-aria-activedescendant="scope.binders.menu.selected | preFixWord 'qmod-heatmap-dropdown-item-'"><li class="qmod-drop-item-li" rv-on-click="scope.binders.menu.change" rv-class-qmod-active="scope.binders.menu.index | = index" rv-data-type="type.value" role="option" rv-id="index | preFixWord 'qmod-dropdown-item-'" rv-each-type="scope.binders.menu.list" rv-on-mouseenter="scope.binders.menu.mouseHandler"><a class="qmod-drop-item">{type.label}</a><ul class="qmod-drop-menu" rv-if="type.value | = 3" rv-show="scope.binders.menu.watchlists | and scope.binders.menu.open"><li class="qmod-drop-item-li" rv-each-watchlist="scope.binders.watchlist.list" role="option" rv-id="index | preFixWord 'qmod-heatmap-watchlist-dropdown-item-'"><a class="qmod-drop-item" rv-on-click="scope.binders.watchlist.change" rv-data-type="type.value" rv-data-symbols="watchlist.symbols" rv-class-qmod-active="watchlist.value | = scope.binders.watchlist.selected | and scope.mode | = 3">{watchlist.label}</a></li></ul><ul class="qmod-drop-menu" rv-if="type.value | = 2" rv-show="scope.binders.menu.portfolios | and scope.binders.menu.open"><li class="qmod-drop-item-li" rv-each-portfolio="scope.binders.portfolio.list" role="option" rv-id="index | preFixWord 'qmod-heatmap-portfolio-dropdown-item-'"><a class="qmod-drop-item" rv-on-click="scope.binders.portfolio.change" rv-data-type="type.value" rv-data-symbols="portfolio.symbols" rv-class-qmod-active="portfolio.value | = scope.binders.portfolio.selected | and scope.mode | = 2">{portfolio.label}</a></li></ul></li></ul></div></div></div><div class="qmod-industry-source" rv-show="scope.mode | = 1"><div class="qmod-button-industry"><a class="qmod-industry-toggle" rv-on-click="scope.binders.modals.open" data-qmod-modal="0"><i class="qmod-icon qm_icon-other-sld" aria-hidden="true"></i><span>&nbsp;</span><span>{tplLang.changeindustry | toLang tLang}</span></a></div><div class="qmod-industry">{scope.industry}</div></div></div><div class="qmod-index-selected" rv-if="scope.mode | = 0" rv-hide="scope.loading">{scope.binders.indices.list | getLabelByValue scope.binders.indices.selected}</div><div class="qmod-btn qmod-customize-btn qmod-blue" rv-on-click="scope.showOptions"><i class="qmod-icon qm_icon-adjust-horiz-square-med" aria-hidden="true"></i><span>&nbsp;</span><span>Customize</span></div><div class="qmod-popup-wrapper" rv-show="scope.optionsShowing" rv-on-click="scope.hideOptions"></div><div class="qmod-heatmap-controls" rv-show="scope.optionsShowing"><div class="qmod-heatmap-modal-header"><h3 class="qmod-heatmap-controls-label">{tplLang.customize_heatmap | toLang tLang}</h3><i class="qmod-icon qm_icon-close-med" rv-on-click="scope.hideOptions" rv-aria-label="'close' | i8ln tLang"></i></div><div class="qmod-heatmap-modal-body"><div class="pure-u-1" rv-show="scope.mode | = '0'"><span class="qmod-size-label">{tplLang.index_group | toLang tLang}:</span><div class="qmod-dropdown qmod-dropdown-indices-group"><a class="qmod-dropdown_toggle qmod-dropdown"><span>{scope.binders.indices.list | getLabelByValue scope.binders.indices.selected}</span><i class="qmod-icon qmod-dd-arrow qm_icon-arrow-chevron-down2-med" aria-hidden="true"></i></a><ul class="qmod-dropdown-menu qmod-dropdown"><li rv-each-index="scope.binders.indices.list"><a rv-on-click="scope.binders.indices.change" rv-data-type="index.value" rv-class-qmod-active="index.value | = scope.binders.indices.selected">{index.label}</a></li></ul></div></div><div class="pure-u-1" rv-show="scope.mode | = '0'"><span class="qmod-size-label">{tplLang.index | toLang tLang}:</span><div class="qmod-dropdown qmod-dropdown-indices"><a class="qmod-dropdown_toggle qmod-dropdown"><span>{nested-list scope.binders.indices.selected | getNestedLabelByValue scope.binders.indices.selected > scope.domUpdateInt}</span><i class="qmod-icon qmod-dd-arrow qm_icon-arrow-chevron-down2-med" aria-hidden="true"></i></a><ul class="qmod-dropdown-menu qmod-dropdown"><li rv-each-index="scope.binders.indices.list | nested-list scope.binders.indices.selected"><a rv-on-click="scope.binders.indices.changeIndex" rv-data-type="index.value" rv-class-qmod-active="true | getNestedActive index.value scope.binders.indices scope.binders.indices.selected &gt; scope.domUpdateInt">{index.label}</a></li></ul></div></div><span class="qmod-size-label" rv-if="scope.treemapEnabled">{"size" | i8ln tLang}:</span><div class="qmod-dropdown qmod-size-menu qmod-dropdown-size" rv-if="scope.treemapEnabled"><a class="qmod-dropdown_toggle qmod-dropdown"><span>{scope.binders.sizeBy.list | getSizeBy scope.sizeBy}</span><i class="qmod-icon qmod-dd-arrow qm_icon-arrow-chevron-down2-med" aria-hidden="true"></i></a><ul class="qmod-dropdown-menu qmod-dropdown"><li rv-each-type="scope.binders.sizeBy.list"><a rv-on-click="scope.binders.sizeBy.change" rv-data-type="type.value" rv-class-qmod-active="type.value | = scope.binders.sizeBy.selected">{type.label}</a></li></ul></div><div class="qmod-nav-settings"><div class="pure-u-1" rv-if="scope.binders.filter.enabled"><span class="qmod-size-label">{'Filter' | i8ln tLang}:</span><div class="qmod-heatmap-nav-icons"><div class="qmod-change-switch"><div class="pure-u-1-2 qmod-change" rv-class-qmod-active="scope.changeType |= 'dollar'" rv-on-click="scope.toggleChangeType"><i class="qmod-icon qm_icon-dollar-bld" aria-label="By Dollar Amount"></i></div><div class="pure-u-1-2 qmod-change-percent" rv-class-qmod-active="scope.changeType |= 'percent'" rv-on-click="scope.toggleChangeType" rv-ifclass="scope.percentDisabled" data-qmod-true-class="qmod-disabled"><i class="qmod-icon qm_icon-percent-bld" aria-label="By Percent Change"></i></div></div></div><div class="pure-u-1" rv-on-click="scope.toggleSortOrder" rv-hide="scope.treemapEnabled"><span class="qmod-size-label">{'Sort Order' | i8ln tLang}:</span><div class="qmod-sort-order"><i class="qmod-icon qm_icon-arrow-up-med" rv-show="scope.ascending"></i><i class="qmod-icon qm_icon-arrow-down-med" rv-hide="scope.ascending"></i></div></div></div></div><div class="pure-u-1" rv-show="scope.showFlags"><div class="qmod-buttons-country"><span>{'Country' | i8ln tLang}:</span><span class="qmod-country-buttons"><span rv-each-compare="scope.binders.countryOptions.list"><a class="qmod-buttons-country-link" rv-on-click="scope.binders.countryOptions.change" rv-class-qmod-active="scope.binders.countryOptions.selected|= index"><span class="qmod-flag flag" rv-addclass="compare.label | str_replace 'US' 'USA'"></span></a></span></span></div></div><div class="pure-u-1"><span class="qmod-size-label">{'View' | i8ln tLang}:</span><div class="qmod-dropdown qmod-dropdown-timeslice"><a class="qmod-dropdown_toggle qmod-dropdown"><span>{scope.binders.timeslice.list | getIndex scope.binders.timeslice.selected | getIndex 'label'}</span><i class="qmod-icon qmod-dd-arrow qm_icon-arrow-chevron-down2-med" aria-hidden="aria-hidden"></i></a><ul class="qmod-dropdown-menu qmod-dropdown"><li rv-each-ts="scope.binders.timeslice.list"><a rv-on-click="scope.binders.timeslice.change" rv-data-ts="ts.value" rv-class-qmod-active="ts.value | = scope.binders.timeslice.selected">{ts.label}</a></li></ul></div></div></div><div class="qmod-heatmap-modal-footer"><div class="qmod-btn qmod-apply-options-btn qmod-blue" rv-on-click="scope.applyOptions">{'update' | i8ln tLang}</div></div></div><div class="qmod-popup-wrapper" rv-show="scope.binders.modals.show" rv-on-click="scope.binders.industryOptions.submit"></div><div class="qmod-popup qmod-industry-select" rv-show="scope.binders.modals.show"><div class="qmod-popup-body"><div class="qmod-modal-content" rv-show="scope.binders.modals.selected|= 0"><div class="qmod-industry-body"><div class="industry-column"><ul class="qmod-industry-menu" rv-if="scope.binders.industryOptions.data.0.group"><li class="qmod-sector-item qmod-sector-item-sector" rv-each-sector="scope.binders.industryOptions.data" rv-ifclass="sector.name |= scope.binders.industryOptions.sector.name" data-qmod-true-class="qmod-active"><a class="qmod-truncate" rv-on-click="scope.binders.industryOptions.change" rv-data-qmod-code="sector.code" rv-data-qmod-name="sector.name" rv-data-sector-index="index" rv-data-qmod-depth="1"><i class="qmod-sector-icon qmod-icon" rv-sector-icon="sector.name" aria-hidden="true"></i><span class="qmod-sector-name">{sector.name}</span></a></li></ul></div><div class="industry-column"><ul class="qmod-industry-submenu" rv-if="scope.binders.industryOptions.sector.group"><li class="qmod-sector-item qmod-sector-item-group" rv-each-group="scope.binders.industryOptions.sector.group" rv-ifclass="group.name |= scope.binders.industryOptions.sector.group.name" data-qmod-true-class="qmod-active"><a rv-on-click="scope.binders.industryOptions.change" rv-data-qmod-code="group.code" rv-data-qmod-name="group.name" rv-data-qmod-depth="2"><span>{group.name}</span></a></li></ul></div><div class="industry-column"><ul class="qmod-industry-submenu" rv-if="scope.binders.industryOptions.sector.group.industry"><li class="qmod-sector-item qmod-sector-item-industry" rv-each-industry="scope.binders.industryOptions.sector.group.industry" rv-ifclass="industry.name |= scope.binders.industryOptions.sector.group.industry.name" data-qmod-true-class="qmod-active"><a rv-on-click="scope.binders.industryOptions.change" rv-data-qmod-code="industry.code" rv-data-qmod-depth="3" rv-data-qmod-name="industry.name"><span>{industry.name}</span></a></li></ul></div></div><div class="qmod-popup-footer"> <div class="qmod-btn qmod-apply-options-btn qmod-apply-sector-options-btn qmod-blue" rv-on-click="scope.binders.industryOptions.submit">{'apply changes' | i8ln tLang}</div></div></div></div></div></div><div class="qmod-heatmap-legend pure-u-xl-1-2" rv-if="scope.legendEnabled"><div class="qmod-legend-indicator"><i class="qmod-icon qm_icon-arrow-caret-down-sld" aria-hidden="true"></i></div><div class="qm-legend-bar"><div class="qm-legend-fill1"></div><div class="qm-legend-fill2"></div></div></div></div><!--heatmap --><div class="qmod-heatmap-single" rv-unless="scope.treemapEnabled" rv-hide="scope.loading"><ul class="qmod-heatmap-con" rv-unless="scope.noData"><li class="qmod-heatmap-block" rv-each-sym="scope.myData" rv-background-color="sym" rv-data-symbol="sym.symbol" rv-on-click="scope.clickBlock" rv-class-qmod-clickable="scope.mode | = 4"><span class="qmod-hm-symbol" rv-unless="scope.mode | = 4">{sym.symbol}</span><span class="qmod-hm-symbol" rv-if="scope.mode | = 4">{sym.symbol | getSector}</span><span class="qmod-actionmenu" rv-if="scope.showActions"><actionmenu actionMenuOpts="actionMenuOpts" forwardSymbol="sym.symbol"></actionmenu></span><div class="qmod-change" rv-unless="scope.changeType | = 'percent'"> <span rv-if="scope.binders.timeslice.selected |= 0">{sym.change | numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 1">{sym.day7| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 2">{sym.day21| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 3">{sym.day30| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 4">{sym.day90| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 5">{sym.day180| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 6">{sym.day200| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 7">{sym.monthtodate| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 8">{sym.quartertodate| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 9">{sym.yeartodate| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 10">{sym.year3change| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 11">{sym.year5change| numeraljs '0,0.00' '0.00' tLang '0'}</span><span rv-if="scope.binders.timeslice.selected |= 12">{sym.year10change| numeraljs '0,0.00' '0.00' tLang '0'}</span></div><div class="qmod-changepct" rv-unless="scope.changeType | = 'dollar'"> <span rv-if="scope.binders.timeslice.selected |= 0">{sym.changepercent| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 1">{sym.day7pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 2">{sym.day21pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 3">{sym.day30pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 4">{sym.day90pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 5">{sym.day180pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 6">{sym.day200pct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 7">{sym.monthtodatepct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 8">{sym.quartertodatepct| numeraljs '0,0.00' '0.00' tLang '0'}%</span><span rv-if="scope.binders.timeslice.selected |= 9">{sym.yeartodatepct| numeraljs '0,0.00' '0.00' tLang '0'}%</span></div><div class="qmod-entitlement qmod-textr">{sym.entitlement}</div></li></ul></div><div class="qmod-sector-grid qmod-sector-performance" rv-if="scope.mode | = 4 | and scope.treemapEnabled" rv-hide="scope.loading"><div class="qmod-sector-heatmap pure-u-lg-1-3 pure-u-md-1-2" rv-each-heatmap="scope.myData"><div class="qmod-sector-title-con"><div class="qmod-sector-title"><span class="qmod-sector-name">{heatmap.title} </span><span class="qmod-sector-value" rv-qmodchange="heatmap.value">{heatmap.value | numeraljsplus '0,0.00' '0.00' tLang '0'}%</span></div><div class="qmod-treemap" rv-addClass="'qmod-treemap-' | postFixWord index"> </div></div></div><span class="qmod-actionmenu qmod-treemapactions" rv-if="scope.showActions"><actionmenu actionMenuOpts="actionMenuOpts"></actionmenu></span></div><!-- Render non-performance sector grid only when treemap is enabled and mode != 4--><div rv-if="scope.treemapEnabled"><div class="qmod-sector-grid" rv-unless="scope.mode | = 4" rv-hide="scope.loading"><div class="qmod-sector-title-con" rv-unless="scope.noData"><div class="qmod-sector-heatmap" rv-each-heatmap="scope.myData"><div class="qmod-sector-title"> <div class="qmod-treemap" rv-class="'qmod-treemap-' | postFixWord index" rv-unless="scope.noData"> </div></div></div></div></div><span class="qmod-actionmenu qmod-treemapactions" rv-if="scope.showActions"><actionmenu actionMenuOpts="actionMenuOpts"></actionmenu></span></div><div class="qmod-loader-class" rv-if="scope.loading"><div class="qmod-loader-threedot"></div></div><div class="qmod-no-data" rv-if="scope.noData"><div>{'nodata' | i8ln tLang} {scope.missing}</div></div><div class="qmod-no-data" rv-if="scope.fatalError"><div>{'the server reported an error:' | i8ln tLang} {scope.error}</div></div><div class="qmod-disclaimer"><span class="qmod-hidden-symbols" rv-if="scope.hiddenSymbols" rv-hide="scope.loading">{'instruments without market cap are excluded' | i8ln tLang} {scope.error}</span><span class="qmod-sector-disclaimer" rv-if="scope.sectorDisclaimer" rv-hide="scope.loading">{'sector/industry results are limited to the top 500 companies based on market capitalization.' | i8ln tLang | str_replace '500' scope.limit}</span></div></div>