<commit_before>{% extends "chart-editor.twig" %}

{% block content %}

{{ parent() }}

<style type="text/css">

.sidebar #column-options {
    display: none;
}

.sidebar #column-options .unresolved {
    background: #FDFFBA;
}

.sidebar #column-options .unresolved option,
.sidebar #column-options .unresolved optgroup {
    background: #fff;
}

table.htCore tr td {
    font-size: 1.1em;
    font-family: Helvetica;
    font-weight: 400;
    padding: 3px 6px;
}

.chart-editor textarea.handsontableInput {
    padding-left: 5px;
    padding-right: 5px;
}

.table thead th {
    cursor: pointer;
}

.table thead th.selected {
    background: #ccc;
}
.table td.ignored {
    color: #999 !important;
    text-decoration: line-through
}
.table td.htDimmed { /*revert default HOT style for readOnly cells*/
    font-style: normal;
    color: inherit;
}
.table td.firstRow {
    border-bottom: 1px solid #000;
    font-weight: bold;
    background: #f0f0f0;
}
.table td.textType {
    color: #000000;
}
.table td.dateType {
    color: #39A832;
    font-style: italic;
    text-align: center;
}
.table td.numberType {
    color: #297EA8;
    text-align: right;
}
.table td.oddRow {
    background-color: #fff;
}
.table td.evenRow {
    background-color: #f9f9f9;
}
</style>
<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable/jquery.handsontable.full.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable/jquery.handsontable.bootstrap.css">
<script type="text/javascript" src="/static/vendor/handsontable/jquery.handsontable.full.js"></script>
<script type="text/javascript">
$(function() {

    var datachanges = {
        exist: function() {
            return !!chart.get('metadata.data.data-changes', []).length;
        },
        add: function(changes) {
            var dataChanges = _.clone(chart.get('metadata.data.data-changes', [])); //clone is needed, otherwise chart.set does not detect this as change
            changes.forEach(function(change) {
                dataChanges.push({row: change[0] - 1, column: getSeriesOfIndex(change[1]), value: change[3]});
            });
            chart.set('metadata.data.data-changes', dataChanges);
        },
        revert: function() {
            chart.set('metadata.data.data-changes', []);
        }
    }

    var chart = dw.backend.currentChart,
        dataset;

    chart.onChange(reload);

    chart.sync('#describe-source-name', 'metadata.describe.source-name');
    chart.sync('#describe-source-url', 'metadata.describe.source-url');
    chart.sync('input:radio[name=transpose]', 'metadata.data.transpose');

    chart.sync('#has-headers', 'metadata.data.horizontal-header');

    // swap between currency and unit
    function swapUnitAndCurrency() {
        if ($('#number-format').val()[0] == 'c') {
            $('#number-currency').show();
            $('#number-unit').hide();
        } else {
            $('#number-currency').hide();
            $('#number-unit').show();
        }
       //$('#number-currency, #number-unit, #number-divisor').attr('disabled', $('#number-format').val() == '-');
    }
    $('#number-format').change(swapUnitAndCurrency);
    swapUnitAndCurrency();

    // update currency in number-format select
    function updateCurrencyInNumberFormat() {
        var curOpt = $('#number-format option[value=c], #number-format option[value=c0]');
        Globalize.culture("{{ chartLocale }}").numberFormat.currency.symbol = $('#number-currency option:selected').data('symbol');
        curOpt.each(function(i, el) {
            el = $(el);
            el.html(Globalize.format(1234.567, el.val()));
        });
    }
    updateCurrencyInNumberFormat();
    $('#number-currency').change(updateCurrencyInNumberFormat);

    // update data table after format changes
    $('.number-format').change(function() {
        updateTable(dataset, chart);
    });

    var ignoreSeries;

    function updateTable() {

        function isNone(val) {
            return val === null || val === undefined || (_.isNumber(val) && isNaN(val));
        }

        var data = [];

        var horzHeaders = chart.get('metadata.data.horizontal-header'),
            transpose = chart.get('metadata.data.transpose');

        dataset.ignoreIgnores = true;

        var tr = [];
        dataset.eachColumn(function(column) {
            tr.push(column.title());
        });
        data.push(tr);

        var DIV = document.createElement('DIV');
        function stripHtmlTags(val) {
            DIV.innerHTML = val;
            return DIV.textContent;
        }

        dataset.eachRow(function(row) {
            var tr = [];
            dataset.eachColumn(function(column, i) {
                var val = column.raw(row);
                val = column.type() == 'number' ? chart.formatValue(val, true) :
                        column.type() == 'date' ? dw.utils.longDateFormat(column)(val) :
                        val;
                tr.push((!isNone(column.raw(row)) ? stripHtmlTags(val) : ''));
            });
            data.push(tr);
        });

        ignoreSeries = _.clone(chart.get('metadata.data.ignore-columns', {}));

        function myRenderer(instance, td, row, col, prop, value, cellProperties) {
            if (row > 0) {
                var column = dataset.column(col);
                var formatter = chart.columnFormatter(column);
                value = formatter(column.val(row - 1), true);
            }
            Handsontable.TextCell.renderer.apply(this, arguments);
            if (parseInt(value, 10) < 0) { //if row contains negative number
                td.classList.add('negative');
            }
            if (row === 0) {
                td.classList.add('firstRow');
            } else {
                if (dataset.column(col).type() == 'text') {
                    td.classList.add('textType');
                } else if (dataset.column(col).type() == 'date') {
                    td.classList.add('dateType');
                } else { // number
                    td.classList.add('numberType');
                }
                td.classList.add(row % 2 ? 'oddRow' : 'evenRow');
            }

            if (ignoreSeries[data[0][col]]) {
                td.classList.add('ignored');
            }

            if(selectedColumns.indexOf(col) > -1) {
                td.classList.add('area'); //add blue area background if this cell is in selected column
            }
        }

        if($("#data-preview").handsontable('getInstance')) {
            $("#data-preview").handsontable('loadData', data);
            $("#data-preview").handsontable('render');
        }
        else {
            $("#data-preview").handsontable({
                data: data,
                allowHtml: true,
                startRows: 6,
                startCols: 8,
                width: $("#data-preview").width(),
                height: 400,
                fixedRowsTop: horzHeaders ? 1: 0,
                rowHeaders: true,
                colHeaders: true,
                fillHandle: false,
                stretchH: 'all',
                cells: function (row, col, prop) {
                    return {
                        renderer: myRenderer
                    };
                },
                afterRender: function() {
                    renderSelectedTh(); //if HOT was scrolled horizontally, we need to rerender th.selected
                },
                afterChange: function(changes, source) {
                    if (source !== 'loadData') {
                        datachanges.add(changes);
                    }
                }
            });

            $('#data-preview table').addClass('table table-bordered');
        }

        if(datachanges.exist()) {
            $('#reset-data-changes').removeClass('disabled');
        }
        else {
            $('#reset-data-changes').addClass('disabled');
        }
    }

    $('#reset-data-changes').click(function(){
        datachanges.revert();
    });

    // add event handler for ignoring data series
    var start;
    var $dataPreview = $("#data-preview");

    function hasCorner() {
        return !!$('#data-preview tbody th').length;
    }

    function getIndexOfTh(th) {
        var col = $dataPreview.handsontable('getInstance').view.wt.wtTable.getCoords(th)[1];
        return col;
    }

    function getThOfIndex(index) {
        var offsetCol = $dataPreview.handsontable('getInstance').view.wt.getSetting('offsetColumn');
        var thIndex = index + 1 * hasCorner() - offsetCol;
        return document.querySelectorAll('#data-preview thead th')[thIndex];
    }

    function getSeriesOfIndex(index) {
        return dataset.column(index).name();
    }

    $('body').on('mousedown', function () {
        if(selectedColumns.length) {
            deselectColumns();
            $dataPreview.handsontable('render'); //refresh all cells and column headers
            showColumnSettings();
        }
    });

    $('body').on('mouseup', function () {
        start = void 0;
    });

    $dataPreview.on('mousedown', 'th:has(.colHeader)', function () {
        start = getIndexOfTh(this);
        selectColumns(start);
        event.stopPropagation();
        $dataPreview.handsontable('deselectCell');
    });

    var last;
    $dataPreview.on('mouseenter', 'th:has(.colHeader)', function () {
        if(last === this) {
            return;
        }
        if(start !== void 0) {
            var current = getIndexOfTh(this);
            selectColumns(start, current);
        }
        last = this;
    });

    var selectedColumns = [];

    function deselectColumns() {
        selectedColumns.length = 0;
    }

    function selectColumns(from, to) {
        deselectColumns();
        if(to === void 0) {
            selectedColumns.push(from);
        }
        else {
            var min = Math.min(from, to);
            var max = Math.max(from, to);
            while(min <= max) {
                selectedColumns.push(min);
                min++;
            }
        }
        $dataPreview.handsontable('render');
        showColumnSettings();
    }

    function renderSelectedTh() {
        $("#data-preview thead th.selected").removeClass('selected');
        selectedColumns.forEach(function(i){
            getThOfIndex(i).classList.add('selected');
        });
    }

    function selectedSeries() {
        var out = [];
        selectedColumns.forEach(function(i){
            out.push(getSeriesOfIndex(i));
        });
        return out;
    }

    function allEqual(formats, series, property) {
        if (series.length > 1) {
            for (var i = 1; i < series.length; i++) {
                var a = formats[series[i]] && formats[series[i]][property];
                var b = formats[series[i - 1]] && formats[series[i - 1]][property];
                if (a !== b) {
                    return false;
                }
            }
        }
        return true;
    }

    function fillInField(selector, property) {
        var series = selectedSeries();
        var formats = chart.get('metadata.describe.column-format', {});
        var $input = $(selector);
        if(allEqual(formats, series, property)) {
            var val = formats[series[0]] && formats[series[0]][property];
            $input.val(val).removeClass('unresolved');
        }
        else {
            $input.val('').addClass('unresolved');
            $input.change(function() {
                fillInField(selector, property);
            });
        }
    }

    function showColumnSettings() {
        if(selectedColumns.length) {
            var serie = getSeriesOfIndex(selectedColumns[0]);
            var ignoreSeries = chart.get('metadata.data.ignore-columns', {});
            $('#column-options-hide')[0].checked = ignoreSeries[serie];

            if(dataset.column(serie).type() == 'number') {
                fillInField('#number-format', 'number-format');
                fillInField('#number-divisor', 'number-divisor');
                fillInField('#number-append', 'number-append');
                fillInField('#number-prepend', 'number-prepend');
                $('#number-column-options').show();
            }
            else {
                $('#number-column-options').hide();
            }

            $('#table-options').hide();
            $('#column-options').show();
        }
        else {
            $('#column-options').hide();
            $('#table-options').show();
        }
    }

    $('.sidebar').mousedown(function(event){
        event.stopPropagation(); //stop sidebar event propagation so clicking in #column-options won't deselect column selection
    });

    $('#column-options-hide').change(function(){
        var checked = this.checked;
        var ignoreSeries = _.clone(chart.get('metadata.data.ignore-columns', {}));
        selectedColumns.forEach(function(i){
            ignoreSeries[getSeriesOfIndex(i)] = checked;
        });
        chart.set('metadata.data.ignore-columns', ignoreSeries);
    });

    function syncColumnFormat(selector, property) {
        $(selector).change(function(){
            var value = this.value;
            var columnFormats = $.extend(true, {}, chart.get('metadata.describe.column-format', {})); //deep clone (_.clone is insufficient because it does a shallow clone)
            selectedColumns.forEach(function(i) {
                var series = getSeriesOfIndex(i);
                if (!columnFormats[series]) {
                    columnFormats[series] = {};
                }
                columnFormats[series][property] = value;
            });
            chart.set('metadata.describe.column-format', columnFormats);
        });
    }

    syncColumnFormat('#number-format', 'number-format');
    syncColumnFormat('#number-divisor', 'number-divisor');
    syncColumnFormat('#number-append', 'number-append');
    syncColumnFormat('#number-prepend', 'number-prepend');

    function reload(f) {
        console.log('chart reloaded');
        chart.load().done(function() {
            if (_.isUndefined(f)) {
                console.log('synchronizing header settings', $('#has-headers'));

            }
            dataset = chart.dataset();
            updateTable();
        });
    }

    $('#describe-source-url').blur(function() {
        var v = $(this).val();
        if (v.substr(0,2) != '//' && v.substr(0,7) != 'http://' &&  v.substr(0,8) != 'https://') {
            $(this).val('//'+v);
            chart.set('metadata.describe.source-url', $(this).val());
        }
    });

    reload();

    $('#describe-proceed').click(function() {
        chart.save();
    });

});

