chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Internal: Enhance tables and charts: spacing, alignment, titles, Excel export - refs BT#21957

Browse Source
pull/5792/head
christianbeeznst 1 year ago
parent eef3b98d4e
commit f4cbdd3954
4 changed files with 76 additions and 51 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      assets/css/app.scss
  2. 57
      public/main/admin/statistics/index.php
  3. 37
      public/main/inc/lib/sortable_table.class.php
  4. 25
      public/main/inc/lib/statistics.lib.php

4
assets/css/app.scss
Unescape View File

@ -853,6 +853,10 @@ form .field {
@apply w-full md:w-1/2 px-4; @apply w-full md:w-1/2 px-4;
} }
.section-header__title {
@apply mt-4;
}
//@import 'primevue-md-light-indigo/theme.css'; //@import 'primevue-md-light-indigo/theme.css';
//@import '~primevue/resources/primevue.min.css'; //@import '~primevue/resources/primevue.min.css';
//@import '~primeflex/primeflex.css'; //@import '~primeflex/primeflex.css';

57
public/main/admin/statistics/index.php
Unescape View File

@ -486,10 +486,10 @@ switch ($report) {
$content .= $table->toHtml(); $content .= $table->toHtml();
$content .= '<div class="row">'; $content .= '<div class="grid grid-cols-3 gap-4">';
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas1_title"></h4><div id="canvas1_table"></div></div>'; $content .= '<div><h4 class="text-center" id="canvas1_title"></h4><div id="canvas1_table"></div></div>';
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas2_title"></h4><div id="canvas2_table"></div></div>'; $content .= '<div><h4 class="text-center" id="canvas2_title"></h4><div id="canvas2_table"></div></div>';
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas3_title"></h4><div id="canvas3_table"></div></div>'; $content .= '<div><h4 class="text-center" id="canvas3_title"></h4><div id="canvas3_table"></div></div>';
$content .= '</div>'; $content .= '</div>';
$tableCourse = new HTML_Table(['class' => 'table table-responsive']); $tableCourse = new HTML_Table(['class' => 'table table-responsive']);
@ -518,15 +518,14 @@ switch ($report) {
$content .= $tableCourse->toHtml(); $content .= $tableCourse->toHtml();
$content .= '<div class="row">'; $content .= '<div class="grid grid-cols-3 gap-4">';
$content .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas1" class="mb-5"></canvas></div>';
$content .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas2" class="mb-5"></canvas></div>';
$content .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas3" class="mb-5"></canvas></div>';
$content .= '</div>'; $content .= '</div>';
$content .= '<div class="row">'; $content .= '<div class="grid grid-cols-1">';
$content .= '<div class="col-md-12"><canvas id="canvas4" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas4" class="mb-5"></canvas></div>';
$content .= '</div>'; $content .= '</div>';
} }
@ -720,24 +719,24 @@ switch ($report) {
$startDate = $values['daterange_start']; $startDate = $values['daterange_start'];
$endDate = $values['daterange_end']; $endDate = $values['daterange_end'];
$graph = '<div class="row">'; $graph = '<div class="grid grid-cols-3 gap-4">';
$graph .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas1" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas2" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas3" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '</div>'; $graph .= '</div>';
$graph .= '<div class="row">'; $graph .= '<div class="grid grid-cols-2 gap-4">';
$graph .= '<div class="col-md-6"><canvas id="canvas4" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas4" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '<div class="col-md-6"><canvas id="canvas8" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas8" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '</div>'; $graph .= '</div>';
$graph .= '<div class="row">'; $graph .= '<div class="grid grid-cols-2 gap-4">';
$graph .= '<div class="col-md-6"><canvas id="canvas5" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas5" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '<div class="col-md-6"><canvas id="canvas6" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas6" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '</div>'; $graph .= '</div>';
$graph .= '<div class="row">'; $graph .= '<div class="grid grid-cols-2 gap-4">';
$graph .= '<div class="col-md-6"><canvas id="canvas7" style="margin-bottom: 20px"></canvas></div>'; $graph .= '<div><canvas id="canvas7" class="mb-5 mt-5 mx-auto"></canvas></div>';
$graph .= '</div>'; $graph .= '</div>';
$conditions = []; $conditions = [];
@ -842,7 +841,7 @@ switch ($report) {
$userLanguage = ''; $userLanguage = '';
if (!empty($user['locale'])) { if (!empty($user['locale'])) {
$userLanguage = $languages[$user['locale']]; $userLanguage = $languages[$user['locale']] ?? 'en';
} }
$languageTarget = ''; $languageTarget = '';
@ -1447,12 +1446,12 @@ switch ($report) {
</div>'; </div>';
break; break;
case 'users': case 'users':
$content .= '<div class="row">'; $content .= '<div class="grid grid-cols-3 gap-4">';
$content .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas1" class="mb-5"></canvas></div>';
$content .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas2" class="mb-5"></canvas></div>';
$content .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>'; $content .= '<div><canvas id="canvas3" class="mb-5"></canvas></div>';
$content .= '</div>'; $content .= '</div>';
// total amount of users // total amount of users
$teachers = $students = []; $teachers = $students = [];
$countInvisible = isset($_GET['count_invisible_courses']) ? intval($_GET['count_invisible_courses']) : null; $countInvisible = isset($_GET['count_invisible_courses']) ? intval($_GET['count_invisible_courses']) : null;

37
public/main/inc/lib/sortable_table.class.php
Unescape View File

@ -417,21 +417,28 @@ class SortableTable extends HTML_Table
} }
} }
$html .= '<input type="hidden" name="action">'; $html .= '<input type="hidden" name="action">';
$html .= '<div class="q-card p-2 mb-4 sortable-buttons-actions">'; $html .= '<div class="flex q-card p-2 mb-4 sortable-buttons-actions">';
$html .= '<div class="flex flex-row justify-between">'; $html .= '<div class="flex w-1/2 flex-wrap items-center justify-between">';
if (count($this->actionButtons) > 0) {
$html .= '<div class="btn-toolbar flex space-x-2">';
$html .= '<div class="btn-group">';
foreach ($this->actionButtons as $action => $data) {
$label = $data['label'];
$icon = $data['icon'];
$html .= '<a class="btn btn-default" href="?'.$params.'&action_table='.$action.'">'.$icon.'&nbsp;'.$label.'</a>';
}
$html .= '</div>';
$html .= '</div>';
}
if (count($this->form_actions) > 0) { if (count($this->form_actions) > 0) {
$html .= '<div class="flex flex-row justify-between" role="group">'; $html .= '<div class="flex space-x-2">';
$html .= '<a $html .= '<a class="btn btn--action mr-2" href="?'.$params.'&amp;'.$this->param_prefix.'selectall=1" onclick="javascript: setCheckbox(true, \''.$table_id.'\'); return false;">'
class="btn btn--action mr-2" .get_lang('Select all').'</a>';
href="?'.$params.'&amp;'.$this->param_prefix.'selectall=1" $html .= '<a class="btn btn--action mr-2" href="?'.$params.'" onclick="javascript: setCheckbox(false, \''.$table_id.'\'); return false;">'
onclick="javascript: setCheckbox(true, \''.$table_id.'\'); return false;">'. .get_lang('Deselect all').'</a>';
get_lang('Select all').'</a>';
$html .= '<a
class="btn btn--action mr-2"
href="?'.$params.'"
onclick="javascript: setCheckbox(false, \''.$table_id.'\'); return false;">'.
get_lang('Deselect all').'</a> ';
$items = []; $items = [];
foreach ($this->form_actions as $action => $label) { foreach ($this->form_actions as $action => $label) {
@ -451,13 +458,13 @@ class SortableTable extends HTML_Table
// Pagination // Pagination
if ($this->get_total_number_of_items() > $this->default_items_per_page) { if ($this->get_total_number_of_items() > $this->default_items_per_page) {
$html .= '<div class="col-12 col-md-6">'; $html .= '<div class="flex justify-end mt-4 w-1/2">';
$html .= '<div class="page-nav pb-2 pt-2">'.$nav.'</div>'; $html .= '<div class="page-nav pb-2 pt-2">'.$nav.'</div>';
$html .= '</div>'; $html .= '</div>';
} }
$html .= '</div>'; // btn-group $html .= '</div>'; // btn-group
$html .= '</div>'; $html .= '</div>'; // sortable-buttons-actions
if (count($this->form_actions) > 0) { if (count($this->form_actions) > 0) {
$html .= '</form>'; $html .= '</form>';
} }

25
public/main/inc/lib/statistics.lib.php
Unescape View File

@ -1223,12 +1223,19 @@ class Statistics
url: "'.$url.'", url: "'.$url.'",
type: "POST", type: "POST",
success: function(data) { success: function(data) {
Chart.defaults.responsive = true; Chart.defaults.responsive = false;
var ctx = document.getElementById("'.$elementId.'").getContext("2d"); var ctx = document.getElementById("'.$elementId.'").getContext("2d");
ctx.canvas.width = 420;
ctx.canvas.height = 420;
var chart = new Chart(ctx, { var chart = new Chart(ctx, {
type: "'.$type.'", type: "'.$type.'",
data: data, data: data,
options: {'.$options.'} options: {
plugins: {
'.$options.'
},
cutout: "25%"
}
}); });
var title = chart.options.plugins.title.text; var title = chart.options.plugins.title.text;
$("#'.$elementId.'_title").html(title); $("#'.$elementId.'_title").html(title);
@ -1251,13 +1258,21 @@ class Statistics
$(function() { $(function() {
Chart.defaults.responsive = '.$responsiveValue.'; Chart.defaults.responsive = '.$responsiveValue.';
var ctx = document.getElementById("'.$elementId.'").getContext("2d"); var ctx = document.getElementById("'.$elementId.'").getContext("2d");
ctx.canvas.width = 400; ctx.canvas.width = 420;
ctx.canvas.height = 400; ctx.canvas.height = 420;
var chart = new Chart(ctx, { var chart = new Chart(ctx, {
type: "'.$type.'", type: "'.$type.'",
data: '.$data.', data: '.$data.',
options: {'.$options.'} options: {
plugins: {
'.$options.'
},
cutout: "25%"
}
}); });
var title = chart.options.plugins.title.text;
$("#'.$elementId.'_title").html(title);
$("#'.$elementId.'_table").html(chart.data.datasets[0].data);
}); });
</script>'; </script>';

Write Preview
Loading…
Cancel
Save