SmartIT_Extensions/BMC/smart-it-full/views/chart/chart-statistics.html

<div class='chart__container'>
	<div class="row full-width">
		<label class="label_control-wrap">
			<div class="chart__group-filter pull-right dropdown" ng-if="supportGroups.length">
				<span class="chart__group-label">{{ 'chart.perspective.label' | i18n }}:</span>
				<button type="button" class="btn btn-default dropdown-toggle">
					{{ selectedGroup }} <span class="icon-angle_down"></span>
				</button>
				<ul class="dropdown-menu dropdown-menu-right">
					<li ng-if="myCompanySelected">
						<a href="#" class="dropdown-item" role="menuitem" ng-click="fetchDataByGroup('myGroups')">{{ 'chart.perspective.myGroups' | i18n }}</a>
					</li>
					<li>
						<a href="#" class="dropdown-item" role="menuitem" ng-click="fetchDataByGroup('allGroups')">{{ 'chart.perspective.allGroups' | i18n }}</a>
					</li>
					<li ng-repeat="item in supportGroups">
						<a href="#" class="dropdown-item" role="menuitem" ng-click="fetchDataByGroup(item)">{{item.name}}</a>
					</li>
				</ul>
			</div>
		</label>
	</div>

	<div class='ticket-chart__container' ng-if="isITSMAgent">
		<div loading-spinner if="state.incidentDataIsLoading" centered="true" overlay="true"></div>
		<div class="chart__section-header chart__section-header_first">{{ 'common.labels.incident' | i18n }}</div>
		<div class="chart__section-body">
			<div class="row full-screen chart__resolution-group">
				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{incidentKeyPerformanceData.onTimeData.status}}">{{incidentKeyPerformanceData.onTimeData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.resolution.onTime.label' | i18n }}</div>
					</div>
				</div>

				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{incidentKeyPerformanceData.acceptedData.status}}">{{incidentKeyPerformanceData.acceptedData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.resolution.accepted.label' | i18n }}</div>
					</div>
				</div>

				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{incidentKeyPerformanceData.firstCallData.status}}">{{incidentKeyPerformanceData.firstCallData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.resolution.firstCall.label' | i18n }}</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-6">
					<div loading-spinner if="state.incidentBacklogIsLoading" centered="true" overlay="true"></div>
					<div class="chart-section__area">
						<div class="chart-section__area-label">{{ 'chart.incident.label' | i18n }}</div>
						<div class="btn-group chart-section__area-btn-group">
							<button type="button" class="small-btn_secondary" ng-model="incidentRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('incident', '30')">{{ 'chart.area.filter1' | i18n }}</button>
							<button type="button" class="small-btn_secondary" ng-model="incidentRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('incident', '180')">{{ 'chart.area.filter2' | i18n }}</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="chart__section-label">{{ 'chart.incident.open.label' | i18n }}</div>
				</div>
			</div>

			<div ng-if="!state.incidentDataIsLoading" class="row full-screen chart__rtl-padding__right">
				<div class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl">
					<nvd3-line-chart
						data="incidentAreaLineChartData"
						height="250"
						showXAxis="true"
						showYAxis="true"
						xAxisTickFormat="xAreaLineChartFunction()"
						forcey="[0,10]"
						margin="{right: 20}"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						useInteractiveGuideline="true"
						showLegend="true">
					</nvd3-line-chart>
				</div>
				<div class="col-sm-6 chart-column">
					<nvd3-multi-bar-chart
						data="incidentMultiBarChartData"
						height="250"
						yAxisTickFormat="yMultiBarChartFunction()"
						showXAxis="true"
						showYAxis="true"
						forcey="[0,10]"
						groupSpacing="0.1"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						stacked="true"
						color="colorFunction()"
						legendColor="colorFunction()"
						showLegend="true">
					</nvd3-multi-bar-chart>
				</div>
			</div>
		</div>
	</div>

	<div class='ticket-chart__container' ng-if="isWOInstalled">
		<div loading-spinner if="state.workorderDataIsLoading" centered="true" overlay="true"></div>
		<div class="chart__section-header">{{ 'common.labels.workorder' | i18n }}</div>
		<div class="chart__section-body">
			<div class="row full-screen chart__resolution-group">
				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{workorderKeyPerformanceData.onTimeData.status}}">{{workorderKeyPerformanceData.onTimeData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.resolution.onTime.label' | i18n }}</div>
					</div>
				</div>

				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{workorderKeyPerformanceData.scheduledData.status}}">
							{{workorderKeyPerformanceData.scheduledData.value}}
						</div>
						<div class="chart__resolution-label">{{ 'chart.percent.scheduled.label' | i18n }}</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-6">
					<div loading-spinner if="state.workorderBacklogIsLoading" centered="true" overlay="true"></div>
					<div class="chart-section__area">
						<div class="chart-section__area-label">{{ 'chart.workorder.label' | i18n }}</div>
						<div class="btn-group chart-section__area-btn-group">
							<button type="button" class="small-btn_secondary" ng-model="workorderRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('workorder', '30')">{{ 'chart.area.filter1' | i18n }}</button>
							<button type="button" class="small-btn_secondary" ng-model="workorderRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('workorder', '180')">{{ 'chart.area.filter2' | i18n }}</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="chart__section-label">{{ 'chart.workorder.open.label' | i18n }}</div>
				</div>
			</div>


			<div ng-if="!state.workorderDataIsLoading" class="row full-screen chart__rtl-padding__right">
				<div class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl">
					<nvd3-line-chart
						data="workorderAreaLineChartData"
						height="250"
						showXAxis="true"
						showYAxis="true"
						xAxisTickFormat="xAreaLineChartFunction()"
						forcey="[0,10]"
						margin="{right: 20}"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						useInteractiveGuideline="true"
						showLegend="true">
					</nvd3-line-chart>
				</div>
				<div class="col-sm-6 chart-column">
					<nvd3-multi-bar-chart
						data="workorderMultiBarChartData"
						height="250"
						xAxisStaggerLabels="true"
						yAxisTickFormat="yMultiBarChartFunction()"
						showXAxis="true"
						showYAxis="true"
						forcey="[0,10]"
						groupSpacing="0.1"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						stacked="true"
						color="colorFunction()"
						legendColor="colorFunction()"
						showLegend="true">
					</nvd3-multi-bar-chart>
				</div>
			</div>
		</div>
	</div>

	<div class='ticket-chart__container' ng-if="isSRMInstalled">
		<div loading-spinner if="state.requestDataIsLoading" centered="true" overlay="true"></div>
		<div class="chart__section-header">{{ 'common.labels.request' | i18n }}</div>
		<div class="chart__section-body">
			<div class="row full-screen chart__resolution-group">
				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{requestKeyPerformanceData.onTimeData.status}}">{{requestKeyPerformanceData.onTimeData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.resolution.onTime.label' | i18n }}</div>
					</div>
				</div>

				<div class="col-sm-4">
					<div class="chart__resolution-group-container">
						<div class="chart__resolution-status-{{requestKeyPerformanceData.acceptedData.status}}">{{requestKeyPerformanceData.acceptedData.value}}</div>
						<div class="chart__resolution-label">{{ 'chart.completion.accepted.label' | i18n }}</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-sm-6">
					<div loading-spinner if="state.requestBacklogIsLoading" centered="true" overlay="true"></div>
					<div class="chart-section__area">
						<div class="chart-section__area-label">{{ 'chart.servicerequest.label' | i18n }}</div>
						<div class="btn-group chart-section__area-btn-group">
							<button type="button" class="small-btn_secondary" ng-model="requestRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('request', '30')">{{ 'chart.area.filter1' | i18n }}</button>
							<button type="button" class="small-btn_secondary" ng-model="requestRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('request', '180')">{{ 'chart.area.filter2' | i18n }}</button>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="chart__section-label">{{ 'chart.servicerequest.open.label' | i18n }}</div>
				</div>
			</div>

			<div ng-if="!state.requestDataIsLoading" class="row full-screen chart__rtl-padding__right">
				<div class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl">
					<nvd3-line-chart
						data="requestAreaLineChartData"
						height="250"
						showXAxis="true"
						showYAxis="true"
						xAxisTickFormat="xAreaLineChartFunction()"
						forcey="[0,10]"
						margin="{right: 20}"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						useInteractiveGuideline="true"
						showLegend="true">
					</nvd3-line-chart>
				</div>
				<div class="col-sm-6 chart-column">
					<nvd3-multi-bar-chart
						data="requestMultiBarChartData"
						height="250"
						xAxisStaggerLabels="true"
						yAxisTickFormat="yMultiBarChartFunction()"
						showXAxis="true"
						showYAxis="true"
						forcey="[0,10]"
						groupSpacing="0.1"
						tooltips="true"
						noData="{{'chart.label.noData' | i18n}}"
						stacked="true"
						color="colorFunction()"
						legendColor="colorFunction()"
						showLegend="true">
					</nvd3-multi-bar-chart>
				</div>
			</div>
		</div>
	</div>

	<div class='ticket-chart__container' ng-if="isChangeInstalled">
		<div loading-spinner if="state.changeDataIsLoading" centered="true" overlay="true"></div>
		<div class="chart__section-header">{{ 'ticket.type.change' | i18n }}</div>
		<div class="chart__section-body">
			<div class="row">
				<div class="col-sm-6">
					<div class="chart__section-label">{{ 'chart.change.label' | i18n }}</div>
				</div>
				<div class="col-sm-6">
					<div class="chart__section-label">{{ 'chart.change.statistics.label' | i18n }}</div>
				</div>
			</div>

			<div ng-if="!state.changeDataIsLoading" class="row full-screen">
				<div class="col-sm-6">
					<div class="chart__section-clearfix chart-column" style="height:250px" id="changeDashboardPieChart">
						<svg height="250">
						</svg>
					</div>
				</div>
				<div class="col-sm-6 chart-column">
					<nvd3-discrete-bar-chart
						data="changeBarChartData"
						height="250"
						yAxisTickFormat="yMultiBarChartFunction()"
						valueFormat="yMultiBarChartFunction()"
						showXAxis="true"
						showYAxis="true"
						showValues="true"
						color="changeBarColorFunction()">
					</nvd3-discrete-bar-chart>
				</div>
			</div>
		</div>
	</div>
</div>