</script>

<div class="dw-create-describe chart-editor">

    <div class="row">

        <div class="span8">

            <h2>{% trans "Check and Describe Your Data" %}</h2>

            <p>
                {% trans "Please check if the data format was recognized correctly." %}
                {% trans "You can hide columns by clicking the table header." %}
            </p>

            <form class="form-inline">
                <div id="csv-parse-options" class="row">
                    <div class="span4">
                    </div>
                    <div class="span4">

                    </div>
                </div>
            </form>

            <div id="data-preview"></div>
        </div>

        <div class="span4">
            <div class="well sidebar">

                <div id="table-options">

                    <h3>{% trans "Describe your data" %}</h3>

                    <div style="margin-bottom:15px;">

                        <div class="half">
                            <p>
                                <label class="radio"><input type="radio" name="transpose" value="yes" /> {% trans "Data series in rows" %}</label>
                                <label class="radio"><input type="radio" name="transpose" value="no" /> {% trans "Data series in columns" %}</label>
                            </p>

                        </div><div class="half">
                            <p>
                                <label class="checkbox"><input id="has-headers" type="checkbox" checked="checked"> {% trans "First row as label" %}</label>
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <h3>{% trans "Credit the source" %}</h3>

                    <p>
                        <label>{% trans "Who published the data in the first place?" %}</label>
                        <input id="describe-source-name" type="text" placeholder="name of the organisation">
                    </p>

                    <p>
                        <label>{% trans "If possible, please provide a link the source data" %}</label>
                        <input id="describe-source-url" type="text" placeholder="http://">
                    </p>

                    <!--<h3>{% trans "Annotate data" %}</h3>
                    <p>{% trans "To make the data more useful for your readers you can add details to individual data points or an entire series. This information will be displayed in the visualisations." %} <a href="#">{% trans "Learn more" %}</a></p>
                    <button class="btn"><i class="icon-th-list"></i> {% trans "Annotate series" %}</button> <button class="btn"><i class="icon-th"></i> {% trans "Annotate data point" %}</button>
                    -->
                </div>

                <div id="column-options">
                    <h3>{% trans "Column options" %}</h3>

                    {#<div class="form-horizontal compact">
                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Column type" %}</label>

                            <div class="controls">
                                <select id="column-options-type" class="select" style="width:90%">
                                    {% for id, type in columntypes %}
                                        <option value="{{ id }}">{{ type }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>#}

                    <div id="number-column-options" class="form-horizontal compact">
                        <h3>{% trans "Output number format" %}</h3>

                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Decimals after point" %}</label>

                            <div class="controls">
                                <select id="number-format" class="select number-format" style="width:90%">
                                    <option value="-">{% trans "keep original" %}</option>
                                    {% for id, format in numberformats %}
                                        <option value="{{ id }}">{{ format }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Prepend/Append" %}</label>

                            <div class="controls">
                                <input type="text" id="number-prepend" style="width:2em;text-align:right"/> # <input type="text" id="number-append" style="width:5em"/>
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Divide numbers by" %}</label>

                            <div class="controls">
                                <select class="number-format" id="number-divisor" style="width:90%">
                                    <option value="0">-</option>
                                    <option value="3">{% trans "1000" %}</option>
                                    <option value="6">{% trans "1 million" %}</option>
                                    <option value="9">{% trans "1 billion" %}</option>
                                    <optgroup label="─────────────"></optgroup>
                                    <option value="-2">{% trans "One Percent" %}</option>

                                </select>
                            </div>
                        </div>

                    </div>

                    <div style="margin-bottom:15px;">
                        <h3>{% trans "Hide column" %}</h3>

                        <p>
                            <label class="checkbox"><input id="column-options-hide" type="checkbox"> {% trans "Hide column from visualization" %}</label>
                        </p>
                    </div>

                    <div class="clearfix"></div>
                </div>

                <a href="visualize" class="submit pull-right btn btn-primary" id="describe-proceed">{% trans "Visualize" %} <i class="icon-chevron-right icon-white"></i></a>
                <a class="btn submit" href="upload"><i class="icon-chevron-left"></i> {% trans "Back" %}</a>
                <button class="btn disabled" id="reset-data-changes" title="{% trans "Revert data changes" %}">{% trans "Revert" %}</button>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">


        </div>
    </div>
</div>


{% endblock %}<commit_msg>improved background colors of selection<commit_after>{% extends "chart-editor.twig" %}

{% block content %}

{{ parent() }}

<style type="text/css">

.sidebar #column-options {
    display: none;
}

.sidebar #column-options .unresolved {
    background: #FDFFBA;
}

.sidebar #column-options .unresolved option,
.sidebar #column-options .unresolved optgroup {
    background: #fff;
}

