first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,183 @@
|
||||
<?php
|
||||
$spents = [];
|
||||
if (isset($speding_category7) && isset($speding_category7["report"])) {
|
||||
$spents['7D'] = $speding_category7;
|
||||
}
|
||||
if (isset($speding_category30) && isset($speding_category30["report"])) {
|
||||
$spents['30D'] = $speding_category30;
|
||||
}
|
||||
if (isset($speding_category) && isset($speding_category["report"])) {
|
||||
$spents['60D'] = $speding_category;
|
||||
}
|
||||
if (isset($speding_category_daysrange) && isset($speding_category_daysrange['report'])) {
|
||||
$spents['daysrange'] = $speding_category_daysrange;
|
||||
}
|
||||
$spent_charts = [];
|
||||
$colors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#969696"];
|
||||
$spent_keys = array_keys($spents);
|
||||
$checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
|
||||
?>
|
||||
|
||||
<div class="col-lg-4 overflow-auto">
|
||||
<?php
|
||||
foreach ($spents as $spent_id => $spent) {
|
||||
?>
|
||||
<div class="spent_table_wrap" id="spent_table_wrap_<?= $spent_id ?>">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Percent</th>
|
||||
<th scope="col">Detail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$ii = 0;
|
||||
$spent_chart_item = [
|
||||
'labels' => [],
|
||||
'total_spent' => 0,
|
||||
'datasets' => [
|
||||
'data' => [],
|
||||
'backgroundColor' => []
|
||||
]
|
||||
];
|
||||
$total_spent = 0;
|
||||
foreach ($spent["report"] as $rows) {
|
||||
$total_spent += (float)$rows['spent'];
|
||||
}
|
||||
|
||||
foreach ($spent["report"] as $rows) {
|
||||
$ii++;
|
||||
$prc = $total_spent > 0 ? ((float)$rows['spent']??0)*100/($total_spent?:1) : 0;
|
||||
echo '<tr>';
|
||||
echo '<td>'.$ii.'</td>';
|
||||
echo '<td>'.$rows["type"].'</td>';
|
||||
echo '<td>'.$rows["spent"].'</td>';
|
||||
echo '<td '.($prc>0?'style="font-weight:bold;"':'').'>'.number_format($prc,2,'.','').'%</td>';
|
||||
echo '<td></td>';
|
||||
echo '</tr>';
|
||||
//echo "<tr><td>$ii</td><td>" . $rows["type"] . "</td><td>" . $rows["spent"] . "</td><td></td></tr>";
|
||||
$spent_chart_item['labels'][] = $rows["type"] ?? '-';
|
||||
$spent_chart_item['datasets']['data'][] = (float)$rows["spent"] ?? 0;
|
||||
$spent_chart_item['datasets']['backgroundColor'][] = isset($colors[$ii - 1]) ? $colors[$ii - 1] : '#49ff00';
|
||||
}
|
||||
$spent_chart_item['total_spent'] = $total_spent;
|
||||
$spent_charts[$spent_id] = $spent_chart_item;
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="col-lg-8 overflow-auto">
|
||||
<?php if ( ! $checkDateRangeExist ): ?>
|
||||
<div class="text-center" style="margin-bottom: 8px;">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<?php
|
||||
foreach ($spent_keys as $id) {
|
||||
echo '<button type="button" id="btn_switch_spent_' . $id . '"
|
||||
class="btn_switch_spent btn btn-outline-secondary"
|
||||
onclick="fn_show_spent_(\'' . $id . '\')">' . $id . '</button>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
foreach ($spent_keys as $id) {
|
||||
echo '<canvas id="spent_category_chart_' . $id . '" class="spent_chart" width="800" height="450"></canvas>';
|
||||
}
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
function chartHexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
var spent_categore_charts = <?=json_encode($spent_charts)?>;
|
||||
var spent_keys = <?=json_encode(array_keys($spent_charts))?>;
|
||||
for (var spent_id in spent_categore_charts) {
|
||||
var spent_char_data = spent_categore_charts[spent_id];
|
||||
var showTitle = '<?php echo !$checkDateRangeExist ? 'true' : 'false'; ?>';
|
||||
var _title;
|
||||
if ( showTitle == 'true' ) {
|
||||
_title = 'Spend Category Chart ' + spent_id;
|
||||
} else {
|
||||
_title = 'Spend Category Chart from ' + '<?php if ( isset( $start_date ) ) echo $start_date; ?>' + ' to ' + '<?php if ( isset( $end_date ) ) echo $end_date; ?>';
|
||||
}
|
||||
|
||||
var ctx = document.getElementById("spent_category_chart_" + spent_id);
|
||||
if ( ctx == null ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: spent_char_data.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: spent_char_data.datasets.backgroundColor,
|
||||
data: spent_char_data.datasets.data,
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: [_title,'Total Spend: $'+spent_char_data.total_spent]
|
||||
},
|
||||
tooltips: {
|
||||
enabled: true
|
||||
},
|
||||
plugins: {
|
||||
labels: {
|
||||
textShadow: true,
|
||||
render: function (args) {
|
||||
return args.percentage+'%\n$'+args.value;
|
||||
},
|
||||
fontColor: function (data) {
|
||||
var rgb = chartHexToRgb(data.dataset.backgroundColor[data.index]);
|
||||
var threshold = 140;
|
||||
var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
|
||||
return luminance > threshold ? 'black' : 'white';
|
||||
},
|
||||
precision: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_show_spent_(id) {
|
||||
$('.spent_chart').hide();
|
||||
$('#spent_category_chart_' + id).show();
|
||||
|
||||
$('.spent_table_wrap').hide();
|
||||
$('#spent_table_wrap_' + id).show();
|
||||
|
||||
$(".btn_switch_spent").removeClass('btn-success');
|
||||
$("#btn_switch_spent_" + id).addClass('btn-success');
|
||||
}
|
||||
|
||||
if (spent_keys.length > 0) {
|
||||
//trigger show first days default
|
||||
fn_show_spent_(spent_keys[0]);
|
||||
}
|
||||
</script>
|
||||
<div>
|
||||
<?php
|
||||
$activities_cards = $speding_category7['options']['cards']??[];
|
||||
include( __DIR__ . '/cards.php' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user