dev-chiefworks
120 lines
5.2 KiB
PHP
120 lines
5.2 KiB
PHP
<div class="col-lg-12 overflow-auto">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Total or City Data</th>
|
|
<th scope="col">Users Data</th>
|
|
<th scope="col" class="text-center">Plot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row" style="max-width: 25%">
|
|
<table class="table table-striped">
|
|
<?php
|
|
$ii = $radar_data_sum_value = 0;
|
|
foreach ($radar_data["report"][0] as $rows) {
|
|
$radar_data_sum_value += $rows['value']??0;
|
|
}
|
|
foreach ($radar_data["report"][0] as &$rows) {
|
|
$ii++;
|
|
$prc = $rows["value"]>0?$rows["value"]*100/$radar_data_sum_value:0;
|
|
$rows['prc'] = round($prc, 2);
|
|
echo '<tr>';
|
|
echo '<td>'.$ii.'</td>';
|
|
echo '<td>'.$rows["axis"].'</td>';
|
|
echo '<td title="'.$rows['value'].'">'.$rows['prc'].'%</td>';
|
|
echo '</tr>';
|
|
}
|
|
?>
|
|
</table>
|
|
</th>
|
|
<td style="max-width: 25%">
|
|
<table class="table table-striped">
|
|
<?php
|
|
$ii = 0;
|
|
$radar_data_sum_value = 0;
|
|
foreach ($radar_data["report"][1] as &$rows) {
|
|
$radar_data_sum_value += $rows['value']??0;
|
|
}
|
|
foreach ($radar_data["report"][1] as &$rows) {
|
|
$ii++;
|
|
$prc = $rows["value"]>0?$rows["value"]*100/$radar_data_sum_value:0;
|
|
$rows['prc'] = round($prc, 2);
|
|
echo '<tr>';
|
|
echo '<td>'.$ii.'</td>';
|
|
echo '<td>'.$rows["axis"].'</td>';
|
|
echo '<td title="'.$rows['value'].'" '.($rows['prc']>0?'style="font-weight:bold;"':'').'>'.$rows['prc'].'%</td>';
|
|
echo '</tr>';
|
|
}
|
|
?>
|
|
</table>
|
|
</td>
|
|
<td style="width: 50%">
|
|
<canvas id="personaltyRadarChart"></canvas>
|
|
<script>
|
|
var radar_data = <?php echo json_encode($radar_data) ?>;
|
|
var radar_labels = [], radar_data_value_total = [],
|
|
radar_data_value_user = [];
|
|
radar_data.report[0].forEach(function (element, ielement) {
|
|
radar_labels.push(element.axis);
|
|
radar_data_value_total.push(element.prc);
|
|
});
|
|
radar_data_value_user = radar_data.report[1].reduce(function (a, b) {
|
|
a.push(parseFloat(b.prc));
|
|
return a;
|
|
}, []);
|
|
var marksCanvas = document.getElementById("personaltyRadarChart");
|
|
var marksData = {
|
|
labels: radar_labels,
|
|
datasets: [{
|
|
label: "Your travel",
|
|
backgroundColor: "rgba(200,0,0,0.2)",
|
|
data: radar_data_value_user
|
|
}, {
|
|
label: "Avg person in your city",
|
|
backgroundColor: "rgba(0,0,200,0.2)",
|
|
data: radar_data_value_total
|
|
}]
|
|
};
|
|
var radarChart = new Chart(marksCanvas, {
|
|
type: 'radar',
|
|
data: marksData,
|
|
options: {
|
|
backgroundColor: 'red',
|
|
scale: {
|
|
gridLines: {
|
|
circular: true
|
|
},
|
|
ticks: {
|
|
beginAtZero: true
|
|
},
|
|
pointLabels: {
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
plugins: {
|
|
labels: {
|
|
render: 'percentage',
|
|
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
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<?php
|
|
$activities_cards = $radar_data['options']['cards']??[];
|
|
include( __DIR__ . '/cards.php' ); ?>
|
|
</div>
|