table.htCore tr td {
    font-size: 1.1em;
    font-family: Helvetica;
    font-weight: 400;
    padding: 3px 6px;
}

.chart-editor textarea.handsontableInput {
    padding-left: 5px;
    padding-right: 5px;
}

.table thead th {
    cursor: pointer;
}

.table thead th.selected {
    background: #ccc;
}
.table td.ignored {
    color: #999 !important;
    text-decoration: line-through
}
.table td.htDimmed { /*revert default HOT style for readOnly cells*/
    font-style: normal;
    color: inherit;
}
.table td.firstRow {
    border-bottom: 1px solid #aaa;
    font-weight: bold;
    background: #f0f0f0;
}

.table td.textType {
    color: #000000;
}
.table td.dateType {
    color: #39A832;
    font-style: italic;
    text-align: center;
}
.table td.numberType {
    color: #297EA8;
    text-align: right;
}
.table td.oddRow {
    background-color: #fff;
}

.table td.evenRow {
    background-color: #f9f9f9;
}
.table td.firstRow.area { background: #d4ddee; }
.table td.oddRow.area { background-color: #e1ebfd; }
.table td.evenRow.area { background-color: #dce5f7; }

</style>
<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable/jquery.handsontable.full.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/handsontable/jquery.handsontable.bootstrap.css">
<script type="text/javascript" src="/static/vendor/handsontable/jquery.handsontable.full.js"></script>
<script type="text/javascript">
$(function() {

    var datachanges = {
        exist: function() {
            return !!chart.get('metadata.data.data-changes', []).length;
        },
        add: function(changes) {
            var dataChanges = _.clone(chart.get('metadata.data.data-changes', [])); //clone is needed, otherwise chart.set does not detect this as change
            changes.forEach(function(change) {
                dataChanges.push({row: change[0] - 1, column: getSeriesOfIndex(change[1]), value: change[3]});
            });
            chart.set('metadata.data.data-changes', dataChanges);
        },
        revert: function() {
            chart.set('metadata.data.data-changes', []);
        }
    }

    var chart = dw.backend.currentChart,
        dataset;

    chart.onChange(reload);

    chart.sync('#describe-source-name', 'metadata.describe.source-name');
    chart.sync('#describe-source-url', 'metadata.describe.source-url');
    chart.sync('input:radio[name=transpose]', 'metadata.data.transpose');

    chart.sync('#has-headers', 'metadata.data.horizontal-header');

    // swap between currency and unit
    function swapUnitAndCurrency() {
        if ($('#number-format').val()[0] == 'c') {
            $('#number-currency').show();
            $('#number-unit').hide();
        } else {
            $('#number-currency').hide();
            $('#number-unit').show();
        }
       //$('#number-currency, #number-unit, #number-divisor').attr('disabled', $('#number-format').val() == '-');
    }
    $('#number-format').change(swapUnitAndCurrency);
    swapUnitAndCurrency();

    // update currency in number-format select
    function updateCurrencyInNumberFormat() {
        var curOpt = $('#number-format option[value=c], #number-format option[value=c0]');
        Globalize.culture("{{ chartLocale }}").numberFormat.currency.symbol = $('#number-currency option:selected').data('symbol');
        curOpt.each(function(i, el) {
            el = $(el);
            el.html(Globalize.format(1234.567, el.val()));
        });
    }
    updateCurrencyInNumberFormat();
    $('#number-currency').change(updateCurrencyInNumberFormat);

    // update data table after format changes
    $('.number-format').change(function() {
        updateTable(dataset, chart);
    });

    var ignoreSeries;

    function updateTable() {

        function isNone(val) {
            return val === null || val === undefined || (_.isNumber(val) && isNaN(val));
        }

        var data = [];

        var horzHeaders = chart.get('metadata.data.horizontal-header'),
            transpose = chart.get('metadata.data.transpose');

        dataset.ignoreIgnores = true;

        var tr = [];
        dataset.eachColumn(function(column) {
            tr.push(column.title());
        });
        data.push(tr);

        var DIV = document.createElement('DIV');
        function stripHtmlTags(val) {
            DIV.innerHTML = val;
            return DIV.textContent;
        }

        dataset.eachRow(function(row) {
            var tr = [];
            dataset.eachColumn(function(column, i) {
                var val = column.raw(row);
                val = column.type() == 'number' ? chart.formatValue(val, true) :
                        column.type() == 'date' ? dw.utils.longDateFormat(column)(val) :
                        val;
                tr.push((!isNone(column.raw(row)) ? stripHtmlTags(val) : ''));
            });
            data.push(tr);
        });

        ignoreSeries = _.clone(chart.get('metadata.data.ignore-columns', {}));

        function myRenderer(instance, td, row, col, prop, value, cellProperties) {
            if (row > 0) {
                var column = dataset.column(col);
                var formatter = chart.columnFormatter(column);
                value = formatter(column.val(row - 1), true);
            }
            Handsontable.TextCell.renderer.apply(this, arguments);
            if (parseInt(value, 10) < 0) { //if row contains negative number
                td.classList.add('negative');
            }
            if (row === 0) {
                td.classList.add('firstRow');
            } else {
                if (dataset.column(col).type() == 'text') {
                    td.classList.add('textType');
                } else if (dataset.column(col).type() == 'date') {
                    td.classList.add('dateType');
                } else { // number
                    td.classList.add('numberType');
                }
                td.classList.add(row % 2 ? 'oddRow' : 'evenRow');
            }

            if (ignoreSeries[data[0][col]]) {
                td.classList.add('ignored');
            }

            if(selectedColumns.indexOf(col) > -1) {
                td.classList.add('area'); //add blue area background if this cell is in selected column
            }
        }

        if($("#data-preview").handsontable('getInstance')) {
            $("#data-preview").handsontable('loadData', data);
            $("#data-preview").handsontable('render');
        }
        else {
            $("#data-preview").handsontable({
                data: data,
                allowHtml: true,
                startRows: 6,
                startCols: 8,
                width: $("#data-preview").width(),
                height: 400,
                fixedRowsTop: horzHeaders ? 1: 0,
                rowHeaders: true,
                colHeaders: true,
                fillHandle: false,
                stretchH: 'all',
                cells: function (row, col, prop) {
                    return {
                        renderer: myRenderer
                    };
                },
                afterRender: function() {
                    renderSelectedTh(); //if HOT was scrolled horizontally, we need to rerender th.selected
                },
                afterChange: function(changes, source) {
                    if (source !== 'loadData') {
                        datachanges.add(changes);
                    }
                }
            });

            $('#data-preview table').addClass('table table-bordered');
        }

        if(datachanges.exist()) {
            $('#reset-data-changes').removeClass('disabled');
        }
        else {
            $('#reset-data-changes').addClass('disabled');
        }
    }

    $('#reset-data-changes').click(function(){
        datachanges.revert();
    });

    // add event handler for ignoring data series
    var start;
    var $dataPreview = $("#data-preview");

    function hasCorner() {
        return !!$('#data-preview tbody th').length;
    }

    function getIndexOfTh(th) {
        var col = $dataPreview.handsontable('getInstance').view.wt.wtTable.getCoords(th)[1];
        return col;
    }

    function getThOfIndex(index) {
        var offsetCol = $dataPreview.handsontable('getInstance').view.wt.getSetting('offsetColumn');
        var thIndex = index + 1 * hasCorner() - offsetCol;
        return document.querySelectorAll('#data-preview thead th')[thIndex];
    }

    function getSeriesOfIndex(index) {
        return dataset.column(index).name();
    }

    $('body').on('mousedown', function () {
        if(selectedColumns.length) {
            deselectColumns();
            $dataPreview.handsontable('render'); //refresh all cells and column headers
            showColumnSettings();
        }
    });

    $('body').on('mouseup', function () {
        start = void 0;
    });

    $dataPreview.on('mousedown', 'th:has(.colHeader)', function () {
        start = getIndexOfTh(this);
        selectColumns(start);
        event.stopPropagation();
        $dataPreview.handsontable('deselectCell');
    });

    var last;
    $dataPreview.on('mouseenter', 'th:has(.colHeader)', function () {
        if(last === this) {
            return;
        }
        if(start !== void 0) {
            var current = getIndexOfTh(this);
            selectColumns(start, current);
        }
        last = this;
    });

    var selectedColumns = [];

    function deselectColumns() {
        selectedColumns.length = 0;
    }

    function selectColumns(from, to) {
        deselectColumns();
        if(to === void 0) {
            selectedColumns.push(from);
        }
        else {
            var min = Math.min(from, to);
            var max = Math.max(from, to);
            while(min <= max) {
                selectedColumns.push(min);
                min++;
            }
        }
        $dataPreview.handsontable('render');
        showColumnSettings();
    }

    function renderSelectedTh() {
        $("#data-preview thead th.selected").removeClass('selected');
        selectedColumns.forEach(function(i){
            getThOfIndex(i).classList.add('selected');
        });
    }

    function selectedSeries() {
        var out = [];
        selectedColumns.forEach(function(i){
            out.push(getSeriesOfIndex(i));
        });
        return out;
    }

    function allEqual(formats, series, property) {
        if (series.length > 1) {
            for (var i = 1; i < series.length; i++) {
                var a = formats[series[i]] && formats[series[i]][property];
                var b = formats[series[i - 1]] && formats[series[i - 1]][property];
                if (a !== b) {
                    return false;
                }
            }
        }
        return true;
    }

    function fillInField(selector, property) {
        var series = selectedSeries();
        var formats = chart.get('metadata.describe.column-format', {});
        var $input = $(selector);
        if(allEqual(formats, series, property)) {
            var val = formats[series[0]] && formats[series[0]][property];
            $input.val(val).removeClass('unresolved');
        }
        else {
            $input.val('').addClass('unresolved');
            $input.change(function() {
                fillInField(selector, property);
            });
        }
    }

    function showColumnSettings() {
        if(selectedColumns.length) {
            var serie = getSeriesOfIndex(selectedColumns[0]);
            var ignoreSeries = chart.get('metadata.data.ignore-columns', {});
            $('#column-options-hide')[0].checked = ignoreSeries[serie];

            if(dataset.column(serie).type() == 'number') {
                fillInField('#number-format', 'number-format');
                fillInField('#number-divisor', 'number-divisor');
                fillInField('#number-append', 'number-append');
                fillInField('#number-prepend', 'number-prepend');
                $('#number-column-options').show();
            }
            else {
                $('#number-column-options').hide();
            }

            $('#table-options').hide();
            $('#column-options').show();
        }
        else {
            $('#column-options').hide();
            $('#table-options').show();
        }
    }

    $('.sidebar').mousedown(function(event){
        event.stopPropagation(); //stop sidebar event propagation so clicking in #column-options won't deselect column selection
    });

    $('#column-options-hide').change(function(){
        var checked = this.checked;
        var ignoreSeries = _.clone(chart.get('metadata.data.ignore-columns', {}));
        selectedColumns.forEach(function(i){
            ignoreSeries[getSeriesOfIndex(i)] = checked;
        });
        chart.set('metadata.data.ignore-columns', ignoreSeries);
    });

    function syncColumnFormat(selector, property) {
        $(selector).change(function(){
            var value = this.value;
            var columnFormats = $.extend(true, {}, chart.get('metadata.describe.column-format', {})); //deep clone (_.clone is insufficient because it does a shallow clone)
            selectedColumns.forEach(function(i) {
                var series = getSeriesOfIndex(i);
                if (!columnFormats[series]) {
                    columnFormats[series] = {};
                }
                columnFormats[series][property] = value;
            });
            chart.set('metadata.describe.column-format', columnFormats);
        });
    }

    syncColumnFormat('#number-format', 'number-format');
    syncColumnFormat('#number-divisor', 'number-divisor');
    syncColumnFormat('#number-append', 'number-append');
    syncColumnFormat('#number-prepend', 'number-prepend');

    function reload(f) {
        console.log('chart reloaded');
        chart.load().done(function() {
            if (_.isUndefined(f)) {
                console.log('synchronizing header settings', $('#has-headers'));

            }
            dataset = chart.dataset();
            updateTable();
        });
    }

    $('#describe-source-url').blur(function() {
        var v = $(this).val();
        if (v.substr(0,2) != '//' && v.substr(0,7) != 'http://' &&  v.substr(0,8) != 'https://') {
            $(this).val('//'+v);
            chart.set('metadata.describe.source-url', $(this).val());
        }
    });

    reload();

    $('#describe-proceed').click(function() {
        chart.save();
    });

});

</script>

<div class="dw-create-describe chart-editor">

    <div class="row">

        <div class="span8">

            <h2>{% trans "Check and Describe Your Data" %}</h2>

            <p>
                {% trans "Please check if the data format was recognized correctly." %}
                {% trans "You can hide columns by clicking the table header." %}
            </p>

            <form class="form-inline">
                <div id="csv-parse-options" class="row">
                    <div class="span4">
                    </div>
                    <div class="span4">

                    </div>
                </div>
            </form>

            <div id="data-preview"></div>
        </div>

        <div class="span4">
            <div class="well sidebar">

                <div id="table-options">

                    <h3>{% trans "Describe your data" %}</h3>

                    <div style="margin-bottom:15px;">

                        <div class="half">
                            <p>
                                <label class="radio"><input type="radio" name="transpose" value="yes" /> {% trans "Data series in rows" %}</label>
                                <label class="radio"><input type="radio" name="transpose" value="no" /> {% trans "Data series in columns" %}</label>
                            </p>

                        </div><div class="half">
                            <p>
                                <label class="checkbox"><input id="has-headers" type="checkbox" checked="checked"> {% trans "First row as label" %}</label>
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <h3>{% trans "Credit the source" %}</h3>

                    <p>
                        <label>{% trans "Who published the data in the first place?" %}</label>
                        <input id="describe-source-name" type="text" placeholder="name of the organisation">
                    </p>

                    <p>
                        <label>{% trans "If possible, please provide a link the source data" %}</label>
                        <input id="describe-source-url" type="text" placeholder="http://">
                    </p>

                    <!--<h3>{% trans "Annotate data" %}</h3>
                    <p>{% trans "To make the data more useful for your readers you can add details to individual data points or an entire series. This information will be displayed in the visualisations." %} <a href="#">{% trans "Learn more" %}</a></p>
                    <button class="btn"><i class="icon-th-list"></i> {% trans "Annotate series" %}</button> <button class="btn"><i class="icon-th"></i> {% trans "Annotate data point" %}</button>
                    -->
                </div>

                <div id="column-options">
                    <h3>{% trans "Column options" %}</h3>

                    {#<div class="form-horizontal compact">
                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Column type" %}</label>

                            <div class="controls">
                                <select id="column-options-type" class="select" style="width:90%">
                                    {% for id, type in columntypes %}
                                        <option value="{{ id }}">{{ type }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>#}

                    <div id="number-column-options" class="form-horizontal compact">
                        <h3>{% trans "Output number format" %}</h3>

                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Decimals after point" %}</label>

                            <div class="controls">
                                <select id="number-format" class="select number-format" style="width:90%">
                                    <option value="-">{% trans "keep original" %}</option>
                                    {% for id, format in numberformats %}
                                        <option value="{{ id }}">{{ format }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Prepend/Append" %}</label>

                            <div class="controls">
                                <input type="text" id="number-prepend" style="width:2em;text-align:right"/> # <input type="text" id="number-append" style="width:5em"/>
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label" for="text-title">{% trans "Divide numbers by" %}</label>

                            <div class="controls">
                                <select class="number-format" id="number-divisor" style="width:90%">
                                    <option value="0">-</option>
                                    <option value="3">{% trans "1000" %}</option>
                                    <option value="6">{% trans "1 million" %}</option>
                                    <option value="9">{% trans "1 billion" %}</option>
                                    <optgroup label="─────────────"></optgroup>
                                    <option value="-2">{% trans "One Percent" %}</option>

                                </select>
                            </div>
                        </div>

                    </div>

                    <div style="margin-bottom:15px;">
                        <h3>{% trans "Hide column" %}</h3>

                        <p>
                            <label class="checkbox"><input id="column-options-hide" type="checkbox"> {% trans "Hide column from visualization" %}</label>
                        </p>
                    </div>

                    <div class="clearfix"></div>
                </div>

                <a href="visualize" class="submit pull-right btn btn-primary" id="describe-proceed">{% trans "Visualize" %} <i class="icon-chevron-right icon-white"></i></a>
                <a class="btn submit" href="upload"><i class="icon-chevron-left"></i> {% trans "Back" %}</a>
                <button class="btn disabled" id="reset-data-changes" title="{% trans "Revert data changes" %}">{% trans "Revert" %}</button>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">


        </div>
    </div>
</div>


{% endblock %}
{'fraction_non_alphanumeric': 0.15395217421266624, 'fraction_numerical': 0.005949509567454575, 'mean_word_length': 1.6575911116537452, 'pattern_counts': {'":': 0, '<': 351, '<?xml version=': 0, '>': 351, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4528220', 'n_tokens_mistral': 12074, 'n_tokens_neox': 11358, 'n_words': 2372}