Skip to content

Commit 564c563

Browse files
christianbeeznestchristianbeeznest
authored
Merge pull request #5792 from christianbeeznest/ofaj-21957-2
Internal: Enhance tables and charts: spacing, alignment, titles, Excel export - refs BT#21957
2 parents eef3b98 + f4cbdd3 commit 564c563

File tree

4 files changed

+76
-51
lines changed

4 files changed

+76
-51
lines changed

‎assets/css/app.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,10 @@ form .field {
853853
@apply w-full md:w-1/2 px-4;
854854
}
855855

856+
.section-header__title {
857+
@apply mt-4;
858+
}
859+
856860
//@import 'primevue-md-light-indigo/theme.css';
857861
//@import '~primevue/resources/primevue.min.css';
858862
//@import '~primeflex/primeflex.css';

‎public/main/admin/statistics/index.php

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -486,10 +486,10 @@
486486

487487
$content .= $table->toHtml();
488488

489-
$content .= '<div class="row">';
490-
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas1_title"></h4><div id="canvas1_table"></div></div>';
491-
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas2_title"></h4><div id="canvas2_table"></div></div>';
492-
$content .= '<div class="col-md-4"><h4 class="page-header" id="canvas3_title"></h4><div id="canvas3_table"></div></div>';
489+
$content .= '<div class="grid grid-cols-3 gap-4">';
490+
$content .= '<div><h4 class="text-center" id="canvas1_title"></h4><div id="canvas1_table"></div></div>';
491+
$content .= '<div><h4 class="text-center" id="canvas2_title"></h4><div id="canvas2_table"></div></div>';
492+
$content .= '<div><h4 class="text-center" id="canvas3_title"></h4><div id="canvas3_table"></div></div>';
493493
$content .= '</div>';
494494

495495
$tableCourse = new HTML_Table(['class' => 'table table-responsive']);
@@ -518,15 +518,14 @@
518518

519519
$content .= $tableCourse->toHtml();
520520

521-
$content .= '<div class="row">';
522-
$content .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>';
523-
$content .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>';
524-
$content .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>';
525-
521+
$content .= '<div class="grid grid-cols-3 gap-4">';
522+
$content .= '<div><canvas id="canvas1" class="mb-5"></canvas></div>';
523+
$content .= '<div><canvas id="canvas2" class="mb-5"></canvas></div>';
524+
$content .= '<div><canvas id="canvas3" class="mb-5"></canvas></div>';
526525
$content .= '</div>';
527526

528-
$content .= '<div class="row">';
529-
$content .= '<div class="col-md-12"><canvas id="canvas4" style="margin-bottom: 20px"></canvas></div>';
527+
$content .= '<div class="grid grid-cols-1">';
528+
$content .= '<div><canvas id="canvas4" class="mb-5"></canvas></div>';
530529
$content .= '</div>';
531530
}
532531

@@ -720,24 +719,24 @@
720719
$startDate = $values['daterange_start'];
721720
$endDate = $values['daterange_end'];
722721

723-
$graph = '<div class="row">';
724-
$graph .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>';
725-
$graph .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>';
726-
$graph .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>';
722+
$graph = '<div class="grid grid-cols-3 gap-4">';
723+
$graph .= '<div><canvas id="canvas1" class="mb-5 mt-5 mx-auto"></canvas></div>';
724+
$graph .= '<div><canvas id="canvas2" class="mb-5 mt-5 mx-auto"></canvas></div>';
725+
$graph .= '<div><canvas id="canvas3" class="mb-5 mt-5 mx-auto"></canvas></div>';
727726
$graph .= '</div>';
728727

729-
$graph .= '<div class="row">';
730-
$graph .= '<div class="col-md-6"><canvas id="canvas4" style="margin-bottom: 20px"></canvas></div>';
731-
$graph .= '<div class="col-md-6"><canvas id="canvas8" style="margin-bottom: 20px"></canvas></div>';
728+
$graph .= '<div class="grid grid-cols-2 gap-4">';
729+
$graph .= '<div><canvas id="canvas4" class="mb-5 mt-5 mx-auto"></canvas></div>';
730+
$graph .= '<div><canvas id="canvas8" class="mb-5 mt-5 mx-auto"></canvas></div>';
732731
$graph .= '</div>';
733732

