Webscraping
This will focus on the UI section of the template used to get data from an external website.
This will create the page object and add a predefined configuration to the page.body
:
page = pk.Page()
page.body.template.style.configs.margins()
Add a QR Code component with the link of the example:
qrcode = page.ui.qrcode("https://github.com/epykure/epyk-templates/blob/master/tutos/onepy/fastapi_webscraping.py")
qrcode.style.css.fixed(bottom=60, right=70)
qrcode.style.css.cursor = "pointer"
qrcode.style.css.z_index = 300
Add date components and change the CSS properties:
dt_from = page.ui.date(html_code='from', width=(120, "px"))
dt_from.input.style.css.margin_bottom = 10
dt_to = page.ui.date("2021-05-15", html_code='to', width=(120, "px"))
dt_to.input.style.css.margin_bottom = 10
Add a button component and change the CSS properties:
prices = page.ui.button("Get Prices", icon="fab fa-python")
prices.style.css.padding_left = 10
prices.style.css.padding_right = 10
prices.style.css.color = page.theme.colors[-1]
Create a navbar and attach the components to it:
bar = page.ui.navbar()
bar.style.css.background = page.theme.colors[-1]
bar.style.css.color = "white"
bar.add(dt_from)
bar.add(dt_to)
bar.add(prices)
page.ui.title("Eurostar average prices")
line = page.ui.charts.chartJs.line(y_columns=['standard', 'premier', 'business'], x_axis='full_date')
bar = page.ui.charts.chartJs.bar(y_columns=['average'], x_axis='category')
row = page.ui.row([line, bar])
row.set_size_cols(8)
Create a event when button is clicked:
prices.click([
prices.icon.dom.spin(True),
Link this example to an entry point on the server:
page.js.post("/web_scrapping", components=[dt_from, dt_to]).onSuccess([
line.build(pk.events.data["prices"]),
bar.build(pk.events.data["average"]),
prices.icon.dom.spin(False)
])
])
This example is available here
More example of the templates on Github