<commit_before><template>
    <div>
        <Drawer />

        <main>
            <header class="main-header">
                <div class="main-title">
                    <h1>Hosting report</h1>
                </div>
            </header>
            <section class="tile">
                <header>
                    <h2>Where are the nodes at?</h2>
                </header>
                <div>
                    <SortedTable
                        :values="values"
                        dir="desc"
                        sort="count"
                    >
                        <thead>
                            <tr>
                                <th class="center">
                                    <SortLink name="countryName">Country</SortLink>
                                </th>
                                <th>
                                    <SortLink name="count">Nodes</SortLink>
                                </th>
                                <th>
                                    <SortLink name="total">Total users</SortLink>
                                </th>
                                <th>
                                    <SortLink name="actives">Active users</SortLink>
                                </th>
                            </tr>
                        </thead>
                        <tbody slot="body" slot-scope="sort">
                            <tr
                                v-for="value in sort.values"
                                :key="value.name"
                            >
                                <td>
                                    {{ value.countryName }} {{ value.countryFlag }}
                                </td>
                                <td>
                                    {{ value.count }}
                                </td>
                                <td>
                                    {{ value.total }}
                                </td>
                                <td>
                                    {{ value.actives }}
                                </td>
                            </tr>
                        </tbody>
                    </SortedTable>
                    <ApolloLoader :loading="$apollo.loading" />
                </div>
            </section>
        </main>
    </div>
</template>

<script>
import gql from "graphql-tag"

import ApolloLoader from "./common/ApolloLoader"
import Drawer from "./common/Drawer"
import Footer from "./common/Footer"

const query = gql`
    query {
        countryStats {
            actives
            total
            count
            countryFlag
            countryName
        }
    }
`

export default {
    apollo: {
        allQueries: {
            query,
            result({data}) {
                this.values = data.countryStats
            },
            manual: true,
        },
    },
    name: "HostingReportPage",
    components: {ApolloLoader, Drawer, Footer},

    data: () => {
        return {
            values: [],
        }
    },
}
</script>

<style scoped>
    .center {
        text-align: center;
    }
</style><commit_msg>Fixes linting errors.<commit_after><template>
    <div>
        <Drawer />

        <main>
            <header class="main-header">
                <div class="main-title">
                    <h1>Hosting report</h1>
                </div>
            </header>
            <section class="tile">
                <header>
                    <h2>Where are the nodes at?</h2>
                </header>
                <div>
                    <SortedTable
                        :values="values"
                        dir="desc"
                        sort="count"
                    >
                        <thead>
                            <tr>
                                <th class="center">
                                    <SortLink name="countryName">Country</SortLink>
                                </th>
                                <th>
                                    <SortLink name="count">Nodes</SortLink>
                                </th>
                                <th>
                                    <SortLink name="total">Total users</SortLink>
                                </th>
                                <th>
                                    <SortLink name="actives">Active users</SortLink>
                                </th>
                            </tr>
                        </thead>
                        <tbody
                            slot="body"
                            slot-scope="sort"
                        >
                            <tr
                                v-for="value in sort.values"
                                :key="value.name"
                            >
                                <td>
                                    {{ value.countryName }} {{ value.countryFlag }}
                                </td>
                                <td>
                                    {{ value.count }}
                                </td>
                                <td>
                                    {{ value.total }}
                                </td>
                                <td>
                                    {{ value.actives }}
                                </td>
                            </tr>
                        </tbody>
                    </SortedTable>
                    <ApolloLoader :loading="$apollo.loading" />
                </div>
            </section>
        </main>
    </div>
</template>

<script>
import gql from "graphql-tag"

import ApolloLoader from "./common/ApolloLoader"
import Drawer from "./common/Drawer"
import Footer from "./common/Footer"

const query = gql`
    query {
        countryStats {
            actives
            total
            count
            countryFlag
            countryName
        }
    }
`

export default {
    apollo: {
        allQueries: {
            query,
            result({data}) {
                this.values = data.countryStats
            },
            manual: true,
        },
    },
    name: "HostingReportPage",
    components: {ApolloLoader, Drawer, Footer},

    data: () => ({values: []}),
}
</script>

<style scoped>
    .center {
        text-align: center;
    }
</style>
{'fraction_non_alphanumeric': 0.09895426876853441, 'fraction_numerical': 0.0012486343062275637, 'mean_word_length': 0.6363636363636364, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 125, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6184803', 'n_tokens_mistral': 1500, 'n_tokens_neox': 1386, 'n_words': 266}