<commit_before><server-chart>

    <section class="panel">
        <p class="panel-heading">
            Application Servers
        </p>
        <div class="panel-block" style="display: flex; flex-direction: column;">
            <div class="ct-chart ct-perfect-fifth">
            </div>
    </section>

    <style>
        .panel-heading {
            background-color: #E5E4E2;
            border-color: grey;
            border-radius: 5px 5px 0px 0px;
        }

        .panel-block {
            background-color: whitesmoke;
            border-color: grey;
            border-radius: 0px 0px 5px 5px;
        }

        .ct-series-a .ct-bar {
            stroke: lightseagreen;
            stroke-width: 60px;
        }

        .ct-series-b .ct-bar {
            stroke: crimson;
            stroke-width: 60px;
        }

        .ct-series-c .ct-bar {
            stroke: gold;
            stroke-width: 60px;
        }

        .ct-series-d .ct-bar {
            stroke: royalblue;
            stroke-width: 60px;
        }

        .ct-series-e .ct-bar {
            stroke: lightsalmon;
            stroke-width: 60px;
        }
    </style>

    <script>
        this.mixin(ObservableMixin)
        var self = this
        var serverChart = null

        this.on("mount", function () {
            var script = document.createElement("script");
            script.onload = function () {
                var link = document.createElement("link")
                link.rel = "stylesheet"
                link.onload = function () {
                    console.log("Everything loaded.")
                }
                link.href = "https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css"
                document.head.appendChild(link)
            }
            script.src = "https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"
            document.body.appendChild(script)
        })

        this.observable.on(UPDATE_APPSERVERS_CHART, function (opts) {
            if (self.serverChart == null) {
                // create a new Chart and configure it
                self.serverChart = new Chartist.Bar('.ct-chart', opts.data,
                    {
                        seriesBarDistance: 119,
                        axisX: {
                            showGrid: false,
                            offset: 20
                        },
                        axisY: {
                            scaleMinSpace: 50
                        }
                    }
                );
            }
            else self.serverChart.update(opts.data)
        })<commit_msg>first shot at media queries to make chart responsive<commit_after><server-chart>

    <section class="panel">
        <p class="panel-heading">
            Application Servers
        </p>
        <div class="panel-block" style="display: flex; flex-direction: column;">
            <div class="ct-chart ct-perfect-fifth">
            </div>
    </section>

    <style>
        .panel-heading {
            background-color: #E5E4E2;
            border-color: grey;
            border-radius: 5px 5px 0px 0px;
        }

        .panel-block {
            background-color: whitesmoke;
            border-color: grey;
            border-radius: 0px 0px 5px 5px;
        }

        @media screen and (max-width: 1400px) {
            .ct-bar {
                stroke-width: 20px;
            }
        }
        @media screen and (min-width: 1401px) {
            .ct-bar {
                stroke-width: 60px;
            }
        }

        .ct-series-a .ct-bar {
            stroke: lightseagreen;
        }
        .ct-series-b .ct-bar {
            stroke: crimson;
        }
        .ct-series-c .ct-bar {
            stroke: gold;
        }
        .ct-series-d .ct-bar {
            stroke: royalblue;
        }
        .ct-series-e .ct-bar {
            stroke: lightsalmon;
        }
    </style>

    <script>
        this.mixin(ObservableMixin)
        var self = this
        var serverChart = null

        this.on("mount", function () {
            var script = document.createElement("script");
            script.onload = function () {
                var link = document.createElement("link")
                link.rel = "stylesheet"
                link.onload = function () {
                    console.log("Everything loaded.")
                }
                link.href = "https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css"
                document.head.appendChild(link)
            }
            script.src = "https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"
            document.body.appendChild(script)
        })

        this.observable.on(UPDATE_APPSERVERS_CHART, function (opts) {
            if (self.serverChart == null) {
                // create a new Chart and configure it
                self.serverChart = new Chartist.Bar('.ct-chart', opts.data,
                    {
                        seriesBarDistance: 120,
                        axisX: {
                            showGrid: false,
                            offset: 20
                        },
                        axisY: {
                            scaleMinSpace: 50
                        }
                    }
                    , [
                    // Options override for media < 1600px
                    ['screen and (max-width: 1600px)', {
                        seriesBarDistance: 100
                    }],
                    ['screen and (max-width: 1300px)', {
                        seriesBarDistance: 80
                    }],
                    ['screen and (max-width: 1000px)', {
                        seriesBarDistance: 60
                    }]
                ]

                    )
            }
            else self.serverChart.update(opts.data)
        })
{'fraction_non_alphanumeric': 0.10710642638558314, 'fraction_numerical': 0.016490989459367562, 'mean_word_length': 1.0736693690518153, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 25, 'https://': 4, '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': '2120687', 'n_tokens_mistral': 1696, 'n_tokens_neox': 1525, 'n_words': 297}