[Redizajn 1KA v2] - Testiranje --> Diagnostika - v1

Middle section: grafa za dolžino in kompleksnost ankete

admin/survey/classes/class.SurveyDiagnostics.php

@@ -197,28 +197,42 @@ class SurveyDiagnostics
 
 		if ($total < 120) { # 2min
 			$time = $lang['srv_diagnostic_time_1'];
+			$time_chart = 20;
 		} else if ($total < 300) { # 5min
 			$time = $lang['srv_diagnostic_time_2'];
+			$time_chart = 40;
 		} else if ($total < 900) { # 15 min
 			$time = $lang['srv_diagnostic_time_3'];
+			$time_chart = 60;
 		} else if ($total < 1800) { # 30 min
 			$time = $lang['srv_diagnostic_time_4'];
+			$time_chart = 80;
 		}	else { #> 30 min
 			$time = $lang['srv_diagnostic_time_5'];
+			$time_chart = 100;
 		}
-		
+		$excess = 100 - $time_chart;
+		$display_length = "'[".$time_chart.",".$excess."]'"; //array za chart
+
 		# Kompleksnost
 		if ((int)($this->cnt_blocks + $this->cnt_conditions) == 0) {
 			$kompleksnost = $lang['srv_diagnostic_complexity_1'];
+			$complex_chart = 20;
 		} else if ((int)($this->cnt_blocks + $this->cnt_conditions) == 1) {
 			$kompleksnost = $lang['srv_diagnostic_complexity_2'];
+			$complex_chart = 40;
 		} else if ((int)($this->cnt_blocks + $this->cnt_conditions) < 10) {
 			$kompleksnost = $lang['srv_diagnostic_complexity_3'];
+			$complex_chart = 60;
 		} else if ((int)($this->cnt_blocks + $this->cnt_conditions) < 50) {
 			$kompleksnost = $lang['srv_diagnostic_complexity_4'];
+			$complex_chart = 80;
 		} else {
 			$kompleksnost = $lang['srv_diagnostic_complexity_5'];
+			$complex_chart = 100;
 		}
+		$excess = 100 - $complex_chart;
+		$display_complex = "'[".$complex_chart.",".$excess."]'"; //array za chart
 
 		echo '<h2>'.$lang['srv_testiranje_diagnostika'].'</h2>';
 
@@ -453,8 +467,75 @@ class SurveyDiagnostics
 		echo '</table>';
 
 		// LASTNOSTI ANKETE
+		echo '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>'; //Chart.js source
+
 		echo '<h2>'.$lang['srv_testiranje_diagnostika_lastnosti'].'</h2>';
 
