update

_👋_.py

@@ -1,21 +1,279 @@
 import streamlit as st
+from pathlib import Path
+import base64
 
+# Initial page config
 
-def run():
-    st.set_page_config(
-        page_title="Hello",
-        page_icon="👋",
-    )
+st.set_page_config(
+    page_title='Streamlit组件清单',
+    page_icon="📖",
+    layout="wide",
+    initial_sidebar_state="expanded",
+)
 
-    st.write("# Welcome to AppZoo! 👋")
 
-    st.markdown(
-        """
-        > 应用集合
-        """
-    )
+def main():
+    cs_sidebar()
+    cs_body()
+    return None
 
 
+def img_to_bytes(img_path):
+    img_bytes = Path(img_path).read_bytes()
+    encoded = base64.b64encode(img_bytes).decode()
+    return encoded
 
-if __name__ == "__main__":
-    run()
+
+# sidebar
+def cs_sidebar():
+    st.sidebar.markdown(
+        '''[<img src='data:image/png;base64,{}' class='img-fluid' width=32 height=32>](https://streamlit.io/)'''.format(
+            img_to_bytes("logomark_website.png")), unsafe_allow_html=True)
+    st.sidebar.header('Streamlit组件清单')
+    st.sidebar.markdown('''
+<small>[Streamlit文档页界面](https://docs.streamlit.io/en/stable/api.html), | [Streamlit首页](https://www.streamlit.io/).</small>
+    ''', unsafe_allow_html=True)
+    st.sidebar.markdown('__安装及引用方法__')
+
+    st.sidebar.code('pip install streamlit')
+
+    st.sidebar.markdown('引入Streamlit后的简写方法')
+    st.sidebar.code('import streamlit as st')
+
+    st.sidebar.markdown('__给侧边栏添加组件__')
+    st.sidebar.code('''
+st.sidebar.<widget>
+a = st.sidebar.radio(\'R:\',[1,2])
+    ''')
+
+    st.sidebar.markdown('__命令行__')
+    st.sidebar.code('''
+streamlit --help
+streamlit run your_script.py
+streamlit hello
+streamlit config show
+streamlit cache clear
+streamlit docs
+streamlit --version
+    ''')
+
+    st.sidebar.markdown('__尝鲜版安装方法__')
+    st.sidebar.markdown('[Beta版和还在测试中功能](https://docs.streamlit.io/en/stable/api.html#beta-and-experimental-features)')
+    st.sidebar.code('''
+pip uninstall streamlit
+pip install streamlit-nightly --upgrade
+    ''')
+
+    st.sidebar.markdown(
+        '''<small>[Streamlit组件清单v1.0.0](https://github.com/daniellewisDL/streamlit-cheat-sheet)  | Oct 2021</small>''',
+        unsafe_allow_html=True)
+
+    return None
+
+
+##########################
+# 主体部分
+##########################
+
+def cs_body():
+    col1, col2, col3 = st.columns(3)
+    col1.subheader('魔法命令')
+    col1.code('''# 最简单的魔法命令 `st.write()`
+\'\'\' _This_ is some __Markdown__ \'\'\'
+a=3
+'dataframe:', data
+    ''')
+
+    # Display text
+
+    col1.subheader('显示文字')
+    col1.code('''
+st.text('固定宽度的文字')
+st.markdown('_Markdown内容_') # see *
+st.caption('Balloons. Hundreds of them...')
+st.latex(r\'\'\' e^{i\pi} + 1 = 0 \'\'\')#嵌入公式
+st.write('Most objects') # df, err, func, keras!
+st.write(['st', 'is <', 3]) # see *
+st.title('我的title')
+st.header('我的标题')
+st.subheader('我的副标题')
+st.code('for i in range(8): foo()')
+
+*可选参数 unsafe_allow_html = True
+
+    ''')
+
+    # Display data
+
+    col1.subheader('显示数据')
+    col1.code('''
+st.dataframe(我的dataframe)
+st.table(data.iloc[0:10])
+st.json({'foo':'bar','fu':'ba'})
+st.metric(label="Temp", value="273 K", delta="1.2 K")
+    ''')
+
+    # Display charts
+
+    col1.subheader('显示各类图表')
+    col1.code('''
+st.line_chart(data)
+st.area_chart(data)
+st.bar_chart(data)
+st.pyplot(fig)
+st.altair_chart(data)
+st.vega_lite_chart(data)
+st.plotly_chart(data)
+st.bokeh_chart(data)
+st.pydeck_chart(data)
+st.deck_gl_chart(data)
+st.graphviz_chart(data)
+st.map(data)
+    ''')
+
+    # Display media
+
+    col1.subheader('显示媒体文件')
+    col1.code('''
+st.image('./header.png')
+st.audio(data)
+st.video(data)
+    ''')
+
+    # Display interactive widgets
+
+    col2.subheader('交互类组件')
+    col2.code('''
+st.button('需要点我的时候就点我一下')
+st.download_button('下载按钮', data)
+st.checkbox('检查框')
+st.radio('单选按钮', [1,2,3])
+st.selectbox('下拉式单选', [1,2,3])
+st.multiselect('多选框', [1,2,3])
+st.slider('滑动选择器', min_value=0, max_value=10)
+st.select_slider('滑动选择器', options=[1,'2'])
+st.text_input('通过我可以输入一些文字')
+st.number_input('Enter a number')
+st.text_area('通过我可以输入多行文字')
+st.date_input('日期选择框')
+st.time_input('时间选择框')
+st.file_uploader('File uploader', type=["csv","png","xlsx","json"])
+st.color_picker('点我选择一种颜色')
+    ''')
+    col2.write('带返回值的组件:')
+    col2.code('''
+for i in range(int(st.number_input('Num:'))): foo()
+if st.sidebar.selectbox('I:',['f']) == 'f': b()
+my_slider_val = st.slider('Quinn Mallory', 1, 88)
+st.write(slider_val)
+    ''')
+
+    # Control flow
+
+    col2.subheader('控制流组件')
+    col2.code('''
+st.stop()
+    ''')
+
+    # Lay out your app
+
+    col2.subheader('对你的APP进行布局')
+    col2.code('''
+st.form('表单定义组件')
+st.form_submit_button('表单提交按钮')
+st.container()
+st.columns(这里放要分几列的数字)
+col1, col2 = st.columns(2)
+col1.subheader('Columnisation')
+st.expander('展开')
+with st.expander('点我进行展开'):
+    st.write('次数可以写点什么')
+    ''')
+
+    col2.write('在表单中使用其他组件:')
+    col2.code('''
+with st.form(key='my_form'):
+    text_input = st.text_input(label='Enter some text')
+    submit_button = st.form_submit_button(label='Submit')
+    ''')
+
+    # Display code
+
+    col2.subheader('显示代码')
+    col2.code('''
+st.echo()
+with st.echo():
+     st.write('代码将被执行并打印结果')
+    ''')
+
+    # Display progress and status
+
+    col3.subheader('显示进度及状态')
+    col3.code('''
+st.progress(数字可以最大到100，意思是100%)
+st.spinner()
+with st.spinner(text='正在进行中'):
+     time.sleep(5)
+     st.success('完成')
+st.balloons()
+st.error('错误信息')
+st.warning('警告信息')
+st.info('通知信息')
+st.success('成功信息')
+st.exception(e)
+    ''')
+
+    # Placeholders, help, and options
+
+    col3.subheader('预设内容, 帮助及操作选项')
+    col3.code('''
+st.empty()
+my_placeholder = st.empty()
+my_placeholder.text('替换完成!')
+st.help(pandas.DataFrame)
+st.get_option(key)
+st.set_option(key, value)
+st.set_page_config(page_title="streamlit", page_icon="", layout='wide')#设置页面模式
+    ''')
+
+    # Mutate data
+
+    col3.subheader('表格数据操作方法')
+    col3.code('''
+DeltaGenerator.add_rows(data)
+my_table = st.table(df1)
+my_table.add_rows(df2)
+my_chart = st.line_chart(df1)
+my_chart.add_rows(df2)
+    ''')
+
+    # Optimize performance
+
+    col3.subheader('优化性能方法')
+    col3.code('''
+@st.cache
+... def fetch_and_clean_data(url):
+...     # Mutate data at url
+...     return data
+# Executes d1 as first time
+d1 = fetch_and_clean_data(ref1)
+# Does not execute d1; returns cached value, d1==d2
+d2 = fetch_and_clean_data(ref1)
+# Different arg, so function d1 executes
+d3 = fetch_and_clean_data(ref2)
+
+    ''')
+
+    col3.subheader('其他API查看链接')
+    col3.markdown('''
+<small>[State API](https://docs.streamlit.io/en/stable/session_state_api.html)</small><br>
+<small>[Theme option reference](https://docs.streamlit.io/en/stable/theme_options.html)</small><br>
+<small>[Components API reference](https://docs.streamlit.io/en/stable/develop_streamlit_components.html)</small><br>
+<small>[API cheat sheet](https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py)</small><br>
+    ''', unsafe_allow_html=True)
+
+    return None
+
+
+if __name__ == '__main__':
+    main()

