221 lines
8 KiB
PHP
221 lines
8 KiB
PHP
<?php
|
|
global $wpdb;
|
|
|
|
$oStock = $wpdb->get_results("SELECT * FROM wp_financialdata WHERE name = 'stock'");
|
|
$oStock = json_decode($oStock[0]->data, true);
|
|
|
|
$oMinMax = $wpdb->get_results("SELECT MIN(close) AS min, MAX(close) AS max FROM wp_financialdata_history WHERE date > CURDATE() - INTERVAL 365 DAY")[0];
|
|
|
|
$open = $oStock["02. open"];
|
|
$high = $oStock["03. high"];
|
|
$low = $oStock["04. low"];
|
|
$price = $oStock["05. price"];
|
|
$volume = $oStock["06. volume"];
|
|
$last_close = $oStock["08. previous close"];
|
|
$change = $oStock["09. change"];
|
|
$change_percent = $oStock["10. change percent"];
|
|
|
|
// TODO : mettre la valeur $nb_titres dans le BO
|
|
$nb_titres = 17134471;
|
|
$capitalisation = number_format(($nb_titres * $price) / 1000000000, 2)." Md";
|
|
?>
|
|
|
|
<section class="financial description">
|
|
<div class="heading-financial">
|
|
<h4>Financial Data : LOUP.PA (LDC SA)</h4>
|
|
<h4><?= number_format($price, 2); ?> <span style="font-size:18px; font-weight:normal;">EUR</span>
|
|
<?php if(strpos($change, '-') === false){ ?>
|
|
<span style='color:green;font-size:20px; font-weight:normal;'><?= number_format($change, 2); ?>€ (<?= $change_percent; ?>)</span>
|
|
<?php } else { ?>
|
|
<span style='color:red;font-size:20px; font-weight:normal;'><?= number_format($change, 2); ?>€ (<?= $change_percent; ?>)</span>
|
|
<?php } ?>
|
|
<br/>
|
|
<span style="font-size:18px; font-weight:normal;"><?= wp_date("d/m/Y H:i:s"); ?> (UTC+2)</span>
|
|
</h4>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="butt" data-period='intraday'>1 Jour</div>
|
|
<div class="butt active" data-period='5'>5 Jours</div>
|
|
<div class="butt" data-period='30'>1 mois</div>
|
|
<div class="butt" data-period='182'>6 mois</div>
|
|
<div class="butt" data-period='YTD'>Année en cours</div>
|
|
<div class="butt" data-period='365'>1 an</div>
|
|
<div class="butt" data-period='1825'>5 ans</div>
|
|
<div class="butt" data-period='all'>Max.</div>
|
|
</div>
|
|
<canvas id="myChart" height="150"></canvas>
|
|
<div class="footer-financial">
|
|
<p>Ouverture : <span><?= number_format($open, 2); ?></span></p>
|
|
<!--<p>Rend. Div. : <span><?php /*echo $stock_object['price_open'] */?></span></p>-->
|
|
<p>+ Haut : <span><?= number_format($high, 2); ?></span></p>
|
|
<p>Cours Clôt. : <span><?= number_format($last_close, 2); ?></span></p>
|
|
<p>+ Bas : <span><?= number_format($low, 2); ?></span></p>
|
|
<p>Max 52 sem. : <span><?= number_format($oMinMax->max, 2); ?></span></p>
|
|
<p>Capitalisation : <span><?php echo $capitalisation ?></span></p>
|
|
<p>Min 52 sem. : <span><?= number_format($oMinMax->min, 2); ?></span></p>
|
|
<!--<p>Cours/bén. : <span>??</span></p>-->
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.financial {
|
|
width:100%;
|
|
border-radius:10px;
|
|
border: 1px solid grey;
|
|
background-color:#FFF;
|
|
padding:20px;
|
|
box-sizing: border-box;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
.financial .footer-financial {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.financial .footer-financial p {
|
|
margin:0;
|
|
width:48%;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
}
|
|
.financial .footer-financial p span {
|
|
color:#888888;
|
|
}
|
|
.financial .buttons {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
align-items:center;
|
|
justify-content : space-around;
|
|
margin-top:20px;
|
|
border-bottom:1px solid #CCCCCC;
|
|
}
|
|
.financial .buttons .butt {
|
|
padding: 10px;
|
|
cursor:pointer;
|
|
|
|
}
|
|
.financial .buttons .butt:hover{
|
|
border-bottom:2px solid #e51c20;
|
|
}
|
|
.financial .buttons .butt.active {
|
|
border-bottom:2px solid #e51c20;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
////////// POC BOURSE///////////////
|
|
var mixedChart;
|
|
// Changement de périod sur le graphique de la bourse
|
|
$('.butt').on('click', function(e){
|
|
var element = $(this);
|
|
$('.butt').each(function(){
|
|
$(this).removeClass('active');
|
|
})
|
|
element.addClass('active');
|
|
var period = element.attr('data-period');
|
|
createGraph(period);
|
|
})
|
|
//Fonction qui génère le graphique en fonction de la période
|
|
function createGraph(period) {
|
|
$.ajax({
|
|
url: ajaxurl,
|
|
type: 'POST',
|
|
dataType : 'json',
|
|
data: {
|
|
'action' : 'getGraphData',
|
|
'period': period
|
|
},
|
|
success: function (result){
|
|
console.log(result);
|
|
try {
|
|
mixedChart.destroy();
|
|
} catch (error) {}
|
|
var ctx = document.getElementById("myChart").getContext('2d');
|
|
mixedChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
label: 'Cours LDC',
|
|
data: result.values,
|
|
type: 'line',
|
|
yAxisID: 'values',
|
|
backgroundColor: 'rgba(255, 192, 192, 0)',
|
|
borderColor: 'rgba(229,28,32,1)',
|
|
datalabels: {
|
|
display:false,
|
|
color: '#000',
|
|
backgroundColor: 'rgba(229,28,32,1)',
|
|
borderRadius : 5,
|
|
font: {
|
|
size : '18',
|
|
lineHeight : 1,
|
|
weight: 'bold',
|
|
}
|
|
}
|
|
}],
|
|
labels: result.dates
|
|
},
|
|
options: {
|
|
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
|
|
aspectRatio : 2.5,
|
|
maintainAspectRatio: true,
|
|
responsive:true,
|
|
elements: {
|
|
line: {
|
|
tension: 0
|
|
},
|
|
point:{
|
|
radius: 0
|
|
}
|
|
},
|
|
layout: {
|
|
padding: {
|
|
top: 30,
|
|
bottom: 30
|
|
}
|
|
},
|
|
legend: {
|
|
display:false,
|
|
position: 'bottom',
|
|
labels:{
|
|
fontSize : 16
|
|
}
|
|
},
|
|
scales : {
|
|
xAxes:[{
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Jour',
|
|
fontSize : 14
|
|
},
|
|
ticks: {
|
|
//beginAtZero: false,
|
|
fontSize : 14
|
|
}
|
|
}],
|
|
yAxes:[{
|
|
id: 'values',
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: '€',
|
|
fontSize : 16
|
|
},
|
|
ticks: {
|
|
beginAtZero: false,
|
|
fontSize : 16
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
})
|
|
}
|
|
//Init du graph de la bourse sur 5j
|
|
createGraph(5);
|
|
</script>
|