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 = L.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 = L.dom.elem(id) ? id : document.getElementById(id),
 100             key = L.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 d1 = new Date(e);
 230                 var d2, pd;
 231
 232                 if (i) {
 233                         d2 = new Date(trafficPeriods[i - 1]);
 234                         d2.setDate(d2.getDate() - 1);
 235                         pd = '%04d-%02d-%02d'.format(d1.getFullYear(), d1.getMonth() + 1, d1.getDate());
 236                 }
 237                 else {
 238                         d2 = new Date();
 239                         pd = '';
 240                 }
 241
 242                 var opt = document.createElement('option');
 243                     opt.setAttribute('data-duration', (d2.getTime() - d1.getTime()) / 1000);
 244                     opt.value = pd;
 245                     opt.text = '%04d-%02d-%02d - %04d-%02d-%02d'.format(
 246                                 d1.getFullYear(), d1.getMonth() + 1, d1.getDate(),
 247                                 d2.getFullYear(), d2.getMonth() + 1, d2.getDate());
 248
 249                 sel.appendChild(opt);
 250         }
 251
 252         sel.selectedIndex = sel.childNodes.length - 1;
 253         sel.style.display = '';
 254
 255         sel.onchange = function(ev) {
 256                 L.hideTooltip(ev);
 257                 fetchData(sel.options[sel.selectedIndex].value);
 258         }
 259 }
 260
 261 function renderHostDetail(tooltip)
 262 {
 263         var key = this.getAttribute('href').substr(1),
 264             col = this.getAttribute('data-col'),
 265             label = this.getAttribute('data-tooltip');
 266
 267         var detailData = query(
 268                 function(c, r) {
 269                         return ((r[c.mac] === key || r[c.ip] === key) &&
 270                                 (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0));
 271                 },
 272                 [col],
 273                 function(r1, r2) {
 274                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 275                 }
 276         );
 277
 278         var rxData = [], txData = [];
 279
 280         L.dom.content(tooltip, [
 281                 E('div', { 'class': 'head' }, [
 282                         E('div', { 'class': 'pie' }, [
 283                                 E('label', _('Download')),
 284                                 E('canvas', { 'id': 'bubble-pie1', 'width': 100, 'height': 100 })
 285                         ]),
 286                         E('div', { 'class': 'pie' }, [
 287                                 E('label', _('Upload')),
 288                                 E('canvas', { 'id': 'bubble-pie2', 'width': 100, 'height': 100 })
 289                         ]),
 290                         E('div', { 'class': 'kpi' }, [
 291                                 E('ul', [
 292                                         E('li', _('Hostname: <big id="bubble-hostname">example.org</big>')),
 293                                         E('li', _('Vendor: <big id="bubble-vendor">Example Corp.</big>'))
 294                                 ])
 295                         ])
 296                 ]),
 297                 E('div', { 'class': 'table' }, [
 298                         E('div', { 'class': 'tr table-titles' }, [
 299                                 E('div', { 'class': 'th' }, label || col),
 300                                 E('div', { 'class': 'th' }, _('Conn.')),
 301                                 E('div', { 'class': 'th' }, _('Down. (Bytes)')),
 302                                 E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
 303                                 E('div', { 'class': 'th' }, _('Up. (Bytes)')),
 304                                 E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
 305                         ])
 306                 ])
 307         ]);
 308
 309         var rows = [];
 310
 311         for (var i = 0; i < detailData.length; i++) {
 312                 var rec = detailData[i],
 313                     cell = E('div', rec[col] || _('other'));
 314
 315                 rows.push([
 316                         cell,
 317                         '%1000.2m'.format(rec.conns),
 318                         '%1024.2mB'.format(rec.rx_bytes),
 319                         '%1000.2mP'.format(rec.rx_pkts),
 320                         '%1024.2mB'.format(rec.tx_bytes),
 321                         '%1000.2mP'.format(rec.tx_pkts)
 322                 ]);
 323
 324                 rxData.push({
 325                         label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
 326                         value: rec.rx_bytes
 327                 });
 328
 329                 txData.push({
 330                         label: ['%s: %%1024.2mB'.format(rec[col] || _('other')), cell],
 331                         value: rec.tx_bytes
 332                 });
 333         }
 334
 335         cbi_update_table(tooltip.lastElementChild, rows);
 336
 337         pie(tooltip.querySelector('#bubble-pie1'), rxData);
 338         pie(tooltip.querySelector('#bubble-pie2'), txData);
 339
 340         var mac = key.toUpperCase();
 341         var name = hostInfo.hasOwnProperty(mac) ? hostInfo[mac].name : null;
 342
 343         if (!name)
 344                 for (var i = 0; i < detailData.length; i++)
 345                         if ((name = hostNames[detailData[i].ip]) !== undefined)
 346                                 break;
 347
 348         if (mac !== '00:00:00:00:00:00') {
 349                 kpi(tooltip.querySelector('#bubble-hostname'), name);
 350                 kpi(tooltip.querySelector('#bubble-vendor'), oui(mac));
 351         }
 352         else {
 353                 kpi(tooltip.querySelector('#bubble-hostname'));
 354                 kpi(tooltip.querySelector('#bubble-vendor'));
 355         }
 356
 357         var rect = this.getBoundingClientRect(), x, y;
 358
 359         if ('ontouchstart' in window || window.innerWidth <= 992) {
 360                 var vpHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 361                     scrollFrom = window.pageYOffset,
 362                     scrollTo = scrollFrom + rect.top - vpHeight * 0.5,
 363                     start = null;
 364
 365                 tooltip.style.top = (rect.top + rect.height + window.pageYOffset) + 'px';
 366                 tooltip.style.left = 0;
 367
 368                 var scrollStep = function(timestamp) {
 369                         if (!start)
 370                                 start = timestamp;
 371
 372                         var duration = Math.max(timestamp - start, 1);
 373                         if (duration < 100) {
 374                                 document.body.scrollTop = scrollFrom + (scrollTo - scrollFrom) * (duration / 100);
 375                                 window.requestAnimationFrame(scrollStep);
 376                         }
 377                         else {
 378                                 document.body.scrollTop = scrollTo;
 379                         }
 380                 };
 381
 382                 window.requestAnimationFrame(scrollStep);
 383         }
 384         else {
 385                 x = rect.left + rect.width + window.pageXOffset,
 386             y = rect.top + window.pageYOffset;
 387
 388                 if ((y + tooltip.offsetHeight) > (window.innerHeight + window.pageYOffset))
 389                         y -= ((y + tooltip.offsetHeight) - (window.innerHeight + window.pageYOffset));
 390
 391                 tooltip.style.top = y + 'px';
 392                 tooltip.style.left = x + 'px';
 393         }
 394
 395         return false;
 396 }
 397
 398 function formatHostname(dns)
 399 {
 400         if (dns === undefined || dns === null || dns === '')
 401                 return '-';
 402
 403         dns = dns.split('.')[0];
 404
 405         if (dns.length > 12)
 406                 return '<span title="%q">%h…</span>'.format(dns, dns.substr(0, 12));
 407
 408         return '%h'.format(dns);
 409 }
 410
 411 function renderHostData()
 412 {
 413         var trafData = [], connData = [];
 414         var rx_total = 0, tx_total = 0, conn_total = 0;
 415
 416         var hostData = query(
 417                 function(c, r) {
 418                         return (r[c.rx_bytes] > 0 || r[c.tx_bytes] > 0);
 419                 },
 420                 ['mac'],
 421                 //function(c, r) {
 422                 //      return (r[c.mac] !== '00:00:00:00:00:00') ? r[c.mac] : r[c.ip];
 423                 //},
 424                 function(r1, r2) {
 425                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 426                 }
 427         );
 428
 429         var rows = [];
 430
 431         for (var i = 0; i < hostData.length; i++) {
 432                 var rec = hostData[i],
 433                     mac = rec.mac.toUpperCase(),
 434                     key = (mac !== '00:00:00:00:00:00') ? mac : rec.ip,
 435                     dns = hostInfo[mac] ? hostInfo[mac].name : null;
 436
 437                 var cell = E('div', formatHostname(dns));
 438
 439                 rows.push([
 440                         cell,
 441                         E('a', {
 442                                 'href':         '#' + rec.mac,
 443                                 'data-col':     'ip',
 444                                 'data-tooltip': _('Source IP')
 445                         }, (mac !== '00:00:00:00:00:00') ? mac : _('other')),
 446                         E('a', {
 447                                 'href':         '#' + rec.mac,
 448                                 'data-col':     'layer7',
 449                                 'data-tooltip': _('Protocol')
 450                         }, '%1000.2m'.format(rec.conns)),
 451                         '%1024.2mB'.format(rec.rx_bytes),
 452                         '%1000.2mP'.format(rec.rx_pkts),
 453                         '%1024.2mB'.format(rec.tx_bytes),
 454                         '%1000.2mP'.format(rec.tx_pkts)
 455                 ]);
 456
 457                 trafData.push({
 458                         value: rec.rx_bytes + rec.tx_bytes,
 459                         label: ["%s: %%.2mB".format(key), cell]
 460                 });
 461
 462                 connData.push({
 463                         value: rec.conns,
 464                         label: ["%s: %%.2m".format(key), cell]
 465                 });
 466
 467                 rx_total += rec.rx_bytes;
 468                 tx_total += rec.tx_bytes;
 469                 conn_total += rec.conns;
 470         }
 471
 472         cbi_update_table('#host-data', rows, E('em', [
 473                 _('No data recorded yet.'), ' ',
 474                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 475         ]));
 476
 477         pie('traf-pie', trafData);
 478         pie('conn-pie', connData);
 479
 480         kpi('rx-total', '%1024.2mB'.format(rx_total));
 481         kpi('tx-total', '%1024.2mB'.format(tx_total));
 482         kpi('conn-total', '%1000m'.format(conn_total));
 483         kpi('host-total', '%u'.format(hostData.length));
 484 }
 485
 486 function renderLayer7Data()
 487 {
 488         var rxData = [], txData = [];
 489         var topConn = [[0],[0],[0]], topRx = [[0],[0],[0]], topTx = [[0],[0],[0]];
 490
 491         var layer7Data = query(
 492                 null, ['layer7'],
 493                 function(r1, r2) {
 494                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 495                 }
 496         );
 497
 498         var rows = [];
 499
 500         for (var i = 0, c = 0; i < layer7Data.length; i++) {
 501                 var rec = layer7Data[i],
 502                     cell = E('div', rec.layer7 || _('other'));
 503
 504                 rows.push([
 505                         cell,
 506                         '%1000m'.format(rec.conns),
 507                         '%1024.2mB'.format(rec.rx_bytes),
 508                         '%1000.2mP'.format(rec.rx_pkts),
 509                         '%1024.2mB'.format(rec.tx_bytes),
 510                         '%1000.2mP'.format(rec.tx_pkts)
 511                 ]);
 512
 513                 rxData.push({
 514                         value: rec.rx_bytes,
 515                         label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
 516                 });
 517
 518                 txData.push({
 519                         value: rec.tx_bytes,
 520                         label: ["%s: %%.2mB".format(rec.layer7 || _('other')), cell]
 521                 });
 522
 523                 if (rec.layer7) {
 524                         topRx.push([rec.rx_bytes, rec.layer7]);
 525                         topTx.push([rec.tx_bytes, rec.layer7]);
 526                         topConn.push([rec.conns, rec.layer7]);
 527                 }
 528         }
 529
 530         cbi_update_table('#layer7-data', rows, E('em', [
 531                 _('No data recorded yet.'), ' ',
 532                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 533         ]));
 534
 535         pie('layer7-rx-pie', rxData);
 536         pie('layer7-tx-pie', txData);
 537
 538         topRx.sort(function(a, b) { return b[0] - a[0] });
 539         topTx.sort(function(a, b) { return b[0] - a[0] });
 540         topConn.sort(function(a, b) { return b[0] - a[0] });
 541
 542         kpi('layer7-total', layer7Data.length);
 543         kpi('layer7-most-rx', topRx[0][1], topRx[1][1], topRx[2][1]);
 544         kpi('layer7-most-tx', topTx[0][1], topTx[1][1], topTx[2][1]);
 545         kpi('layer7-most-conn', topConn[0][1], topConn[1][1], topConn[2][1]);
 546 }
 547
 548 function renderIPv6Data()
 549 {
 550         var col       = { },
 551             rx4_total = 0,
 552             tx4_total = 0,
 553             rx6_total = 0,
 554             tx6_total = 0,
 555             v4_total  = 0,
 556             v6_total  = 0,
 557             ds_total  = 0,
 558             families  = { },
 559             records   = { };
 560
 561         ipv6Data = query(
 562                 null, ['family', 'mac'],
 563                 function(r1, r2) {
 564                         return ((r2.rx_bytes + r2.tx_bytes) - (r1.rx_bytes + r1.tx_bytes));
 565                 }
 566         );
 567
 568         for (var i = 0, c = 0; i < ipv6Data.length; i++) {
 569                 var rec = ipv6Data[i],
 570                     mac = rec.mac.toUpperCase(),
 571                     ip  = rec.ip,
 572                     fam = families[mac] || 0,
 573                     recs = records[mac] || {};
 574
 575                 if (rec.family == 4) {
 576                         rx4_total += rec.rx_bytes;
 577                         tx4_total += rec.tx_bytes;
 578                         fam |= 1;
 579                 }
 580                 else {
 581                         rx6_total += rec.rx_bytes;
 582                         tx6_total += rec.tx_bytes;
 583                         fam |= 2;
 584                 }
 585
 586                 recs[rec.family] = rec;
 587                 records[mac] = recs;
 588
 589                 families[mac] = fam;
 590         }
 591
 592         for (var mac in families) {
 593                 switch (families[mac])
 594                 {
 595                 case 3:
 596                         ds_total++;
 597                         break;
 598
 599                 case 2:
 600                         v6_total++;
 601                         break;
 602
 603                 case 1:
 604                         v4_total++;
 605                         break;
 606                 }
 607         }
 608
 609         var rows = [];
 610
 611         for (var mac in records) {
 612                 if (mac === '00:00:00:00:00:00')
 613                         continue;
 614
 615                 var dns = hostInfo[mac] ? hostInfo[mac].name : null,
 616                     rec4 = records[mac][4],
 617                     rec6 = records[mac][6];
 618
 619                 rows.push([
 620                         formatHostname(dns),
 621                         mac,
 622                         [ E('span', _('IPv4')),
 623                           E('span', _('IPv6')) ],
 624                         [ E('span', rec4 ? '%1024.2mB'.format(rec4.rx_bytes) : '-'),
 625                           E('span', rec6 ? '%1024.2mB'.format(rec6.rx_bytes) : '-') ],
 626                         [ E('span', rec4 ? '%1000.2mP'.format(rec4.rx_pkts)  : '-'),
 627                           E('span', rec6 ? '%1000.2mP'.format(rec6.rx_pkts)  : '-') ],
 628                         [ E('span', rec4 ? '%1024.2mB'.format(rec4.tx_bytes) : '-'),
 629                           E('span', rec6 ? '%1024.2mB'.format(rec6.tx_bytes) : '-') ],
 630                         [ E('span', rec4 ? '%1000.2mP'.format(rec4.tx_pkts)  : '-'),
 631                           E('span', rec6 ? '%1000.2mP'.format(rec6.tx_pkts)  : '-') ]
 632                 ]);
 633         }
 634
 635         cbi_update_table('#ipv6-data', rows, E('em', [
 636                 _('No data recorded yet.'), ' ',
 637                 E('a', { 'href': L.url('admin/nlbw/commit') }, _('Force reload…'))
 638         ]));
 639
 640         var shareData = [], hostsData = [];
 641
 642         if (rx4_total > 0 || tx4_total > 0)
 643                 shareData.push({
 644                         value: rx4_total + tx4_total,
 645                         label: ["IPv4: %.2mB"],
 646                         color: 'hsl(140, 100%, 50%)'
 647                 });
 648
 649         if (rx6_total > 0 || tx6_total > 0)
 650                 shareData.push({
 651                         value: rx6_total + tx6_total,
 652                         label: ["IPv6: %.2mB"],
 653                         color: 'hsl(180, 100%, 50%)'
 654                 });
 655
 656         if (v4_total > 0)
 657                 hostsData.push({
 658                         value: v4_total,
 659                         label: [_('%d IPv4-only hosts')],
 660                         color: 'hsl(140, 100%, 50%)'
 661                 });
 662
 663         if (v6_total > 0)
 664                 hostsData.push({
 665                         value: v6_total,
 666                         label: [_('%d IPv6-only hosts')],
 667                         color: 'hsl(180, 100%, 50%)'
 668                 });
 669
 670         if (ds_total > 0)
 671                 hostsData.push({
 672                         value: ds_total,
 673                         label: [_('%d dual-stack hosts')],
 674                         color: 'hsl(50, 100%, 50%)'
 675                 });
 676
 677         pie('ipv6-share-pie', shareData);
 678         pie('ipv6-hosts-pie', hostsData);
 679
 680         kpi('ipv6-hosts', '%.2f%%'.format(100 / (ds_total + v4_total + v6_total) * (ds_total + v6_total)));
 681         kpi('ipv6-share', '%.2f%%'.format(100 / (rx4_total + rx6_total + tx4_total + tx6_total) * (rx6_total + tx6_total)));
 682         kpi('ipv6-rx', '%1024.2mB'.format(rx6_total));
 683         kpi('ipv6-tx', '%1024.2mB'.format(tx6_total));
 684 }