<p class="page-intro-text" translate>This is the Ongoing Risk Assessment for <b>{{dashboardName}}</b>.</p>

<div class="error" ng-if="errMessage" >{{errMessage | translate}}</div>

<div class="loadingIndicator" style="width: 1200px; height: 500px;" ng-show="loading" translate>Loading dashboard elements...</div>

<div class="dashboardTabs" ng-if="tabs.length > 1">
    <div ng-class="(t.tabId===tab ? 'dashboardTabSelected' : 'dashboardTab')" ng-repeat="t in tabs track by t.tabId" ng-click="changeTab(t.tabId)" ng-style="{'background-color': (t.tabId===tab ? t.tabSelectedColor : t.tabColor) }">
      {{t.tabText}} <i class="fa fa-info-circle icon-as-button" title="{{ 'Help' | translate }}" aria-hidden="true" ng-click="showDashboardHelp(t.tabTitle, t.tabHelpText, $event)" ng-if="t.tabHelpText"></i>
    </div>
</div>

<div ng-repeat="el in visibleElements" class="dashboard-element dashboard-element-{{el.type}}">
    <h2 class="dashboard-title-{{el.type}}"><a id="{{el.viewKey}}"></a>{{el.title}} <i class="fa fa-info-circle icon-as-button" title="{{ 'Help' | translate }}" aria-hidden="true" ng-click="showDashboardHelp(el.title, el.options.helpText)" ng-if="el.options.helpText"></i></h2>


    <div zoom-key="{{el.viewKey}}" ng-switch on="el.type">
        <div ng-switch-when="html" ng-bind-html="el.options.html">
        </div>

        <div ng-switch-when="iframe">
            <iframe src="{{el.options.insecureUrl}}" height="{{el.options.height}}" width="{{el.options.width}}"></iframe>
        </div>

        <div ng-switch-when="notes">
            <dashboard-notes keyword-id="el.options.keywordID" enable-keywords="el.options.enableKeywords" show-search="el.options.showSearch" status-filter="el.options.statusFilter" show-status-filter="el.options.showStatusFilter" show-keyword-filter="el.options.showKeywordFilter" limit-to="el.options.limitTo" show-more="el.options.showMore" show-impacts="el.options.showImpacts" impacts-risk-category="el.options.impactsRiskCategory" impacts-risk-category-description="el.options.impactsRiskCategoryDescription" show-new="el.options.showNew" source-link="/tree/{{id}}#{{el.viewKey}}" call-on-change></dashboard-notes>
        </div>

        <div ng-switch-when="timeSeries">
            <time-series-chart width="1200" height="500" legend-width="el.options.legendWidth" content-file="el.options.dataFile" time-column="el.options.timeColumn" line-columns="el.options.lineColumns" area-columns="el.options.areaColumns" relative-areas="el.options.relativeAreas" two-axes="el.options.twoAxes" y-axis-fix="el.options.yAxisFix" mvg-avg-default="el.options.mvgAvgDefault" initial-brush-from="el.options.initialBrushFrom" notes-enabled="el.options.notesEnabled" notes-options="el.options.notesOptions"></time-series-chart>
        </div>

        <div ng-switch-when="stackedBars">
            <stacked-bar-chart  width="1200" height="500" legend-width="el.options.legendWidth" content-file="el.options.dataFile" time-column="el.options.timeColumn" bar-column="el.options.barColumn" content-columns="el.options.showColumns" content-bar-columns="el.options.showBarColumns" notes-enabled="el.options.notesEnabled" notes-options="el.options.notesOptions"></stacked-bar-chart>
        </div>

        <div ng-switch-when="scatterplot">
            <scatterplot-chart  width="1200" height="500"
            legend-width="el.options.legendWidth"
            circle-size="el.options.circleSize"
            content-file="el.options.dataFile"
            content-time="el.options.timeColumn"
            content-x="el.options.xColumn" content-y="el.options.yColumn"
            content-size="el.options.sizeColumn"
            content-group="el.options.groupColumn"
            content-title="el.options.contentTitle"
            tooltip="el.options.tooltip" label-x="el.options.xLabel"
            label-y="el.options.yLabel"
	    group-custom-colors="el.options.groupCustomColors"
	    notes-enabled="el.options.notesEnabled" notes-options="el.options.notesOptions"></scatterplot-chart>
        </div>

        <div ng-switch-when="portfolio">
            <portfolio-chart  width="1200" height="500" legend-width="el.options.legendWidth" content-file="el.options.dataFile" content-time="el.options.timeColumn" content-x="el.options.xColumn" content-y="el.options.yColumn" content-group="el.options.groupColumn" content-divide="el.options.contentDivide" content-title="el.options.contentTitle" tooltip="el.options.tooltip" line-columns="el.options.lineColumns" label-x="el.options.xLabel" label-y="el.options.yLabel" group-custom-colors="el.options.groupCustomColors" notes-enabled="el.options.notesEnabled" notes-options="el.options.notesOptions"></portfolio-chart>
        </div>

        <div ng-switch-when="table">
            <table-chart content-file="el.options.dataFile" content-time="el.options.timeColumn" content-first-column="el.options.firstColumn" content-columns="el.options.showColumns" column-column="el.options.columnColumn" value-column="el.options.valueColumn" heatmap-from="el.options.heatmapFrom" heatmap-to="el.options.heatmapTo" show-sparklines="el.options.showSparklines" show-column-sparklines="el.options.showColumnSparklines" sparklines-use-global-max="el.options.sparklinesUseGlobalMax" notes-enabled="el.options.notesEnabled" notes-options="el.options.notesOptions"></table-chart>
        </div>

        <div ng-switch-when="riskTracker">
            <risk-tracker width="1200" height="500" risk-category="el.options.riskCategory" risk-category-description="el.title" risk-x-label="el.options.xLabel" risk-x-labels="el.options.xLabels" risk-y-label="el.options.yLabel" risk-y-labels="el.options.yLabels" max-days-old="el.options.maxDaysOld" show-impacts="el.options.showImpacts" source-link="/tree/{{id}}#{{el.viewKey}}"></risk-tracker>
        </div>

        <div ng-switch-when="objectExplorer">
            <object-explorer width="el.options.width" height="el.options.height" mapping-key="el.options.mappingKey" elements="el.options.elements" view-type="el.options.viewType" views="el.options.views" source-link="/tree/{{id}}#{{el.viewKey}}"></object-explorer>
        </div>

    </div>
</div>


