<commit_before>{% extends "layout.html" %}
{% block body %}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <link rel="stylesheet" href="{{ url_for('static',filename='css/card.css') }}">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/chart.css') }}">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/googlechart.css') }}">
  {% autoescape false %}
  <script>
    google.charts.load('current', {'packages':['line','bar','table']});
    google.charts.setOnLoadCallback(drawChart);

    var last_width = 0;

    var charts = {{ charts }};

    function drawChart() {
      charts.forEach( function(chart) {
        addCard(chart, $('#row1'));
      });
      last_width = $( window ).width();
    }

    function addCard(chart, row) {
      //console.log(chart);
      // make card
      card = makeCard(chart);
      // add card
      row.append(card);
      chart.options.width = card.find('#chart').width();
      card.find('.card').height(card.find('.card').height()+chart.options.height);
      // select options
      card.find('select[name=chart-type]').val(chart.type);
      card.find('select[name=chart-width]').val(chart.width);
      if(chart.data) {
        // draw graph
        drawGraph(card.find('#chart').get(0), chart);
      } else {
        // load data
        getData(chart, card);
      }
    }

    function getData(chart, card) {
      if(chart['timer_id']) {
        clearTimeout(chart['timer_id']);
        chart['timer_id'] = null;
      }
      $.ajax({
        url: "/chart/"+chart['id'],
        method: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function(data) {
          console.log(data);
          if(data) {
            if(chart['timer_id']) {
              clearTimeout(chart['timer_id']);
              chart['timer_id'] = null;
            }
            chart['data'] = data;
            drawGraph(card.find('#chart').get(0), chart);
          } else {
            if(!chart['timer_id']) {
              chart['timer_id'] = setTimeout(getData, 5000, chart, card);
            }
          }
        },
        error: function(error) {
          console.log(error);
          if(!chart['timer_id']) {
            chart['timer_id'] = setTimeout(getData, 5000, chart, card);
          }
        }
      });
    }

    function makeCard(chart) {
      var card = $('#card-dummy').clone();
      card.attr('id',"chart-"+chart.id);
      card.attr('chart-id',chart.id);
      card.find('#title').append(chart.title);
      card.addClass('col-lg-'+chart.width);
      card.css('display','');
      return card;
    }

    function drawGraph(graph, chart) {
      if(chart.data) {
        $(graph).empty();
        var container = null;
        if('bar' == chart.type) {
          container = new google.charts.Bar(graph);
        } else if('line' == chart.type) {
          container = new google.charts.Line(graph);
        } else if('table' == chart.type) {
          container = new google.charts.Table(graph);
        }
        var data = [chart.header].concat(chart.data);
        var json_data = google.visualization.arrayToDataTable(data);
        container.draw(json_data, google.charts.Line.convertOptions(chart.options));
      }
    }

    function deleteCard(target) {
      var wrapper = $(target).closest('.card-wrapper');
      var chart_id = $(wrapper).attr('chart-id');
      console.log("delete chart_id="+chart_id);
      $.ajax({
          url: "/chart",
          method: 'DELETE',
          contentType: "application/json; charset=utf-8",
          dataType: 'json',
          data: JSON.stringify({chart_id:chart_id}),
          success: function(data) {
              console.log(data);
              $(wrapper).remove();
          }
      });
    }

    function changeCardType(target) {
      var wrapper = $(target).closest('.card-wrapper');<commit_msg>add table chart type<commit_after>{% extends "layout.html" %}
{% block body %}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <link rel="stylesheet" href="{{ url_for('static',filename='css/card.css') }}">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/chart.css') }}">
  <link rel="stylesheet" href="{{ url_for('static',filename='css/googlechart.css') }}">
  {% autoescape false %}
  <script>
    google.charts.load('current', {'packages':['line','bar','table']});
    google.charts.setOnLoadCallback(drawChart);

    var last_width = 0;

    var charts = {{ charts }};

    function drawChart() {
      charts.forEach( function(chart) {
        addCard(chart, $('#row1'));
      });
      last_width = $( window ).width();
    }

    function addCard(chart, row) {
      //console.log(chart);
      // make card
      card = makeCard(chart);
      // add card
      row.append(card);
      chart.options.width = card.find('#chart').width();
      card.find('.card').height(card.find('.card').height()+chart.options.height);
      // select options
      card.find('select[name=chart-type]').val(chart.type);
      card.find('select[name=chart-width]').val(chart.width);
      if(chart.data) {
        // draw graph
        drawGraph(card.find('#chart').get(0), chart);
      } else {
        // load data
        getData(chart, card);
      }
    }

    function getData(chart, card) {
      if(chart['timer_id']) {
        clearTimeout(chart['timer_id']);
        chart['timer_id'] = null;
      }
      $.ajax({
        url: "/chart/"+chart['id'],
        method: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function(data) {
          console.log(data);
          if(data) {
            if(chart['timer_id']) {
              clearTimeout(chart['timer_id']);
              chart['timer_id'] = null;
            }
            chart['data'] = data;
            drawGraph(card.find('#chart').get(0), chart);
          } else {
            if(!chart['timer_id']) {
              chart['timer_id'] = setTimeout(getData, 5000, chart, card);
            }
          }
        },
        error: function(error) {
          console.log(error);
          if(!chart['timer_id']) {
            chart['timer_id'] = setTimeout(getData, 5000, chart, card);
          }
        }
      });
    }

    function makeCard(chart) {
      var card = $('#card-dummy').clone();
      card.attr('id',"chart-"+chart.id);
      card.attr('chart-id',chart.id);
      card.find('#title').append(chart.title);
      card.addClass('col-lg-'+chart.width);
      card.css('display','');
      return card;
    }

    function drawGraph(graph, chart) {
      if(chart.data) {
        $(graph).empty();
        var container = null;
        if('bar' == chart.type) {
          container = new google.charts.Bar(graph);
        } else if('line' == chart.type) {
          container = new google.charts.Line(graph);
        } else if('table' == chart.type) {
          container = new google.visualization.Table(graph);
        }
        var data = [chart.header].concat(chart.data);
        var json_data = google.visualization.arrayToDataTable(data);
        container.draw(json_data, google.charts.Line.convertOptions(chart.options));
      }
    }

    function deleteCard(target) {
      var wrapper = $(target).closest('.card-wrapper');
      var chart_id = $(wrapper).attr('chart-id');
      console.log("delete chart_id="+chart_id);
      $.ajax({
          url: "/chart",
          method: 'DELETE',
          contentType: "application/json; charset=utf-8",
          dataType: 'json',
          data: JSON.stringify({chart_id:chart_id}),
          success: function(data) {
              console.log(data);
              $(wrapper).remove();
          }
      });
    }

    function changeCardType(target) {
      var wrapper = $(target).closest('.card-wrapper');
{'fraction_non_alphanumeric': 0.18014148559878726, 'fraction_numerical': 0.0035371399696816574, 'mean_word_length': 2.263396537510305, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, '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': '1836101', 'n_tokens_mistral': 2399, 'n_tokens_neox': 2342, 'n_words': 382}