<commit_before><template>
    <div>
        <div class="card-header">
            <h2>Compared campaigns<small></small></h2>
        </div>
        <div class="card-body card-padding">

            <div class="row m-t-20 m-b-20">
                <div class="col-md-4">
                    <v-select
                            v-model="campaignToAdd"
                            :options.sync="campaignsNotCompared"
                            option-value="id"
                            option-text="name"
                            placeholder="Select campaign"
                            title="Select campaign">
                    </v-select>
                </div>
                <div class="col-md-8 pull-left">
                    <button @click="add" class="btn palette-Cyan bg waves-effect m-r-5">Add to comparison</button>
                    <button @click="addAll" class="btn palette-Cyan bg waves-effect m-r-5">Add all campaigns</button>
                    <button @click="removeAll" class="btn palette-Red bg waves-effect">Remove all</button>
                </div>
            </div>

            <div style="position: relative" class="table-responsive">
                <loader :is-centered="false" :yes="loading"></loader>

                <table v-if="!noCampaigns" class="table table-striped">
                    <thead>
                        <tr>
                            <th @click="sort('name')" :class="sortingClass('name')">Campaign</th>
                            <th @click="sort('clicks')" :class="sortingClass('clicks')">Clicks</th>
                            <th @click="sort('ctr')" :class="sortingClass('ctr')">Click-through rate (CTR)</th>
                            <th @click="sort('conversions')" :class="sortingClass('conversions')">Conversions</th>
                            <th @click="sort('startedPayments')" :class="sortingClass('startedPayments')">Started payments</th>
                            <th @click="sort('finishedFayments')" :class="sortingClass('finishedFayments')">Finished payments</th>
                            <th @click="sort('earned')" :class="sortingClass('earned')">Earned</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="campaign in campaigns" :key="campaign.id">
                            <td>
                                {{ campaign.name }}
                            </td>
                            <td>
                                {{ campaign.stats.click_count.count }}
                            </td>
                            <td>
                                <strong>
                                    {{ campaign.stats.ctr | round(2) }}%
                                </strong>
                            </td>
                            <td>
                                <strong>
                                    {{ campaign.stats.conversions | round(4) }}%
                                </strong>
                            </td>
                            <td>
                                {{ campaign.stats.payment_count.count }}
                            </td>
                            <td>
                                {{ campaign.stats.purchase_count.count }}
                            </td>
                            <td>
                                {{ campaign.stats.purchase_sum.sum | round(2) }}€
                            </td>
                            <th>
                                <span class="actions">
                                    <button class="btn btn-sm palette-Cyan bg waves-effect"
                                            @click="remove(campaign.id)"
                                            title="Remove campaign">
                                        <i class="zmdi zmdi-palette-Cyan zmdi-close"></i>
                                    </button>
                                </span>
                            </th>
                        </tr>
                    </tbody>
                </table>

                <p v-if="noCampaigns" style="text-align: center">No campaigns selected</p>
            </div>
        </div>
    </div>
</template>

<style type="text/css">
</style>



<script>
    import axios from 'axios'
    import Loader from 'remp/js/components/Loader'
    import vSelect from 'remp/js/components/vSelect.vue'

    export default {
        components: {
            vSelect, Loader, ModelListSelect
        },
        name: 'campaign-comparison',
        props: {},
        data: () => ({
            campaigns: [],
            campaignsNotCompared: [],
            campaignToAdd: null,
            loading: false,
            error: null,
            sorting: {
                by: null,
                asc: true
            }
        }),
        mounted() {
            this.loadData()
        },
        computed: {
            noCampaigns() {
                return this.campaigns && this.campaigns.length === 0<commit_msg>Fixed missing component<commit_after><template>
    <div>
        <div class="card-header">
            <h2>Compared campaigns<small></small></h2>
        </div>
        <div class="card-body card-padding">

            <div class="row m-t-20 m-b-20">
                <div class="col-md-4">
                    <v-select
                            v-model="campaignToAdd"
                            :options.sync="campaignsNotCompared"
                            option-value="id"
                            option-text="name"
                            placeholder="Select campaign"
                            title="Select campaign">
                    </v-select>
                </div>
                <div class="col-md-8 pull-left">
                    <button @click="add" class="btn palette-Cyan bg waves-effect m-r-5">Add to comparison</button>
                    <button @click="addAll" class="btn palette-Cyan bg waves-effect m-r-5">Add all campaigns</button>
                    <button @click="removeAll" class="btn palette-Red bg waves-effect">Remove all</button>
                </div>
            </div>

            <div style="position: relative" class="table-responsive">
                <loader :is-centered="false" :yes="loading"></loader>

                <table v-if="!noCampaigns" class="table table-striped">
                    <thead>
                        <tr>
                            <th @click="sort('name')" :class="sortingClass('name')">Campaign</th>
                            <th @click="sort('clicks')" :class="sortingClass('clicks')">Clicks</th>
                            <th @click="sort('ctr')" :class="sortingClass('ctr')">Click-through rate (CTR)</th>
                            <th @click="sort('conversions')" :class="sortingClass('conversions')">Conversions</th>
                            <th @click="sort('startedPayments')" :class="sortingClass('startedPayments')">Started payments</th>
                            <th @click="sort('finishedFayments')" :class="sortingClass('finishedFayments')">Finished payments</th>
                            <th @click="sort('earned')" :class="sortingClass('earned')">Earned</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="campaign in campaigns" :key="campaign.id">
                            <td>
                                {{ campaign.name }}
                            </td>
                            <td>
                                {{ campaign.stats.click_count.count }}
                            </td>
                            <td>
                                <strong>
                                    {{ campaign.stats.ctr | round(2) }}%
                                </strong>
                            </td>
                            <td>
                                <strong>
                                    {{ campaign.stats.conversions | round(4) }}%
                                </strong>
                            </td>
                            <td>
                                {{ campaign.stats.payment_count.count }}
                            </td>
                            <td>
                                {{ campaign.stats.purchase_count.count }}
                            </td>
                            <td>
                                {{ campaign.stats.purchase_sum.sum | round(2) }}€
                            </td>
                            <th>
                                <span class="actions">
                                    <button class="btn btn-sm palette-Cyan bg waves-effect"
                                            @click="remove(campaign.id)"
                                            title="Remove campaign">
                                        <i class="zmdi zmdi-palette-Cyan zmdi-close"></i>
                                    </button>
                                </span>
                            </th>
                        </tr>
                    </tbody>
                </table>

                <p v-if="noCampaigns" style="text-align: center">No campaigns selected</p>
            </div>
        </div>
    </div>
</template>

<style type="text/css">
</style>



<script>
    import axios from 'axios'
    import Loader from 'remp/js/components/Loader'
    import vSelect from 'remp/js/components/vSelect.vue'

    export default {
        components: {
            vSelect, Loader
        },
        name: 'campaign-comparison',
        props: {},
        data: () => ({
            campaigns: [],
            campaignsNotCompared: [],
            campaignToAdd: null,
            loading: false,
            error: null,
            sorting: {
                by: null,
                asc: true
            }
        }),
        mounted() {
            this.loadData()
        },
        computed: {
            noCampaigns() {
                return this.campaigns && this.campaigns.length === 0
{'fraction_non_alphanumeric': 0.12380388675150439, 'fraction_numerical': 0.002762158429515636, 'mean_word_length': 0.9526194144838213, 'pattern_counts': {'":': 0, '<': 177, '<?xml version=': 0, '>': 179, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 30, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7149365', 'n_tokens_mistral': 2513, 'n_tokens_neox': 2386, 'n_words': 424}