<commit_before>@main("Chart Reference") {

<style>
#cr-tab-content td,th {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#cr-tab-content th {
  background-color: #66CCFF;
}

</style>

<script id="cr-template" type="text/html">
<h2>{{label}}</h2>
<p>type: {{type}}</p>

<h3>chart configuration</h3>
{{#defaults}}
<table style="border : 1px solid black;margin-bottom:20px;width:50%;">
<tr><th colspan=2>attributes and their default values</th></tr>
{{#defaults_list}}
<tr><td>{{key}}</td><td>
{{#value.colors}}
<div style="background-color:{{.}};width: 20px;height: 20px;display: inline-block;margin:4px">
</div>
{{/value.colors}}
{{^value.colors}}
{{value}}
{{/value.colors}}
</td></tr>
{{/defaults_list}}
</table>
{{/defaults}}
{{^defaults}}
<p>chart configuration is not supported for this chart</p>
{{/defaults}}

{{#substitutions}}
<table style="border : 1px solid black;width:50%;">
<tr><th colspan=2>substitution keys supported by this chart</th></tr>
{{#substitutions_list}}
<tr><td>{{key}}</td><td>{{value}}</td></tr>
{{/substitutions_list}}
</table>
{{/substitutions}}

<h3>chart example</h3>
<a href="{{imgsrc}}" target="_blank"><img src="{{imgsrc}}" width="250"></a>
<h3>spreadsheet example</h3>
<a href="{{spreadsheet}}">spreadsheet example</a>
</script>

<script>

    // it seems you can't iterate through keys/values in mustache
    // workaround inspired by http://stackoverflow.com/a/13531992
    function miterable(o) {
      _.each(_.keys(o), function (k) {
        var v = o[k];
        if(_.isObject(v) && !_.isArray(v) && !_.isFunction(v)) {
          var list = [];
          _.each(_.keys(v), function (key) {
            list.push({ key: key, value: v[key] });
          });
          miterable(v);
          v[k+'_list'] = list;
        }
      });
    }

    function initcr($, hogan) {
      var template = hogan.compile($('#cr-template').text());
      $('#cr-tabs ul').empty();
      $('#cr-tab-content').empty();
      $.get( "/chartref/config", function( data ) {
        $.each(data, function( index, chartref ) {
          miterable(chartref);
          chartref.imgsrc = '/chartref/charts/'+chartref.type.toLowerCase();
          chartref.spreadsheet = '/chartref/spreadsheets/'+chartref.type.toLowerCase();
          $( "#cr-tab-content" ).append('<div class="tab-pane" id="cr-tabs-'+index+'">'+
              template.render(chartref)+'</div>');
          $( "#cr-tabs ul" ).append('<li><a style="padding: 0px;font-size: 12px;" href="#cr-tabs-'+
              index+'" data-toggle="tab">'+chartref.title+'</a></li>')
        });
        $('#cr-tabs a:first').click();
      });
    }
    $(window).on('load', function() {
      requirejs(['main'], function() {
        requirejs(['jquery.bootstrap', 'hogan'], initcr);
      });
    });
</script>

<div id="cr-tabs" style="float:left;">
  <ul class="nav nav-tabs nav-stacked">
  </ul>
</div>
<div id="cr-tab-content" class="tab-content">
</div>
}
<commit_msg>improved chart reference styling<commit_after>@main("Chart Reference") {

<style>
#cr-tabs {
  border-right: 4px solid #eeeeee;
  margin-right: 4px;
  float:left;
}

#cr-tab-content table {
  border: 1px solid black;
  margin-bottom:20px;
  width:50%;
}

#cr-tab-content td,th {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#cr-tab-content th {
  background-color: #66CCFF;
}

.cr-label {
  white-space: nowrap
}

.cr-max-width {
  width:100%;
}

.cr-colorbox {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top:4px;
  margin-right:4px
}

</style>

<script id="cr-template" type="text/html">
<h2>{{label}}</h2>
<p>type: {{type}}</p>

<h3>chart configuration</h3>
{{#defaults}}
<table>
<tr><th colspan=2>attributes and their default values</th></tr>
{{#defaults_list}}
<tr><td class="cr-label">{{key}}</td><td class="cr-max-width">
{{#value.colors}}
<div class="cr-colorbox" style="background-color:{{.}};">
</div>
{{/value.colors}}
{{^value.colors}}
{{value}}
{{/value.colors}}
</td></tr>
{{/defaults_list}}
</table>
{{/defaults}}
{{^defaults}}
<p>chart configuration is not supported for this chart</p>
{{/defaults}}

{{#substitutions}}
<table>
<tr><th colspan=2>substitution keys supported by this chart</th></tr>
{{#substitutions_list}}
<tr><td class="cr-label">{{key}}</td><td>{{value}}</td></tr>
{{/substitutions_list}}
</table>
{{/substitutions}}

<h3>chart example</h3>
<a href="{{imgsrc}}" target="_blank"><img src="{{imgsrc}}" width="250"></a>
<h3>spreadsheet example</h3>
<a href="{{spreadsheet}}">spreadsheet example</a>
</script>

<script>

    // it seems you can't iterate through keys/values in mustache
    // workaround inspired by http://stackoverflow.com/a/13531992
    function miterable(o) {
      _.each(_.keys(o), function (k) {
        var v = o[k];
        if(_.isObject(v) && !_.isArray(v) && !_.isFunction(v)) {
          var list = [];
          _.each(_.keys(v), function (key) {
            list.push({ key: key, value: v[key] });
          });
          miterable(v);
          v[k+'_list'] = list;
        }
      });
    }

    function initcr($, hogan) {
      var template = hogan.compile($('#cr-template').text());
      $('#cr-tabs ul').empty();
      $('#cr-tab-content').empty();
      $.get( "/chartref/config", function( data ) {
        $.each(data, function( index, chartref ) {
          miterable(chartref);
          chartref.imgsrc = '/chartref/charts/'+chartref.type.toLowerCase();
          chartref.spreadsheet = '/chartref/spreadsheets/'+chartref.type.toLowerCase();
          $( "#cr-tab-content" ).append('<div class="tab-pane" id="cr-tabs-'+index+'">'+
              template.render(chartref)+'</div>');
          $( "#cr-tabs ul" ).append('<li><a style="padding: 0px;font-size: 12px;" href="#cr-tabs-'+
              index+'" data-toggle="tab">'+chartref.title+'</a></li>')
        });
        $('#cr-tabs a:first').click();
      });
    }
    $(window).on('load', function() {
      requirejs(['main'], function() {
        requirejs(['jquery.bootstrap', 'hogan'], initcr);
      });
    });
</script>

<div id="cr-tabs">
  <ul class="nav nav-tabs nav-stacked">
  </ul>
</div>
<div id="cr-tab-content" class="tab-content">
</div>
}

{'fraction_non_alphanumeric': 0.22932692307692307, 'fraction_numerical': 0.014262820512820512, 'mean_word_length': 3.416843595187544, 'pattern_counts': {'":': 0, '<': 125, '<?xml version=': 0, '>': 125, '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': '5887930', 'n_tokens_mistral': 2306, 'n_tokens_neox': 2218, 'n_words': 411}