Spaces:
Sleeping
Sleeping
| """FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)""" | |
| from fasthtml.common import * # Bring in all of fasthtml | |
| import fasthtml.common as fh # Used to get unstyled components | |
| from monsterui.all import * # Bring in all of monsterui, including shadowing fasthtml components with styled components | |
| from fasthtml.svg import * | |
| import numpy as np | |
| import plotly.express as px | |
| import pandas as pd | |
| import numpy as np | |
| app, rt = fast_app(hdrs=Theme.blue.headers()) | |
| def generate_chart(num_points=30): | |
| df = pd.DataFrame({ | |
| 'Date': pd.date_range('2024-01-01', periods=num_points), | |
| 'Revenue': np.random.normal(100, 10, num_points).cumsum(), | |
| 'Users': np.random.normal(80, 8, num_points).cumsum(), | |
| 'Growth': np.random.normal(60, 6, num_points).cumsum()}) | |
| fig = px.line(df, x='Date', y=['Revenue', 'Users', 'Growth'], template='plotly_white', line_shape='spline') | |
| fig.update_traces(mode='lines+markers') | |
| fig.update_layout( | |
| margin=dict(l=20, r=20, t=20, b=20), hovermode='x unified', | |
| showlegend=True, legend=dict(orientation='h', yanchor='bottom', y=1.02, xanchor='right', x=1), | |
| plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)', | |
| xaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'), | |
| yaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)')) | |
| return fig.to_html(include_plotlyjs=True, full_html=False, config={'displayModeBar': False}) | |
| def InfoCard(title, value, change): return Card(H3(value),P(change, cls=TextPresets.muted_sm), header = H4(title)) | |
| rev = InfoCard("Total Revenue", "$45,231.89", "+20.1% from last month") | |
| sub = InfoCard("Subscriptions", "+2350", "+180.1% from last month") | |
| sal = InfoCard("Sales", "+12,234", "+19% from last month") | |
| act = InfoCard("Active Now", "+573", "+201 since last hour") | |
| info_card_data = [("Total Revenue", "$45,231.89", "+20.1% from last month"), | |
| ("Subscriptions", "+2350", "+180.1% from last month"), | |
| ("Sales", "+12,234", "+19% from last month"), | |
| ("Active Now", "+573", "+201 since last hour")] | |
| top_info_row = Grid(*[InfoCard(*row) for row in info_card_data]) | |
| def AvatarItem(name, email, amount): | |
| return DivFullySpaced( | |
| DivLAligned( | |
| DiceBearAvatar(name, 9,9), | |
| Div(Strong(name, cls=TextT.sm), | |
| Address(A(email,href=f'mailto:{email}')))), | |
| fh.Data(amount, cls="ml-auto font-medium", value=amount[2:])) | |
| recent_sales = Card( | |
| Div(cls="space-y-8")( | |
| *[AvatarItem(n,e,d) for (n,e,d) in ( | |
| ("Olivia Martin", "olivia.martin@email.com", "+$1,999.00"), | |
| ("Jackson Lee", "jackson.lee@email.com", "+$39.00"), | |
| ("Isabella Nguyen", "isabella.nguyen@email.com", "+$299.00"), | |
| ("William Kim", "will@email.com", "+$99.00"), | |
| ("Sofia Davis", "sofia.davis@email.com", "+$39.00"))]), | |
| header=Div(H3("Recent Sales"),Subtitle("You made 265 sales this month.")), | |
| cls='col-span-3') | |
| teams = [["Alicia Koch"],['Acme Inc', 'Monster Inc.'],['Create a Team']] | |
| opt_hdrs = ["Personal", "Team", ""] | |
| team_dropdown = Select( | |
| Optgroup(Option(A("Alicia Koch")), label="Personal Account"), | |
| Optgroup(Option(A("Acme Inc")), Option(A("Monster Inc.")), label="Teams"), | |
| Option(A("Create a Team")), | |
| cls='flex items-center') | |
| hotkeys = [('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team', ''), ('Logout', '')] | |
| def NavSpacedLi(t,s): return NavCloseLi(A(DivFullySpaced(P(t),P(s,cls=TextPresets.muted_sm)))) | |
| avatar_dropdown = Div( | |
| DiceBearAvatar('Alicia Koch',8,8), | |
| DropDownNavContainer( | |
| NavHeaderLi('sveltecult',NavSubtitle("leader@sveltecult.com")), | |
| *[NavSpacedLi(*hk) for hk in hotkeys],)) | |
| top_nav = NavBar( | |
| team_dropdown, *map(A, ["Overview", "Customers", "Products", "Settings"]), | |
| brand=DivLAligned(avatar_dropdown, Input(placeholder='Search'))) | |
| def index(): | |
| return Title("Dashboard Example"), Container( | |
| top_nav, | |
| H2('Dashboard'), | |
| TabContainer( | |
| Li(A("Overview"),cls='uk-active'), | |
| *map(lambda x: Li(A(x)), ["Analytics", "Reports", "Notifications"]), | |
| alt=True), | |
| top_info_row, | |
| Grid( | |
| Card(Safe(generate_chart(100)), cls='col-span-4'), | |
| recent_sales, | |
| gap=4,cols_xl=7,cols_lg=7,cols_md=1,cols_sm=1,cols_xs=1), | |
| cls=('space-y-4', ContainerT.xl)) | |
| serve() | |