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": 31 }, { "Country": "Γιώργος Οικονόμου", "Value": 21 }, { "Country": "Γιάννης Αλαφούζος", "Value": 5 }, { "Country": "Γιώργος Προκοπίου", "Value": 5 }, { "Country": "Νικόλας Μαρτίνος", "Value": 3 }, { "Country": "Ανδρέας Μαρτίνος", "Value": 1 }, { "Country": "Σπύρος Πολέμης", "Value": 1 }, { "Country": "Νικόλας Τσάκος", "Value": 1 } ]; let dataTonoi = [ { "Country": "Διαμαντής Διαμαντίδης", "Value": 4925229 }, { "Country": "Γιώργος Οικονόμου", "Value": 3149158 }, { "Country": "Γιάννης Αλαφούζος", "Value": 789211 }, { "Country": "Γιώργος Προκοπίου", "Value": 764002 }, { "Country": "Νικόλας Μαρτίνος", "Value": 430787 }, { "Country": "Ανδρέας Μαρτίνος", "Value": 163417 }, { "Country": "Σπύρος Πολέμης", "Value": 149992 }, { "Country": "Νικόλας Τσάκος", "Value": 105365 }, ]; 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 === 'Dromolologia' ? 10 : valueField === 'Tonoi' ? 1 : undefined, min: valueField === 'Dromolologia' ? 0 : valueField === 'Tonoi' ? 0 : undefined, max: valueField === 'Dromolologia' ? 40 : valueField === 'Tonoi' ? 5 : 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; }