<commit_before><!-- @@include('../assets/_header.tpl', {"title": "Axis labeler"}) -->

<div class="container">
       <div class="buttons">

        <div id="dropdown-size" class="wrapper-dropdown" tabindex="1">
            <span>Size</span>
            <ul class="dropdown">
                <li><a onclick="phoneSize('axis-labeler')">Mobile Portrait</a>
                </li>
                <li><a onclick="phoneSize('axis-labeler', 'landscape')">Mobile Landscape</a>
                </li>
                <li><a onclick="randomSize('axis-labeler')">Random Size</a>
                </li>
                <li><a onclick="fullSize('axis-labeler')">Full Screen</a>
                </li>
            </ul>
        </div>

        <button onclick="randomSize('axis-labeler')">RANDOM</button>


        <label>|</label>

        <div id="dropdown-number" title="axis domain" class="wrapper-dropdown" tabindex="1">
            <span id="listLabel">Set axis domain</span>
            <ul class="dropdown automaticListOfOptions">

            </ul>
        </div>
        <div id="dropdown-number" title="X axis type" class="wrapper-dropdown" tabindex="1">
            <span>X type</span>
            <ul class="dropdown">
                <li><a onclick="setType('linear', 'x')">X linear</a></li>
                <li><a onclick="setType('log', 'x')">X log</a></li>
                <li><a onclick="setType('genericLog', 'x')">X generic log</a></li>
            </ul>
        </div>
        <div id="dropdown-number" title="Y xis type" class="wrapper-dropdown" tabindex="1">
            <span>Y type</span>
            <ul class="dropdown">
                <li><a onclick="setType('linear', 'y')">Y linear</a></li>
                <li><a onclick="setType('log', 'y')">Y log</a></li>
                <li><a onclick="setType('genericLog', 'y')">Y generic log</a></li>
            </ul>
        </div>


    </div>


    <div id="axis-labeler" class="placeholder"></div>

</div>
<div class="aux">
    <button onclick="shareLink()">SHARE LINK</button>

    <p>Current State:</p>
    <pre id="state" class="json_box" contentEditable="true"></pre>
    <button onclick="setCurrentState()">SET STATE</button>
    
    <p>Margins (use [W][A][S][D] keys):</p>
    <p>⇅ <span id="axisMarginLabelTB"></span>  ⇄ www<span id="axisMarginLabelLR"></span></p>
    <button style="width: 30%; padding:0px; left: 32%" onclick="setFontMargin('+1','TB')">⇅ +</button>
    <button style="width: 30%; padding:0px; display: inline; " onclick="setFontMargin('-1','LR')">⇄ --</button>
    <button style="width: 30%;  padding:0px; display: inline;" onclick="setFontMargin('-1','TB')">⇅ --</button>
    <button style="width: 30%;  padding:0px; display: inline; " onclick="setFontMargin('+1','LR')">⇄ +</button>
               
    <p>Axis font size (use [Z][X] keys):</p>
    <button style="width: 30%; display: inline" onclick="setFontSize('+1')">A +</button>
    <button style="width: 30%; display: inline" onclick="setFontSize('-1')">A --</button>
    <p><span id="axisFontLabel"></span></p>

</div>
</body>
<script>
var myVizabi;
var fontSize = "15px";
var margin = {LR: "5px", TB: "5px"};
var fontMarginTB = 5;
var fontMarginLR = 5;
var listPointer = 0;
var listData = [
    [1, 0.001, 0.001, 10000],
    [1.00000, 10000.0],
    [4.00000, 123.000],
    [0.00060, 123.000],
    [123.000, 4.00000],
    [123.000, 0.00060],
    [-123.00, -4.0000],
    [-123.00, -0.0006],
    [-4.0000, -123.00],
    [-0.0006, -123.00],
    [-123.00, 1800.00],
    [1800.00, -123.00],
    [123.000, -18000.],
    [-18000., 123.000],
    [-0.0006, 1800.00],
    [1800.00, -0.0006],
    [0.00060, -1800.0],
    [-1800.0, 0.00060],
    [-12.000, -2.0000],
    [-80.000, 40.0000],
    [5.00000, 8.00000],
    [42.0000, 42.0000],
    [0.00000000005, 4554545484715],
    [-2611968678575, 4554545484715],
    [-0.0020, 0.00200],
    [-123, -0.1, 0.002, 1540],
    [-123, -0.001, 0.5, 1540],
    [123, 0.1, -0.002, -1540],
    [123, 0.001, -0.5, -1540]
];

