<commit_before>{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/card.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/chartbuilder.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/googlechart.css') }}">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row" id="row1">
    <div class="col-5 card-wrapper">
        <div class="card">
            <div class="card-body">
                <div class="card-title flex-justify">
                    <h4>Chart Builder</h4>
                    <small>
                        <button type="button" class="btn btn-light" id="btn-load">load</button>
                        <select class="custom-select" id="select-chart">
                            <option value="">차트를 선택</option>
                            {% for chart in charts %}
                            <option value="{{ chart['id'] }}">({{ chart['id'] }}) {{ chart['title'] }}</option>
                            {% endfor %}
                        </select>
                    </small>
                </div>
                <form id="chart-data">
                    <input type="hidden" name="id" id="chart-id">
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Title</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Title" name="title">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">ChartType</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="chart_type">
                                <option selected value="0">bigquery</option>
                                <option value="1">custom</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Type</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="type">
                                <option selected value="line">line</option>
                                <option value="bar">bar</option>
                                <option value="table">table</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Header</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Header" name="header">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Option</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Options" name="options">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Width</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="width">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option selected value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">query</label>
                        <div class="col-sm-11">
                            <textarea class="form-control" rows="20" name="query"></textarea>
                        </div>
                    </div>
                    <div class="text-right chart-button-group">
                        <button type="button" class="btn btn-danger" id="btn_update">UPDATE</button>
                        <button type="button" class="btn btn-info" id="btn_run">RUN</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-7" id="result">
    </div>
</div>
<!-- hidden -->
<div class="card-wrapper" id="card-dummy" style="display:none;" >
  <div class="card">
    <div class="card-body">
      <h6 id="title" class="card-title"></h6>
      <div id="chart"></div>
        <div class="text-right chart-button-group">
          <button type="button" class="btn btn-primary" id="btn_add">ADD</button>
        </div>
    </div>
  </div>
</div>
{% autoescape false %}
<script>
    google.charts.load('current', {'packages':['line','bar','table']});

    var charts = {{ '[]' if not charts else charts }};

    $(window).ready(function() {
        var selected_chart_id = {{ 0 if not selected_chart_id else selected_chart_id }};
        if(selected_chart_id) {
            $('#select-chart').val(selected_chart_id);
            setChartData(getChartById(selected_chart_id));
        }
    });

    $('#btn-load').on('click', function(e) {
        var selectedId = $('#select-chart').val();
        setChartData(getChartById(selectedId));
    });

    function setChartData(chart) {
        traverseObject($('#chart-data').find('input,textarea,select'), function(object) {
            if(chart[object.name]) {
                if('options' === object.name) {
                    $(object).val(JSON.stringify(chart[object.name]));
                } else {
                    $(object).val(chart[object.name]);
                }
            }
        });
    }

    function getChartById(chart_id) {
        for(var chart_idx in charts) {
            var chart = charts[chart_idx];
            if(chart['id'] == chart_id) {
                return chart;
            }
        }
        return null;
    }

    function traverseObject(object, callback) {
        for(var i=0,len=object.length; i < len; i++ ) {
            callback.call(this, object[i]);
        }
    }<commit_msg>bug fix<commit_after>{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/card.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/chartbuilder.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/googlechart.css') }}">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row" id="row1">
    <div class="col-5 card-wrapper">
        <div class="card">
            <div class="card-body">
                <div class="card-title flex-justify">
                    <h4>Chart Builder</h4>
                    <small>
                        <button type="button" class="btn btn-light" id="btn-load">load</button>
                        <select class="custom-select" id="select-chart">
                            <option value="">차트를 선택</option>
                            {% for chart in charts %}
                            <option value="{{ chart['id'] }}">({{ chart['id'] }}) {{ chart['title'] }}</option>
                            {% endfor %}
                        </select>
                    </small>
                </div>
                <form id="chart-data">
                    <input type="hidden" name="id" id="chart-id">
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Title</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Title" name="title">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">ChartType</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="chart_type">
                                <option selected value="0">bigquery</option>
                                <option value="1">custom</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Type</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="type">
                                <option selected value="line">line</option>
                                <option value="bar">bar</option>
                                <option value="table">table</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Header</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Header" name="header">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Option</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" placeholder="Options" name="options">
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">Width</label>
                        <div class="col-sm-11">
                            <select class="form-control" name="width">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option selected value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row align-items-center">
                        <label class="col-sm-1 col-form-label">query</label>
                        <div class="col-sm-11">
                            <textarea class="form-control" rows="20" name="query"></textarea>
                        </div>
                    </div>
                    <div class="text-right chart-button-group">
                        <button type="button" class="btn btn-danger" id="btn_update">UPDATE</button>
                        <button type="button" class="btn btn-info" id="btn_run">RUN</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-7" id="result">
    </div>
</div>
<!-- hidden -->
<div class="card-wrapper" id="card-dummy" style="display:none;" >
  <div class="card">
    <div class="card-body">
      <h6 id="title" class="card-title"></h6>
      <div id="chart"></div>
        <div class="text-right chart-button-group">
          <button type="button" class="btn btn-primary" id="btn_add">ADD</button>
        </div>
    </div>
  </div>
</div>
{% autoescape false %}
<script>
    google.charts.load('current', {'packages':['line','bar','table']});

    var charts = {{ '[]' if not charts else charts }};

    $(window).ready(function() {
        var selected_chart_id = {{ 0 if not selected_chart_id else selected_chart_id }};
        if(selected_chart_id) {
            $('#select-chart').val(selected_chart_id);
            setChartData(getChartById(selected_chart_id));
        }
    });

    $('#btn-load').on('click', function(e) {
        var selectedId = $('#select-chart').val();
        setChartData(getChartById(selectedId));
    });

    function setChartData(chart) {
        traverseObject($('#chart-data').find('input,textarea,select'), function(object) {
            if(chart.hasOwnProperty(object.name)) {
                if('options' === object.name) {
                    $(object).val(JSON.stringify(chart[object.name]));
                } else {
                    $(object).val(chart[object.name]);
                }
            }
        });
    }

    function getChartById(chart_id) {
        for(var chart_idx in charts) {
            var chart = charts[chart_idx];
            if(chart['id'] == chart_id) {
                return chart;
            }
        }
        return null;
    }

    function traverseObject(object, callback) {
        for(var i=0,len=object.length; i < len; i++ ) {
            callback.call(this, object[i]);
        }
    }
{'fraction_non_alphanumeric': 0.1543633661264067, 'fraction_numerical': 0.009059381414112817, 'mean_word_length': 1.31146736463275, 'pattern_counts': {'":': 0, '<': 287, '<?xml version=': 0, '>': 285, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '331710', 'n_tokens_mistral': 3781, 'n_tokens_neox': 3576, 'n_words': 639}