pages/1000_文本标识.py

@@ -0,0 +1,37 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+# @Project      : Python.
+# @File         : 8000_文本标识
+# @Time         : 2022/10/17 下午1:39
+# @Author       : yuanjie
+# @WeChat       : meutils
+# @Software     : PyCharm
+# @Description  : 
+
+
+import streamlit as st
+from annotated_text import annotated_text, annotation
+
+annotated_text(
+    "我 ",
+    ("热爱", "", "#8ef"),
+    " 我们 ",
+    ("非常棒", "", "#faa"),
+    ("而", "", "#afa"),
+    " 有用的 ",
+    ("Streamlit", "", "#fea"),
+    ("社区", "", "#8ef"),
+    ("!", "", "#afa"),
+)
+
+annotated_text(
+    "I ",
+    ("Love", "", "#8ef"),
+    " our ",
+    ("Great", "", "#faa"),
+    ("and", "", "#afa"),
+    " Useful ",
+    ("Streamlit", "", "#fea"),
+    ("Community", "", "#8ef"),
+    ("!", "", "#afa"),
+)

pages/1001_多选组件.py

@@ -0,0 +1,51 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+# @Project      : Python.
+# @File         : 1001_多选组件
+# @Time         : 2022/10/17 下午1:41
+# @Author       : yuanjie
+# @WeChat       : meutils
+# @Software     : PyCharm
+# @Description  : 
+
+import streamlit as st
+from streamlit_tree_select import tree_select
+nodes = [
+    {"label": "北京", "value": "北京"},
+    {
+        "label": "上海",
+        "value": "上海",
+        "children": [
+            {"label": "浦东", "value": "浦东"},
+            {"label": "杨浦", "value": "杨浦"},
+            {"label": "虹口", "value": "虹口"},
+            {"label": "黄浦", "value": "黄浦"},
+        ],
+    },
+    {
+        "label": "广州",
+        "value": "广州",
+        "children": [
+            {"label": "番禺区", "value": "番禺区"},
+            {
+                "label": "白云区",
+                "value": "白云区",
+                "children": [
+                    {"label": "三元里街", "value": "三元里街"},
+                    {"label": "松洲街", "value": "松洲街"},
+                ],
+            },
+            {"label": "珠江新区", "value": "珠江新区"},
+        ],
+    },
+]
+
+c1, c2 = st.columns(2)
+
+with c1:
+
+    return_select = tree_select(nodes)
+
+with c2:
+    st.write(return_select["checked"])
+