$(function() {

    var playButton = $("#play_button");
    var languageButton = $("#language_button");

    var options = {
        //state
        state: url.state || {
            scales:{
                domain: listData[listPointer],
                xScaleType: 'linear',
                yScaleType: 'genericLog'
            },
            show:{
                fontSize: fontSize,
                fontMargin: margin
            }
        },

        //bind these events to external page
        bind: {
            'ready': function() {
                parseURL();
            },
            'change:state': function(evt, vals) {
                showState(vals.state);
            }
        }
    };

    myVizabi = new Vizabi("_examples/axis-labeler", "#axis-labeler", options);
    showState(options.state);
});

    
function setFontSize(arg){
    fontSize = (parseFloat(fontSize) + parseFloat(arg)) + "px";
    $(".vzb-bc-axis-x text, .vzb-bc-axis-y text").each(function(){
        $(this).css('font-size',(fontSize));
    })
    
    $("#axisFontLabel").text(fontSize).css('font-size',(fontSize));
    var options = { state: { show: {} }};
    options.state.show.fontSize = fontSize;
    myVizabi.setOptions(options);
}
    
function setFontMargin(arg, direction){    
    margin[direction] = (parseFloat(margin[direction]) + parseFloat(arg)) + "px";
    
    $("#axisMarginLabel"+direction+"").text(margin[direction]);
    var options = { state: { show: {} }};
    options.state.show.fontMargin = margin;
    myVizabi.setOptions(options);
}

function setDomain(domain) {
    var options = { state: { scales: {} }};
    options.state.scales.domain = domain;
    myVizabi.setOptions(options);
};
    
