tools/crunchstat-summary/crunchstat_summary/dygraphs.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 window.onload = function() {
   6     var charts = {};
   7     var fmt = {
   8         iso: function(y) {
   9             var s='';
  10             if (y > 1000000000) { y=y/1000000000; s='G'; }
  11             else if (y > 1000000) { y=y/1000000; s='M'; }
  12             else if (y > 1000) { y=y/1000; s='K'; }
  13             return y.toFixed(2).replace(/\.0+$/, '')+s;
  14         },
  15         time: function(s) {
  16             var ret = ''
  17             if (s >= 86400) ret += Math.floor(s/86400) + 'd'
  18             if (s >= 3600) ret += Math.floor(s/3600)%24 + 'h'
  19             if (s >= 60) ret += Math.floor(s/60)%60 + 'm'
  20             ret += Math.floor(s)%60 + 's'
  21             // finally, strip trailing zeroes: 1d0m0s -> 1d
  22             return ret.replace(/(\D)(0\D)*$/, '$1')
  23         },
  24     }
  25     var ticker = {
  26         time: function(min, max, pixels, opts, dg) {
  27             var max_ticks = Math.floor(pixels / opts('pixelsPerLabel'))
  28             var natural = [1, 5, 10, 30, 60,
  29                            120, 300, 600, 1800, 3600,
  30                            7200, 14400, 43200, 86400]
  31             var interval = natural.shift()
  32             while (max>min && (max-min)/interval > max_ticks) {
  33                 interval = natural.shift() || (interval * 2)
  34             }
  35             var ticks = []
  36             for (var i=Math.ceil(min/interval)*interval; i<=max; i+=interval) {
  37                 ticks.push({v: i, label: fmt.time(i)})
  38             }
  39             return ticks
  40         },
  41     }
  42     chartdata.forEach(function(section, section_idx) {
  43         var chartDiv = document.getElementById("chart");
  44         section.charts.forEach(function(chart, chart_idx) {
  45             // Skip chart if every series has zero data points
  46             if (0 == chart.data.reduce(function(len, series) {
  47                 return len + series.length;
  48             }, 0)) {
  49                 return;
  50             }
  51             var id = 'chart-'+section_idx+'-'+chart_idx;
  52             var div = document.createElement('div');
  53             div.setAttribute('id', id);
  54             div.setAttribute('style', 'width: 100%; height: 150px');
  55             chartDiv.appendChild(div);
  56             chart.options.valueFormatter = function(y) {
  57             }
  58             chart.options.axes = {
  59                 x: {
  60                     axisLabelFormatter: fmt.time,
  61                     valueFormatter: fmt.time,
  62                     ticker: ticker.time,
  63                 },
  64                 y: {
  65                     axisLabelFormatter: fmt.iso,
  66                     valueFormatter: fmt.iso,
  67                 },
  68             }
  69             var div2 = document.createElement('div');
  70             div2.setAttribute('style', 'width: 150px; height: 150px');
  71             chart.options.labelsDiv = div2;
  72             chart.options.labelsSeparateLines = true;
  73
  74             var div3 = document.createElement('div');
  75             div3.setAttribute('style', 'display: flex; padding-bottom: 16px');
  76             div3.appendChild(div);
  77             div3.appendChild(div2);
  78             chartDiv.appendChild(div3);
  79
  80             charts[id] = new Dygraph(div, chart.data, chart.options);
  81         });
  82     });
  83
  84     var sync = Dygraph.synchronize(Object.values(charts), {range: false});
  85
  86     if (typeof window.debug === 'undefined')
  87         window.debug = {};
  88     window.debug.charts = charts;
  89 };