734-
$graph .= '<div class="row">';
735-
$graph .= '<div class="col-md-6"><canvas id="canvas5" style="margin-bottom: 20px"></canvas></div>';
736-
$graph .= '<div class="col-md-6"><canvas id="canvas6" style="margin-bottom: 20px"></canvas></div>';
733+
$graph .= '<div class="grid grid-cols-2 gap-4">';
734+
$graph .= '<div><canvas id="canvas5" class="mb-5 mt-5 mx-auto"></canvas></div>';
735+
$graph .= '<div><canvas id="canvas6" class="mb-5 mt-5 mx-auto"></canvas></div>';
737736
$graph .= '</div>';
738737

739-
$graph .= '<div class="row">';
740-
$graph .= '<div class="col-md-6"><canvas id="canvas7" style="margin-bottom: 20px"></canvas></div>';
738+
$graph .= '<div class="grid grid-cols-2 gap-4">';
739+
$graph .= '<div><canvas id="canvas7" class="mb-5 mt-5 mx-auto"></canvas></div>';
741740
$graph .= '</div>';
742741

743742
$conditions = [];
@@ -769,7 +768,7 @@
769768

770769
$table->actionButtons = [
771770
'export' => [
772-
'label' => get_lang('ExportAsXLS'),
771+
'label' => get_lang('Export As XLS'),
773772
'icon' => Display::getMdiIcon(ActionIcon::EXPORT_SPREADSHEET,'ch-tool-icon'),
774773
],
775774
];
@@ -842,7 +841,7 @@
842841

843842
$userLanguage = '';
844843
if (!empty($user['locale'])) {
845-
$userLanguage = $languages[$user['locale']];
844+
$userLanguage = $languages[$user['locale']] ?? 'en';
846845
}
847846

848847
$languageTarget = '';
@@ -1447,12 +1446,12 @@
14471446
</div>';
14481447
break;
14491448
case 'users':
1450-
$content .= '<div class="row">';
1451-
$content .= '<div class="col-md-4"><canvas id="canvas1" style="margin-bottom: 20px"></canvas></div>';
1452-
$content .= '<div class="col-md-4"><canvas id="canvas2" style="margin-bottom: 20px"></canvas></div>';
1453-
$content .= '<div class="col-md-4"><canvas id="canvas3" style="margin-bottom: 20px"></canvas></div>';
1454-
1449+
$content .= '<div class="grid grid-cols-3 gap-4">';
1450+
$content .= '<div><canvas id="canvas1" class="mb-5"></canvas></div>';
1451+
$content .= '<div><canvas id="canvas2" class="mb-5"></canvas></div>';
1452+
$content .= '<div><canvas id="canvas3" class="mb-5"></canvas></div>';
14551453
$content .= '</div>';
1454+
14561455
// total amount of users
14571456
$teachers = $students = [];
14581457
$countInvisible = isset($_GET['count_invisible_courses']) ? intval($_GET['count_invisible_courses']) : null;

‎public/main/inc/lib/sortable_table.class.php

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -417,21 +417,28 @@ class="form-search"
417417
}
418418
}
419419
$html .= '<input type="hidden" name="action">';
420-
$html .= '<div class="q-card p-2 mb-4 sortable-buttons-actions">';
421-
$html .= '<div class="flex flex-row justify-between">';
420+
$html .= '<div class="flex q-card p-2 mb-4 sortable-buttons-actions">';
421+
$html .= '<div class="flex w-1/2 flex-wrap items-center justify-between">';
422+
423+
if (count($this->actionButtons) > 0) {
424+
$html .= '<div class="btn-toolbar flex space-x-2">';
425+
$html .= '<div class="btn-group">';
426+
427+
foreach ($this->actionButtons as $action => $data) {
428+
$label = $data['label'];
429+
$icon = $data['icon'];
430+
$html .= '<a class="btn btn-default" href="?'.$params.'&action_table='.$action.'">'.$icon.'&nbsp;'.$label.'</a>';
431+
}
432+
$html .= '</div>';
433+
$html .= '</div>';
434+
}
422435

