321 lines
7.2 KiB
Smarty
321 lines
7.2 KiB
Smarty
{* ============================================
|
|
ALTES TABLE LAYOUT - AUSKOMMENTIERT FÜR REVERSE
|
|
============================================ *}
|
|
{*
|
|
<br />
|
|
<div style="background:#eeeeee;padding:10px;">
|
|
<span style="font-size:14px;font-weight:bold;">{$form_data->description}</span><br />
|
|
<br />
|
|
Auswertungszeitraum: <span style="font-weight:bold;">{$filter.date_start}</span> bis <span style="font-weight:bold;">{$filter.date_end}</span>
|
|
<table border="0" cellpadding="2" cellspacing="2" style="border:1px solid #aaaaaa;background:#cccccc;">
|
|
{foreach item=row key=index_y from=$statistic_data->statistic_data}
|
|
|
|
<tr style="background:#eeeeee;border: 1px solid #ffffff;">
|
|
|
|
{foreach item=col key=index_x from=$row}
|
|
{if $index_y == 0 || $index_x == 0}
|
|
<td style="text-align:center;background:#dddddd;">{$col}</td>
|
|
{else}
|
|
<td style="text-align:center;">{$col}</td>
|
|
{/if}
|
|
{/foreach}
|
|
|
|
</tr>
|
|
|
|
{/foreach}
|
|
</table>
|
|
Statistik generiert am: {if $today.mday < 10}0{/if}{$today.mday}.{if $today.mon < 10}0{/if}{$today.mon}.{$today.year}<br />
|
|
<a href="./index.php?admin_modul=admin_statistic_editor&action=get_csv&id={$form_data->id}&tab_id={$filter.period}&date_end={$filter.date_end}&date_start={$filter.date_start}">Tabelle als CSV-Datei exportieren</a>
|
|
|
|
<br /><br /><br/>
|
|
|
|
<div id="placeholder" style="width:930px;height:300px;"></div>
|
|
<br />
|
|
<p id="choices">Show:</p>
|
|
<br />
|
|
</div>
|
|
<br /><br/>
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var datasets = {
|
|
{foreach item=row key=myIndex from=$statistic_data->statistic_data[0]}
|
|
{if $myIndex != 0}
|
|
"{$row}": {
|
|
label: "{$row}",
|
|
data: [
|
|
{foreach item=row key=myIndex2 from=$statistic_data->statistic_data}
|
|
{if $myIndex2 != 0}
|
|
[{$myIndex2}, {$row[$myIndex]}],
|
|
{/if}
|
|
{/foreach}
|
|
]
|
|
},
|
|
{/if}
|
|
{/foreach}
|
|
};
|
|
|
|
// hard-code color indices to prevent them from shifting as
|
|
// countries are turned on/off
|
|
var i = 0;
|
|
$.each(datasets, function(key, val) {
|
|
val.color = i;
|
|
++i;
|
|
});
|
|
|
|
// insert checkboxes
|
|
var choiceContainer = $("#choices");
|
|
$.each(datasets, function(key, val) {
|
|
choiceContainer.append('<br/><input type="checkbox" name="' + key +
|
|
'" checked="checked" id="id' + key + '">' +
|
|
'<label for="id' + key + '">'
|
|
+ val.label + '</label>');
|
|
});
|
|
choiceContainer.find("input").click(plotAccordingToChoices);
|
|
|
|
|
|
function plotAccordingToChoices() {
|
|
var data = [];
|
|
|
|
choiceContainer.find("input:checked").each(function () {
|
|
var key = $(this).attr("name");
|
|
if (key && datasets[key])
|
|
data.push(datasets[key]);
|
|
});
|
|
|
|
if (data.length > 0)
|
|
$.plot($("#placeholder"), data, {
|
|
yaxis: { min: 0 },
|
|
xaxis: { tickDecimals: 0 }
|
|
});
|
|
}
|
|
|
|
plotAccordingToChoices();
|
|
});
|
|
</script>
|
|
*}
|
|
|
|
{* ============================================
|
|
NEUES MODERNES CSS LAYOUT - 90% BREITE
|
|
============================================ *}
|
|
|
|
<style>
|
|
/* Override parent container width! */
|
|
#adminLeftFloater {
|
|
width: 90% !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
/* Modern Stats Container - 90% Breite! */
|
|
.stats-container {
|
|
width: 90%;
|
|
margin: 20px auto;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header Section */
|
|
.stats-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 25px 30px;
|
|
}
|
|
|
|
.stats-header h2 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stats-period {
|
|
font-size: 14px;
|
|
opacity: 0.95;
|
|
margin: 5px 0 0 0;
|
|
}
|
|
|
|
/* Content Area - 90% Breite! */
|
|
.stats-content {
|
|
padding: 30px;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Data Grid - 90% Breite! */
|
|
.data-grid {
|
|
width: 90%;
|
|
margin: 20px auto;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
background: white;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.data-grid thead {
|
|
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
|
|
}
|
|
|
|
.data-grid th {
|
|
padding: 12px 15px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
font-size: 13px;
|
|
border-bottom: 2px solid #dee2e6;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.data-grid tbody tr {
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.data-grid tbody tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.data-grid td {
|
|
padding: 10px 15px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.data-grid td:first-child {
|
|
font-weight: 500;
|
|
background: #f8f9fa;
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Chart Sections - 90% Breite! */
|
|
.chart-section {
|
|
width: 90%;
|
|
margin: 40px auto;
|
|
padding: 25px;
|
|
background: white;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0 0 20px 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #667eea;
|
|
}
|
|
|
|
/* Footer Actions */
|
|
.stats-footer {
|
|
padding: 20px 30px;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #e9ecef;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-info {
|
|
float: left;
|
|
color: #6c757d;
|
|
font-size: 13px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.stats-actions {
|
|
float: right;
|
|
}
|
|
|
|
.btn-export {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
background: #28a745;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.btn-export:hover {
|
|
background: #218838;
|
|
color: white;
|
|
}
|
|
|
|
/* Clearfix */
|
|
.clearfix::after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
</style>
|
|
|
|
<div class="stats-container">
|
|
|
|
<!-- Header -->
|
|
<div class="stats-header">
|
|
<h2>{$form_data->description}</h2>
|
|
<div class="stats-period">
|
|
📅 Auswertungszeitraum: <strong>{$filter.date_start}</strong> bis <strong>{$filter.date_end}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="stats-content">
|
|
|
|
<!-- Data Table -->
|
|
<table class="data-grid">
|
|
<thead>
|
|
<tr>
|
|
{foreach item=col key=index_x from=$statistic_data->statistic_data[0]}
|
|
<th>{$col}</th>
|
|
{/foreach}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{foreach item=row key=index_y from=$statistic_data->statistic_data}
|
|
{if $index_y != 0}
|
|
<tr>
|
|
{foreach item=col key=index_x from=$row}
|
|
<td>{$col}</td>
|
|
{/foreach}
|
|
</tr>
|
|
{/if}
|
|
{/foreach}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<!-- Charts - DIREKT SICHTBAR, KEINE TABS! -->
|
|
{if $plotly_chart_bar}
|
|
<div class="chart-section">
|
|
<h3 class="chart-title">📊 Säulendiagramm</h3>
|
|
{$plotly_chart_bar}
|
|
</div>
|
|
{/if}
|
|
|
|
{if $plotly_chart_line}
|
|
<div class="chart-section">
|
|
<h3 class="chart-title">📈 Liniendiagramm</h3>
|
|
{$plotly_chart_line}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Footer -->
|
|
<div class="stats-footer clearfix">
|
|
<div class="stats-info">
|
|
Statistik generiert am: {if $today.mday < 10}0{/if}{$today.mday}.{if $today.mon < 10}0{/if}{$today.mon}.{$today.year}
|
|
</div>
|
|
<div class="stats-actions">
|
|
<a href="./index.php?admin_modul=admin_statistic_editor&action=get_csv&id={$form_data->id}&tab_id={$filter.period}&date_end={$filter.date_end}&date_start={$filter.date_start}" class="btn-export">
|
|
💾 Als CSV exportieren
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|