shao
This commit is contained in:
parent
aea2781f01
commit
2c8b0beb70
|
@ -1,8 +0,0 @@
|
||||||
import plotly.graph_objects as go
|
|
||||||
from nicegui import ui
|
|
||||||
|
|
||||||
fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))
|
|
||||||
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
|
|
||||||
ui.plotly(fig).classes('w-full h-40')
|
|
||||||
|
|
||||||
ui.run()
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
columns = [
|
||||||
|
{'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
|
||||||
|
{'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
|
||||||
|
]
|
||||||
|
rows = [
|
||||||
|
{'name': 'Alice', 'age': 18},
|
||||||
|
{'name': 'Bob', 'age': 21},
|
||||||
|
{'name': 'Carol'},
|
||||||
|
]
|
||||||
|
ui.table(columns=columns, rows=rows, row_key='name')
|
||||||
|
|
||||||
|
# ui.run()
|
||||||
|
|
||||||
|
import pandas as pd
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
df = pd.DataFrame(data={'col1': [1, 2], 'col2': [3, 4]})
|
||||||
|
ui.aggrid.from_pandas(df).classes('max-h-40')
|
||||||
|
|
||||||
|
|
||||||
|
import plotly.graph_objects as go
|
||||||
|
from nicegui import ui
|
||||||
|
from random import random
|
||||||
|
|
||||||
|
fig = go.Figure()
|
||||||
|
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
|
||||||
|
plot = ui.plotly(fig).classes('w-full h-40')
|
||||||
|
|
||||||
|
def add_trace():
|
||||||
|
fig.add_trace(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]))
|
||||||
|
plot.update()
|
||||||
|
|
||||||
|
ui.button('Add trace', on_click=add_trace)
|
||||||
|
|
||||||
|
ui.run()
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,42 @@
|
||||||
|
import plotly.graph_objects as go
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))
|
||||||
|
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
|
||||||
|
|
||||||
|
import plotly.express as px
|
||||||
|
import pandas
|
||||||
|
df = px.data.gapminder()
|
||||||
|
df1 = df.query("country == 'United States'")
|
||||||
|
|
||||||
|
print(df1.columns)
|
||||||
|
fig = px.line(df1,
|
||||||
|
x="year",
|
||||||
|
y="lifeExp",
|
||||||
|
# color="continent",
|
||||||
|
title="A Plotly Express Figure",
|
||||||
|
markers=True,
|
||||||
|
# symbol="continent",
|
||||||
|
line_shape="linear"
|
||||||
|
)
|
||||||
|
# ['linear', 'hv', 'vh', 'hvh', 'vhv']
|
||||||
|
df2 = df.query("continent == 'Oceania'")
|
||||||
|
fig = px.bar(df2,
|
||||||
|
x="year",
|
||||||
|
y="pop",
|
||||||
|
color="country",
|
||||||
|
barmode="group"
|
||||||
|
)
|
||||||
|
ui.plotly(fig)
|
||||||
|
|
||||||
|
# ui.run()
|
||||||
|
|
||||||
|
import plotly.graph_objects as go
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
fig = go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 3, 2.5]))
|
||||||
|
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
|
||||||
|
plot = ui.plotly(fig).classes('w-full h-40')
|
||||||
|
plot.on('plotly_click', ui.notify)
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,5 @@
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
ui.input('演示',value='默认值').props("outlined")
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,14 @@
|
||||||
|
from nicegui import ui
|
||||||
|
from ex4nicegui.reactive import rxui
|
||||||
|
from ex4nicegui import to_ref,ref_computed,effect
|
||||||
|
|
||||||
|
content1 = to_ref('')
|
||||||
|
content2 = to_ref('')
|
||||||
|
|
||||||
|
result = ref_computed(lambda: content1.value+content2.value)
|
||||||
|
|
||||||
|
input1 = rxui.input("aaaaaaaa",value=content1)
|
||||||
|
input2 = ui.input("bbbbbbbbbb",value=content1)
|
||||||
|
|
||||||
|
label = rxui.label(result)
|
||||||
|
ui.run()
|
|
@ -0,0 +1,4 @@
|
||||||
|
import plotly.express as px
|
||||||
|
import pandas
|
||||||
|
df = px.data.gapminder()
|
||||||
|
df.to_csv("gapminder.csv")
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,21 @@
|
||||||
|
from nicegui import ui
|
||||||
|
import pandas as pd
|
||||||
|
from ex4nicegui import bi
|
||||||
|
from pyecharts.charts import Bar
|
||||||
|
|
||||||
|
df = pd.read_csv("gapminder.csv")
|
||||||
|
print(df.columns)
|
||||||
|
# ['Unnamed: 0', 'country', 'continent', 'year', 'lifeExp', 'pop',
|
||||||
|
# 'gdpPercap', 'iso_alpha', 'iso_num']
|
||||||
|
ds = bi.data_source(df)
|
||||||
|
|
||||||
|
# select_year = df.ui_select("year")
|
||||||
|
select_continent =ds.ui_select("continent")
|
||||||
|
ds.ui_select("country")
|
||||||
|
|
||||||
|
@df.ui_echarts
|
||||||
|
def bar(data: pd.DataFrame):
|
||||||
|
data = data.groupby(["year"])["gdpPercap"].sum().reset_index()
|
||||||
|
return Bar().add_xaxis(data["year"].tolist()).add_yaxis("gdpPercap",data["gdpPercap"].tolist())
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,12 @@
|
||||||
|
from nicegui import ui
|
||||||
|
from ex4nicegui import ref_computed, effect, to_ref
|
||||||
|
from ex4nicegui.reactive import rxui
|
||||||
|
|
||||||
|
# 定义响应式数据
|
||||||
|
r_input = to_ref("")
|
||||||
|
|
||||||
|
# 按照 nicegui 使用方式传入响应式数据即可
|
||||||
|
rxui.input(value=r_input)
|
||||||
|
rxui.label(r_input)
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,116 @@
|
||||||
|
from nicegui import ui
|
||||||
|
import pandas as pd
|
||||||
|
import numpy as np
|
||||||
|
from ex4nicegui import bi
|
||||||
|
from ex4nicegui.reactive import rxui
|
||||||
|
from ex4nicegui import effect, effect_refreshable
|
||||||
|
from pyecharts.charts import Bar
|
||||||
|
|
||||||
|
|
||||||
|
# data ready
|
||||||
|
def gen_data():
|
||||||
|
np.random.seed(265)
|
||||||
|
field1 = ["a1", "a2", "a3", "a4"]
|
||||||
|
field2 = [f"name{i}" for i in range(1, 11)]
|
||||||
|
df = (
|
||||||
|
pd.MultiIndex.from_product([field1, field2], names=["cat", "name"])
|
||||||
|
.to_frame()
|
||||||
|
.reset_index(drop=True)
|
||||||
|
)
|
||||||
|
df[["idc1", "idc2"]] = np.random.randint(50, 1000, size=(len(df), 2))
|
||||||
|
return df
|
||||||
|
|
||||||
|
|
||||||
|
df = gen_data()
|
||||||
|
|
||||||
|
# 创建数据源
|
||||||
|
ds = bi.data_source(df)
|
||||||
|
|
||||||
|
# ui
|
||||||
|
ui.query(".nicegui-content").classes("items-stretch no-wrap")
|
||||||
|
|
||||||
|
with ui.row().classes("justify-evenly"):
|
||||||
|
# 基于数据源 `ds` 创建界面组件
|
||||||
|
ds.ui_select("cat").classes("min-w-[10rem]")
|
||||||
|
ds.ui_select("name").classes("min-w-[10rem]")
|
||||||
|
|
||||||
|
|
||||||
|
with ui.grid(columns=2):
|
||||||
|
# 使用字典配置图表
|
||||||
|
@ds.ui_echarts
|
||||||
|
def bar1(data: pd.DataFrame):
|
||||||
|
data = data.groupby("name").agg({"idc1": "sum", "idc2": "sum"}).reset_index()
|
||||||
|
|
||||||
|
return {
|
||||||
|
"xAxis": {"type": "value"},
|
||||||
|
"yAxis": {
|
||||||
|
"type": "category",
|
||||||
|
"data": data["name"].tolist(),
|
||||||
|
"inverse": True,
|
||||||
|
},
|
||||||
|
"legend": {"textStyle": {"color": "gray"}},
|
||||||
|
"series": [
|
||||||
|
{"type": "bar", "name": "idc1", "data": data["idc1"].tolist()},
|
||||||
|
{"type": "bar", "name": "idc2", "data": data["idc2"].tolist()},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
bar1.classes("h-[20rem]")
|
||||||
|
|
||||||
|
# 使用pyecharts配置图表
|
||||||
|
@ds.ui_echarts
|
||||||
|
def bar2(data: pd.DataFrame):
|
||||||
|
data = data.groupby("name").agg({"idc1": "sum", "idc2": "sum"}).reset_index()
|
||||||
|
|
||||||
|
return (
|
||||||
|
Bar()
|
||||||
|
.add_xaxis(data["name"].tolist())
|
||||||
|
.add_yaxis("idc1", data["idc1"].tolist())
|
||||||
|
.add_yaxis("idc2", data["idc2"].tolist())
|
||||||
|
)
|
||||||
|
|
||||||
|
bar2.classes("h-[20rem]")
|
||||||
|
|
||||||
|
# 绑定点击事件,即可实现跳转
|
||||||
|
@bar2.on_chart_click
|
||||||
|
def _(e: rxui.echarts.EChartsMouseEventArguments):
|
||||||
|
ui.open(f"/details/{e.name}", new_tab=True)
|
||||||
|
|
||||||
|
|
||||||
|
# 利用响应式机制,你可以随意组合原生 nicegui 组件
|
||||||
|
label_a1_total = ui.label("")
|
||||||
|
|
||||||
|
|
||||||
|
# 当 ds 有变化,都会触发此函数
|
||||||
|
@effect
|
||||||
|
def _():
|
||||||
|
# filtered_data 为过滤后的 DataFrame
|
||||||
|
df = ds.filtered_data
|
||||||
|
total = df[df["cat"] == "a1"]["idc1"].sum()
|
||||||
|
label_a1_total.text = f"idc1 total(cat==a1):{total}"
|
||||||
|
|
||||||
|
|
||||||
|
# 你也可以使用 `effect_refreshable`,但需要注意函数中的组件每次都被重建
|
||||||
|
@effect_refreshable
|
||||||
|
def _():
|
||||||
|
df = ds.filtered_data
|
||||||
|
total = df[df["cat"] == "a2"]["idc1"].sum()
|
||||||
|
ui.label(f"idc1 total(cat==a2):{total}")
|
||||||
|
|
||||||
|
|
||||||
|
# 当点击图表系列时,跳转的页面
|
||||||
|
@ui.page("/details/{name}")
|
||||||
|
def details_page(name: str):
|
||||||
|
ui.label("This table data will not change")
|
||||||
|
ui.aggrid.from_pandas(ds.data.query(f'name=="{name}"'))
|
||||||
|
|
||||||
|
ui.label("This table will change when the homepage data changes. ")
|
||||||
|
|
||||||
|
@bi.data_source
|
||||||
|
def new_ds():
|
||||||
|
return ds.filtered_data[["name", "idc1", "idc2"]]
|
||||||
|
|
||||||
|
new_ds.ui_aggrid()
|
||||||
|
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,32 @@
|
||||||
|
from nicegui import ui
|
||||||
|
from ex4nicegui.reactive import rxui
|
||||||
|
|
||||||
|
opts = {
|
||||||
|
"xAxis": {"type": "value", "boundaryGap": [0, 0.01]},
|
||||||
|
"yAxis": {
|
||||||
|
"type": "category",
|
||||||
|
"data": ["Brazil", "Indonesia", "USA", "India", "China", "World"],
|
||||||
|
},
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "first",
|
||||||
|
"type": "bar",
|
||||||
|
"data": [18203, 23489, 29034, 104970, 131744, 630230],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "second",
|
||||||
|
"type": "bar",
|
||||||
|
"data": [19325, 23438, 31000, 121594, 134141, 681807],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
bar = rxui.echarts(opts)
|
||||||
|
|
||||||
|
def on_first_series_mouseover(e: rxui.echarts.EChartsMouseEventArguments):
|
||||||
|
ui.notify(f"on_first_series_mouseover:{e.seriesName}:{e.name}:{e.value}")
|
||||||
|
|
||||||
|
|
||||||
|
bar.on("mouseover", on_first_series_mouseover, query={"seriesName": "first"})
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,34 @@
|
||||||
|
from nicegui import ui
|
||||||
|
from ex4nicegui import ref_computed, effect, to_ref
|
||||||
|
from ex4nicegui.reactive import rxui
|
||||||
|
|
||||||
|
r_input = to_ref("")
|
||||||
|
|
||||||
|
# ref_computed 创建只读响应式变量
|
||||||
|
# 函数中使用任意其他响应式变量,会自动关联
|
||||||
|
@ref_computed
|
||||||
|
def cp_echarts_opts():
|
||||||
|
return {
|
||||||
|
"title": {"text": r_input.value}, #字典中使用任意响应式变量,通过 .value 获取值
|
||||||
|
"xAxis": {
|
||||||
|
"type": "category",
|
||||||
|
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||||
|
},
|
||||||
|
"yAxis": {"type": "value"},
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"data": [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
"type": "bar",
|
||||||
|
"showBackground": True,
|
||||||
|
"backgroundStyle": {"color": "rgba(180, 180, 180, 0.2)"},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
input = rxui.input("输入内容,图表标题会同步", value=r_input)
|
||||||
|
# 通过响应式组件对象的 element 属性,获取原生 nicegui 组件对象
|
||||||
|
input.element.classes("w-full")
|
||||||
|
|
||||||
|
rxui.echarts(cp_echarts_opts)
|
||||||
|
|
||||||
|
ui.run()
|
|
@ -0,0 +1,29 @@
|
||||||
|
|
||||||
|
from fastapi import FastAPI
|
||||||
|
import uvicorn
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
def fastapi(app:FastAPI):
|
||||||
|
@app.get('/')
|
||||||
|
def read_root():
|
||||||
|
return {'Hello': 'World'}
|
||||||
|
fastapi(app)
|
||||||
|
|
||||||
|
def nicegui(app: FastAPI) -> None:
|
||||||
|
@ui.page('/a')
|
||||||
|
def a():
|
||||||
|
ui.label("this is aaaaaaaaaaaaaaa")
|
||||||
|
@ui.page('/b')
|
||||||
|
def b():
|
||||||
|
ui.label("this is bbbbbbbbbbbbbbbbbbb")
|
||||||
|
ui.run_with(app)
|
||||||
|
nicegui(app)
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
# 使用uvicorn运行FastAPI应用,指定主机地址和端口
|
||||||
|
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
|
@ -0,0 +1,41 @@
|
||||||
|
|
||||||
|
from fastapi import FastAPI
|
||||||
|
import uvicorn
|
||||||
|
from nicegui import ui
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
def fastapi(app:FastAPI):
|
||||||
|
@app.get('/')
|
||||||
|
def read_root():
|
||||||
|
return {'Hello': 'World'}
|
||||||
|
fastapi(app)
|
||||||
|
|
||||||
|
def nicegui(app: FastAPI) -> None:
|
||||||
|
@ui.page('/a')
|
||||||
|
def a():
|
||||||
|
ui.label("this is aaaaaaaaaaaaaaa")
|
||||||
|
@ui.page('/b')
|
||||||
|
def b():
|
||||||
|
import plotly.express as px
|
||||||
|
df = px.data.gapminder()
|
||||||
|
df2007 = df.query("year == 2007")
|
||||||
|
print(df2007.head())
|
||||||
|
fig = px.scatter(df2007,
|
||||||
|
x="gdpPercap",
|
||||||
|
y="lifeExp",
|
||||||
|
color="continent",
|
||||||
|
title="A Plotly Express Figure",
|
||||||
|
size='pop',
|
||||||
|
size_max=60
|
||||||
|
)
|
||||||
|
ui.plotly(fig)
|
||||||
|
ui.run_with(app)
|
||||||
|
nicegui(app)
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
# 使用uvicorn运行FastAPI应用,指定主机地址和端口
|
||||||
|
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
|
@ -0,0 +1,23 @@
|
||||||
|
from fastapi import FastAPI
|
||||||
|
import uvicorn
|
||||||
|
from fastapi.responses import HTMLResponse
|
||||||
|
from pathlib import Path
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
|
||||||
|
def run_with(app:FastAPI):
|
||||||
|
@app.get('/a')
|
||||||
|
def a():
|
||||||
|
return {'Hello': 'World'}
|
||||||
|
@app.get('/b')
|
||||||
|
def b():
|
||||||
|
return HTMLResponse(Path('static/b.html').read_bytes())
|
||||||
|
|
||||||
|
def main():
|
||||||
|
# 使用uvicorn运行FastAPI应用,指定主机地址和端口
|
||||||
|
|
||||||
|
run_with(app)
|
||||||
|
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,19 +0,0 @@
|
||||||
from fastapi import FastAPI
|
|
||||||
|
|
||||||
from nicegui import app, ui
|
|
||||||
|
|
||||||
|
|
||||||
def init(fastapi_app: FastAPI) -> None:
|
|
||||||
@ui.page('/')
|
|
||||||
def show():
|
|
||||||
ui.label('Hello, FastAPI!')
|
|
||||||
|
|
||||||
# NOTE dark mode will be persistent for each user across tabs and server restarts
|
|
||||||
ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
|
|
||||||
ui.checkbox('dark mode').bind_value(app.storage.user, 'dark_mode')
|
|
||||||
|
|
||||||
ui.run_with(
|
|
||||||
fastapi_app,
|
|
||||||
mount_path='/gui', # NOTE this can be omitted if you want the paths passed to @ui.page to be at the root
|
|
||||||
storage_secret='pick your private secret here', # NOTE setting a secret is optional but allows for persistent storage per user
|
|
||||||
)
|
|
|
@ -1,21 +0,0 @@
|
||||||
#!/usr/bin/env python3
|
|
||||||
import frontend
|
|
||||||
from fastapi import FastAPI
|
|
||||||
import uvicorn
|
|
||||||
|
|
||||||
app = FastAPI()
|
|
||||||
|
|
||||||
|
|
||||||
@app.get('/')
|
|
||||||
def read_root():
|
|
||||||
return {'Hello': 'World'}
|
|
||||||
|
|
||||||
|
|
||||||
frontend.init(app)
|
|
||||||
|
|
||||||
def main():
|
|
||||||
# 使用uvicorn运行FastAPI应用,指定主机地址和端口
|
|
||||||
uvicorn.run(app, host="127.0.0.1", port=8000, log_level="info")
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
|
||||||
main()
|
|
|
@ -2,4 +2,8 @@
|
||||||
https://nicegui.io/documentation
|
https://nicegui.io/documentation
|
||||||
http://www.quasarchs.com/
|
http://www.quasarchs.com/
|
||||||
1 视频教程
|
1 视频教程
|
||||||
https://www.bilibili.com/video/BV1EM4y1x7CM/?spm_id_from=333.337.search-card.all.click&vd_source=311a862c74a77082f872d2e1ab5d1523
|
https://www.bilibili.com/video/BV1EM4y1x7CM/?spm_id_from=333.337.search-card.all.click&vd_source=311a862c74a77082f872d2e1ab5d1523
|
||||||
|
|
||||||
|
2 ex4nicegui变种
|
||||||
|
https://github.com/CrystalWindSnake/ex4nicegui#%E6%95%99%E7%A8%8B
|
||||||
|
https://gitee.com/carson_add/ex4nicegui?_from=gitee_search
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
1 视频教程
|
||||||
|
https://www.bilibili.com/video/BV1UJ411A7Fs?p=4&vd_source=311a862c74a77082f872d2e1ab5d1523
|
Loading…
Reference in New Issue