<commit_before><!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  #chart-wrapper {
    position: fixed;
  }
  #chart {
    height: 300px;
    width: 500px;
  }
  </style>
</head>
<body>
 
  <div class="container">
    <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label>Subscribe Key</label>
          <p class="text-muted">The PubNub subscribe key.</p>
          <input type="text" class="form-control" id="subscribe-key" value="<KEY>">
        </div>

        <div class="form-group">
          <label>Channel</label>
          <p class="text-muted">The PubNub channel where your data is being published.</p>
          <input type="text" class="form-control" id="channel" value="pubnub-sensor-network">
        </div>

        <label>Data</label>
        <p class="text-muted">Click on a row to start seeing it output to the chart.</p>

        <div class="form-group">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Key</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody id="kvs">
          </tbody>
        </table>
        </div>

        <div class="form-group">
          <label>Chart Type</label>
          <p class="text-muted">Time series, bar, donut, your call.</p>
          <select class="form-control" id="chart-type">
            <option value="spline">Spline</option>
            <option value="area">Area</option>
            <option value="area-spline">Area Spline</option>
            <option value="step">Step</option>
            <option value="area-step">Area Step</option>
            <option value="scatter">Scatter</option>
            <option value="bar">Bar</option>
            <option value="donut">Donut</option>
            <option value="pie">Pie</option>
            <option value="gauge">Gauge</option>
          </select>
        </div>

        <div class="form-group">
          <label>Update Rate (ms)</label>
          <p class="text-muted">How fast your chart will update. If data is published faster than the update rate, it will be overwritten. If the chart updates before new data is received, data will remain stagnant.</p>
          <input type="text" class="form-control" id="rate" value="1000">
        </div>

        <div class="form-group">
          <label>Animation (ms)</label>
          <p class="text-muted">How long each animation will last.</p>
          <input type="text" class="form-control" id="duration" value="250">
        </div>

        <div class="form-group">
          <label>Limit</label>
          <p class="text-muted">How many data points to display.</p>
          <input type="text" class="form-control" id="limit" value="5">
        </div>

        <div class="form-group">
          <input type="checkbox" id="history" checked>  <label>History</label>
          <p class="text-muted">Use PubNub history to populate the chart on load</p>
        </div>

      </div>
      <div class="col-md-6">
        <div id="chart-wrapper">
          <button type="submit" class="btn btn-default" id="submit">Update</button>
          <div id="chart"></div>
        </div>
      </div>
    </div>
  </div> 

  
  <script src="./bower_components/pubnub/web/pubnub.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./bower_components/c3/c3.min.css">
  <script src="./bower_components/d3/d3.min.js"></script>
  <script src="./bower_components/c3/c3.min.js"></script>
  <script src="./bower_components/subsub/subsub.js"></script>

  <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">

  <script type="text/javascript" src="./bower_components/eon-chart/pubnub-c3.js"></script>

  <script type="text/javascript">

  var flattenObject = function(ob) {
    
    var toReturn = {};
    
    for (var i in ob) {
      if (!ob.hasOwnProperty(i)) continue;
      
      if ((typeof ob[i]) == 'object') {
        var flatObject = flattenObject(ob[i]);
        for (var x in flatObject) {
          if (!flatObject.hasOwnProperty(x)) continue;
          
          toReturn[i + '.' + x] = flatObject[x];
        }
      } else {
        toReturn[i] = ob[i];
      }
    }
    
    return toReturn;

  };

  var cols = [];
  var chart = null;
  var refresh = function function_name () {

    console.log('woot')

    var options = {
      type: $('#chart-type').val(),
      channel: $('#channel').val(),
      subscribe_key: $('#subscribe-key').val(),
      rate: $('#rate').val(),
      duration: $('#duration').val(),
      limit: $('#limit').val(),
      history: $('#history').is(':checked') || false
    }

    var pubnub = PUBNUB.init({
      subscribe_key: options.subscribe_key
    });

    var pedit = PUBNUB.init({
      subscribe_key: options.subscribe_key
    });

    var flow = false;
    if(options.type == "spline" ||
      options.type == "area" ||
      options.type == "area-spline" ||
      options.type == "step" ||
      options.type == "area-step" ||
      options.type == "scatter"
      ) {
      flow = true;
    }

    chart = eon.chart({
      pubnub: pubnub,
      channel: options.channel,
      history: true,
      flow: flow,
      rate: options.rate,
      limit: options.limit,
      generate: {
        bindto: '#chart',
        data: {
          type: options.type
        },
        transition: {
          duration: options.duration
        },
        bar: {
          width: {
            ratio: 0.5
          }
        }
      },
      transform: function(message) {

        var array = cols.map(function(arg){
          return [arg, message[arg]];
        });

        return {
          columns: array
        };

      }
    });

    pedit.subscribe({
      channel: options.channel,
      message: function(data) {

        var data = flattenObject(data);

        for(var key in data) {

          var $row = $('.key-'+key);

          var value = JSON.stringify(data[key]);

          if($row.length) {

            $row.find('.val').text(value)

          } else {

            var $row = $('\
              <tr class="key-' + key + '"> \
                <td class="key">' + key + '</td> \
                <td class="val">' + value + '</td> \
              </tr>');
           
            $row.click(function(){

              var thisKey = $(this).find('.key').text();
              if($(this).hasClass('info')){

                $(this).removeClass('info');
                for(var i in cols) {

                  if(cols[i] == thisKey) {
                    cols.splice(i, 1);
                    refresh();
                  }

                }

              } else {

                $(this).addClass('info');
                cols.push(thisKey);
                 
              }

            });

            $('#kvs').append($row);

          }

        }

      }
    });

  }

  $('#chart-type').change(function(e) {
    refresh();
  });

  $('#submit').click(function(e) {
    refresh();
    return false;
  });

  refresh();

  </script>

