287 lines
13 KiB
HTML
287 lines
13 KiB
HTML
<div ux-id="chart-container" class='chart__container'>
|
|
<div class="row full-width">
|
|
<label class="label_control-wrap">
|
|
<div ux-id="perspective-dropdown" class="pull-right dropdown chart__perspective-container" ng-if="supportGroups.length">
|
|
<div class="chart__group-label chart__perspective-label">{{ 'chart.perspective.label' | i18n }}:</div>
|
|
<div class="chart__perspective-dropdown">
|
|
<selection
|
|
selection-items="perspectiveDropdown.data"
|
|
selected-item="perspectiveDropdown.selectedItem"
|
|
selection-callback="fetchDataByGroup(item)"
|
|
title-text=""
|
|
label="label"
|
|
value="name"
|
|
update-selected-item="true"
|
|
selection-filter="true"
|
|
selection-filter-placeholder-text="common.placeholder.search">
|
|
</selection>
|
|
</div>
|
|
</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 ux-id="chart-incident" class="chart__section-body">
|
|
<div class="row full-screen chart__resolution-group">
|
|
<div class="col-sm-4">
|
|
<div class="chart__resolution-group-container">
|
|
<div ux-id="chart-incident-ontime-data" 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 ux-id="chart-incident-accepted-data" 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 ux-id="chart-incident-firstcall-data" 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 ng-if="!state.incidentDataIsLoading" class="row full-screen chart__rtl-padding__right">
|
|
<div ux-id="incident-line-chart" class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl" ng-class="{'jparealinechart' : (myitsmLocale == 'ja')}">
|
|
<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="row">
|
|
<div class="btn-group chart-section__area-btn-group">
|
|
<button ux-id="chart-incident-filter1" aria-label="{{ 'chart.area.filter1' | i18n }}" type="button" class="small-btn_secondary" ng-model="incidentRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('incident', '30')" title="{{ 'chart.area.filter1' | i18n }}">{{ 'chart.area.filter1' | i18n }}</button>
|
|
<button ux-id="chart-incident-filter2" aria-label="{{ 'chart.area.filter2' | i18n }}" type="button" class="small-btn_secondary" ng-model="incidentRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('incident', '180')" title="{{ 'chart.area.filter2' | i18n }}">{{ 'chart.area.filter2' | i18n }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 ux-id="incident-bar-chart" class="col-sm-6 chart-column">
|
|
<div class="chart__section-label">{{ 'chart.incident.open.label' | i18n }}</div>
|
|
<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 ux-id="chart-workorder" class="chart__section-body">
|
|
<div class="row full-screen chart__resolution-group">
|
|
<div class="col-sm-4">
|
|
<div class="chart__resolution-group-container">
|
|
<div ux-id="chart-workorder-ontime-data" 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 ux-id="chart-workorder-scheduled-data" 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 ng-if="!state.workorderDataIsLoading" class="row full-screen chart__rtl-padding__right">
|
|
<div ux-id="workorder-line-chart" class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<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 ux-id="chart-workorder-filter1" aria-label="{{ 'chart.area.filter1' | i18n }}" type="button" class="small-btn_secondary" ng-model="workorderRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('workorder', '30')" title="{{ 'chart.area.filter1' | i18n }}">{{ 'chart.area.filter1' | i18n }}</button>
|
|
<button ux-id="chart-workorder-filter2" aria-label="{{ 'chart.area.filter2' | i18n }}" type="button" class="small-btn_secondary" ng-model="workorderRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('workorder', '180')" title="{{ 'chart.area.filter2' | i18n }}">{{ 'chart.area.filter2' | i18n }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<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 ux-id="workorder-bar-chart" class="col-sm-6 chart-column">
|
|
<div class="chart__section-label">{{ 'chart.workorder.open.label' | i18n }}</div>
|
|
<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 ux-id="chart-srm" class="chart__section-body">
|
|
<div class="row full-screen chart__resolution-group">
|
|
<div class="col-sm-4">
|
|
<div class="chart__resolution-group-container">
|
|
<div ux-id="chart-srm-ontime-data" 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 ux-id="chart-srm-scheduled-data" 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 ng-if="!state.requestDataIsLoading" class="row full-screen chart__rtl-padding__right">
|
|
<div ux-id="srm-line-chart" class="col-sm-6 chart-column no-padding-left line-chart__tooltip-rtl">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<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 ux-id="chart-srm-filter1" aria-label="{{ 'chart.area.filter1' | i18n }}" type="button" class="small-btn_secondary" ng-model="requestRadioModel" btn-radio="'30'" ng-click="refreshBacklogData('request', '30')" title="{{ 'chart.area.filter1' | i18n }}" title="{{ 'chart.area.filter1' | i18n }}">{{ 'chart.area.filter1' | i18n }}</button>
|
|
<button ux-id="chart-srm-filter2" aria-label="{{ 'chart.area.filter2' | i18n }}" type="button" class="small-btn_secondary" ng-model="requestRadioModel" btn-radio="'180'" ng-click="refreshBacklogData('request', '180')" title="{{ 'chart.area.filter2' | i18n }}" title="{{ 'chart.area.filter2' | i18n }}">{{ 'chart.area.filter2' | i18n }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<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 ux-id="srm-bar-chart" class="col-sm-6 chart-column">
|
|
<div class="chart__section-label">{{ 'chart.servicerequest.open.label' | i18n }}</div>
|
|
<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 ux-id="chart-change" 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 ux-id="change-pie-chart" class="chart__section-clearfix chart-column" style="height:250px" id="changeDashboardPieChart">
|
|
<svg height="250">
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div ux-id="change-bar-chart" class="col-sm-6 chart-column">
|
|
<nvd3-discrete-bar-chart
|
|
data="changeBarChartData"
|
|
height="250"
|
|
yAxisTickFormat="yMultiBarChartFunction()"
|
|
valueFormat="yMultiBarChartFunction()"
|
|
showXAxis="true"
|
|
showYAxis="true"
|
|
showValues="true"
|
|
staggerLabels="true"
|
|
color="changeBarColorFunction()">
|
|
</nvd3-discrete-bar-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |