Language comparison

The below line to create a new web page:

page = pk.Page()
page.headers.dev()
page.theme = ThemeBlue.BlueGrey()

This will add an external JavaScript page online:

page.js.customFile("FR.js", r"http://pypl.github.io/PYPL")

Add two components:

title = page.ui.title("PYPL PopularitY of Programming Language")
items = page.ui.inputs.autocomplete(placeholder="select a language and press enter", options={"select": True})
cols_keys = page.ui.lists.drop(html_code="cols_agg_keys")

Change the slyde and add event to the list object:

cols_keys.style.css.min_height = 20
cols_keys.items_style(style="bullets")
cols_keys.drop()

button = page.ui.buttons.colored("Display")
button.style.css.margin_top = 5

items.options.on_select([
  cols_keys.dom.add(events.value),
  button.dom.events.trigger("click")
])

Add the chart component and change the style:

line = page.ui.charts.chartJs.line(x_axis="Date", profile=True)
line.options.scales.x_axes().type = "time"
line.options.elements.point.radius = 0
line.options.scales.x_axes().distribution = 'linear'

Add a powered component to illustrate the external modules used from Epykt:

tag = page.ui.rich.powered()
tag.style.css.margin_bottom = 5
tag.style.css.margin_top = 5

box = page.studio.containers.box()
box.extend([title, tag, items, cols_keys, button, line])
box.style.standard()

Add extra events to the components:

items.enter([cols_keys.dom.add(items.dom.content), items.dom.empty()])

button.click([
  std.var("graphData").fromArrayToRecord().setVar("records"),
  line.build(std.var("records"), options={"y_columns": cols_keys.dom.content, "x_axis": "Date"})
])

Run some functions when the page is loaded in the browser:

page.body.onReady([items.js.source(std.var("graphData")[0])])

This example is available here

More example of the templates on Github