
<!-- Rank Bar  -->
<div id="rank-bar">
    <div id="rank-str" class="rankBar" data-bar="{{data}}">
        <div id="indication">
            <!--  Here we need the link for the global About Page -->
            <a href="https://white-on.github.io/BenchSite/#explications">
                <svg width="1000" height="50" viewBox="0,0,1000,50" style="max-width: 100%; height: auto;"><g transform="translate(0, 0)"><g transform="translate(0, 0)"><rect x="0" y="0" width="216" height="50" fill="#440154"></rect><rect x="216" y="0" width="54" height="50" fill="#2e6e8e"></rect><path d="M 214 0 L 268 25 L 214 50Z" fill="#440154"></path><text x="107.14285714285714" y="25" text-anchor="middle" dominant-baseline="central" font-size="24" font-weight="400" fill="white">first</text></g><g transform="translate(268, 0)"><rect x="0" y="0" width="216" height="50" fill="#2e6e8e"></rect><text x="107.14285714285714" y="25" text-anchor="middle" dominant-baseline="central" font-size="24" font-weight="400" fill="white">same 1</text></g></g><g transform="translate(0, 0)"><g transform="translate(500, 0)"><rect x="0" y="0" width="216" height="50" fill="#2e6e8e"></rect><rect x="216" y="0" width="54" height="50" fill="#4ac16d"></rect><path d="M 214 0 L 268 25 L 214 50Z" fill="#2e6e8e"></path><text x="107.14285714285714" y="25" text-anchor="middle" dominant-baseline="central" font-size="24" font-weight="400" fill="white">same 2</text></g><g transform="translate(768, 0)"><rect x="0" y="0" width="216" height="50" fill="#4ac16d"></rect><text x="107.14285714285714" y="25" text-anchor="middle" dominant-baseline="central" font-size="24" font-weight="400" fill="white">last</text></g></g></svg>
            </a>
        </div>
    </div>
    <div>{{dataGenerationDate}}</div>
</div>
<script type="module">
    import { rankBar } from "{{scriptFilePath}}rankBar.js";
    import { arrowRank } from "{{scriptFilePath}}arrowRank.js";
    const rankBarElement = document.getElementsByClassName("rankBar")
    
    for(let element of rankBarElement){
        let cls = element.dataset.bar.replaceAll("'", '"');
        cls = JSON.parse(cls);
        let librarySizeBox= 100;
        let barSVG = rankBar(cls, {
            width : (librarySizeBox* Object.keys(cls).length),
            height : 25,
            fontSize : 10,
            gap : 5,

            contentFolderPath : "{{contentFolderPath}}",
        });
        element.appendChild(barSVG);
    }

    const elements = document.getElementsByClassName("rank-arrow");
    for (let element of elements) {
        // console.log(element.dataset.rank);
        let cls = element.dataset.rank.replaceAll("'", '"');
        let libraryName = element.innerHTML;
        element.innerHTML = "";
        cls = JSON.parse(cls);
        let arrow = arrowRank(cls, libraryName, {
        width : 200,
        height : 50,

        contentFolderPath : "{{contentFolderPath}}",
    });
        element.appendChild(arrow);
    }
</script>