barChartSimple = { const wrapper = html`

Η εθνικότητα των συμφερόντων των τάνκερ που έχουν μεταφέρει ρωσικό πετρέλαιο από τον αγωγό CPC

Ο πίνακας παρουσιάζει την εθνικότητα των συμφερόντων των τάνκερ που έχουν μεταφέρει ρωσικό πετρέλαιο από τον αγωγό CPC μετά την εισβολή της Ρωσίας στην Ουκρανία (1.3.2022 - 9.11.2024).

Πατήστε τα κουμπιά του πίνακα, για να δείτε την κατάταξη των χωρών ανά αριθμό δρομολογίων και όγκο φορτίων.

Πηγή: Kpler, Equasis

Διαχείριση δεδομένων: Σωτήρης Σιδέρης / Reporters United

`; const container = wrapper.querySelector('#container'); // Custom formatter for numbers using dot as thousands separator const dotFormatter = (value) => { return new Intl.NumberFormat('de-DE').format(value); }; let dataDromolologia = [ { "Country": "Ελλάδα", "Value": 68 }, { "Country": "Τουρκία", "Value": 24 }, { "Country": "Ηνωμένα Αραβικά Εμιράτα", "Value": 19 }, { "Country": "Βιετνάμ", "Value": 8 }, { "Country": "Κίνα", "Value": 8 }, { "Country": "Σεϋχέλλες", "Value": 4 }, { "Country": "Σιγκαπούρη", "Value": 3 }, { "Country": "Νορβηγία", "Value": 2 }, { "Country": "Ινδία", "Value": 2 }, { "Country": "Κροατία", "Value": 1 }, { "Country": "Αντίγκουα και Μπαρμπούντα", "Value": 1 }, { "Country": "Νήσοι Μάρσαλ", "Value": 1 }, { "Country": "Μονακό", "Value": 1 }, { "Country": "Κύπρος", "Value": 1 }, { "Country": "Γερμανία", "Value": 1 } ]; let dataTonoi = [ { "Country": "Ελλάδα", "Value": 10477161 }, { "Country": "Τουρκία", "Value": 3593778 }, { "Country": "Ηνωμένα Αραβικά Εμιράτα", "Value": 2952934 }, { "Country": "Βιετνάμ", "Value": 1270685 }, { "Country": "Κίνα", "Value": 960090 }, { "Country": "Σεϋχέλλες", "Value": 635506 }, { "Country": "Σιγκαπούρη", "Value": 499404 }, { "Country": "Νορβηγία", "Value": 318116 }, { "Country": "Ινδία", "Value": 316181 }, { "Country": "Κροατία", "Value": 166188 }, { "Country": "Αντίγκουα και Μπαρμπούντα", "Value": 159186 }, { "Country": "Νήσοι Μάρσαλ", "Value": 159081 }, { "Country": "Μονακό", "Value": 157286 }, { "Country": "Κύπρος", "Value": 146356 }, { "Country": "Γερμανία", "Value": 115896 } ]; const addRankings = (data) => { const sortedData = [...data].sort((a, b) => b.Value - a.Value); sortedData.forEach((item, index) => { item.Rank = index + 1; item.CountryWithRank = `${item.Rank}. ${item.Country}`; }); return sortedData; }; const renderBarChart = (data, valueField, xAxisTitle) => { const rankedData = addRankings(data); container.innerHTML = ''; // Clear the container // Adjusting formatter based on valueField const xAxisOptions = { title: { text: xAxisTitle, style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', } }, label: { formatter: (value) => dotFormatter(value) }, // Set tick interval to 2 for the tonnage in millions tickInterval: valueField === 'Tonoi' ? 2 : undefined, min: valueField === 'Tonoi' ? 0 : undefined, max: valueField === 'Tonoi' ? 12 : undefined, nice: true }; const barChart = new G2Plot.Bar(container, { data: rankedData.map(d => ({ ...d, Value: valueField === 'Tonoi' ? d.Value / 1000000 : d.Value })), xField: 'Value', yField: 'CountryWithRank', seriesField: 'Country', legend: false, xAxis: xAxisOptions, color: '#3937b5', yAxis: { label: { style: { fontWeight: 'bold', color: 'black', fontSize: 14 }, formatter: (text) => text } }, tooltip: { showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; // Corrected this line const datum = items[0].data; const originalValue = (valueField === 'Tonoi') ? datum.Value * 1000000 : datum.Value; const formattedValue = dotFormatter(originalValue); const suffix = (valueField === 'Dromolologia' && originalValue === 1) ? 'δρομολόγιο' : (valueField === 'Dromolologia' ? 'δρομολόγια' : 'μετρικοί τόνοι'); return `

${datum.Country}: ${formattedValue} ${suffix}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' }, } } }); barChart.render(); }; const highlightButton = (buttonId) => { document.getElementById('dromolologiaButton').style.backgroundColor = 'white'; document.getElementById('dromolologiaButton').style.color = 'black'; document.getElementById('tonoiButton').style.backgroundColor = 'white'; document.getElementById('tonoiButton').style.color = 'black'; const activeButton = document.getElementById(buttonId); activeButton.style.backgroundColor = '#3937b5'; // Dark blue when active activeButton.style.color = 'white'; }; // Initial render requestAnimationFrame(() => { document.getElementById('dromolologiaButton').addEventListener('click', () => { renderBarChart(dataDromolologia, 'Dromolologia', 'Δρομολόγια'); highlightButton('dromolologiaButton'); }); document.getElementById('tonoiButton').addEventListener('click', () => { renderBarChart(dataTonoi, 'Tonoi', 'Εκατομμύρια μετρικοί τόνοι (DWT)'); highlightButton('tonoiButton'); }); renderBarChart(dataDromolologia, 'Dromolologia', 'Δρομολόγια'); // Default view highlightButton('dromolologiaButton'); }); return wrapper; }