applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.js

   1 var chartRegistry = {},
   2         trafficPeriods = [],
   3         trafficData = { columns: [], data: [] },
   4         hostNames = {},
   5         ouiData = [];
   6
   7
   8 function off(elem)
   9 {
  10         var val = [0, 0];
  11         do {
  12                 if (!isNaN(elem.offsetLeft) && !isNaN(elem.offsetTop)) {
  13                         val[0] += elem.offsetLeft;
  14                         val[1] += elem.offsetTop;
  15                 }
  16         }
  17         while ((elem = elem.offsetParent) != null);
  18         return val;
  19 }
  20
  21 Chart.defaults.global.customTooltips = function(tooltip) {
  22         var tooltipEl = document.getElementById('chartjs-tooltip');
  23
  24         if (!tooltipEl) {
  25                 tooltipEl = document.createElement('div');
  26                 tooltipEl.setAttribute('id', 'chartjs-tooltip');
  27                 document.body.appendChild(tooltipEl);
  28         }
  29
  30         if (!tooltip) {
  31                 if (tooltipEl.row)
  32                         tooltipEl.row.style.backgroundColor = '';
  33
  34                 tooltipEl.style.opacity = 0;
  35                 return;
  36         }
  37
  38         var pos = off(tooltip.chart.canvas);
  39
  40         tooltipEl.className = tooltip.yAlign;
  41         tooltipEl.innerHTML = tooltip.text[0];
  42
  43         tooltipEl.style.opacity = 1;
  44         tooltipEl.style.left = pos[0] + tooltip.x + 'px';
  45         tooltipEl.style.top = pos[1] + tooltip.y - tooltip.caretHeight - tooltip.caretPadding + 'px';
  46
  47         console.debug(tooltip.text);
  48
  49         var row = findParent(tooltip.text[1], '.tr'),
  50             hue = tooltip.text[2];
  51
  52         if (row && !isNaN(hue)) {
  53                 row.style.backgroundColor = 'hsl(%u, 100%%, 80%%)'.format(hue);
  54                 tooltipEl.row = row;
  55         }
  56 };
  57
  58 Chart.defaults.global.tooltipFontSize = 10;
  59 Chart.defaults.global.tooltipTemplate = function(tip) {
  60         tip.label[0] = tip.label[0].format(tip.value);
  61         return tip.label;
  62 };
  63
  64 function kpi(id, val1, val2, val3)
  65 {
  66         var e = dom.elem(id) ? id : document.getElementById(id);
  67
  68         if (val1 && val2 && val3)
  69                 e.innerHTML = _('%s, %s and %s').format(val1, val2, val3);
  70         else if (val1 && val2)
  71                 e.innerHTML = _('%s and %s').format(val1, val2);
  72         else if (val1)
  73                 e.innerHTML = val1;
  74
  75         e.parentNode.style.display = val1 ? 'list-item' : '';
  76 }
  77
  78 function pie(id, data)
  79 {
  80         var total = data.reduce(function(n, d) { return n + d.value }, 0);
  81
  82         data.sort(function(a, b) { return b.value - a.value });
  83
  84         if (total === 0)
  85                 data = [{
  86                         value: 1,
  87                         color: '#cccccc',
  88                         label: [ _('no traffic') ]
  89                 }];
  90
  91         for (var i = 0; i < data.length; i++) {
  92                 if (!data[i].color) {
  93                         var hue = 120 / (data.length-1) * i;
  94                         data[i].color = 'hsl(%u, 80%%, 50%%)'.format(hue);
  95                         data[i].label.push(hue);
  96                 }
  97         }
  98
  99         var node = dom.elem(id) ? id : document.getElementById(id),
 100             key = dom.elem(id) ? id.id : id,
 101             ctx = node.getContext('2d');
 102
 103         if (chartRegistry.hasOwnProperty(key))
 104                 chartRegistry[key].destroy();
 105
 106         chartRegistry[key] = new Chart(ctx).Doughnut(data, {
 107                 segmentStrokeWidth: 1,
 108                 percentageInnerCutout: 30
 109         });
 110
 111         return chartRegistry[key];
 112 }
 113
 114 function query(filter, group, order)
 115 {
 116         var keys = [], columns = {}, records = {}, result = [];
 117
 118         if (typeof(group) !== 'function' && typeof(group) !== 'object')
 119                 group = ['mac'];
 120
 121         for (var i = 0; i < trafficData.columns.length; i++)
 122                 columns[trafficData.columns[i]] = i;
 123
 124         for (var i = 0; i < trafficData.data.length; i++) {
 125                 var record = trafficData.data[i];
 126
 127                 if (typeof(filter) === 'function' && filter(columns, record) !== true)
 128                         continue;
 129
 130                 var key;
 131
 132                 if (typeof(group) === 'function') {
 133                         key = group(columns, record);
 134                 }
 135                 else {
 136                         key = [];
 137
 138                         for (var j = 0; j < group.length; j++)
 139                                 if (columns.hasOwnProperty(group[j]))
 140                                         key.push(record[columns[group[j]]]);
 141
 142                         key = key.join(',');
 143                 }
 144
 145                 if (!records.hasOwnProperty(key)) {
 146                         var rec = {};
 147
 148                         for (var col in columns)
 149                                 rec[col] = record[columns[col]];
 150
 151                         records[key] = rec;
 152                         result.push(rec);
 153                 }
 154                 else {
 155                         records[key].conns    += record[columns.conns];
 156                         records[key].rx_bytes += record[columns.rx_bytes];
 157                         records[key].rx_pkts  += record[columns.rx_pkts];
 158                         records[key].tx_bytes += record[columns.tx_bytes];
 159                         records[key].tx_pkts  += record[columns.tx_pkts];
 160                 }
 161         }
 162
 163         if (typeof(order) === 'function')
 164                 result.sort(order);
 165
 166         return result;
 167 }
 168
 169 function oui(mac) {
 170         var m, l = 0, r = ouiData.length / 3 - 1;
 171         var mac1 = parseInt(mac.replace(/[^a-fA-F0-9]/g, ''), 16);
 172
 173         while (l <= r) {
 174                 m = l + Math.floor((r - l) / 2);
 175
 176                 var mask = (0xffffffffffff -
 177                                         (Math.pow(2, 48 - ouiData[m * 3 + 1]) - 1));
 178
 179                 var mac1_hi = ((mac1 / 0x10000) & (mask / 0x10000)) >>> 0;
 180                 var mac1_lo = ((mac1 &  0xffff) & (mask &  0xffff)) >>> 0;
 181
 182                 var mac2 = parseInt(ouiData[m * 3], 16);
 183                 var mac2_hi = (mac2 / 0x10000) >>> 0;
 184                 var mac2_lo = (mac2 &  0xffff) >>> 0;
 185
 186                 if (mac1_hi === mac2_hi && mac1_lo === mac2_lo)
 187                         return ouiData[m * 3 + 2];
 188
 189                 if (mac2_hi > mac1_hi ||
 190                         (mac2_hi === mac1_hi && mac2_lo > mac1_lo))
 191                         r = m - 1;
 192                 else
 193                         l = m + 1;
 194         }
 195
 196         return null;
 197 }
 198
 199
 200 function fetchData(period)
 201 {
 202         XHR.get(L.url('admin/nlbw/data'), { period: period, group_by: 'family,mac,ip,layer7', order_by: '-rx_bytes,-tx_bytes' }, function(xhr, res) {
 203                 if (res !== null && typeof(res) === 'object' && typeof(res.columns) === 'object' && typeof(res.data) === 'object')
 204                         trafficData = res;
 205
 206                 var addrs = query(null, ['ip'], null);
 207                 var ipAddrs = [];
 208
 209                 for (var i = 0; i < addrs.length; i++)
 210                         if (ipAddrs.indexOf(addrs[i].ip) < 0)
 211                                 ipAddrs.push(addrs[i].ip);
 212
 213                 renderHostData();
 214                 renderLayer7Data();
 215                 renderIPv6Data();
 216
 217                 XHR.get(L.url('admin/nlbw/ptr', ipAddrs.join('/')), null, function(xhr, res) {
 218                         if (res !== null && typeof(res) === 'object')
 219                                 hostNames = res;
 220                 });
 221         });
 222 }
 223
 224 function renderPeriods()
 225 {
 226         var sel = document.getElementById('nlbw.period');
 227
 228         for (var e, i = trafficPeriods.length - 1; e = trafficPeriods[i]; i--) {
 229                 var ymd1 = e.split(/-/);
 230                 var d1 = new Date(+ymd1[0], +ymd1[1] - 1, +ymd1[2]);
 231                 var ymd2, d2, pd;
 232
 233                 if (i) {
 234                         ymd2 = trafficPeriods[i - 1].split(/-/);
 235                         d2 = new Date(+ymd2[0], +ymd2[1] - 1, +ymd2[2]);
 236                         d2.setDate(d2.getDate() - 1);
 237                         pd = e;
 238                 }
 239                 else {
 240                         d2 = new Date();
 241                         pd = '';
 242                 }
 243
 244                 var opt = document.createElement('option');
 245                     opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
 246                     opt.value = pd;
 247                     opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
 248                                 d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
 249                                 d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
 250
 251                 sel.appendChild(opt);
 252         }
 253
 254         sel.selectedIndex = sel.childNodes.length - 1;
 255         sel.style.display = '';
 256
 257         sel.onchange = function(ev) {
 258                 L.hideTooltip(ev);
 259                 fetchData(sel.options[sel.selectedIndex].value);
 260         }
 261 }
 262
 263 function renderHostDetail(tooltip)
 264 {
 265         var key = this.getAttribute('href').substr(1),
 266             col = this.getAttribute('data-col'),
 267             label = this.getAttribute('data-tooltip');
 268
 269         var detailData = query(
 270                 function(c, r) {
 271                         return ((r[c.mac] === key || r[c.ip] === key) &&
 272                                 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
 273                 },
 274                 [col],
 275                 function(r1, r2) {
 276                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 277                 }
 278         );
 279
 280         var rxData = [], txData = [];
 281
 282         dom.content(tooltip, [
 283                 E('div', { 'class': 'head' }, [
 284                         E('div', { 'class': 'pie' }, [
 285                                 E('label', _('Download')),
 286                                 E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 })
 287                         ]),
 288                         E('div', { 'class': 'pie' }, [
 289                                 E('label', _('Upload')),
 290                                 E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 })
 291                         ]),
 292                         E('div', { 'class': 'kpi' }, [
 293                                 E('ul', [
 294                                         E('li', _('Hostname: <big id="bubble-hostname">example.org</big>')),
 295                                         E('li', _('Vendor: <big id="bubble-vendor">Example Corp.</big>'))
 296                                 ])
 297                         ])
 298                 ]),
 299                 E('div', { 'class': 'table' }, [
 300                         E('div', { 'class': 'tr table-titles' }, [
 301                                 E('div', { 'class': 'th' }, label || col),
 302                                 E('div', { 'class': 'th' }, _('Conn.')),
 303                                 E('div', { 'class': 'th' }, _('Down. (Bytes)')),
 304                                 E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
 305                                 E('div', { 'class': 'th' }, _('Up. (Bytes)')),
 306                                 E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
 307                         ])
 308                 ])
 309         ]);
 310
 311         var rows = [];
 312
 313         for (var i = 0; i < detailData.length; i++) {
 314                 var rec = detailData[i],
 315                     cell = E('div', rec[col] || _('other'));
 316
 317                 rows.push([
 318                         cell,
 319                         '%1000.2m'.format(rec.conns),
 320                         '%1024.2mB'.format(rec.rx_bytes),
 321                         '%1000.2mP'.format(rec.rx_pkts),
 322                         '%1024.2mB'.format(rec.tx_bytes),
 323                         '%1000.2mP'.format(rec.tx_pkts)
 324                 ]);
 325
 326                 rxData.push({
 327                         label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
 328                         value: rec.rx_bytes
 329                 });
 330
 331                 txData.push({
 332                         label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
 333                         value: rec.tx_bytes
 334                 });
 335         }
 336
 337         cbi_update_table(tooltip.lastElementChild, rows);
 338
 339         pie(tooltip.querySelector('#bubble-pie1'), rxData);
 340         pie(tooltip.querySelector('#bubble-pie2'), txData);
 341
 342         var mac = key.toUpperCase();
 343         var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
 344
 345         if (!name)
 346                 for (var i = 0; i < detailData.length; i++)
 347                         if ((name = hostNames[detailData[i].ip]) !== undefined)
 348                                 break;
 349
 350         if (mac !== '00:00:00:00:00:00') {
 351                 kpi(tooltip.querySelector('#bubble-hostname'), name);
 352                 kpi(tooltip.querySelector('#bubble-vendor'), oui(mac));
 353         }
 354         else {
 355                 kpi(tooltip.querySelector('#bubble-hostname'));
 356                 kpi(tooltip.querySelector('#bubble-vendor'));
 357         }
 358
 359         var rect = this.getBoundingClientRect(), x, y;
 360
 361         if ('ontouchstart' in window || window.innerWidth <= 992) {
 362                 var vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 363                     scrollFrom = window.pageYOffset,
 364                     scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
 365                     start = null;
 366
 367                 tooltip.style.top = (rect.top + rect.height + window.pageYOffset) + 'px';
 368                 tooltip.style.left = 0;
 369
 370                 var scrollStep = function(timestamp) {
 371                         if (!start)
 372                                 start = timestamp;
 373
 374                         var duration = Math.max(timestamp - start, 1);
 375                         if (duration < 100) {
 376                                 document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
 377                                 window.requestAnimationFrame(scrollStep);
 378                         }
 379                         else {
 380                                 document.body.scrollTop = scrollTo;
 381                         }
 382                 };
 383
 384                 window.requestAnimationFrame(scrollStep);
 385         }
 386         else {
 387                 x = rect.left + rect.width + window.pageXOffset,
 388             y = rect.top + window.pageYOffset;
 389
 390                 if ((y + tooltip.offsetHeight) > (window.innerHeight + window.pageYOffset))
 391                         y -= ((y + tooltip.offsetHeight) - (window.innerHeight + window.pageYOffset));
 392
 393                 tooltip.style.top = y + 'px';
 394                 tooltip.style.left = x + 'px';
 395         }
 396
 397         return false;
 398 }
 399
 400 function formatHostname(dns)
 401 {
 402         if (dns === undefined || dns === null || dns === '')
 403                 return '-';
 404
 405         dns = dns.split('.')[0];
 406
 407         if (dns.length > 12)
 408                 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
 409
 410         return '%h'.format(dns);
 411 }
 412
 413 function renderHostData()
 414 {
 415         var trafData = [], connData = [];
 416         var rx_total = 0, tx_total = 0, conn_total = 0;
 417
 418         var hostData = query(
 419                 function(c, r) {
 420                         return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
 421                 },
 422                 ['mac'],
 423                 //function(c, r) {
 424                 //      return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
 425                 //},
 426                 function(r1, r2) {
 427                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 428                 }
 429         );
 430
 431         var rows = [];
 432
 433         for (var i = 0; i < hostData.length; i++) {
 434                 var rec = hostData[i],
 435                     mac = rec.mac.toUpperCase(),
 436                     key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
 437                     dns = hostInfo[mac] ? hostInfo[mac].name : null;
 438
 439                 var cell = E('div', formatHostname(dns));
 440
 441                 rows.push([
 442                         cell,
 443                         E('a', {
 444                                 'href':         '#' + rec.mac,
 445                                 'data-col':     'ip',
 446                                 'data-tooltip': _('Source IP')
 447                         }, (mac !== '00:00:00:00:00:00') ? mac : _('other')),
 448                         E('a', {
 449                                 'href':         '#' + rec.mac,
 450                                 'data-col':     'layer7',
 451                                 'data-tooltip': _('Protocol')
 452                         }, '%1000.2m'.format(rec.conns)),
 453                         '%1024.2mB'.format(rec.rx_bytes),
 454                         '%1000.2mP'.format(rec.rx_pkts),
 455                         '%1024.2mB'.format(rec.tx_bytes),
 456                         '%1000.2mP'.format(rec.tx_pkts)
 457                 ]);
 458
 459                 trafData.push({
 460                         value: rec.rx_bytes + rec.tx_bytes,
 461                         label: ["%s: %%.2mB".format(key), cell]
 462                 });
 463
 464                 connData.push({
 465                         value: rec.conns,
 466                         label: ["%s: %%.2m".format(key), cell]
 467                 });
 468
 469                 rx_total += rec.rx_bytes;
 470                 tx_total += rec.tx_bytes;
 471                 conn_total += rec.conns;
 472         }
 473
 474         cbi_update_table('#host-data', rows, E('em', [
 475                 _('No data recorded yet.'), ' ',
 476                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 477         ]));
 478
 479         pie('traf-pie', trafData);
 480         pie('conn-pie', connData);
 481
 482         kpi('rx-total', '%1024.2mB'.format(rx_total));
 483         kpi('tx-total', '%1024.2mB'.format(tx_total));
 484         kpi('conn-total', '%1000m'.format(conn_total));
 485         kpi('host-total', '%u'.format(hostData.length));
 486 }
 487
 488 function renderLayer7Data()
 489 {
 490         var rxData = [], txData = [];
 491         var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
 492
 493         var layer7Data = query(
 494                 null, ['layer7'],
 495                 function(r1, r2) {
 496                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 497                 }
 498         );
 499
 500         var rows = [];
 501
 502         for (var i = 0, c = 0; i < layer7Data.length; i++) {
 503                 var rec = layer7Data[i],
 504                     cell = E('div', rec.layer7 || _('other'));
 505
 506                 rows.push([
 507                         cell,
 508                         '%1000m'.format(rec.conns),
 509                         '%1024.2mB'.format(rec.rx_bytes),
 510                         '%1000.2mP'.format(rec.rx_pkts),
 511                         '%1024.2mB'.format(rec.tx_bytes),
 512                         '%1000.2mP'.format(rec.tx_pkts)
 513                 ]);
 514
 515                 rxData.push({
 516                         value: rec.rx_bytes,
 517                         label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
 518                 });
 519
 520                 txData.push({
 521                         value: rec.tx_bytes,
 522                         label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
 523                 });
 524
 525                 if (rec.layer7) {
 526                         topRx.push([rec.rx_bytes, rec.layer7]);
 527                         topTx.push([rec.tx_bytes, rec.layer7]);
 528                         topConn.push([rec.conns, rec.layer7]);
 529                 }
 530         }
 531
 532         cbi_update_table('#layer7-data', rows, E('em', [
 533                 _('No data recorded yet.'), ' ',
 534                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 535         ]));
 536
 537         pie('layer7-rx-pie', rxData);
 538         pie('layer7-tx-pie', txData);
 539
 540         topRx.sort(function(a, b) { return b[0] - a[0] });
 541         topTx.sort(function(a, b) { return b[0] - a[0] });
 542         topConn.sort(function(a, b) { return b[0] - a[0] });
 543
 544         kpi('layer7-total', layer7Data.length);
 545         kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
 546         kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
 547         kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
 548 }
 549
 550 function renderIPv6Data()
 551 {
 552         var col       = { },
 553             rx4_total = 0,
 554             tx4_total = 0,
 555             rx6_total = 0,
 556             tx6_total = 0,
 557             v4_total  = 0,
 558             v6_total  = 0,
 559             ds_total  = 0,
 560             families  = { },
 561             records   = { };
 562
 563         ipv6Data = query(
 564                 null, ['family', 'mac'],
 565                 function(r1, r2) {
 566                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 567                 }
 568         );
 569
 570         for (var i = 0, c = 0; i < ipv6Data.length; i++) {
 571                 var rec = ipv6Data[i],
 572                     mac = rec.mac.toUpperCase(),
 573                     ip  = rec.ip,
 574                     fam = families[mac] || 0,
 575                     recs = records[mac] || {};
 576
 577                 if (rec.family == 4) {
 578                         rx4_total += rec.rx_bytes;
 579                         tx4_total += rec.tx_bytes;
 580                         fam |= 1;
 581                 }
 582                 else {
 583                         rx6_total += rec.rx_bytes;
 584                         tx6_total += rec.tx_bytes;
 585                         fam |= 2;
 586                 }
 587
 588                 recs[rec.family] = rec;
 589                 records[mac] = recs;
 590
 591                 families[mac] = fam;
 592         }
 593
 594         for (var mac in families) {
 595                 switch (families[mac])
 596                 {
 597                 case 3:
 598                         ds_total++;
 599                         break;
 600
 601                 case 2:
 602                         v6_total++;
 603                         break;
 604
 605                 case 1:
 606                         v4_total++;
 607                         break;
 608                 }
 609         }
 610
 611         var rows = [];
 612
 613         for (var mac in records) {
 614                 if (mac === '00:00:00:00:00:00')
 615                         continue;
 616
 617                 var dns = hostInfo[mac] ? hostInfo[mac].name : null,
 618                     rec4 = records[mac][4],
 619                     rec6 = records[mac][6];
 620
 621                 rows.push([
 622                         formatHostname(dns),
 623                         mac,
 624                         [ E('span', _('IPv4')),
 625                           E('span', _('IPv6')) ],
 626                         [ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
 627                           E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-') ],
 628                         [ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts)  : '-'),
 629                           E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts)  : '-') ],
 630                         [ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
 631                           E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-') ],
 632                         [ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts)  : '-'),
 633                           E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts)  : '-') ]
 634                 ]);
 635         }
 636
 637         cbi_update_table('#ipv6-data', rows, E('em', [
 638                 _('No data recorded yet.'), ' ',
 639                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 640         ]));
 641
 642         var shareData = [], hostsData = [];
 643
 644         if (rx4_total > 0 || tx4_total > 0)
 645                 shareData.push({
 646                         value: rx4_total + tx4_total,
 647                         label: ["IPv4: %.2mB"],
 648                         color: 'hsl(140, 100%, 50%)'
 649                 });
 650
 651         if (rx6_total > 0 || tx6_total > 0)
 652                 shareData.push({
 653                         value: rx6_total + tx6_total,
 654                         label: ["IPv6: %.2mB"],
 655                         color: 'hsl(180, 100%, 50%)'
 656                 });
 657
 658         if (v4_total > 0)
 659                 hostsData.push({
 660                         value: v4_total,
 661                         label: [_('%d IPv4-only hosts')],
 662                         color: 'hsl(140, 100%, 50%)'
 663                 });
 664
 665         if (v6_total > 0)
 666                 hostsData.push({
 667                         value: v6_total,
 668                         label: [_('%d IPv6-only hosts')],
 669                         color: 'hsl(180, 100%, 50%)'
 670                 });
 671
 672         if (ds_total > 0)
 673                 hostsData.push({
 674                         value: ds_total,
 675                         label: [_('%d dual-stack hosts')],
 676                         color: 'hsl(50, 100%, 50%)'
 677                 });
 678
 679         pie('ipv6-share-pie', shareData);
 680         pie('ipv6-hosts-pie', hostsData);
 681
 682         kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
 683         kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
 684         kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
 685         kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
 686 }