components.py

import streamlit as st
import streamlit.components.v1 as components

css_file = './resources/style.css'

@st.cache_data
def load_css():
    with open(css_file) as f:
        return f'<style>{f.read()}</style>'

def top10(df_data):
    html = load_css()
    html+="""



      <div class="list">

          <div class="list__body">

            <table class="list__table">

              <tbody>

    """

    for index, row in df_data.iterrows():
        html += '<tr class="list__row"><td class="list__cell"><span class="list__value">' + str(row.Posicao_Atual) +'</span></td>'
        html += '<td class="list__cell"><span class="list__value">'+row.Musica+'</span><small class="list__label"></small></td>'
        html += '<td class="list__cell"><span class="list__value">'+row.Artista+'</span><small class="list__label"></small>'
        if (row.Variacao > 0):
            html += '</td><td class="list__cell list__icon__green">▲ ' + str(row.Variacao) + '</td></tr>'
        elif (row.Variacao < 0):
            html += '</td><td class="list__cell list__icon__red">▼ ' + str(row.Variacao * -1) + '</td></tr>'
        else:
            html += '</td><td class="list__cell list__icon__grey">■ 0</td></tr>'

    html+="""

            </tbody></table>

          </div>

        </div>



    """
    return components.html(html, height=600, width=650)