[파이썬]Streamlit 활용 - Metirc

Streamlit 에서 데이터 분석결과를 지표로 잘 나타내주는 툴이 metirc (메트릭) 입니다.

수치 데이터의 분석결과로 지표로 나타낼 수 있는 항목들을 한 눈에 볼 수 있도록 하는 장점이 있습니다.

 

다양한 형태의 표시 방법이 있어서 적절한  표시방법을 선택하여 사용하면 되겠습니다.

 

https://docs.streamlit.io/develop/api-reference/data/st.metric

Streamlit Docs

 

기본적인 사용방법은 다음과 같습니다.

 

1.  기본 포맷

st.metric(label, value, delta=None, delta_color="normal", *, help=None, label_visibility="visible", border=False, width="stretch", height="content", chart_data=None, chart_type="line", delta_arrow="auto")

 

• label : 수치 데이터의 제목, markdown 형식에 따라 Bold, Italics, Strikethroughs, Inline Code, Links, Icon 등 표시 가능
• value : 표시할 값 (숫자 데이터 형식), None인 경우 longdash 로 표시됨
• delta : 데이터의 변화량 표시, value 아래에 표출
              음수값이면 red 색상, 아래 화살표
              양수값이면 green 색상, 위쪽 화살표
• delta_color : "normal", "inverse",  "off"        
              normal - 기본적인 음수 red, 양수 green 적용
              inverse - 기본값의 반대로 음수 green, 양수 red 적용 (음수가 좋은 의미인 경우 사용, 예를들면 cost 감소 등)
              off - 색상 gray 로 표시
• help : tooltip (markdown 형식), label 이 visible 인 경우 사용 가능
• label_visibility : "visible", "hidden", "collapsed"   
             visible - 기본값, label 표시
             hidden - label 자리에 미표출
             collapsed - label 공간이 없이 표출
• height : "content", "stretch", or int
             content - 표시되는 내용의 길이에 맞춰 높이 지정
             stretch - 부모 container와 content 중에서 더 큰 높이로 지정
              int - 직접 수치 입력 (pixel)
• width : "content", "stretch", or int
              height 와 동일
• chart_data : 차트에 표시할 데이터 집합, dataframe 형태 데이터로 첫번째 행이 표출
• chart_type : "line", "bar", or "area"  차트 표시 형식
• delta_arrow : "auto", "up", "down", or "off"
              auto - 기본값 (음수, 양수에 따라 다르게 표시)
              up or down - 강제로 화살표 방향 지정
              off - 화살표 미표시

반응형

 

2.  사용 예시

A.  기본 사용

import streamlit as st

st.metric(label="Temperature", value="70 °F", delta="1.2 °F")

 

metric sample

 

B.  여러 개 열로 표시

import streamlit as st

col1, col2, col3 = st.columns(3)
col1.metric("Temperature", "70 °F", "1.2 °F")
col2.metric("Wind", "9 mph", "-8%")
col3.metric("Humidity", "86%", "4%")

 

 

C.  delta 표시 방식 변경

import streamlit as st

st.metric(label="Gas price", value=4, delta=-0.5, delta_color="inverse")

st.metric(
    label="Active developers",
    value=123,
    delta=123,
    delta_color="off",
)

 

metirc delta indicator

 

D.  카드 형식 배치

import streamlit as st

a, b = st.columns(2)
c, d = st.columns(2)

a.metric("Temperature", "30°F", "-9°F", border=True)
b.metric("Wind", "4 mph", "2 mph", border=True)

c.metric("Humidity", "77%", "5%", border=True)
d.metric("Pressure", "30.34 inHg", "-2 inHg", border=True)

 

metric card grid

 

E.  차트 데이터 표출

import streamlit as st
from numpy.random import default_rng as rng

changes = list(rng(4).standard_normal(20))
data = [sum(changes[:i]) for i in range(20)]
delta = round(data[-1], 2)

row = st.container(horizontal=True)
with row:
    st.metric(
        "Line", 10, delta, chart_data=data, chart_type="line", border=True
    )
    st.metric(
        "Area", 10, delta, chart_data=data, chart_type="area", border=True
    )
    st.metric(
        "Bar", 10, delta, chart_data=data, chart_type="bar", border=True
    )

 

metric chart

 

 

이와 같이 다양한 형태의 metric 표시형식이 존재합니다. 

사용자에게 어떤 정보를 어떻게 전달할 것이지 요약정보로 중요하게 활용할 수 있는 UI 입니다.