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