custom-charts-in-panel-popup.html

<figure>
    <div class="chart">
        <ul style='width: 100%'>
            <li>
                <div class='party-name'>Legal Framework</div> <span class='party-bar'
                    style='width: calc({{Legal Framework}}*8%);'></span> <span class='party-value'>{{Legal
                    Framework}}</span>
            </li>
            <li>
                <div class='party-name'>Skills Penetration</div> <span class='party-bar'
                    style='width: calc({{Skills Penetration}}*8%);'> </span> <span class='party-value'>{{Skills
                    Penetration}}</span>
            </li>
            <li>
                <div class='party-name'>AI Hiring</div> <span class='party-bar' style='width: calc({{AI Hiring}}*8%);'>
                </span> <span class='party-value''>{{AI Hiring}}</span> </li>
                    <li> <div class=' party-name'>Access to Information & Technology
    </div> <span class='party-bar' style='width: calc({{Access to Information & Technology}}*8%);'></span> <span
        class='party-value'>{{Access to Information & Technology}}</span> </li>

    </ul>
    </div>
    </div>


    <div class="section">
        <h2>Investment</h2>
        <div class="chart">
            <ul style='width: 100%'>
                <li>
                    <div class='party-name'>R&D spend by businesses</div> <span class='party-bar'
                        style='width: calc({{R&D spend by businesses}}*8%);'></span> <span class='party-value''>{{R&D spend by businesses}}</span> </li>
                    <li> <div class=' party-name'>R&D spend by govt
        </div> <span class='party-bar' style='width: calc({{R&D spend by govt}}*8%);'> </span> <span
            class='party-value'>{{R&D spend by govt}}</span> </li>
        <li>
            <div class='party-name'>Investment in emerging tech</div> <span class='party-bar'
                style='width: calc({{Investment in emerging tech}}*8%);'> </span> <span class='party-value'>{{Investment
                in emerging tech}}</span>
        </li>
        <li>
            <div class='party-name'>AI related courses</div> <span class='party-bar'
                style='width: calc({{AI related courses}}*8%);'> </span> <span class='party-value'>{{AI related
                courses}}</span>
        </li>

        </ul>
    </div>
    </div>


    <div class="section">
        <h2>Innovation</h2>
        <div class="chart">
            <ul style='width: 100%'>
                <li>
                    <div class='party-name'>Patent applications</div> <span class='party-bar'
                        style='width: calc({{Patent applications}}*8%);'></span> <span class='party-value''>{{Patent applications}}</span> </li>
                    <li> <div class=' party-name'>Knowledge capital - publications
        </div> <span class='party-bar' style='width: calc({{Knowledge capital - publications}}*8%);'> </span> <span
            class='party-value'>{{Knowledge capital - publications}}</span> </li>
        <li>
            <div class='party-name'>Unicorn Companies</div> <span class='party-bar'
                style='width: calc({{Unicorn Companies}}*8%);'> </span> <span class='party-value'>{{Unicorn
                Companies}}</span>
        </li>
        <li>
            <div class='party-name'>Startups</div> <span class='party-bar' style='width: calc({{Startups}}*8%);'>
            </span> <span class='party-value'>{{Startups}}</span>
        </li>

        </ul>
    </div>
    </div>

    <div class="section">
        <h2>Impact</h2>
        <div class="chart">
            <ul style='width: 100%'>
                <li>
                    <div class='party-name'>GDP Impact</div> <span class='party-bar'
                        style='width: calc({{GDP Impact}}*8%);'></span> <span class='party-value''>{{GDP Impact}}</span> </li>
                </ul>
            </div>
        </div>
    </div>
</figure>



<style>
    iframe {
    border: none;
    width: 100%;
    height: 20rem;
    background: none;
    margin: 1rem 0;
}

li {
    display: list-item;
    margin: 0.3rem 0 0.5rem 0;
}

figure {
    margin: 0 0 4rem;
}

figure h1 {
    font-size: 1.5rem;
    margin-top: 0.75rem;
}

figure h3 {
    font-size: 1rem;
    margin: 0;
    cursor: pointer;
}

figure .no-click h3 {
    cursor: default
}

figure h3 span {
    font-weight: 400;
}

figure .country {
    display: inline-block;
    border-bottom: 0.33rem solid #000000;
}

figure .sections {}

figure .section {
    margin-top: 2rem;
}

figure .metrics {
    column-width: 15rem;
    padding-top: 0.4rem;
}

figure .metric {
    margin-bottom: 0.5rem;
    display: inline-block;
}

.party-name {
    padding-top: 10px;
    height: 1.6em;
}

.party-value, .party-name {
    font-size: 1.1rem;
}

.chart .party-bar {
    width: 0;
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    background-color: black;
}
</style>