overview
1 year ago
campaign_builder_controller.js
1 year ago
chart_controller.js
2 months ago
chart_interval_controller.js
2 years ago
clipboard_controller.js
1 year ago
copy_report_controller.js
2 years ago
create_report_controller.js
1 year ago
delete_data_controller.js
1 year ago
delete_report_controller.js
2 years ago
easepick_controller.js
2 years ago
examiner_controller.js
2 months ago
examiner_header_controller.js
11 months ago
export_overview_controller.js
9 months ago
export_reports_controller.js
2 years ago
filters_controller.js
6 months ago
group_controller.js
2 years ago
import_reports_controller.js
2 years ago
journey_controller.js
6 months ago
map_controller.js
6 days ago
migration_redirect_controller.js
2 years ago
modal_controller.js
2 years ago
pause_emails_controller.js
6 months ago
pie_chart_controller.js
6 months ago
plugin_group_options_controller.js
1 year ago
pruner_controller.js
5 months ago
quick_stats_controller.js
1 year ago
real_time_controller.js
6 days ago
refresh_overview_controller.js
1 year ago
rename_report_controller.js
2 years ago
report_controller.js
2 months ago
reset_analytics_controller.js
1 year ago
reset_overview_controller.js
1 year ago
save_report_controller.js
2 years ago
select_input_controller.js
2 years ago
set_favorite_report_controller.js
6 days ago
sort_controller.js
2 years ago
sortable_reports_controller.js
2 years ago
table_columns_controller.js
2 years ago
tooltip_controller.js
6 months ago
woocommerce_settings_controller.js
1 year ago
map_controller.js
411 lines
| 1 | import { Controller } from "@hotwired/stimulus"; |
| 2 | import { isDarkMode } from "../utils/appearance"; |
| 3 | import svgMap from "svgmap"; |
| 4 | |
| 5 | export default class extends Controller { |
| 6 | static targets = ["chart"]; |
| 7 | static values = { |
| 8 | data: Array, |
| 9 | flagsUrl: String, |
| 10 | locale: String, |
| 11 | }; |
| 12 | |
| 13 | map = null; |
| 14 | resizeObserver = null; |
| 15 | |
| 16 | connect() { |
| 17 | if (this.map) { |
| 18 | this.resizeObserver.observe(this.chartTarget); |
| 19 | return; |
| 20 | } |
| 21 | |
| 22 | this.initializeMap(); |
| 23 | |
| 24 | window.iawpMaps = window.iawpMaps || []; |
| 25 | window.iawpMaps.push(this.map); |
| 26 | |
| 27 | this.resizeObserver.observe(this.chartTarget); |
| 28 | } |
| 29 | |
| 30 | disconnect() { |
| 31 | this.resizeObserver.disconnect(); |
| 32 | window.iawpMaps = window.iawpMaps || []; |
| 33 | window.iawpMaps = window.iawpMaps.filter((map) => { |
| 34 | return map !== this.map; |
| 35 | }); |
| 36 | } |
| 37 | |
| 38 | initializeMap() { |
| 39 | const id = "iawp-map-" + Math.random().toString(); |
| 40 | this.chartTarget.setAttribute("id", id); |
| 41 | |
| 42 | const chartValues = {}; |
| 43 | |
| 44 | this.dataValue.forEach((country) => { |
| 45 | chartValues[country.country_code] = { |
| 46 | visitors: country.visitors, |
| 47 | views: country.views, |
| 48 | sessions: country.sessions, |
| 49 | }; |
| 50 | }); |
| 51 | |
| 52 | // map.applyData(newData); |
| 53 | |
| 54 | this.map = new svgMap({ |
| 55 | targetElementID: id, |
| 56 | allowInteraction: false, |
| 57 | initialZoom: 1.1, |
| 58 | colorMax: "#5123A0", |
| 59 | colorMin: "#bea4eb", |
| 60 | colorNoData: "#dedede", |
| 61 | ratioType: "log", |
| 62 | data: { |
| 63 | data: { |
| 64 | visitors: { |
| 65 | name: "Visitors", |
| 66 | }, |
| 67 | views: { |
| 68 | name: "Views", |
| 69 | }, |
| 70 | sessions: { |
| 71 | name: "Sessions", |
| 72 | }, |
| 73 | }, |
| 74 | applyData: "visitors", |
| 75 | values: chartValues, |
| 76 | }, |
| 77 | onGetTooltip: (tooltipDiv, countryCode, countryValues) => { |
| 78 | const country = this.dataValue.find((country) => { |
| 79 | return country["country_code"] === countryCode; |
| 80 | }); |
| 81 | |
| 82 | const flagUrl = this.flagsUrlValue + "/" + countryCode.toLowerCase() + ".svg"; |
| 83 | |
| 84 | // Render an empty tooltip when there's no country data |
| 85 | if (!country) { |
| 86 | const templateString = ` |
| 87 | <div class="iawp-geo-chart-tooltip"> |
| 88 | <img src="${flagUrl}" alt="Country flag"/> |
| 89 | <h1>${this.countryName(countryCode)}</h1> |
| 90 | <p>No data available</p> |
| 91 | </div> |
| 92 | `; |
| 93 | |
| 94 | const templateDocument = new DOMParser().parseFromString(templateString, "text/html"); |
| 95 | |
| 96 | return templateDocument.body.firstElementChild; |
| 97 | } |
| 98 | |
| 99 | const formatted_views = this.formatNumber(country["views"]); |
| 100 | const formatted_visitors = this.formatNumber(country["visitors"]); |
| 101 | const formatted_sessions = this.formatNumber(country["sessions"]); |
| 102 | |
| 103 | const templateString = ` |
| 104 | <div class="iawp-geo-chart-tooltip"> |
| 105 | <img src="${flagUrl}" alt="Country flag"/> |
| 106 | <h1>${this.countryName(countryCode)}</h1> |
| 107 | <div class="iawp-geo-chart-tooltip-table"> |
| 108 | <span>${iawpText.views}</span><span>${formatted_views}</span> |
| 109 | <span>${iawpText.visitors}</span><span>${formatted_visitors}</span> |
| 110 | <span>${iawpText.sessions}</span><span>${formatted_sessions}</span> |
| 111 | </div> |
| 112 | </div> |
| 113 | `; |
| 114 | |
| 115 | const templateDocument = new DOMParser().parseFromString(templateString, "text/html"); |
| 116 | |
| 117 | return templateDocument.body.firstElementChild; |
| 118 | }, |
| 119 | }); |
| 120 | |
| 121 | this.resizeObserver = new ResizeObserver(() => { |
| 122 | if (!this.chartTarget.checkVisibility()) { |
| 123 | return; |
| 124 | } |
| 125 | |
| 126 | this.map.mapPanZoom.resize(); |
| 127 | this.map.mapPanZoom.fit(); |
| 128 | this.map.mapPanZoom.center(); |
| 129 | this.map.mapPanZoom.zoom(1.1); |
| 130 | }); |
| 131 | } |
| 132 | |
| 133 | dataValueChanged(newData) { |
| 134 | if (!this.map) { |
| 135 | return; |
| 136 | } |
| 137 | |
| 138 | const chartValues = {}; |
| 139 | |
| 140 | newData.forEach((country) => { |
| 141 | chartValues[country.country_code] = { |
| 142 | visitors: country.visitors, |
| 143 | views: country.views, |
| 144 | sessions: country.sessions, |
| 145 | }; |
| 146 | }); |
| 147 | |
| 148 | this.map.options.data.values = chartValues |
| 149 | this.map.applyData(this.map.options.data); |
| 150 | } |
| 151 | |
| 152 | formatNumber(number) { |
| 153 | return new Intl.NumberFormat(this.localeValue, { |
| 154 | maximumFractionDigits: 0, |
| 155 | }).format(number); |
| 156 | } |
| 157 | |
| 158 | countryName(countryCode) { |
| 159 | const countries = { |
| 160 | AF: "Afghanistan", |
| 161 | AX: "� |
| 162 | land Islands", |
| 163 | AL: "Albania", |
| 164 | DZ: "Algeria", |
| 165 | AS: "American Samoa", |
| 166 | AD: "Andorra", |
| 167 | AO: "Angola", |
| 168 | AI: "Anguilla", |
| 169 | AQ: "Antarctica", |
| 170 | AG: "Antigua and Barbuda", |
| 171 | AR: "Argentina", |
| 172 | AM: "Armenia", |
| 173 | AW: "Aruba", |
| 174 | AU: "Australia", |
| 175 | AT: "Austria", |
| 176 | AZ: "Azerbaijan", |
| 177 | BS: "Bahamas", |
| 178 | BH: "Bahrain", |
| 179 | BD: "Bangladesh", |
| 180 | BB: "Barbados", |
| 181 | BY: "Belarus", |
| 182 | BE: "Belgium", |
| 183 | BZ: "Belize", |
| 184 | BJ: "Benin", |
| 185 | BM: "Bermuda", |
| 186 | BT: "Bhutan", |
| 187 | BO: "Bolivia", |
| 188 | BA: "Bosnia and Herzegovina", |
| 189 | BW: "Botswana", |
| 190 | BR: "Brazil", |
| 191 | IO: "British Indian Ocean Territory", |
| 192 | VG: "British Virgin Islands", |
| 193 | BN: "Brunei Darussalam", |
| 194 | BG: "Bulgaria", |
| 195 | BF: "Burkina Faso", |
| 196 | BI: "Burundi", |
| 197 | KH: "Cambodia", |
| 198 | CM: "Cameroon", |
| 199 | CA: "Canada", |
| 200 | CV: "Cape Verde", |
| 201 | BQ: "Caribbean Netherlands", |
| 202 | KY: "Cayman Islands", |
| 203 | CF: "Central African Republic", |
| 204 | TD: "Chad", |
| 205 | CL: "Chile", |
| 206 | CN: "China", |
| 207 | CX: "Christmas Island", |
| 208 | CC: "Cocos Islands", |
| 209 | CO: "Colombia", |
| 210 | KM: "Comoros", |
| 211 | CG: "Congo", |
| 212 | CK: "Cook Islands", |
| 213 | CR: "Costa Rica", |
| 214 | HR: "Croatia", |
| 215 | CU: "Cuba", |
| 216 | CW: "Curaçao", |
| 217 | CY: "Cyprus", |
| 218 | CZ: "Czech Republic", |
| 219 | CD: "Democratic Republic of the Congo", |
| 220 | DK: "Denmark", |
| 221 | DJ: "Djibouti", |
| 222 | DM: "Dominica", |
| 223 | DO: "Dominican Republic", |
| 224 | EC: "Ecuador", |
| 225 | EG: "Egypt", |
| 226 | SV: "El Salvador", |
| 227 | GQ: "Equatorial Guinea", |
| 228 | ER: "Eritrea", |
| 229 | EE: "Estonia", |
| 230 | ET: "Ethiopia", |
| 231 | FK: "Falkland Islands", |
| 232 | FO: "Faroe Islands", |
| 233 | FM: "Federated States of Micronesia", |
| 234 | FJ: "Fiji", |
| 235 | FI: "Finland", |
| 236 | FR: "France", |
| 237 | GF: "French Guiana", |
| 238 | PF: "French Polynesia", |
| 239 | TF: "French Southern Territories", |
| 240 | GA: "Gabon", |
| 241 | GM: "Gambia", |
| 242 | GE: "Georgia", |
| 243 | DE: "Germany", |
| 244 | GH: "Ghana", |
| 245 | GI: "Gibraltar", |
| 246 | GR: "Greece", |
| 247 | GL: "Greenland", |
| 248 | GD: "Grenada", |
| 249 | GP: "Guadeloupe", |
| 250 | GU: "Guam", |
| 251 | GT: "Guatemala", |
| 252 | GN: "Guinea", |
| 253 | GW: "Guinea-Bissau", |
| 254 | GY: "Guyana", |
| 255 | HT: "Haiti", |
| 256 | HN: "Honduras", |
| 257 | HK: "Hong Kong", |
| 258 | HU: "Hungary", |
| 259 | IS: "Iceland", |
| 260 | IN: "India", |
| 261 | ID: "Indonesia", |
| 262 | IR: "Iran", |
| 263 | IQ: "Iraq", |
| 264 | IE: "Ireland", |
| 265 | IM: "Isle of Man", |
| 266 | IL: "Israel", |
| 267 | IT: "Italy", |
| 268 | CI: "Ivory Coast", |
| 269 | JM: "Jamaica", |
| 270 | JP: "Japan", |
| 271 | JE: "Jersey", |
| 272 | JO: "Jordan", |
| 273 | KZ: "Kazakhstan", |
| 274 | KE: "Kenya", |
| 275 | KI: "Kiribati", |
| 276 | XK: "Kosovo", |
| 277 | KW: "Kuwait", |
| 278 | KG: "Kyrgyzstan", |
| 279 | LA: "Laos", |
| 280 | LV: "Latvia", |
| 281 | LB: "Lebanon", |
| 282 | LS: "Lesotho", |
| 283 | LR: "Liberia", |
| 284 | LY: "Libya", |
| 285 | LI: "Liechtenstein", |
| 286 | LT: "Lithuania", |
| 287 | LU: "Luxembourg", |
| 288 | MO: "Macau", |
| 289 | MK: "Macedonia", |
| 290 | MG: "Madagascar", |
| 291 | MW: "Malawi", |
| 292 | MY: "Malaysia", |
| 293 | MV: "Maldives", |
| 294 | ML: "Mali", |
| 295 | MT: "Malta", |
| 296 | MH: "Marshall Islands", |
| 297 | MQ: "Martinique", |
| 298 | MR: "Mauritania", |
| 299 | MU: "Mauritius", |
| 300 | YT: "Mayotte", |
| 301 | MX: "Mexico", |
| 302 | MD: "Moldova", |
| 303 | MC: "Monaco", |
| 304 | MN: "Mongolia", |
| 305 | ME: "Montenegro", |
| 306 | MS: "Montserrat", |
| 307 | MA: "Morocco", |
| 308 | MZ: "Mozambique", |
| 309 | MM: "Myanmar", |
| 310 | NA: "Namibia", |
| 311 | NR: "Nauru", |
| 312 | NP: "Nepal", |
| 313 | NL: "Netherlands", |
| 314 | NC: "New Caledonia", |
| 315 | NZ: "New Zealand", |
| 316 | NI: "Nicaragua", |
| 317 | NE: "Niger", |
| 318 | NG: "Nigeria", |
| 319 | NU: "Niue", |
| 320 | NF: "Norfolk Island", |
| 321 | KP: "North Korea", |
| 322 | MP: "Northern Mariana Islands", |
| 323 | NO: "Norway", |
| 324 | OM: "Oman", |
| 325 | PK: "Pakistan", |
| 326 | PW: "Palau", |
| 327 | PS: "Palestine", |
| 328 | PA: "Panama", |
| 329 | PG: "Papua New Guinea", |
| 330 | PY: "Paraguay", |
| 331 | PE: "Peru", |
| 332 | PH: "Philippines", |
| 333 | PN: "Pitcairn Islands", |
| 334 | PL: "Poland", |
| 335 | PT: "Portugal", |
| 336 | PR: "Puerto Rico", |
| 337 | QA: "Qatar", |
| 338 | RE: "Reunion", |
| 339 | RO: "Romania", |
| 340 | RU: "Russia", |
| 341 | RW: "Rwanda", |
| 342 | SH: "Saint Helena", |
| 343 | KN: "Saint Kitts and Nevis", |
| 344 | LC: "Saint Lucia", |
| 345 | PM: "Saint Pierre and Miquelon", |
| 346 | VC: "Saint Vincent and the Grenadines", |
| 347 | WS: "Samoa", |
| 348 | SM: "San Marino", |
| 349 | ST: "São Tomé and Príncipe", |
| 350 | SA: "Saudi Arabia", |
| 351 | SN: "Senegal", |
| 352 | RS: "Serbia", |
| 353 | SC: "Seychelles", |
| 354 | SL: "Sierra Leone", |
| 355 | SG: "Singapore", |
| 356 | SX: "Sint Maarten", |
| 357 | SK: "Slovakia", |
| 358 | SI: "Slovenia", |
| 359 | SB: "Solomon Islands", |
| 360 | SO: "Somalia", |
| 361 | ZA: "South Africa", |
| 362 | GS: "South Georgia and the South Sandwich Islands", |
| 363 | KR: "South Korea", |
| 364 | SS: "South Sudan", |
| 365 | ES: "Spain", |
| 366 | LK: "Sri Lanka", |
| 367 | SD: "Sudan", |
| 368 | SR: "Suriname", |
| 369 | SJ: "Svalbard and Jan Mayen", |
| 370 | SZ: "Eswatini", |
| 371 | SE: "Sweden", |
| 372 | CH: "Switzerland", |
| 373 | SY: "Syria", |
| 374 | TW: "Taiwan", |
| 375 | TJ: "Tajikistan", |
| 376 | TZ: "Tanzania", |
| 377 | TH: "Thailand", |
| 378 | TL: "Timor-Leste", |
| 379 | TG: "Togo", |
| 380 | TK: "Tokelau", |
| 381 | TO: "Tonga", |
| 382 | TT: "Trinidad and Tobago", |
| 383 | TN: "Tunisia", |
| 384 | TR: "Turkey", |
| 385 | TM: "Turkmenistan", |
| 386 | TC: "Turks and Caicos Islands", |
| 387 | TV: "Tuvalu", |
| 388 | UG: "Uganda", |
| 389 | UA: "Ukraine", |
| 390 | AE: "United Arab Emirates", |
| 391 | GB: "United Kingdom", |
| 392 | US: "United States", |
| 393 | UM: "United States Minor Outlying Islands", |
| 394 | VI: "United States Virgin Islands", |
| 395 | UY: "Uruguay", |
| 396 | UZ: "Uzbekistan", |
| 397 | VU: "Vanuatu", |
| 398 | VA: "Vatican City", |
| 399 | VE: "Venezuela", |
| 400 | VN: "Vietnam", |
| 401 | WF: "Wallis and Futuna", |
| 402 | EH: "Western Sahara", |
| 403 | YE: "Yemen", |
| 404 | ZM: "Zambia", |
| 405 | ZW: "Zimbabwe", |
| 406 | }; |
| 407 | |
| 408 | return countries[countryCode]; |
| 409 | } |
| 410 | } |
| 411 |