+		echo '<div class="lastnosti_wrapper">';
+
+		echo '<div class="lastnosti_left">';
+		echo '</div>'; #lastnosti_left
+
+		echo '<div class="lastnosti_middle">';
+		// Dolžina ankete
+		if($lang['id'] == '1')
+			$link_time = 'href="https://www.1ka.si/d/sl/spletne-ankete/osnovna-priporocila/kako-dolga-naj-bo-moja-anketa?from1ka=1" target="_blank"';
+        else
+			$link_time = 'href="https://www.1ka.si/d/en/web-surveys/basic-recommendations/how-long-should-my-survey-be?from1ka=1" target="_blank"';
+		
+		echo '<div class="box">';
+		echo '<div class="title">'.$lang['srv_diagnostic_1_element_5'].'</div>';
+		
+		echo '<div class="diagnostic_graph">';
+		
+		echo '<div class="circle">';
+		echo '<canvas id="survey_length"></canvas>';
+		echo '</div>';
+		echo '<script type="text/javascript"> diagnosticsChart(\'survey_length\','.$display_length.'); </script>';
+		
+		echo '<div class="other_text">';
+		echo '<p>'.$time.'</p>';
+		echo '<a '.$link_time.'>'.$lang['srv_diagnostic_time_extra'].'</a>';
+		echo '</div>';
+		
+		echo '</div>';
+		echo '</div>'; #box
+
+		// Kompleksnost ankete
+		if($lang['id'] == '1')
+			$link_complex = 'href="https://www.1ka.si/d/sl/spletne-ankete/osnovna-priporocila/kaj-pomeni-kompleksnost-ankete?from1ka=1" target="_blank"';
+        else
+			$link_complex = 'href="https://www.1ka.si/d/en/web-surveys/basic-recommendations/what-does-survey-complexity-mean?from1ka=1" target="_blank"';
+		
+		echo '<div class="box">';
+		echo '<div class="title">'.$lang['srv_diagnostic_1_element_4'].'</div>';
+		echo '<div class="diagnostic_graph">';
+		
+		echo '<div class="circle">';
+		echo '<canvas id="survey_complex"></canvas>';
+		echo '</div>';
+		echo '<script type="text/javascript"> diagnosticsChart(\'survey_complex\','.$display_complex.'); </script>';
+		
+		echo '<div class="other_text">';
+		echo '<p>'.$kompleksnost.'</p>';
+		echo '<a '.$link_complex.'>'.$lang['srv_diagnostic_complexity_extra'].'</a>';
+		echo '</div>';
+		
+		echo '</div>';
+		echo '</div>'; #box
+		
+		echo '</div>'; #lastnosti_middle
+
+		echo '<div class="lastnosti_right">';
+		echo '</div>'; #lastnosti_right
+
+		echo '</div>'; #lastnosti_wrapper
+
+
+
+
+		/////////////////////////////////////////////////////////////////////// Lastnosti staro
+
 		echo '<div class="lastnosti_wrapper">';
 		
 		echo '<div class="lastnosti_left">';

admin/survey/script/script.js

@@ -5638,4 +5638,33 @@ function oneClickArchive(){
 	$('#general_popup').addClass('PopUpNarrow');
 	$('#general_popup').html('').fadeIn('slow');
 	$("#general_popup").load('ajax.php?a=oneClickArchive', {anketa: srv_meta_anketa_id});
+}
+
+function diagnosticsChart(place,display) {
+
+	const data = {
+		datasets: [{
+		  data: display,
+		  backgroundColor: [
+			'rgb(229,229,229)',
+			'rgb(30, 136, 229)',
+		  ],
+		  borderWidth: 0, //spacing between slices
+		}]
+	};
+	
+	  const config = {
+		type: 'doughnut',
+		data: data,
+		options: {
+			events: [], //no hover labels,animations,...
+			cutout: 32, //slice width
+		}
+	};
+
+	  const myChart = new Chart(
+		document.getElementById(place),
+		config
+	  );
+
 }

public/css/admin_new.css

