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

{% block content %}

{{ parent() }}

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

    <script type="text/javascript">

        $(function() {

            function init() {
                
            }

            function nextPage(url) {
                location.href = url;
            }

            function uploadData(url) {
                DW.currentChart.set('metadata.data.source', 'clipboard');
                $.ajax({
                    url: '/api/charts/' + DW.currentChart.get('id') + '/data',
                    type: 'PUT',
                    data: $('#upload-data-text').val(),
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.status == "ok") {
                            // data is saved correctly, so proceed
                            nextPage(url);
                        } else {
                            alert(result.message);
                        }
                    }
                });
                return false;
            }

            $('#upload-data').click(function() {
                uploadData('describe');
            });

            var txtarea = $('#upload-data-text');


            new qq.FileUploader({
                element: $('#upload')[0],
                action: '/api/charts/' + DW.currentChart.get('id') + '/data',
                allowedExtensions: ['txt', 'csv', 'tsv'],
                template: '<div class="upload-drop">{% trans "drop your csv file here" %}</div><div class="btn upload-button" id="pick-file-from-disk"><span><i class="icon-upload"></i> {% trans "..or upload a CSV file" %}</span></div><ul class="qq-upload-list" style="display:none"></ul>',
                classes: {
                    button: 'upload-button',
                    drop: 'upload-drop',
                    dropActive: 'upload-drop-active',
                    list: 'qq-upload-list',
                    file: 'qq-upload-file',
                    spinner: 'qq-upload-spinner',
                    size: 'qq-upload-size',
                    cancel: 'qq-upload-cancel'
                },
                multiple: false,
                onComplete: function(code, filename, res) {
                    if (res.status == "ok") nextPage('describe');
                    else {
                        DW.logError(res.message, txtarea.parent().parent());
                    }
                }
            });

            txtarea.data('orig-val', txtarea.val());

            $('.upload-drop').css({
                position: 'absolute',
                top: txtarea.offset().top - $('.navbar').height(),
                left: txtarea.offset().left+2,
                width: txtarea.width()+2,
                height: txtarea.height()+2,
                'line-height': txtarea.height()+'px'
            });

            $('.submit').click(function(e) {
                if (txtarea.val() != txtarea.data('orig-val')) {
                    e.preventDefault();
                    var a = $(e.target);
                    if (e.target.nodeName.toLowerCase() != "a") a = a.parents('a');
                    uploadData(a.attr('href'));
                }
            });

        });
    </script>

    <div class="row">
        <div class="span7">
            <h2 style="margin-bottom:10px">{% trans "Upload Your Data" %}</h2>

             <form class="well upload-form">
                <textarea id="upload-data-text" style="resize:none" placeholder="{% trans "Copy &amp; paste your data here" %}">{{ chartData }}</textarea>

                <div id="upload-data" class="btn btn-primary pull-right">{% trans "Upload and continue" %} <i class="icon-chevron-right icon-white"></i></div>

                <div id="upload"></div>

            </form>


        </div>

        <div class="span5">
            <h3>{% trans "How it works.." %}</h3>
            <p>{% trans "We made getting data into Datawrapper as easy as possible. If you're working in Excel or OpenOffice, just select your data (including header row/column) and paste it in the following text field." %} <a href="/popups/uploading-data?popup=1" data-toggle="modal">{% trans "Learn more about how to upload your data" %}</a>.</p>

            <div class="demo-datasets">
                <h4>{% trans "Sample Data" %}</h4>
                <p>{% trans "If you simply want to play around with Datawrapper, here's a list of some example datasets:" %}</p>
                <ul id="demo-datasets" class="">
                    {% for dataset in datasets %}
                    <li>{{ dataset.type }}: <a href="#{{ dataset.id }}" class="demo-dataset" data-data="{{ dataset.data }}" data-presets='{{ dataset.presets | json | raw }}'>{{ dataset.title }}</a></li>
                    {% endfor %}
                </ul>
                <script type="text/javascript">

                $(function() {

                    $('.demo-dataset').click(function(evt) {
                        evt.preventDefault();
                        var a = $(evt.target);
                        $('#upload-data-text').val(a.data('data'));
                        if (a.data('presets')) {
                            $.each(a.data('presets'), function(key, val) {
                                DW.currentChart.set(key, val);
                            });
                        }
                    });
                });

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

        <div class="span4 inactive">

        </div>
        {# maybe we add this feature in 1.1
        <div class="span4">
            <h3>{% trans "Remote Data Source" %}</h3>
            <p>{% trans "If your data is stored on a datahub like CKAN, ScraperWiki or Google Docs, you can create visualisations directly. Your charts can be updated automatically as the data source changes." %} <a href="#">{% trans "learn more" %}</a></p>
<commit_msg>Data preset: escaping for html<commit_after>{% extends "chart-editor.twig" %}

{% block content %}

{{ parent() }}

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

    <script type="text/javascript">

        $(function() {

            function init() {
                
            }

            function nextPage(url) {
                location.href = url;
            }

            function uploadData(url) {
                DW.currentChart.set('metadata.data.source', 'clipboard');
                $.ajax({
                    url: '/api/charts/' + DW.currentChart.get('id') + '/data',
                    type: 'PUT',
                    data: $('#upload-data-text').val(),
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.status == "ok") {
                            // data is saved correctly, so proceed
                            nextPage(url);
                        } else {
                            alert(result.message);
                        }
                    }
                });
                return false;
            }

            $('#upload-data').click(function() {
                uploadData('describe');
            });

            var txtarea = $('#upload-data-text');


            new qq.FileUploader({
                element: $('#upload')[0],
                action: '/api/charts/' + DW.currentChart.get('id') + '/data',
                allowedExtensions: ['txt', 'csv', 'tsv'],
                template: '<div class="upload-drop">{% trans "drop your csv file here" %}</div><div class="btn upload-button" id="pick-file-from-disk"><span><i class="icon-upload"></i> {% trans "..or upload a CSV file" %}</span></div><ul class="qq-upload-list" style="display:none"></ul>',
                classes: {
                    button: 'upload-button',
                    drop: 'upload-drop',
                    dropActive: 'upload-drop-active',
                    list: 'qq-upload-list',
                    file: 'qq-upload-file',
                    spinner: 'qq-upload-spinner',
                    size: 'qq-upload-size',
                    cancel: 'qq-upload-cancel'
                },
                multiple: false,
                onComplete: function(code, filename, res) {
                    if (res.status == "ok") nextPage('describe');
                    else {
                        DW.logError(res.message, txtarea.parent().parent());
                    }
                }
            });

            txtarea.data('orig-val', txtarea.val());

            $('.upload-drop').css({
                position: 'absolute',
                top: txtarea.offset().top - $('.navbar').height(),
                left: txtarea.offset().left+2,
                width: txtarea.width()+2,
                height: txtarea.height()+2,
                'line-height': txtarea.height()+'px'
            });

            $('.submit').click(function(e) {
                if (txtarea.val() != txtarea.data('orig-val')) {
                    e.preventDefault();
                    var a = $(e.target);
                    if (e.target.nodeName.toLowerCase() != "a") a = a.parents('a');
                    uploadData(a.attr('href'));
                }
            });

        });
    </script>

    <div class="row">
        <div class="span7">
            <h2 style="margin-bottom:10px">{% trans "Upload Your Data" %}</h2>

             <form class="well upload-form">
                <textarea id="upload-data-text" style="resize:none" placeholder="{% trans "Copy &amp; paste your data here" %}">{{ chartData }}</textarea>

                <div id="upload-data" class="btn btn-primary pull-right">{% trans "Upload and continue" %} <i class="icon-chevron-right icon-white"></i></div>

                <div id="upload"></div>

            </form>


        </div>

        <div class="span5">
            <h3>{% trans "How it works.." %}</h3>
            <p>{% trans "We made getting data into Datawrapper as easy as possible. If you're working in Excel or OpenOffice, just select your data (including header row/column) and paste it in the following text field." %} <a href="/popups/uploading-data?popup=1" data-toggle="modal">{% trans "Learn more about how to upload your data" %}</a>.</p>

            <div class="demo-datasets">
                <h4>{% trans "Sample Data" %}</h4>
                <p>{% trans "If you simply want to play around with Datawrapper, here's a list of some example datasets:" %}</p>
                <ul id="demo-datasets" class="">
                    {% for dataset in datasets %}
                    <li>{{ dataset.type }}: <a href="#{{ dataset.id }}" class="demo-dataset" data-data="{{ dataset.data | escape('html') }}" data-presets='{{ dataset.presets | json | escape('html') }}'>{{ dataset.title }}</a></li>
                    {% endfor %}
                </ul>
                <script type="text/javascript">

                $(function() {

                    $('.demo-dataset').click(function(evt) {
                        evt.preventDefault();
                        var a = $(evt.target);
                        $('#upload-data-text').val(a.data('data'));
                        if (a.data('presets')) {
                            $.each(a.data('presets'), function(key, val) {
                                DW.currentChart.set(key, val);
                            });
                        }
                    });
                });

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

        <div class="span4 inactive">

        </div>
        {# maybe we add this feature in 1.1
        <div class="span4">
            <h3>{% trans "Remote Data Source" %}</h3>
            <p>{% trans "If your data is stored on a datahub like CKAN, ScraperWiki or Google Docs, you can create visualisations directly. Your charts can be updated automatically as the data source changes." %} <a href="#">{% trans "learn more" %}</a></p>

{'fraction_non_alphanumeric': 0.15712029262615346, 'fraction_numerical': 0.003491562058358966, 'mean_word_length': 1.374185908821788, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, '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': '4010920', 'n_tokens_mistral': 3300, 'n_tokens_neox': 3024, 'n_words': 755}