<!-- Removed HTML tag, because of CSRF -->
<meta>
    <meta charset="utf-8">
    <script src="modules/{$moduleName}/assets/js/jquery/jquery-1.8.3.min.js"></script>
    <script src="modules/{$moduleName}/assets/js/widget/widgetApp.min.js"></script>
</meta>
<body>
<style>
    {literal}
    body, html {
        font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
        font-size:12px;
        line-height: 18px;
        margin:0;
        padding:0;
    }
    /* Center SVG element into div */
    .ar-chart {
        height:100%;
        min-width: 100px;
        min-height: 100px;
        overflow: hidden;
    }
    .dashboard .thumbnail.dashlet:not(.collapsed) .ar-chart {
        height:450px;
        margin:8px;
    }
    .sidebar-content .thumbnail.dashlet:not(.collapsed) .ar-chart {
        height:350px;
        margin:8px;
    }
    .nv-funnelChart svg text {
        fill: #fff !important;
    }
    .ar-chart > svg {
        display:block !important;
        margin:auto !important;
        max-height:none;
        height:100%;
    }
    .ar-chart svg:not(.nvd3-svg) {
        width: auto;
        max-height:none;
    }
    .leaflet-overlay-pane svg {
        width:auto !important;
        height:auto !important;
    }
    /* Fix visibility for gauge chart and align to center */
    svg.nvd3-svg {
        overflow: visible !important;
        display: block;
        margin:0 auto;
    }
    /* Gauge chart size */
    .needle-container .current-value {
        font-size:1.2em !important;
    }
    {/literal}
</style>
<div id="ar-chart" class="ar-chart"></div>

<script type="text/javascript">
    var reportData = {$REPORTDATA};

    {literal}

    var widgetId = getWidgetId();

    // Set ar-chart element unique
    $el = document.getElementById("ar-chart");
    $el.setAttribute("id", $el.getAttribute("id") + widgetId);
    var store = window.ARWidgetApp($el.getAttribute("id"), reportData, $el.offsetWidth, $el.offsetHeight);

    /**
     * Try to get ID from iFrame data-id attribute, if set
     * @returns {*}
     */
    function getWidgetId() {
        var id;
        var frameEl = window.frameElement;
        if (frameEl) {
            id = frameEl.dataset.id;
        }

        return id;
    }

{/literal}
</script>
</body>