@@ -23909,12 +23909,61 @@ div#srv_diagnostic table td div.status_wrapper div.status a {
 div#srv_diagnostic div.lastnosti_wrapper {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: space-between;
   gap: 32px;
 }
 div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle,
 div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right {
-  width: 50%;
+  width: 33%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box {
+  border: 1px solid #E5E5E5;
+  border-radius: 2px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .title,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .title,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .title {
+  text-transform: uppercase;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph {
+  display: flex;
+  flex-direction: row;
+  margin-top: -8px;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .circle,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .circle,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .circle {
+  height: 100px;
+  width: 100px;
+  margin-right: 16px;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .other_text,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .other_text,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .other_text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+}
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_left .box .diagnostic_graph .other_text a,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_middle .box .diagnostic_graph .other_text a,
+div#srv_diagnostic div.lastnosti_wrapper div.lastnosti_right .box .diagnostic_graph .other_text a {
+  text-decoration: none;
+  font-size: 14px !important;
+  white-space: nowrap;
 }
 div#srv_diagnostic div.input_box {
   display: flex;
@@ -29046,15 +29095,15 @@ iframe#ifmcontentstoprint {
 }
 
 .rsdl_bck1 {
-  background-color: rgb(250, 226, 226) !important;
+  background-color: #fae2e2 !important;
 }
 
 .rsdl_bck2 {
-  background-color: rgb(255, 157, 157) !important;
+  background-color: #ff9d9d !important;
 }
 
 .rsdl_bck3 {
-  background-color: rgb(248, 66, 66) !important;
+  background-color: #f84242 !important;
 }
 
 .rsdl_bck4 {
@@ -32483,19 +32532,24 @@ table.dataTable td:not(:first-of-type), table.dataTable th:not(:first-of-type) {
   #quick_comments_link.newCss {
     display: none;
   }
+
   #firstNavigation ol.right-side {
     display: none;
   }
+
   div.status_advanced {
     flex-direction: column;
   }
+
   div.status_advanced_box {
     width: 100%;
     box-sizing: border-box;
   }
+
   a.status_advanced_link {
     width: 95%;
   }
+
   .content_div_normalmode {
     overflow-x: auto;
   }
@@ -32563,6 +32617,7 @@ body #main_holder #main .wide {
     width: 100%;
     margin: 0;
   }
+
   fieldset {
     width: 100% !important;
     box-sizing: border-box !important;
@@ -32592,36 +32647,44 @@ fieldset textarea {
   fieldset .setting {
     height: auto !important;
   }
+
   .setting_horizontal_wrapper {
     flex-direction: column !important;
   }
+
   #vnosi_paginacija div select {
     display: inline-block;
     width: fit-content;
     margin: 0 5px;
     text-align: center;
   }
+
   div.breadcrumbs {
     display: block;
     padding: 15px;
     color: #1e88e5;
     font-weight: 600;
   }
+
   button.small, submit.small {
     min-width: auto;
     padding: 5px 16px;
   }
+
   button.medium, submit.medium {
     min-width: auto;
     padding: 10px 24px;
   }
+
   button.large, submit.large {
     min-width: auto;
     padding: 12px 32px;
   }
+
   .top_note {
     padding: 8px 16px;
   }
+
   header {
     /* Mobile meni */
     /* Mobile meni - NASTAVITVE V UREJANJU ANKETE*/
@@ -32877,6 +32940,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   header .mobile_settings .mobile_settings_content a .setting_text {
     width: auto;
   }
+
   footer#srv_footer {
     display: flex;
     flex-direction: column;
@@ -32898,6 +32962,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     padding: 0;
     border: 0;
   }
+
   /* Popup za vprasajcke */
   .qtip {
     position: fixed !important;
@@ -32908,6 +32973,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     left: 10% !important;
     box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.34) !important;
   }
+
   .divPopUp {
     width: calc(100% - 32px) !important;
     max-width: calc(100% - 32px) !important;
@@ -32918,10 +32984,12 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     width: calc(100% - 32px) !important;
     max-width: calc(100% - 32px) !important;
   }
+
   /* Vse povezano s paketi in placili */
   .dt-buttons {
     display: none;
   }
+
   #main #moje_ankete_edit #anketa_edit {
     padding: 0 !important;
   }
@@ -32999,6 +33067,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   #main #moje_ankete_edit fieldset div.setting {
     margin-bottom: 10px;
   }
+
   #new_anketa_div {
     display: flex;
     flex-direction: column;
@@ -33082,6 +33151,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     border: 1px solid #c8e3f8 !important;
     border-radius: 1px;
   }
+
   .dashboard_top_settings {
     flex-direction: column;
   }
@@ -33094,16 +33164,19 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     margin-left: 0;
     margin-right: 16px;
   }
+
   .dashboard_boxes {
     flex-direction: column;
   }
   .dashboard_boxes .dashboard_box {
     margin: 0 0 32px 0;
   }
+
   .locked .add-variable-mobile,
 .spremenljivka_content .add-variable {
     display: none !important;
   }
+
   #branching {
     width: 100%;
     margin: 0;
@@ -33208,9 +33281,11 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     margin: 0;
     padding: 0 12px;
   }
+
   .toolbox_holder {
     display: none;
   }
+
   .mobile_add_question {
     display: block;
     position: fixed;
@@ -33230,6 +33305,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     line-height: 15px;
     font-weight: 600;
   }
+
   .mobile_add_question_popup {
     z-index: 9999;
     position: fixed;
@@ -33283,6 +33359,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     font-size: 14px;
     font-weight: 500;
   }
+
   #vprasanje_float_editing .vprasanje_edit_holder {
     position: fixed;
     z-index: 99999;