function setType(type, axis) {
    var options = { state: { scales: {} }};
    options.state.scales[axis+"ScaleType"] = type;
    myVizabi.setOptions(options);<commit_msg>improved testing UI<commit_after><!-- @@include('../assets/_header.tpl', {"title": "Axis labeler"}) -->

<div class="container">
       <div class="buttons">

        <div id="dropdown-size" class="wrapper-dropdown" tabindex="1">
            <span>Size</span>
            <ul class="dropdown">
                <li><a onclick="phoneSize('axis-labeler')">Mobile Portrait</a>
                </li>
                <li><a onclick="phoneSize('axis-labeler', 'landscape')">Mobile Landscape</a>
                </li>
                <li><a onclick="randomSize('axis-labeler')">Random Size</a>
                </li>
                <li><a onclick="fullSize('axis-labeler')">Full Screen</a>
                </li>
            </ul>
        </div>

        <button onclick="randomSize('axis-labeler')">RANDOM</button>


        <label>|</label>

        <div id="dropdown-number" title="axis domain" class="wrapper-dropdown" tabindex="1">
            <span id="listLabel">Set axis domain</span>
            <ul class="dropdown automaticListOfOptions">

            </ul>
        </div>
        <div id="dropdown-number" title="X axis type" class="wrapper-dropdown" tabindex="1">
            <span>X type</span>
            <ul class="dropdown">
                <li><a onclick="setType('linear', 'x')">X linear</a></li>
                <li><a onclick="setType('log', 'x')">X log</a></li>
                <li><a onclick="setType('genericLog', 'x')">X generic log</a></li>
            </ul>
        </div>
        <div id="dropdown-number" title="Y xis type" class="wrapper-dropdown" tabindex="1">
            <span>Y type</span>
            <ul class="dropdown">
                <li><a onclick="setType('linear', 'y')">Y linear</a></li>
                <li><a onclick="setType('log', 'y')">Y log</a></li>
                <li><a onclick="setType('genericLog', 'y')">Y generic log</a></li>
            </ul>
        </div>


    </div>


    <div id="axis-labeler" class="placeholder"></div>

</div>
<div class="aux">
    <button onclick="shareLink()">SHARE LINK</button>

    <p>Current State:</p>
    <pre id="state" class="json_box" contentEditable="true"></pre>
    <button onclick="setCurrentState()">SET STATE</button>
    
    <p>Margins (use [W][A][S][D] keys):</p>
    <button style="width: 30%; padding:0px; left: 32%" onclick="setFontMargin('+1','TB')">⇅ +</button>
    <button style="width: 30%; padding:0px; display: inline; " onclick="setFontMargin('-1','LR')">⇄ --</button>
    <button style="width: 30%;  padding:0px; display: inline;" onclick="setFontMargin('-1','TB')">⇅ --</button>
    <button style="width: 30%;  padding:0px; display: inline; " onclick="setFontMargin('+1','LR')">⇄ +</button>
    <p>⇄ <span id="axisMarginLabelLR"></span> <span style="width: 20%; display: inline-block"> </span> ⇅ <span id="axisMarginLabelTB"></span>  </p>
        
    <p>_________________________________</p>
    <p>Labels font size (use [Z][X] keys):</p>
    <button style="width: 30%; display: inline" onclick="setFontSize('-1')">A --</button>
    <button style="width: 30%; display: inline" onclick="setFontSize('+1')">A +</button>
    <p><span id="axisFontLabel"></span></p>

</div>
</body>
<script>
var myVizabi;
var fontSize = "15px";
var margin = {LR: "5px", TB: "5px"};
var fontMarginTB = 5;
var fontMarginLR = 5;
var listPointer = 0;
var listData = [
    [1, 0.001, 0.001, 10000],
    [1.00000, 10000.0],
    [4.00000, 123.000],
    [0.00060, 123.000],
    [123.000, 4.00000],
    [123.000, 0.00060],
    [-123.00, -4.0000],
    [-123.00, -0.0006],
    [-4.0000, -123.00],
    [-0.0006, -123.00],
    [-123.00, 1800.00],
    [1800.00, -123.00],
    [123.000, -18000.],
    [-18000., 123.000],
    [-0.0006, 1800.00],
    [1800.00, -0.0006],
    [0.00060, -1800.0],
    [-1800.0, 0.00060],
    [-12.000, -2.0000],
    [-80.000, 40.0000],
    [5.00000, 8.00000],
    [42.0000, 42.0000],
    [0.00000000005, 4554545484715],
    [-2611968678575, 4554545484715],
    [-0.0020, 0.00200],
    [-123, -0.1, 0.002, 1540],
    [-123, -0.001, 0.5, 1540],
    [123, 0.1, -0.002, -1540],
    [123, 0.001, -0.5, -1540]
];

$(function() {

    var playButton = $("#play_button");
    var languageButton = $("#language_button");

    var options = {
        //state
        state: url.state || {
            scales:{
                domain: listData[listPointer],
                xScaleType: 'linear',
                yScaleType: 'genericLog'
            },
            show:{
                fontSize: fontSize,
                fontMargin: margin
            }
        },

        //bind these events to external page
        bind: {
            'ready': function() {
                parseURL();
            },
            'change:state': function(evt, vals) {
                showState(vals.state);
            }
        }
    };

    myVizabi = new Vizabi("_examples/axis-labeler", "#axis-labeler", options);
    showState(options.state);
});

    
$("#axisFontLabel").text(fontSize).css('font-size',(fontSize));
function setFontSize(arg){
    fontSize = (parseFloat(fontSize) + parseFloat(arg)) + "px";
    $(".vzb-bc-axis-x text, .vzb-bc-axis-y text").each(function(){
        $(this).css('font-size',(fontSize));
    })
    
    $("#axisFontLabel").text(fontSize).css('font-size',(fontSize));
    var options = { state: { show: {} }};
    options.state.show.fontSize = fontSize;
    myVizabi.setOptions(options);
}

$("#axisMarginLabelLR").text(margin.LR);
$("#axisMarginLabelTB").text(margin.TB);
function setFontMargin(arg, direction){    
    margin[direction] = (parseFloat(margin[direction]) + parseFloat(arg)) + "px";
    
    $("#axisMarginLabel"+direction+"").text(margin[direction]);
    var options = { state: { show: {} }};
    options.state.show.fontMargin = margin;
    myVizabi.setOptions(options);
}

function setDomain(domain) {
    var options = { state: { scales: {} }};
    options.state.scales.domain = domain;
    myVizabi.setOptions(options);
};
    
function setType(type, axis) {
    var options = { state: { scales: {} }};
    options.state.scales[axis+"ScaleType"] = type;
    myVizabi.setOptions(options);
{'fraction_non_alphanumeric': 0.20623281393217233, 'fraction_numerical': 0.06616115323723024, 'mean_word_length': 2.4637806637806636, 'pattern_counts': {'":': 2, '<': 233, '<?xml version=': 0, '>': 233, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, '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': '4320433', 'n_tokens_mistral': 4655, 'n_tokens_neox': 4056, 'n_words': 768}