360 lines
11 KiB
Python
360 lines
11 KiB
Python
"""The settings page for the template."""
|
||
from typing import Any
|
||
|
||
import reflex as rx
|
||
from reflex.components.datadisplay.dataeditor import DataEditorTheme
|
||
|
||
from ..styles import *
|
||
from ..webui.state import State
|
||
|
||
|
||
class DataTableState(State):
|
||
"""Datatable state."""
|
||
|
||
cols: list[Any] = [
|
||
{"title": "Title", "type": "str"},
|
||
{
|
||
"title": "Name",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 300,
|
||
},
|
||
{
|
||
"title": "Birth",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 150,
|
||
},
|
||
{
|
||
"title": "Human",
|
||
"type": "bool",
|
||
"group": "Data",
|
||
"width": 80,
|
||
},
|
||
{
|
||
"title": "House",
|
||
"type": "str",
|
||
"group": "Data",
|
||
},
|
||
{
|
||
"title": "Wand",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 250,
|
||
},
|
||
{
|
||
"title": "Patronus",
|
||
"type": "str",
|
||
"group": "Data",
|
||
},
|
||
{
|
||
"title": "Blood status",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 200,
|
||
},
|
||
]
|
||
|
||
data = [
|
||
[
|
||
"1",
|
||
"Harry James Potter",
|
||
"31 July 1980",
|
||
True,
|
||
"Gryffindor",
|
||
"11' Holly phoenix feather",
|
||
"Stag",
|
||
"Half-blood",
|
||
],
|
||
[
|
||
"2",
|
||
"Ronald Bilius Weasley",
|
||
"1 March 1980",
|
||
True,
|
||
"Gryffindor",
|
||
"12' Ash unicorn tail hair",
|
||
"Jack Russell terrier",
|
||
"Pure-blood",
|
||
],
|
||
[
|
||
"3",
|
||
"Hermione Jean Granger",
|
||
"19 September, 1979",
|
||
True,
|
||
"Gryffindor",
|
||
"10¾' vine wood dragon heartstring",
|
||
"Otter",
|
||
"Muggle-born",
|
||
],
|
||
[
|
||
"4",
|
||
"Albus Percival Wulfric Brian Dumbledore",
|
||
"Late August 1881",
|
||
True,
|
||
"Gryffindor",
|
||
"15' Elder Thestral tail hair core",
|
||
"Phoenix",
|
||
"Half-blood",
|
||
],
|
||
[
|
||
"5",
|
||
"Rubeus Hagrid",
|
||
"6 December 1928",
|
||
False,
|
||
"Gryffindor",
|
||
"16' Oak unknown core",
|
||
"None",
|
||
"Part-Human (Half-giant)",
|
||
],
|
||
[
|
||
"6",
|
||
"Fred Weasley",
|
||
"1 April, 1978",
|
||
True,
|
||
"Gryffindor",
|
||
"Unknown",
|
||
"Unknown",
|
||
"Pure-blood",
|
||
],
|
||
[
|
||
"7",
|
||
"George Weasley",
|
||
"1 April, 1978",
|
||
True,
|
||
"Gryffindor",
|
||
"Unknown",
|
||
"Unknown",
|
||
"Pure-blood",
|
||
],
|
||
]
|
||
|
||
|
||
code_show = """rx.chakra.hstack(
|
||
rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"),
|
||
rx.chakra.vstack(
|
||
rx.chakra.box(
|
||
rx.data_editor(
|
||
columns=DataTableState.cols,
|
||
data=DataTableState.data,
|
||
draw_focus_ring=True,
|
||
row_height=50,
|
||
smooth_scroll_x=True,
|
||
smooth_scroll_y=True,
|
||
column_select="single",
|
||
# style
|
||
theme=DataEditorTheme(**darkTheme),
|
||
width="80vw",
|
||
height="80vh",
|
||
),
|
||
),
|
||
rx.chakra.spacer(),
|
||
height="100vh",
|
||
spacing="25",
|
||
),
|
||
)"""
|
||
|
||
state_show = """class DataTableState(State):
|
||
cols: list[Any] = [
|
||
{"title": "Title", "type": "str"},
|
||
{
|
||
"title": "Name",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 300,
|
||
},
|
||
{
|
||
"title": "Birth",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 150,
|
||
},
|
||
{
|
||
"title": "Human",
|
||
"type": "bool",
|
||
"group": "Data",
|
||
"width": 80,
|
||
},
|
||
{
|
||
"title": "House",
|
||
"type": "str",
|
||
"group": "Data",
|
||
},
|
||
{
|
||
"title": "Wand",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 250,
|
||
},
|
||
{
|
||
"title": "Patronus",
|
||
"type": "str",
|
||
"group": "Data",
|
||
},
|
||
{
|
||
"title": "Blood status",
|
||
"type": "str",
|
||
"group": "Data",
|
||
"width": 200,
|
||
},
|
||
]"""
|
||
|
||
data_show = """[
|
||
["1", "Harry James Potter", "31 July 1980", True, "Gryffindor", "11' Holly phoenix feather", "Stag", "Half-blood"],
|
||
["2", "Ronald Bilius Weasley", "1 March 1980", True,"Gryffindor", "12' Ash unicorn tail hair", "Jack Russell terrier", "Pure-blood"],
|
||
["3", "Hermione Jean Granger", "19 September, 1979", True, "Gryffindor", "10¾' vine wood dragon heartstring", "Otter", "Muggle-born"],
|
||
["4", "Albus Percival Wulfric Brian Dumbledore", "Late August 1881", True, "Gryffindor", "15' Elder Thestral tail hair core", "Phoenix", "Half-blood"],
|
||
["5", "Rubeus Hagrid", "6 December 1928", False, "Gryffindor", "16' Oak unknown core", "None", "Part-Human (Half-giant)"],
|
||
["6", "Fred Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
|
||
["7", "George Weasley", "1 April, 1978", True, "Gryffindor", "Unknown", "Unknown", "Pure-blood"],
|
||
]"""
|
||
|
||
|
||
darkTheme = {
|
||
"accent_color": "#8c96ff",
|
||
"accent_light": "rgba(202, 206, 255, 0.253)",
|
||
"text_dark": "#ffffff",
|
||
"text_medium": "#b8b8b8",
|
||
"text_light": "#a0a0a0",
|
||
"text_bubble": "#ffffff",
|
||
"bg_icon_header": "#b8b8b8",
|
||
"fg_icon_header": "#000000",
|
||
"text_header": "#a1a1a1",
|
||
"text_header_selected": "#000000",
|
||
"bg_cell": "#16161b",
|
||
"bg_cell_medium": "#202027",
|
||
"bg_header": "#212121",
|
||
"bg_header_has_focus": "#474747",
|
||
"bg_header_hovered": "#404040",
|
||
"bg_bubble": "#212121",
|
||
"bg_bubble_selected": "#000000",
|
||
"bg_search_result": "#423c24",
|
||
"border_color": "rgba(225,225,225,0.2)",
|
||
"drilldown_border": "rgba(225,225,225,0.4)",
|
||
"link_color": "#4F5DFF",
|
||
"header_font_style": "bold 14px",
|
||
"base_font_style": "13px",
|
||
"font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
|
||
}
|
||
|
||
darkTheme_show = """darkTheme={
|
||
"accent_color": "#8c96ff",
|
||
"accent_light": "rgba(202, 206, 255, 0.253)",
|
||
"text_dark": "#ffffff",
|
||
"text_medium": "#b8b8b8",
|
||
"text_light": "#a0a0a0",
|
||
"text_bubble": "#ffffff",
|
||
"bg_icon_header": "#b8b8b8",
|
||
"fg_icon_header": "#000000",
|
||
"text_header": "#a1a1a1",
|
||
"text_header_selected": "#000000",
|
||
"bg_cell": "#16161b",
|
||
"bg_cell_medium": "#202027",
|
||
"bg_header": "#212121",
|
||
"bg_header_has_focus": "#474747",
|
||
"bg_header_hovered": "#404040",
|
||
"bg_bubble": "#212121",
|
||
"bg_bubble_selected": "#000000",
|
||
"bg_search_result": "#423c24",
|
||
"border_color": "rgba(225,225,225,0.2)",
|
||
"drilldown_border": "rgba(225,225,225,0.4)",
|
||
"link_color": "#4F5DFF",
|
||
"header_font_style": "bold 14px",
|
||
"base_font_style": "13px",
|
||
"font_family": "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
|
||
}"""
|
||
|
||
|
||
def datatable_page() -> rx.Component:
|
||
"""The UI for the settings page.
|
||
|
||
Returns:
|
||
rx.Component: The UI for the settings page.
|
||
"""
|
||
return rx.chakra.box(
|
||
rx.chakra.vstack(
|
||
rx.chakra.heading(
|
||
"Data Table Demo",
|
||
font_size="3em",
|
||
),
|
||
rx.chakra.hstack(
|
||
rx.chakra.vstack(
|
||
rx.chakra.box(
|
||
rx.data_editor(
|
||
columns=DataTableState.cols,
|
||
data=DataTableState.data,
|
||
draw_focus_ring=True,
|
||
row_height=50,
|
||
smooth_scroll_x=True,
|
||
smooth_scroll_y=True,
|
||
column_select="single",
|
||
# style
|
||
theme=DataEditorTheme(**darkTheme),
|
||
width="80vw",
|
||
),
|
||
),
|
||
rx.chakra.spacer(),
|
||
spacing="25",
|
||
),
|
||
),
|
||
rx.chakra.tabs(
|
||
rx.chakra.tab_list(
|
||
rx.chakra.tab("Code", style=tab_style),
|
||
rx.chakra.tab("Data", style=tab_style),
|
||
rx.chakra.tab("State", style=tab_style),
|
||
rx.chakra.tab("Styling", style=tab_style),
|
||
padding_x=0,
|
||
),
|
||
rx.chakra.tab_panels(
|
||
rx.chakra.tab_panel(
|
||
rx.code_block(
|
||
code_show,
|
||
language="python",
|
||
show_line_numbers=True,
|
||
),
|
||
width="100%",
|
||
padding_x=0,
|
||
padding_y=".25em",
|
||
),
|
||
rx.chakra.tab_panel(
|
||
rx.code_block(
|
||
data_show,
|
||
language="python",
|
||
show_line_numbers=True,
|
||
),
|
||
width="100%",
|
||
padding_x=0,
|
||
padding_y=".25em",
|
||
),
|
||
rx.chakra.tab_panel(
|
||
rx.code_block(
|
||
state_show,
|
||
language="python",
|
||
show_line_numbers=True,
|
||
),
|
||
width="100%",
|
||
padding_x=0,
|
||
padding_y=".25em",
|
||
),
|
||
rx.chakra.tab_panel(
|
||
rx.code_block(
|
||
darkTheme_show,
|
||
language="python",
|
||
show_line_numbers=True,
|
||
),
|
||
width="100%",
|
||
padding_x=0,
|
||
padding_y=".25em",
|
||
),
|
||
width="100%",
|
||
),
|
||
variant="unstyled",
|
||
color_scheme="purple",
|
||
align="end",
|
||
width="100%",
|
||
padding_top=".5em",
|
||
),
|
||
style=template_content_style,
|
||
),
|
||
style=template_page_style,
|
||
)
|