@@ -33335,6 +33412,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     margin-left: 0 !important;
     text-align: center;
   }
+
   #main #anketa #globalSetingsList {
     max-width: 100% !important;
     width: 100% !important;
@@ -33347,6 +33425,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
 #main #anketa #globalSetingsList fieldset span.charalimit#anketa_note_chars {
     width: 100%;
   }
+
   /* NASTAVITVE in ARHIVI */
   /* OBLIKA */
   #main #anketa #anketa_edit.page_tema #div_theme_group_holder {
@@ -33362,15 +33441,18 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     width: 100%;
     height: auto;
   }
+
   #theme-editor {
     width: 100% !important;
     float: none !important;
   }
+
   #theme-preview {
     width: 100% !important;
     float: none !important;
     margin-top: 80px !important;
   }
+
   /* ARHIVI */
   #main #anketa #anketa_edit.page_arhivi {
     flex-direction: column-reverse;
@@ -33388,6 +33470,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   #main #anketa #anketa_edit.page_arhivi #div_archive_content fieldset input {
     width: 100% !important;
   }
+
   div.page_tema .theme_list {
     flex-wrap: wrap;
   }
@@ -33414,6 +33497,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   div.page_tema div#theme_grid_holder div.div_theme_group div.theme_label .theme_label_options .button {
     margin-right: 8px;
   }
+
   .page_theme-editor #theme-preview {
     display: none;
   }
@@ -33421,6 +33505,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
     width: 100% !important;
     flex-wrap: wrap;
   }
+
   #srv_diagnostic br {
     display: none;
   }
@@ -33441,6 +33526,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
 #srv_diagnostic #srv_diagnostic_results_right table td + td {
     width: auto !important;
   }
+
   .subpage_testnipodatki {
     line-height: 20px;
   }
@@ -33454,6 +33540,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   .subpage_testnipodatki form label input {
     vertical-align: bottom;
   }
+
   .lastnosti_wrapper {
     flex-direction: column !important;
   }
@@ -33461,6 +33548,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
 .lastnosti_wrapper .lastnosti_right {
     width: 100% !important;
   }
+
   .page_vabila #vabila .button_holder {
     flex-direction: column;
     align-items: flex-start;
@@ -33485,6 +33573,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   .page_vabila #vabila .more_block {
     width: 100%;
   }
+
   .page_invitations #inv_top_navi {
     flex-direction: column;
     align-items: flex-start;
@@ -33552,6 +33641,7 @@ header .mobile_menu .mobile_menu_user .submenu_user_content > div a {
   .page_invitations .button_holder button {
     margin-bottom: 8px;
   }
+
   #vabila > table,
 table.invitations_settings,
 #inv_msg_preview table,
@@ -33635,6 +33725,7 @@ table.invitations_settings p label input[type=password],
     width: 100% !important;
     box-sizing: border-box;
   }
+
   #surveyInvitationSetting,
 #surveyInvitationSettingServer {
     min-width: 100% !important;
@@ -33642,6 +33733,7 @@ table.invitations_settings p label input[type=password],
     margin: 10px 0 !important;
     box-sizing: border-box !important;
   }
+
   #inv_top_navi {
     display: flex;
     flex-direction: column;
@@ -33680,6 +33772,7 @@ table.invitations_settings p label input[type=password],
   #inv_top_navi > #inv_step_nav.yellow .inv_step_space {
     display: none;
   }
+
   #inv_recipients_profiles_holder,
 #inv_import_list_container,
 #inv_messages_profiles_holder,
@@ -33700,6 +33793,7 @@ table.invitations_settings p label input[type=password],
 #inv_select_mail_preview textarea {
     width: 100%;
   }
+
   #inv_msg_preview table th {
     height: auto !important;
     width: 100% !important;
@@ -33711,6 +33805,7 @@ table.invitations_settings p label input[type=password],
     width: 100%;
     box-sizing: border-box;
   }
+
   .addthis_toolbox {
     line-height: 24px;
   }
@@ -33725,9 +33820,11 @@ table.invitations_settings p label input[type=password],
   .addthis_toolbox .addthis_separator {
     font-size: 16px;
   }