423436
if (count($this->form_actions) > 0) {
424-
$html .= '<div class="flex flex-row justify-between" role="group">';
425-
$html .= '<a
426-
class="btn btn--action mr-2"
427-
href="?'.$params.'&amp;'.$this->param_prefix.'selectall=1"
428-
onclick="javascript: setCheckbox(true, \''.$table_id.'\'); return false;">'.
429-
get_lang('Select all').'</a>';
430-
$html .= '<a
431-
class="btn btn--action mr-2"
432-
href="?'.$params.'"
433-
onclick="javascript: setCheckbox(false, \''.$table_id.'\'); return false;">'.
434-
get_lang('Deselect all').'</a> ';
437+
$html .= '<div class="flex space-x-2">';
438+
$html .= '<a class="btn btn--action mr-2" href="?'.$params.'&amp;'.$this->param_prefix.'selectall=1" onclick="javascript: setCheckbox(true, \''.$table_id.'\'); return false;">'
439+
.get_lang('Select all').'</a>';
440+
$html .= '<a class="btn btn--action mr-2" href="?'.$params.'" onclick="javascript: setCheckbox(false, \''.$table_id.'\'); return false;">'
441+
.get_lang('Deselect all').'</a>';
435442

436443
$items = [];
437444
foreach ($this->form_actions as $action => $label) {
@@ -451,13 +458,13 @@ class="btn btn--action mr-2"
451458

452459
// Pagination
453460
if ($this->get_total_number_of_items() > $this->default_items_per_page) {
454-
$html .= '<div class="col-12 col-md-6">';
461+
$html .= '<div class="flex justify-end mt-4 w-1/2">';
455462
$html .= '<div class="page-nav pb-2 pt-2">'.$nav.'</div>';
456463
$html .= '</div>';
457464
}
458465

459-
$html .= '</div>'; //btn-group
460-
$html .= '</div>';
466+
$html .= '</div>'; // btn-group
467+
$html .= '</div>'; // sortable-buttons-actions
461468
if (count($this->form_actions) > 0) {
462469
$html .= '</form>';
463470
}

‎public/main/inc/lib/statistics.lib.php

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1223,12 +1223,19 @@ public static function getJSChartTemplate($url, $type = 'pie', $options = '', $e
12231223
url: "'.$url.'",
12241224
type: "POST",
12251225
success: function(data) {
1226-
Chart.defaults.responsive = true;
1226+
Chart.defaults.responsive = false;
12271227
var ctx = document.getElementById("'.$elementId.'").getContext("2d");
1228+
ctx.canvas.width = 420;
1229+
ctx.canvas.height = 420;
12281230
var chart = new Chart(ctx, {
12291231
type: "'.$type.'",
12301232
data: data,
1231-
options: {'.$options.'}
1233+
options: {
1234+
plugins: {
1235+
'.$options.'
1236+
},
1237+
cutout: "25%"
1238+
}
12321239
});
12331240
var title = chart.options.plugins.title.text;
12341241
$("#'.$elementId.'_title").html(title);
@@ -1251,13 +1258,21 @@ public static function getJSChartTemplateWithData($data, $type = 'pie', $options
12511258
$(function() {
12521259
Chart.defaults.responsive = '.$responsiveValue.';
12531260
var ctx = document.getElementById("'.$elementId.'").getContext("2d");
1254-
ctx.canvas.width = 400;
1255-
ctx.canvas.height = 400;
1261+
ctx.canvas.width = 420;
1262+
ctx.canvas.height = 420;
12561263
var chart = new Chart(ctx, {
12571264
type: "'.$type.'",
12581265
data: '.$data.',
1259-
options: {'.$options.'}
1266+
options: {
1267+
plugins: {
1268+
'.$options.'
1269+
},
1270+
cutout: "25%"
1271+
}
12601272
});
1273+
var title = chart.options.plugins.title.text;
1274+
$("#'.$elementId.'_title").html(title);
1275+
$("#'.$elementId.'_table").html(chart.data.datasets[0].data);
12611276
});
12621277
</script>';
12631278

0 commit comments

Comments
 (0)