mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
7.6 KiB
192 lines
7.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>svgMap HTML demos</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
|
|
|
<link href="./demo.css" rel="stylesheet" />
|
|
<link href="../../dist/svgMap.css" rel="stylesheet" />
|
|
<script src="../../dist/svgMap.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="demo-wrapper">
|
|
<!-- Demo GPD -->
|
|
|
|
<div class="demo-container">
|
|
<h2>GDP per capita (PPP)</h2>
|
|
|
|
<div id="svgMapGPD"></div>
|
|
<script src="./data/gdp.js"></script>
|
|
<script>
|
|
new svgMap({
|
|
targetElementID: 'svgMapGPD',
|
|
data: svgMapDataGPD,
|
|
mouseWheelZoomEnabled: true,
|
|
mouseWheelZoomWithKey: true
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Demo population -->
|
|
|
|
<div class="demo-container">
|
|
<h2>Population desity (emojis as flags)</h2>
|
|
|
|
<div id="svgMapPopulation"></div>
|
|
<script src="./data/population.js"></script>
|
|
<script>
|
|
new svgMap({
|
|
targetElementID: 'svgMapPopulation',
|
|
data: svgMapDataPopulation,
|
|
flagType: 'emoji',
|
|
mouseWheelZoomEnabled: true,
|
|
mouseWheelZoomWithKey: true,
|
|
showContinentSelector: true
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Demo person height in German -->
|
|
|
|
<div class="demo-container">
|
|
<h2>Average person height (no flags, German language)</h2>
|
|
|
|
<div id="svgMapPersonHeight"></div>
|
|
<script src="./data/personHeight.js"></script>
|
|
<script src="./local/countriesDE.js"></script>
|
|
<script>
|
|
new svgMap({
|
|
targetElementID: 'svgMapPersonHeight',
|
|
countryNames: svgMapCountryNamesDE,
|
|
data: svgMapDataPersonHeight,
|
|
colorMin: 'rgb(255, 240, 249)',
|
|
colorMax: 'rgb(115, 11, 98)',
|
|
hideFlag: true,
|
|
noDataText: 'Keine Daten vorhanden',
|
|
mouseWheelZoomEnabled: true,
|
|
mouseWheelZoomWithKey: true,
|
|
mouseWheelKeyMessage: 'Bitte [ALT] drücken um zu zoomen',
|
|
mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen',
|
|
showZoomReset: true
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Demo EURO as currency -->
|
|
|
|
<div class="demo-container">
|
|
<h2>Countries using Euro as currency (custom tooltips)</h2>
|
|
|
|
<div id="svgMapEuroCurrency"></div>
|
|
<script>
|
|
var svgMapEuroCurrency = new svgMap({
|
|
targetElementID: 'svgMapEuroCurrency',
|
|
allowInteraction: false,
|
|
data: {
|
|
data: {
|
|
euro: {}
|
|
},
|
|
applyData: 'euro',
|
|
values: {
|
|
AT: { euro: 1, eurozone: 1 }, // Austria
|
|
BE: { euro: 1, eurozone: 1 }, // Belgium
|
|
CY: { euro: 1, eurozone: 1 }, // Cyprus
|
|
EE: { euro: 1, eurozone: 1 }, // Estonia
|
|
FI: { euro: 1, eurozone: 1 }, // Finland
|
|
FR: { euro: 1, eurozone: 1 }, // France
|
|
DE: { euro: 1, eurozone: 1 }, // Germany
|
|
GR: { euro: 1, eurozone: 1 }, // Greece
|
|
IE: { euro: 1, eurozone: 1 }, // Ireland
|
|
IT: { euro: 1, eurozone: 1 }, // Italy
|
|
LV: { euro: 1, eurozone: 1 }, // Latvia
|
|
LT: { euro: 1, eurozone: 1 }, // Lithuania
|
|
LU: { euro: 1, eurozone: 1 }, // Luxembourg
|
|
MT: { euro: 1, eurozone: 1 }, // Malta
|
|
NL: { euro: 1, eurozone: 1 }, // Netherlands
|
|
PT: { euro: 1, eurozone: 1 }, // Portugal
|
|
ES: { euro: 1, eurozone: 1 }, // Spain
|
|
SI: { euro: 1, eurozone: 1 }, // Slovenia
|
|
SK: { euro: 1, eurozone: 1 }, // Slovakia
|
|
|
|
// Countries using euro but not in eurozone
|
|
XK: { euro: 1, eurozone: 0, color: '#528FCC' }, // Kosovo
|
|
ME: { euro: 1, eurozone: 0, color: '#528FCC' }, // Montenegro
|
|
AD: { euro: 1, eurozone: 0, color: '#528FCC' }, // Andorra
|
|
MC: { euro: 1, eurozone: 0, color: '#528FCC' }, // Monaco
|
|
SM: { euro: 1, eurozone: 0, color: '#528FCC' }, // San Marino
|
|
VA: { euro: 1, eurozone: 0, color: '#528FCC' }, // Vatican City
|
|
|
|
// Countries in eurozone but not using euro
|
|
BG: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Bulgaria
|
|
CZ: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Czech Republic
|
|
DK: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Denmark
|
|
HR: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Croatia
|
|
HU: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Hungary
|
|
PL: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Poland
|
|
RO: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Romania
|
|
SE: { euro: 0, eurozone: 1, color: '#a6d2ff' } // Sweden
|
|
}
|
|
},
|
|
colorMin: '#E2E2E2',
|
|
colorMax: '#297ACC',
|
|
colorNoData: '#E2E2E2',
|
|
thresholdMax: 1,
|
|
thresholdMin: 0,
|
|
initialZoom: 3,
|
|
initialPan: {
|
|
x: 420,
|
|
y: 50
|
|
},
|
|
mouseWheelZoomEnabled: true,
|
|
mouseWheelZoomWithKey: true,
|
|
onGetTooltip: function (tooltipDiv, countryID, countryValues) {
|
|
// Geting the list of countries
|
|
var countries = svgMapEuroCurrency.countries;
|
|
|
|
// Create tooltip content element
|
|
var tooltipContentElement = document.createElement('div');
|
|
tooltipContentElement.style.padding = '16px 24px';
|
|
|
|
// Fill content
|
|
var innerHTML =
|
|
'<div style="margin: 0 0 10px; text-align: center"><img src="https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg" alt="" style="height: 40px; width: auto; border: 2px solid #eee"></div>'.replace(
|
|
'{0}',
|
|
countryID.toLowerCase()
|
|
);
|
|
|
|
innerHTML +=
|
|
'<div style="min-width: 180px; font-weight: bold; margin: 0 0 15px; text-align: center">' +
|
|
countries[countryID] +
|
|
'</div>';
|
|
|
|
if (countryValues && countryValues.eurozone == 1) {
|
|
innerHTML +=
|
|
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Part of eurozone</div>';
|
|
} else {
|
|
innerHTML +=
|
|
'<div style="margin-bottom: 8px; color: #aaa"><span style="color: #f03; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✘</span>Not a part of eurozone</div>';
|
|
}
|
|
|
|
if (countryValues && countryValues.euro == 1) {
|
|
innerHTML +=
|
|
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Uses Euro</div>';
|
|
} else {
|
|
innerHTML +=
|
|
'<div style="margin-bottom: 8px; color: #aaa"><span style="color: #f03; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✘</span>Does not use Euro</div>';
|
|
}
|
|
|
|
// Return element with custom content
|
|
tooltipContentElement.innerHTML = innerHTML;
|
|
return tooltipContentElement;
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|