+
   #inv_field_container ul li {
     width: 45%;
   }
+
   /* grafika ko ni podatkov */
   div.no_data_alert img {
     width: 100%;
@@ -33739,6 +33836,7 @@ table.invitations_settings p label input[type=password],
     flex-direction: column;
     align-items: center;
   }
+
   .page_data .data_table_top_holder {
     flex-direction: column;
     align-items: flex-start;
@@ -33809,9 +33907,11 @@ table.invitations_settings p label input[type=password],
     width: 100%;
     margin-bottom: 16px;
   }
+
   body.data_fullscreen #analiza_data {
     top: 68px;
   }
+
   .subpage_append .anketa_edit_main,
 .subpage_merge .anketa_edit_main,
 .subpage_calculation .anketa_edit_main,
@@ -33852,6 +33952,7 @@ table.invitations_settings p label input[type=password],
     clear: both;
     margin: 40px 0 0 0 !important;
   }
+
   .subpage_quick_edit #quick_edit_top_line {
     flex-direction: column-reverse;
   }
@@ -33871,6 +33972,7 @@ table.invitations_settings p label input[type=password],
   .subpage_quick_edit .quick_edit_container .quick_edit_bottom_line {
     justify-content: center;
   }
+
   .analysis_bottom_settings {
     flex-wrap: wrap;
   }
@@ -33880,13 +33982,16 @@ table.invitations_settings p label input[type=password],
     margin: 0 0 16px 0 !important;
     border: 0;
   }
+
   .div_analiza_icons,
 .div_analiza_scale {
     opacity: 1 !important;
   }
+
   .analysis_icons_holder {
     display: none;
   }
+
   .chart_holder {
     width: 100%;
     box-sizing: border-box;
@@ -33909,6 +34014,7 @@ table.invitations_settings p label input[type=password],
     display: block;
     clear: both;
   }
+
   table.analysis_reports {
     border-spacing: 0px;
   }
@@ -33925,12 +34031,14 @@ table.analysis_reports > tbody > tr > td {
   table.analysis_reports fieldset {
     margin-bottom: 0 !important;
   }
+
   .reports_holder {
     flex-direction: column;
   }
   .reports_holder fieldset {
     width: 100%;
   }
+
   .noSurvey_sequence {
     padding: 0;
   }
@@ -33952,11 +34060,13 @@ table.analysis_reports > tbody > tr > td {
   .noSurvey_sequence .buttons_holder a .button {
     margin: 10px 30px;
   }
+
   #table-horizontal-scroll-wrapper1-userchanges {
     display: table;
     table-layout: fixed;
     width: 100%;
   }
+
   #table-horizontal-scroll-wrapper2-userchanges {
     display: table-cell;
     overflow-x: auto;
@@ -33967,6 +34077,7 @@ table.analysis_reports > tbody > tr > td {
     border-collapse: collapse;
     white-space: nowrap;
   }
+
   .page_arhivi .anketa_edit_left,
 .page_tracking .anketa_edit_left,
 .subpage_anal_arch .anketa_edit_left,

resources/sass/admin_new/pages/survey_testiranje/diagnostika.scss

@@ -62,12 +62,56 @@ div#srv_diagnostic {
     div.lastnosti_wrapper {
         display: flex;
         flex-direction: row;
-        align-items: flex-start;
+        align-items: space-between;
         gap: 32px;
 
         div.lastnosti_left,
+        div.lastnosti_middle,
         div.lastnosti_right {
-            width: 50%;
+            width: 33%;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+
+            .box {
+                border: 1px solid $gray;
+                border-radius: 2px;
+                padding: 16px;
+
+                display: flex;
+                flex-direction: column;
+
+                .title {
+                    text-transform: uppercase;
+                    font-weight: $semi-bold;
+                    margin-bottom: 16px;
+                }
+
+                .diagnostic_graph {
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: -8px;
+
+                    .circle {
+                        height: 100px;
+                        width: 100px;
+                        margin-right: 16px;
+                    }
+
+                    .other_text {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        gap: 16px;
+
+                        a {
+                            text-decoration: none;
+                            font-size: 14px !important;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
         }
         
     }