Core Components of pyxley (pyxley之核心组成部分)

In Pyxley, the core component is the UILayout. This component iscomposed of a list of charts and filters, a single Reactcomponent from a JavaScript file, and the Flask app.

在Pyxley中，核心部分是UI布局。 它由 1.图表和过滤器组成并通过JavaScript支撑的交互组件列表 和 2.Flask应用程序组成。

#Make a UI #创建一个 UI布局
from pyxley import UILayout
 ui = UILayout(
    "FilterChart",
    "./static/bower_components/pyxley/build/pyxley.js",
    "component_id")

This will create a UI object that’s based on the FilterChart Reactcomponent in pyxley.js. It will be bound to an html div element called component_id.

这将创建一个基于pyxley.js中的FilterChart Reactcomponent(filter-chart交互组件) 的UI对象。 UI对象将被绑定至一个component_id，其对应为一个html div元素

If we wanted to add a filter and a chart we could do so with the following

如果想添加一个 筛选器 和 一个图表,可操作如下

# Make a Button #创建一个按钮
cols = [c for c in df.columns if c != "Date"]
btn = SelectButton("Data", cols, "Data", "Steps")

# Make a FilterFrame and add the button to the UI
ui.add_filter(btn)

# Make a Figure, add some settings, make a line plot
fig = Figure("/mgchart/", "mychart")
fig.graphics.transition_on_update(True)
fig.graphics.animate_on_load()
fig.layout.set_size(width=450, height=200)
fig.layout.set_margin(left=40, right=40)
lc = LineChart(sf, fig, "Date", ["value"], init_params={"Data": "Steps"}, timeseries=True)
ui.add_chart(lc)

Calling the ui.add_chart and ui.add_filter methods simply addsthe components we’ve created to the layout.

app = Flask(__name__)
sb = ui.render_layout(app, "./static/layout.js")

Calling ui.render_layout builds the JavaScript file containing everything we’ve created.

Charts

Charts are meant to span any visualization of data we wish to construct. This includesline plots, histograms, tables, etc. Several wrappers have been introduced and morewill be added over time.

Implementation

All charts are UIComponents that have the following attributes and methods
* An endpoint route method. The user may specify one to override the default.
* A url attribute that the route function is assigned to by the flask app.
* A chart_id attribute that specifies the element id.
* A to_json method that formats the json response.

Filters

Filters are implemented in nearly the same way that charts are implemented. The onlydifference is the lack of the to_json method.