<link rel="stylesheet" media="screen"
      href="{$baseURL}/plugins/tnt_coupons/adminmenu/vendor/chartist/dist/chartist.min.css"/>

<div class="d-flex flex-wrap justify-content-center fs-ms">
    <div class="border rounded py-1 px-2 me-2 mb-2">
        <div class="d-inline-block align-middle me-1"
             style="width: .75rem; height: .75rem; background-color: #fea569;"></div>
        <span class="d-inline-block align-middle">Umsatz davor</span>
    </div>
    <div class="border rounded py-1 px-2 me-2 mb-2">
        <div class="d-inline-block align-middle me-1"
             style="width: .75rem; height: .75rem; background-color: #4e54c8;"></div>
        <span class="d-inline-block align-middle">Umsatz im Sale</span>
    </div>
</div>

<!-- Chart -->

<div class="ct-chart ct-perfect-fourth" style="overflow: auto;" data-line-chart='{$chart_data}'
     {literal}data-options='{"width": "100%", "height": "100%", "axisY": {"onlyInteger": true}}'
     data-series-color='{"colors": ["#4e54c8", "#fea569"]}'{/literal}></div>

<script src="{$baseURL}/plugins/tnt_coupons/adminmenu/vendor/chartist/dist/chartist.min.js"></script>
{literal}
    <script type="application/javascript">
        function createChart() {
            var responsiveOptions = [
                ['screen and (min-width: 641px) and (max-width: 1024px)', {
                    showPoint: false,
                    axisX: {
                        labelInterpolationFnc: function (value) {
                            return value.slice(0, 2);
                        }
                    }
                }],
                ['screen and (max-width: 640px)', {
                    showLine: false,
                    axisX: {
                        labelInterpolationFnc: function (value) {
                            return value.slice(0, 2);
                        }
                    }
                }]
            ];

            var lineChart = document.querySelectorAll('[data-line-chart]'),
                barChart = document.querySelectorAll('[data-bar-chart]'),
                pieChart = document.querySelectorAll('[data-pie-chart]');

            var sum = function sum(a, b) {
                return a + b;
            };

            if (lineChart.length === 0 && barChart.length === 0 && pieChart.length === 0) return; // Create <style> tag and put it to <head> for changing colors of charts via data attributes

            var head = document.head || document.getElementsByTagName('head')[0],
                style = document.createElement('style'),
                css;
            head.appendChild(style); // Line chart

            for (var i = 0; i < lineChart.length; i++) {
                var data = JSON.parse(lineChart[i].dataset.lineChart),
                    options = lineChart[i].dataset.options != undefined ? JSON.parse(lineChart[i].dataset.options) : '',
                    seriesColor = lineChart[i].dataset.seriesColor,
                    userColors = void 0;
                lineChart[i].classList.add('line-chart-' + i);

                if (seriesColor != undefined) {
                    userColors = JSON.parse(seriesColor);

                    for (var n = 0; n < userColors.colors.length; n++) {
                        css = "\n          .line-chart-".concat(i, " .ct-series:nth-child(").concat(n + 1, ") .ct-line,\n          .line-chart-").concat(i, " .ct-series:nth-child(").concat(n + 1, ") .ct-point {\n            stroke: ").concat(userColors.colors[n], " !important;\n          }\n        ");
                        style.appendChild(document.createTextNode(css));
                    }
                }
                /*
                options["axisY"]["labelInterpolationFnc"] = function(value) {
              return value.toLocaleString('de-DE', {maximumFractionDigits: 2}) + ' €';
            };
                */
                new Chartist.Line(lineChart[i], data, options, responsiveOptions);
            }
        }
    </script>
{/literal}