| 1 |
// Гамбургер (адаптивное меню) |
| 2 |
const burgerEl = document.querySelector(".wtotem_burger"); |
| 3 |
const menuEl = document.querySelector(".wtotem_nav"); |
| 4 |
const bodyEl = document.getElementsByTagName("body")[0]; |
| 5 |
|
| 6 |
burgerEl.addEventListener("click", () => { |
| 7 |
burgerEl.classList.toggle("active"); |
| 8 |
menuEl.classList.toggle("active"); |
| 9 |
// Добавляет body overflow hidden при открытой менюшки |
| 10 |
bodyEl.classList.toggle("lock"); |
| 11 |
}); |
| 12 |
function removeAlert() { |
| 13 |
var alertNode = document.getElementById('wtotem_alert'); |
| 14 |
|
| 15 |
if (alertNode) { |
| 16 |
alertNode.parentNode.removeChild(alertNode); |
| 17 |
} |
| 18 |
} |
| 19 |
|
| 20 |
function tlite(t){document.addEventListener("mouseover",function(e){var i=e.target,n=t(i);n||(n=(i=i.parentElement)&&t(i)),n&&tlite.show(i,n,!0)})}tlite.show=function(t,e,i){var n="data-tlite";e=e||{},(t.tooltip||function(t,e){function o(){tlite.hide(t,!0)}function l(){r||(r=function(t,e,i){function n(){o.className="tlite tlite-"+r+s;var e=t.offsetTop,i=t.offsetLeft;o.offsetParent===t&&(e=i=0);var n=t.offsetWidth,l=t.offsetHeight,d=o.offsetHeight,f=o.offsetWidth,a=i+n/2;o.style.top=("s"===r?e-d-10:"n"===r?e+l+10:e+l/2-d/2)+"px",o.style.left=("w"===s?i:"e"===s?i+n-f:"w"===r?i+n+10:"e"===r?i-f-10:a-f/2)+"px"}var o=document.createElement("span"),l=i.grav||t.getAttribute("data-tlite")||"n";o.innerHTML=e,t.appendChild(o);var r=l[0]||"",s=l[1]||"";n();var d=o.getBoundingClientRect();return"s"===r&&d.top<0?(r="n",n()):"n"===r&&d.bottom>window.innerHeight?(r="s",n()):"e"===r&&d.left<0?(r="w",n()):"w"===r&&d.right>window.innerWidth&&(r="e",n()),o.className+=" tlite-visible",o}(t,d,e))}var r,s,d;return t.addEventListener("mousedown",o),t.addEventListener("mouseleave",o),t.tooltip={show:function(){d=t.title||t.getAttribute(n)||d,t.title="",t.setAttribute(n,""),d&&!s&&(s=setTimeout(l,i?150:1))},hide:function(t){if(i===t){s=clearTimeout(s);var e=r&&r.parentNode;e&&e.removeChild(r),r=void 0}}}}(t,e)).show()},tlite.hide=function(t,e){t.tooltip&&t.tooltip.hide(e)},"undefined"!=typeof module&&module.exports&&(module.exports=tlite); |
| 21 |
|
| 22 |
window.onload = function() { |
| 23 |
// init tooltip with class js--tooltip |
| 24 |
tlite(el => { |
| 25 |
return { |
| 26 |
el: el.classList.contains('js--tooltip'), grav: 'sw', |
| 27 |
} |
| 28 |
}); |
| 29 |
}; |
| 30 |
|
| 31 |
|
| 32 |
async function attacksMap() { |
| 33 |
|
| 34 |
|
| 35 |
var labels = waf_attacksMap['countries']; |
| 36 |
new Chart(document.getElementById("firewall"), { |
| 37 |
type: "horizontalBar", |
| 38 |
|
| 39 |
data: { |
| 40 |
labels: labels, |
| 41 |
datasets: [ |
| 42 |
{ |
| 43 |
backgroundColor: "#3D50DF", |
| 44 |
data: waf_attacksMap['attacks'], |
| 45 |
}, |
| 46 |
], |
| 47 |
}, |
| 48 |
options: { |
| 49 |
cornerRadius: 3, |
| 50 |
maintainAspectRatio: false, |
| 51 |
scales: { |
| 52 |
yAxes: [ |
| 53 |
{ |
| 54 |
barPercentage: 0.6, |
| 55 |
stacked: true, |
| 56 |
gridLines: { |
| 57 |
display: true, |
| 58 |
}, |
| 59 |
}, |
| 60 |
], |
| 61 |
xAxes: [ |
| 62 |
{ |
| 63 |
gridLines: { |
| 64 |
display: false, |
| 65 |
}, |
| 66 |
}, |
| 67 |
], |
| 68 |
}, |
| 69 |
legend: { |
| 70 |
display: false, |
| 71 |
}, |
| 72 |
}, |
| 73 |
}); |
| 74 |
|
| 75 |
const fill = (country) => { |
| 76 |
svg._groups[0][0].childNodes[0].childNodes.forEach((e) => { |
| 77 |
if (e.__data__.properties.name === country) { |
| 78 |
d3.select(e).style("fill", "#3D50DF"); |
| 79 |
} |
| 80 |
}); |
| 81 |
}; |
| 82 |
// The svg |
| 83 |
var svg = d3.select("#firewallMap"), |
| 84 |
width = +svg.attr("width"), |
| 85 |
height = +svg.attr("height"); |
| 86 |
|
| 87 |
// Map and projection |
| 88 |
var path = d3.geoPath(); |
| 89 |
var projection = d3 |
| 90 |
.geoMercator() |
| 91 |
.scale(60) |
| 92 |
.center([0, 0]) |
| 93 |
.translate([210, 220]); |
| 94 |
|
| 95 |
// Load external data and boot |
| 96 |
d3.queue().defer(d3.json, map_json).await(ready); |
| 97 |
|
| 98 |
function ready(error, topo) { |
| 99 |
|
| 100 |
// Draw the map |
| 101 |
svg.append("g") |
| 102 |
.selectAll("path") |
| 103 |
.data(topo.features) |
| 104 |
.enter() |
| 105 |
.append("path") |
| 106 |
// draw each country |
| 107 |
.attr("d", d3.geoPath().projection(projection)) |
| 108 |
// set the color of each country |
| 109 |
.attr("fill", function () { |
| 110 |
return "#5E6977"; |
| 111 |
}) |
| 112 |
.style("stroke", "transparent") |
| 113 |
.attr("class", function () { |
| 114 |
return "Country"; |
| 115 |
}); |
| 116 |
labels.map((e) => { |
| 117 |
fill(e); |
| 118 |
}); |
| 119 |
} |
| 120 |
|
| 121 |
|
| 122 |
Chart.elements.Rectangle.prototype.draw = function () { |
| 123 |
function t(t) { |
| 124 |
return s[(f + t) % 4]; |
| 125 |
} |
| 126 |
var r, |
| 127 |
e, |
| 128 |
i, |
| 129 |
o, |
| 130 |
_, |
| 131 |
h, |
| 132 |
l, |
| 133 |
a, |
| 134 |
b = this._chart.ctx, |
| 135 |
d = this._view, |
| 136 |
n = d.borderWidth, |
| 137 |
u = this._chart.config.options.cornerRadius; |
| 138 |
if ( |
| 139 |
(u < 0 && (u = 0), |
| 140 |
void 0 === u && (u = 0), |
| 141 |
d.horizontal |
| 142 |
? ((r = d.base), |
| 143 |
(e = d.x), |
| 144 |
(i = d.y - d.height / 2), |
| 145 |
(o = d.y + d.height / 2), |
| 146 |
(_ = e > r ? 1 : -1), |
| 147 |
(h = 1), |
| 148 |
(l = d.borderSkipped || "left")) |
| 149 |
: ((r = d.x - d.width / 2), |
| 150 |
(e = d.x + d.width / 2), |
| 151 |
(i = d.y), |
| 152 |
(_ = 1), |
| 153 |
(h = (o = d.base) > i ? 1 : -1), |
| 154 |
(l = d.borderSkipped || "bottom")), |
| 155 |
n) |
| 156 |
) { |
| 157 |
var T = Math.min(Math.abs(r - e), Math.abs(i - o)), |
| 158 |
v = (n = n > T ? T : n) / 2, |
| 159 |
g = r + ("left" !== l ? v * _ : 0), |
| 160 |
c = e + ("right" !== l ? -v * _ : 0), |
| 161 |
C = i + ("top" !== l ? v * h : 0), |
| 162 |
w = o + ("bottom" !== l ? -v * h : 0); |
| 163 |
g !== c && ((i = C), (o = w)), |
| 164 |
C !== w && ((r = g), (e = c)); |
| 165 |
} |
| 166 |
b.beginPath(), |
| 167 |
(b.fillStyle = d.backgroundColor), |
| 168 |
(b.strokeStyle = d.borderColor), |
| 169 |
(b.lineWidth = n); |
| 170 |
var s = [ |
| 171 |
[r, o], |
| 172 |
[r, i], |
| 173 |
[e, i], |
| 174 |
[e, o], |
| 175 |
], |
| 176 |
f = ["bottom", "left", "top", "right"].indexOf(l, 0); |
| 177 |
-1 === f && (f = 0); |
| 178 |
var q = t(0); |
| 179 |
b.moveTo(q[0], q[1]); |
| 180 |
for (var m = 1; m < 4; m++) |
| 181 |
(q = t(m)), |
| 182 |
(nextCornerId = m + 1), |
| 183 |
4 == nextCornerId && (nextCornerId = 0), |
| 184 |
(nextCorner = t(nextCornerId)), |
| 185 |
(width = s[2][0] - s[1][0]), |
| 186 |
(height = s[0][1] - s[1][1]), |
| 187 |
(x = s[1][0]), |
| 188 |
(y = s[1][1]), |
| 189 |
(a = u) > Math.abs(height) / 2 && |
| 190 |
(a = Math.floor(Math.abs(height) / 2)), |
| 191 |
a > Math.abs(width) / 2 && |
| 192 |
(a = Math.floor(Math.abs(width) / 2)), |
| 193 |
height < 0 |
| 194 |
? ((x_tl = x), |
| 195 |
(x_tr = x + width), |
| 196 |
(y_tl = y + height), |
| 197 |
(y_tr = y + height), |
| 198 |
(x_bl = x), |
| 199 |
(x_br = x + width), |
| 200 |
(y_bl = y), |
| 201 |
(y_br = y), |
| 202 |
b.moveTo(x_bl + a, y_bl), |
| 203 |
b.lineTo(x_br - a, y_br), |
| 204 |
b.quadraticCurveTo(x_br, y_br, x_br, y_br - a), |
| 205 |
b.lineTo(x_tr, y_tr + a), |
| 206 |
b.quadraticCurveTo(x_tr, y_tr, x_tr - a, y_tr), |
| 207 |
b.lineTo(x_tl + a, y_tl), |
| 208 |
b.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + a), |
| 209 |
b.lineTo(x_bl, y_bl - a), |
| 210 |
b.quadraticCurveTo(x_bl, y_bl, x_bl + a, y_bl)) |
| 211 |
: width < 0 |
| 212 |
? ((x_tl = x + width), |
| 213 |
(x_tr = x), |
| 214 |
(y_tl = y), |
| 215 |
(y_tr = y), |
| 216 |
(x_bl = x + width), |
| 217 |
(x_br = x), |
| 218 |
(y_bl = y + height), |
| 219 |
(y_br = y + height), |
| 220 |
b.moveTo(x_bl + a, y_bl), |
| 221 |
b.lineTo(x_br - a, y_br), |
| 222 |
b.quadraticCurveTo(x_br, y_br, x_br, y_br - a), |
| 223 |
b.lineTo(x_tr, y_tr + a), |
| 224 |
b.quadraticCurveTo(x_tr, y_tr, x_tr - a, y_tr), |
| 225 |
b.lineTo(x_tl + a, y_tl), |
| 226 |
b.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + a), |
| 227 |
b.lineTo(x_bl, y_bl - a), |
| 228 |
b.quadraticCurveTo(x_bl, y_bl, x_bl + a, y_bl)) |
| 229 |
: (b.moveTo(x + a, y), |
| 230 |
b.lineTo(x + width - a, y), |
| 231 |
b.quadraticCurveTo( |
| 232 |
x + width, |
| 233 |
y, |
| 234 |
x + width, |
| 235 |
y + a |
| 236 |
), |
| 237 |
b.lineTo(x + width, y + height - a), |
| 238 |
b.quadraticCurveTo( |
| 239 |
x + width, |
| 240 |
y + height, |
| 241 |
x + width - a, |
| 242 |
y + height |
| 243 |
), |
| 244 |
b.lineTo(x + a, y + height), |
| 245 |
b.quadraticCurveTo( |
| 246 |
x, |
| 247 |
y + height, |
| 248 |
x, |
| 249 |
y + height - a |
| 250 |
), |
| 251 |
b.lineTo(x, y + a), |
| 252 |
b.quadraticCurveTo(x, y, x + a, y)); |
| 253 |
b.fill(), n && b.stroke(); |
| 254 |
}; |
| 255 |
} |
| 256 |
attacksMap(); |
