Skip to content

Commit 3f8cb10

Browse files
fballianofballiano
authored
Fixed dashboard chart disappearing when changing date range (#696)
1 parent 666d75f commit 3f8cb10

File tree

2 files changed

+71
-118
lines changed

2 files changed

+71
-118
lines changed

‎app/design/adminhtml/default/default/template/dashboard/graph.phtml‎

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
/** @var Mage_Adminhtml_Block_Dashboard_Graph $this */
1515
?>
1616

17-
<?php $chartRandomId = rand(100,999) ?>
1817
<div style="margin:20px;">
1918
<p class="switcher a-right" style="padding:5px 10px;"><?= $this->__('Select Range') ?>:
2019
<select name="period" id="order_<?= $this->getHtmlId() ?>_period" onchange="changeDiagramsPeriod(this);">
@@ -28,53 +27,13 @@
2827
?>
2928
<?php if($this->getCount()): ?>
3029
<?php $this->processData() ?>
31-
<div class="a-center" style="<?= $_containerStyle?>"><canvas id="chart<?= $chartRandomId ?>"></canvas></div>
32-
33-
<script type="text/javascript">
34-
window.chartsLoaded = window.chartsLoaded || false;
35-
function loadCharts(callback) {
36-
if (window.chartsLoaded && window.Chart) {
37-
callback();
38-
return;
39-
}
40-
41-
const script = document.createElement('script');
42-
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js';
43-
script.async = true;
44-
script.onload = () => {
45-
window.chartsLoaded = true;
46-
callback();
47-
};
48-
document.head.appendChild(script);
49-
}
50-
51-
function initializeChart() {
52-
<?php $allSeries = $this->getAllSeries() ?>
53-
const config = {
54-
type: 'line',
55-
data: {
56-
labels: <?= json_encode($this->getAxisLabels('x')) ?>,
57-
datasets: [{
58-
data: <?= json_encode($allSeries[array_key_first($allSeries)]) ?>,
59-
borderColor: '#adb41a',
60-
tension: 0.2
61-
}]
62-
},
63-
options: {
64-
plugins: {
65-
legend: {
66-
display: false
67-
}
68-
}
69-
}
70-
};
71-
72-
if (window.chart<?= $chartRandomId ?> && window.chart<?= $chartRandomId ?>.destroy) window.chart<?= $chartRandomId ?>.destroy();
73-
window.chart<?= $chartRandomId ?> = new Chart(document.getElementById('chart<?= $chartRandomId ?>'), config);
74-
}
75-
76-
loadCharts(initializeChart);
77-
</script>
30+
<?php $allSeries = $this->getAllSeries() ?>
31+
<div class="a-center dashboard-chart"
32+
style="<?= $_containerStyle ?>"
33+
data-chart-labels="<?= $this->escapeHtml(json_encode($this->getAxisLabels('x'))) ?>"
34+
data-chart-data="<?= $this->escapeHtml(json_encode($allSeries[array_key_first($allSeries)])) ?>">
35+
<canvas></canvas>
36+
</div>
7837
<?php else: ?>
7938
<p class="a-center" style="<?= $_containerStyle?>"><?= $this->__('No Data Found') ?></p>
8039
<?php endif ?>

‎app/design/adminhtml/default/default/template/dashboard/index.phtml‎

Lines changed: 64 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,91 +15,85 @@
1515
<?php if (is_array($this->getChild('diagrams')->getTabsIds())) : ?>
1616
<script type="text/javascript">
1717
//<![CDATA[
18-
function changeDiagramsPeriod(periodObj) {
19-
periodParam = periodObj.value ? 'period/' + periodObj.value + '/' : '';
20-
<?php foreach ($this->getChild('diagrams')->getTabsIds() as $tabId): ?>
21-
ajaxBlockParam = 'block/tab_<?= $tabId ?>/';
22-
ajaxBlockUrl = '<?= $this->getUrl('*/*/ajaxBlock', ['_current' => true, 'block' => '', 'period' => '']) ?>' + ajaxBlockParam + periodParam;
23-
const formData_<?= $tabId ?> = new FormData();
24-
formData_<?= $tabId ?>.append('isAjax', 'true');
25-
formData_<?= $tabId ?>.append('form_key', FORM_KEY);
26-
27-
mahoFetch(ajaxBlockUrl, {
28-
method: 'POST',
29-
body: formData_<?= $tabId ?>
30-
})
31-
.then(response => {
32-
tabContentElementId = '<?= $this->getChild('diagrams')->getId() ?>_<?= $tabId ?>_content';
33-
try {
34-
let responseData = response;
35-
if (typeof response === 'string') {
36-
try {
37-
responseData = JSON.parse(response);
38-
if (responseData.error) {
39-
alert(responseData.message);
40-
}
41-
if(responseData.ajaxExpired && responseData.ajaxRedirect) {
42-
setLocation(responseData.ajaxRedirect);
43-
}
44-
} catch (e) {
45-
document.getElementById(tabContentElementId).innerHTML = response;
46-
}
47-
} else {
48-
document.getElementById(tabContentElementId).innerHTML = response;
49-
}
18+
function loadChartJs() {
19+
return new Promise((resolve, reject) => {
20+
if (window.Chart) {
21+
resolve();
22+
return;
5023
}
51-
catch (e) {
52-
document.getElementById(tabContentElementId).innerHTML = response;
53-
}
54-
})
55-
.catch(error => {
56-
console.error('Ajax block error:', error);
24+
const script = document.createElement('script');
25+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.min.js';
26+
script.integrity = 'sha512-Y51n9mtKTVBh3Jbx5pZSJNDDMyY+yGe77DGtBPzRlgsf/YLCh13kSZ3JmfHGzYFCmOndraf0sQgfM654b7dJ3w==';
27+
script.crossOrigin = 'anonymous';
28+
script.async = true;
29+
script.onload = resolve;
30+
script.onerror = () => reject(new Error('Failed to load Chart.js'));
31+
document.head.appendChild(script);
5732
});
58-
<?php endforeach ?>
59-
ajaxBlockUrl = '<?= $this->getUrl('*/*/ajaxBlock', ['_current' => true, 'block' => 'totals', 'period' => '']) ?>' + periodParam;
60-
const formData2 = new FormData();
61-
formData2.append('isAjax', 'true');
62-
formData2.append('form_key', FORM_KEY);
33+
}
6334

64-
mahoFetch(ajaxBlockUrl, {
65-
method: 'POST',
66-
body: formData2
67-
})
68-
.then(response => {
69-
tabContentElementId = 'dashboard_diagram_totals';
35+
function initDashboardCharts(container) {
36+
container.querySelectorAll('.dashboard-chart').forEach(el => {
37+
const canvas = el.querySelector('canvas');
38+
if (!canvas) return;
39+
40+
let labels, data;
7041
try {
71-
let responseData = response;
72-
if (typeof response === 'string') {
73-
try {
74-
responseData = JSON.parse(response);
75-
if (responseData.error) {
76-
alert(responseData.message);
77-
}
78-
if(responseData.ajaxExpired && responseData.ajaxRedirect) {
79-
setLocation(responseData.ajaxRedirect);
80-
}
81-
} catch (e) {
82-
document.getElementById(tabContentElementId).outerHTML = response;
42+
labels = JSON.parse(el.dataset.chartLabels);
43+
data = JSON.parse(el.dataset.chartData);
44+
} catch (e) {
45+
console.error('Dashboard chart: invalid data', e);
46+
return;
47+
}
48+
49+
if (canvas._chartInstance) canvas._chartInstance.destroy();
50+
canvas._chartInstance = new Chart(canvas, {
51+
type: 'line',
52+
data: {
53+
labels: labels,
54+
datasets: [{
55+
data: data,
56+
borderColor: '#adb41a',
57+
tension: 0.2
58+
}]
59+
},
60+
options: {
61+
plugins: {
62+
legend: { display: false }
8363
}
84-
} else {
85-
document.getElementById(tabContentElementId).outerHTML = response;
8664
}
87-
}
88-
catch (e) {
89-
document.getElementById(tabContentElementId).outerHTML = response;
90-
}
91-
})
92-
.catch(error => {
93-
console.error('Ajax block totals error:', error);
65+
});
9466
});
9567
}
9668

69+
function changeDiagramsPeriod(periodObj) {
70+
const periodParam = periodObj.value ? 'period/' + periodObj.value + '/' : '';
71+
72+
<?php foreach ($this->getChild('diagrams')->getTabsIds() as $tabId): ?>
73+
mahoFetch('<?= $this->getUrl('*/*/ajaxBlock', ['_current' => true, 'block' => '', 'period' => '']) ?>' + 'block/tab_<?= $tabId ?>/' + periodParam, {
74+
method: 'POST'
75+
}).then(response => {
76+
const el = document.getElementById('<?= $this->getChild('diagrams')->getId() ?>_<?= $tabId ?>_content');
77+
el.innerHTML = response;
78+
loadChartJs().then(() => initDashboardCharts(el));
79+
}).catch(e => console.error('Dashboard diagram error:', e));
80+
<?php endforeach ?>
81+
82+
mahoFetch('<?= $this->getUrl('*/*/ajaxBlock', ['_current' => true, 'block' => 'totals', 'period' => '']) ?>' + periodParam, {
83+
method: 'POST'
84+
}).then(response => {
85+
document.getElementById('dashboard_diagram_totals').outerHTML = response;
86+
}).catch(e => console.error('Dashboard totals error:', e));
87+
}
88+
9789
function toggleCal(id) {
9890
const calDiv = document.getElementById('dashboard_'+id+'_cal_div');
9991
const rangeDiv = document.getElementById('dashboard_'+id+'_range_div');
10092
calDiv.style.display = calDiv.style.display === 'none' ? 'block' : 'none';
10193
rangeDiv.style.display = rangeDiv.style.display === 'none' ? 'block' : 'none';
10294
}
95+
96+
mahoOnReady(() => loadChartJs().then(() => initDashboardCharts(document)));
10397
//]]>
10498
</script>
10599
<?php endif ?>

0 commit comments

Comments
 (0)