pages/999_draw_table.py

@@ -0,0 +1,129 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+# @Project      : Python.
+# @File         : 999_draw_table
+# @Time         : 2022/10/17 下午1:36
+# @Author       : yuanjie
+# @WeChat       : meutils
+# @Software     : PyCharm
+# @Description  : 
+
+
+import streamlit as st
+import pandas as pd
+import streamlit.components.v1 as components
+
+st.set_page_config(page_icon="🌴", page_title="Tabulator表格", layout="wide")
+
+file = st.file_uploader("请上传文件", type=["csv"])
+
+if file is not None:
+    df = pd.read_csv(file, encoding="gbk")
+
+
+    def draw_table(df, height, width):
+        columns = df.columns
+        column_selection = []
+        column_selection.append(
+            """<select id="filter-field" style="font-size:15px;background:white;color:black;border-radius:15%;border-color:grey;">""")
+        for i in range(len(columns)):
+            column_selection.append(
+                """<option value='""" + str(columns[i]) + """'>""" + str(columns[i]) + """</option>""")
+        column_selection.append("""</select>""")
+        table_data = df.to_dict(orient="records")
+        column_setting = []
+        column_setting.append(
+            """{rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30}""")
+        for y in range(df.shape[1]):
+            column_setting.append(
+                {"title": columns[y], "field": columns[y], "width": 200, "sorter": "string", "hozAlign": "center",
+                 "headerFilter": "input", "editor": "input"})
+
+        components.html("""
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Tabulator Example</title>
+            <link href="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator_modern.min.css" rel="stylesheet">
+            <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>
+            <script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>
+            <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
+        </head><body>
+            <div style="margin-left:30%;">""" + "".join(column_selection) +
+                        """<select id="filter-type" style="font-size:15px;background:#00ccff;color:white;border-radius:15%;border-color:white;">
+                            <option value="like">like</option>
+                            <option value="=">=</option>
+                            <option value="<"><</option>
+                            <option value="<="><=</option>
+                            <option value=">">></option>
+                            <option value=">=">>=</option>
+                            <option value="!=">!=</option>
+                          </select>
+                          <input id="filter-value" type="text" placeholder="填写要筛选的内容" style="font-size:15px;border-color:grey;border-radius:5%">
+                          <button id="filter-clear" style="font-size:15px;background:#00ccff;color:white;border-radius:15%;border-color:white;">清除筛选</button>
+                          <button id="download-csv" style="font-size:15px;background:#00ccff;color:white;border-radius:15%;border-color:white;">下载CSV</button>
+                          <button id="download-xlsx" style="font-size:15px;background:#00ccff;color:white;border-radius:15%;border-color:white;">下载XLSX</button>
+                          <button id="download-html" style="font-size:15px;background:#00ccff;color:white;border-radius:15%;border-color:white;">下载HTML</button>
+                        </div><script type="text/javascript">
+                            var fieldEl = document.getElementById("filter-field");
+                            var typeEl = document.getElementById("filter-type");
+                            var valueEl = document.getElementById("filter-value");
+                            function customFilter(data){
+                                return data.car && data.rating < 3;
+                            }function updateFilter(){
+                              var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
+                              var typeVal = typeEl.options[typeEl.selectedIndex].value;
+                              var filter = filterVal == "function" ? customFilter : filterVal;
+                              if(filterVal == "function" ){
+                                typeEl.disabled = true;
+                                valueEl.disabled = true;
+                              }else{
+                                typeEl.disabled = false;
+                                valueEl.disabled = false;
+                              }
+                              if(filterVal){
+                                table.setFilter(filter,typeVal, valueEl.value);
+                              }
+                            }
+                            document.getElementById("filter-field").addEventListener("change", updateFilter);
+                            document.getElementById("filter-type").addEventListener("change", updateFilter);
+                            document.getElementById("filter-value").addEventListener("keyup", updateFilter);
+                            document.getElementById("filter-clear").addEventListener("click", function(){
+                              fieldEl.value = "";
+                              typeEl.value = "=";
+                              valueEl.value = "";
+                              table.clearFilter();
+                            });
+                        </script>
+                        <script type="text/javascript">
+                            var table = new Tabulator("#example-table", {
+                                ajaxURL:"http://www.getmydata.com/now",
+                            });
+                            document.getElementById("download-csv").addEventListener("click", function(){
+                                table.download("csv", "data.csv");
+                            });
+                            document.getElementById("download-xlsx").addEventListener("click", function(){
+                                table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
+                            });
+                            document.getElementById("download-html").addEventListener("click", function(){
+                                table.download("html", "data.html", {style:true});
+                            });
+                        </script><div id="players" style="margin-left:16%;"></div>""" +
+                        """<script type="text/javascript">
+                            var tabledata = [""" + ','.join(list(map(str, table_data))) + """];""" +
+                        """var table = new Tabulator("#players", {
+                                height: 320,
+                                data: tabledata,
+                                layout: "fitDataTable",
+                                movableRows:true,
+                                resizableColumnFit:true,
+                                pagination: "local",
+                                paginationSize: 5,
+                                tooltips: true,
+                                columns: [""" + ','.join(list(map(str, column_setting))) + """],});</script></body></html>""",
+                        height=height, width=width)
+
+
+    draw_table(df, 500, 1200)

requirements.txt

@@ -13,3 +13,5 @@ streamlit_echarts
 streamlit-aggrid
 streamlit-agraph
 rdflib
+st-annotated-text
+streamlit-tree-select