{% load static %} {% block individual_analytics_section %} <div class="row col-md-11 px-2 py-2 align-items-end mb-4"> <div class="col-md-2 px-1 py-1"> <div class="grey-text"> {{ ttl_user }} </div> <div class="white-bg filter-box border"> <select id="sltUser" class="filter-input no-focus grey-text size-13 form-control selectpicker text-start" data-style="no-focus no-border grey-text size-13" data-size="10" data-live-search="true"> </select> </div> </div> <div class="col-md-2 px-1 py-1"> <div class="grey-text"> {{ det_from }} </div> <div class="white-bg filter-box border"> <input id="individualFromDate" type="date" class="filter-input no-focus px-2 size-13 form-control" minlength="10" maxlength="10"> </div> </div> <div class="col-md-2 px-1 py-1"> <div class="grey-text"> {{ det_to }} </div> <div class="white-bg filter-box border"> <input id="individualToDate" type="date" class="filter-input no-focus px-2 size-13 form-control" minlength="10" maxlength="10"> </div> </div> {% if has_contextual_search_permission %} <div class="col-md-2 px-1 py-1"> <div class="grey-text"> {{ ttl_tags }} </div> <div class="white-bg filter-box border"> <select id="sltTagsIndividual" class="filter-input no-focus grey-text size-13 form-control selectpicker text-start" data-style="no-focus no-border grey-text size-13" data-size="10" data-live-search="true" multiple=multiple> </select> </div> </div> {% endif %} <div class="col-md-1 px-1 py-1"> <button id="btnIndividualRender" class="plain-btn"> {{ ins_render }} </button> </div> </div> <div class="py-3 light-grey-bg"> <div class="row px-2"> <div class="col px-1 py-2"> <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm"> <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_incidents }} </div> <div id="incidentCount" class="d-block grey-text bold-600 size-30"> </div> </div> </div> <div class="col px-1 py-2"> <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm"> <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ det_avg }} {{ ttl_acknowledgement_time }} </div> <div id="acknowledgementTime" class="d-block grey-text bold-600 size-30"> </div> </div> </div> <div class="col px-1 py-2"> <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm"> <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ det_avg }} {{ ttl_resolution_time }} </div> <div id="resolutionTime" class="d-block grey-text bold-600 size-30"> </div> </div> </div> <div class="col px-1 py-2"> <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm"> <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_responsiveness }} </div> <div id="responsiveness" class="d-block grey-text bold-600 size-30"> </div> </div> </div> <div class="col px-1 py-2"> <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm"> <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_effectiveness }} </div> <div id="effectiveness" class="d-block grey-text bold-600 size-30"> </div> </div> </div> </div> <div class="row px-2 py-2"> <div class="col-md-6 mb-2 px-1"> <div align="center" class="white-bg border rounded shadow-sm"> <span class="grey-text size-13 bold-600 center-text py-2"> {{ det_fatigue }} <span class="text-lowercase"> ({{ det_weekly }}) </span> </span> <canvas class="w-100 px-2 pt-0 pb-2" height="145" id="chartUserFatigue"></canvas> </div> </div> <div class="col-md-3 mb-2 px-1"> <div class="h-100 py-2 d-block justify-content-center white-bg border rounded shadow-sm" align="center"> <span class="d-block grey-text size-13 bold-600 center-text py-2"> {{ ttl_interruptions }} ({{ dsm_hours_per_day }}) </span> <p id="interruptionHours"></p> <p id="interruptionHoursQualitative" class="grey-text size-13 bold-600 center-text pb-1"></p> </div> </div> <div class="col-md-3 mb-2 px-1"> <div class="h-100 py-2 d-block justify-content-center white-bg border rounded shadow-sm" align="center"> <span class="d-block grey-text size-13 bold-600 center-text py-2"> {{ ttl_rest_between_incidents }} ({{ dsm_hours }}) </span> <p id="restHours"></p> <p id="restHoursQualitative" class="grey-text size-13 bold-600 center-text pb-1"></p> </div> </div> </div> <div class="row px-2 py-2 mb-2"> <div class="col-md-8 mb-2 px-1"> <div class="py-2 white-bg border rounded shadow-sm" align="center"> <p class="grey-text size-13 bold-600 center-text py-2"> {{ ttl_hourly_effectiveness }} </p> <canvas class="w-100 px-2 pt-0 pb-2" height="185" id="chartHourlyEffectiveness"></canvas> </div> </div> <div class="col-md-4 mb-2 px-1 tc-height-180"> <div class="py-2 px-2 white-bg border rounded shadow-sm" align="center"> <p class="grey-text size-13 bold-600 center-text py-2"> {{ det_avg }} {{ ttl_effectiveness }} </p> <div class="row align-items-center pt-1"> <div class="col-md-7 px-3 tc-height-180"> <canvas class="h-100" height="160" id="chartAvgEffectiveness"></canvas> </div> <div class="col-md-5 ps-3"> <p id="lblAvgEffectiveness"></p> <p id="effectivenessQualitativeOne" class="grey-text size-13 bold-600 text-center"></p> </div> </div> </div> </div> </div> <div class="px-2 py-2 white-bg border rounded shadow-sm" align="center"> <div class="grey-text size-13 bold-600 center-text pt-2 pb-4"> {{ ttl_incident_assignment_distribution }} </div> <div id="divPolicyWorkloadCharts" class="d-flex flex-row tc-height-200"></div> </div> </div> {% endblock %}