</body>
</html><commit_msg>fix #8 by NaN checking<commit_after><!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  #chart-wrapper {
    position: fixed;
  }
  #chart {
    height: 300px;
    width: 500px;
  }
  </style>
</head>
<body>
 
  <div class="container">
    <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label>Subscribe Key</label>
          <p class="text-muted">The PubNub subscribe key.</p>
          <input type="text" class="form-control" id="subscribe-key" value="<KEY>">
        </div>

        <div class="form-group">
          <label>Channel</label>
          <p class="text-muted">The PubNub channel where your data is being published.</p>
          <input type="text" class="form-control" id="channel" value="pubnub-sensor-network">
        </div>

        <label>Data</label>
        <p class="text-muted">Click on a row to start seeing it output to the chart.</p>

        <div class="form-group">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Key</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody id="kvs">
          </tbody>
        </table>
        </div>

        <div class="form-group">
          <label>Chart Type</label>
          <p class="text-muted">Time series, bar, donut, your call.</p>
          <select class="form-control" id="chart-type">
            <option value="spline">Spline</option>
            <option value="area">Area</option>
            <option value="area-spline">Area Spline</option>
            <option value="step">Step</option>
            <option value="area-step">Area Step</option>
            <option value="scatter">Scatter</option>
            <option value="bar">Bar</option>
            <option value="donut">Donut</option>
            <option value="pie">Pie</option>
            <option value="gauge">Gauge</option>
          </select>
        </div>

        <div class="form-group">
          <label>Update Rate (ms)</label>
          <p class="text-muted">How fast your chart will update. If data is published faster than the update rate, it will be overwritten. If the chart updates before new data is received, data will remain stagnant.</p>
          <input type="text" class="form-control" id="rate" value="1000">
        </div>

        <div class="form-group">
          <label>Animation (ms)</label>
          <p class="text-muted">How long each animation will last.</p>
          <input type="text" class="form-control" id="duration" value="250">
        </div>

        <div class="form-group">
          <label>Limit</label>
          <p class="text-muted">How many data points to display.</p>
          <input type="text" class="form-control" id="limit" value="5">
        </div>

        <div class="form-group">
          <input type="checkbox" id="history" checked>  <label>History</label>
          <p class="text-muted">Use PubNub history to populate the chart on load</p>
        </div>

      </div>
      <div class="col-md-6">
        <div id="chart-wrapper">
          <button type="submit" class="btn btn-default" id="submit">Update</button>
          <div id="chart"></div>
        </div>
      </div>
    </div>
  </div> 

  
  <script src="./bower_components/pubnub/web/pubnub.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./bower_components/c3/c3.min.css">
  <script src="./bower_components/d3/d3.min.js"></script>
  <script src="./bower_components/c3/c3.min.js"></script>
  <script src="./bower_components/subsub/subsub.js"></script>

  <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">

  <script type="text/javascript" src="./bower_components/eon-chart/pubnub-c3.js"></script>

  <script type="text/javascript">

  var flattenObject = function(ob) {
    
    var toReturn = {};
    
    for (var i in ob) {
      if (!ob.hasOwnProperty(i)) continue;
      
      if ((typeof ob[i]) == 'object') {
        var flatObject = flattenObject(ob[i]);
        for (var x in flatObject) {
          if (!flatObject.hasOwnProperty(x)) continue;
          
          toReturn[i + '.' + x] = flatObject[x];
        }
      } else {
        toReturn[i] = ob[i];
      }
    }
    
    return toReturn;

  };

  function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

  var cols = [];
  var chart = null;
  var refresh = function function_name () {

    var options = {
      type: $('#chart-type').val(),
      channel: $('#channel').val(),
      subscribe_key: $('#subscribe-key').val(),
      rate: $('#rate').val(),
      duration: $('#duration').val(),
      limit: $('#limit').val(),
      history: $('#history').is(':checked') || false
    }

    var pubnub = PUBNUB.init({
      subscribe_key: options.subscribe_key
    });

    var pedit = PUBNUB.init({
      subscribe_key: options.subscribe_key
    });

    var flow = false;
    if(options.type == "spline" ||
      options.type == "area" ||
      options.type == "area-spline" ||
      options.type == "step" ||
      options.type == "area-step" ||
      options.type == "scatter"
      ) {
      flow = true;
    }

    chart = eon.chart({
      pubnub: pubnub,
      channel: options.channel,
      history: true,
      flow: flow,
      rate: options.rate,
      limit: options.limit,
      generate: {
        bindto: '#chart',
        data: {
          type: options.type
        },
        transition: {
          duration: options.duration
        },
        bar: {
          width: {
            ratio: 0.5
          }
        }
      },
      transform: function(message) {

        var array = cols.map(function(arg){
          return [arg, message[arg]];
        });

        return {
          columns: array
        };

      }
    });

    pedit.subscribe({
      channel: options.channel,
      message: function(data) {

        var data = flattenObject(data);

        for(var key in data) {

          var $row = $('.key-'+key);

          var value = data[key];

          console.log(value)

          if(!isNaN(value)) {

            if($row.length) {

              $row.find('.val').text(value)

            } else {

              var $row = $('\
                <tr class="key-' + key + '"> \
                  <td class="key">' + key + '</td> \
                  <td class="val">' + value + '</td> \
                </tr>');
             
              $row.click(function() {

                var thisKey = $(this).find('.key').text();
                if($(this).hasClass('info')){

                  $(this).removeClass('info');
                  for(var i in cols) {

                    if(cols[i] == thisKey) {
                      cols.splice(i, 1);
                      refresh();
                    }

                  }

                } else {

                  $(this).addClass('info');
                  cols.push(thisKey);
                   
                }

              });

              $('#kvs').append($row);

            }

          }

        }

      }
    });

  }

  $('#chart-type').change(function(e) {
    refresh();
  });

  $('#submit').click(function(e) {
    refresh();
    return false;
  });

  refresh();

  </script>

</body>
</html>
{'fraction_non_alphanumeric': 0.16987136086662152, 'fraction_numerical': 0.0035883547731888964, 'mean_word_length': 1.8411232929409502, 'pattern_counts': {'":': 0, '<': 275, '<?xml version=': 0, '>': 275, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6453616', 'n_tokens_mistral': 4651, 'n_tokens_neox': 4454, 'n_words': 921}