{% extends "analytics/_layouts/tests" %}
{% import "_includes/forms" as forms %}

{% set selectedTab = 'formatting' %}

{% set content %}
    {% js %}
        var localeDefinition = Analytics.Utils.getLocaleDefinition(AnalyticsCurrencyDefinition);
    {% endjs %}

    <h2>JS Formatting Tests</h2>

    <table id="formatByType" class="data fullwidth formatting-tests">
        <thead>
        <tr>
            <th>Type</th>
            <th>Value</th>
            <th>Ouput</th>
        </tr>
        </thead>
    </table>

    {% js %}
        var formats = Craft.charts.BaseChart.defaults.formats;
        var tests = [
            { type: 'string', value: "Hello world!" },
            { type: 'percent', value: 36.7869 },
            { type: 'integer', value: 367869 },
            { type: 'time', value: 3200 },
            { type: 'time', value: 36786 },
            { type: 'currency', value: 36786 },
            { type: 'float', value: 36.7869 },
            { type: 'date', value: '201601' },
            { type: 'date', value: '20160203' },
        ];

        $tests = $('#formatByType');

        $.each(tests, function(key, test) {
            var output = Analytics.Utils.formatByType(localeDefinition, test.type, test.value);
            $test = $('<tr></tr>');
            $('<td>'+ test.type +'</td>').appendTo($test);
            $('<td>'+ test.value +'</td>').appendTo($test);
            $('<td>'+ output +'</td>').appendTo($test);
            $test.appendTo($tests);
        });
    {% endjs %}

    <h2>D3 Number formatting</h2>

    <table id="d3NumberFormatting" class="data fullwidth formatting-tests">
        <thead>
        <tr>
            <th>Label</th>
            <th>Format</th>
            <th>Value</th>
            <th>Formatted Value</th>
        </tr>
        </thead>
    </table>

    {% js %}
        var locale = d3.formatLocale(localeDefinition);

        var tests = [
            {
                label: "percentFormat",
                value: 19.345,
                valueModifier: function(value) {
                    return value / 100;
                },
                format: formats.percentFormat,
            },
            { label: "currencyFormat", value: 19.34, format: formats.currencyFormat },
            { label: "currencyFormat", value: 1902345.34, format: formats.currencyFormat },
            { label: "decimalFormat", value: 1902345.3412344, format: formats.numberFormat }
        ];

        $table = $('#d3NumberFormatting');

        $.each(tests, function(key, test) {
            var value = test.value;

            if(typeof(test.valueModifier) != 'undefined') {
                value = test.valueModifier(value);
            }

            var formattedValue = locale.format(test.format)(value);

            $tr = $('<tr></tr>');
            $('<td>'+ test.label +'</td>').appendTo($tr);
            $('<td>'+ test.format +'</td>').appendTo($tr);
            $('<td>'+ test.value +'</td>').appendTo($tr);
            $('<td>'+ formattedValue +'</td>').appendTo($tr);
            $tr.appendTo($table);
        });
    {% endjs %}
{% endset %}