-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Integrate documentation generation for the Core Elements (initializat…
…ion). (#471) * Refactor de Element generation setup part * Tune the generation * Add the Core Back-end Controls page (with disclaimer) * Remove template files from generated site * Add taipy as a first class repo (for the Core Elements) * Pipfile updated * New location for viselements.json for taipy-gui * RefMan generation slightly optimized * Fix anchor to indexed properties in visual elements
- Loading branch information
1 parent
65069d6
commit c0b3b57
Showing
36 changed files
with
3,053 additions
and
271 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
# Core elements | ||
|
||
!!! warning "Available in Taipy Community and Enterprise editions" | ||
|
||
The controls listed in this section are available only if the | ||
[`taipy`](https://pypi.org/project/taipy/) Python package is installed. These controls are | ||
**not** present if only [`taipy-gui`](https://pypi.org/project/taipy-gui/) is installed. | ||
|
||
Taipy provides a set of visual elements that are meant to simplify the use of Core | ||
objects... TODO | ||
|
||
## Elements list | ||
|
||
Here is the list of all the available Core elements in Taipy: | ||
|
||
[TOC] | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
Select scenarios from the list of all Taipy Core scenario entities. | ||
|
||
Shows all the scenario entities handled by Taipy Core, and lets the user | ||
select them. | ||
|
||
## Usage | ||
|
||
TODO |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
A control that can trigger a function when pressed. | ||
|
||
## Styling | ||
|
||
All the button controls are generated with the "taipy-button" CSS class. You can use this class | ||
name to select the buttons on your page and apply style. | ||
|
||
### [Stylekit](../styling/stylekit.md) support | ||
|
||
The [Stylekit](../styling/stylekit.md) provides specific classes that you can use to style buttons: | ||
|
||
* *secondary*<br/>*error*<br/>*warning*<br/>*success*<br/> | ||
Buttons are normally displayed using the value of the *color_primary* Stylekit variable. | ||
These classes can be used to change the color used to draw the button, respectively, with | ||
the *color_secondary*, *color_error*, *color_warning* and *color_success* Stylekit variable | ||
values. | ||
|
||
The Markdown content: | ||
``` | ||
<|Error|button|class_name=error|><|Secondary|button|class_name=secondary|> | ||
``` | ||
|
||
Renders like this: | ||
<figure> | ||
<img src="../button-stylekit_color-d.png" class="visible-dark" /> | ||
<img src="../button-stylekit_color-l.png" class="visible-light"/> | ||
<figcaption>Using color classes</figcaption> | ||
</figure> | ||
|
||
* *plain*<br/> | ||
The button is filled with a plain color rather than just outlined. | ||
|
||
The Markdown content: | ||
``` | ||
<|Button 1|button|><|Button 2|button|class_name=plain|> | ||
``` | ||
|
||
Renders like this: | ||
<figure> | ||
<img src="../button-stylekit_plain-d.png" class="visible-dark" /> | ||
<img src="../button-stylekit_plain-l.png" class="visible-light"/> | ||
<figcaption>Using the <code>plain</code> class</figcaption> | ||
</figure> | ||
|
||
* *fullwidth*: The button is rendered on its own line and expands across the entire available width. | ||
|
||
## Usage | ||
|
||
### Simple button | ||
|
||
The button label, which is the button control's default property, is simply displayed as the button | ||
text. | ||
|
||
!!! example "Page content" | ||
|
||
=== "Markdown" | ||
|
||
``` | ||
<|Button Label|button|> | ||
``` | ||
|
||
=== "HTML" | ||
|
||
```html | ||
<taipy:button>Button Label</taipy:button> | ||
``` | ||
|
||
<figure> | ||
<img src="../button-simple-d.png" class="visible-dark" /> | ||
<img src="../button-simple-l.png" class="visible-light"/> | ||
<figcaption>A simple button</figcaption> | ||
</figure> | ||
|
||
### Specific action callback | ||
|
||
Button can specify a callback function to be invoked when the button is pressed. | ||
|
||
!!! example "Page content" | ||
|
||
=== "Markdown" | ||
|
||
``` | ||
<|Button Label|button|on_action=button_action_function_name|> | ||
``` | ||
|
||
=== "HTML" | ||
|
||
```html | ||
<taipy:button on_action="button_action_function_name">Button Label</taipy:button> | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
Displays data sets in a chart or a group of charts. | ||
|
||
The chart control is based on the [plotly.js](https://plotly.com/javascript/) | ||
graphs library. | ||
|
||
Plotly is a graphing library that provides a vast number of visual | ||
representations of datasets with all sorts of customization capabilities. Taipy | ||
exposes the Plotly components through the `chart` control and heavily depends on | ||
the underlying implementation. | ||
|
||
The core principles of creating charts in Taipy are explained in the | ||
[Basic concepts](charts/basics.md) section.<br/> | ||
Advanced concepts are described in the [Advanced features](charts/advanced.md) section. | ||
|
||
# Description | ||
|
||
The chart control has a large set of properties to deal with the many types of charts | ||
it supports and the different kinds of customization that can be defined. | ||
|
||
### The *data* property | ||
|
||
All the data sets represented in the chart control must be assigned to | ||
its [*data*](#p-data) property. | ||
|
||
The supported types for the [*data*](#p-data) property are: | ||
|
||
- A list of values:<br/> | ||
Most chart types use two axes (*x*/*y* or *theta*/*r*). When receiving a *data* that is just | ||
a series of values, Taipy sets the first axis values to the value index ([0, 1, ...]) and | ||
the values of the second axis to the values of the collection. | ||
- A [Pandas DataFrame](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.html):<br/> | ||
Taipy charts can be defined by setting the appropriate axis property value to the DataFrame | ||
column name. | ||
- A dictionary:<br/> | ||
The value is converted into a Pandas DataFrame where each key/value pair is converted | ||
to a column named *key* and the associated value. Note that this will work only when | ||
all the values of the dictionary keys are series that have the same length. | ||
- A list of lists of values:<br/> | ||
If all the lists have the same length, Taipy creates a Pandas DataFrame with it.<br/> | ||
If sizes differ, then a DataFrame is created for each list, with a single column | ||
called "*<index>*/0" where *index* is the index of the current list in the *data* | ||
array. Then an array is built using all those DataFrames and used as described | ||
below. | ||
- A Numpy series:<br/> | ||
Taipy internally builds a Pandas DataFrame with the provided *data*. | ||
- A list of Pandas DataFrames:<br/> | ||
This can be used when your chart must represent data sets of different sizes. In this case, | ||
you must set the axis property ([*x*](#p-x), [*y*](#p-y), [*r*](#p-r), etc.) value to a string | ||
with the format: "*<index>*/*<column>*" where *index* is the index of the DataFrame | ||
you want to refer to (starting at index 0) and *column* would be the column name of the | ||
referenced DataFrame. | ||
- A list of dictionaries<br/> | ||
The *data* is converted to a list of Pandas DataFrames. | ||
|
||
### Indexed properties | ||
|
||
Chart controls can hold several traces that may display different data sets.<br/> | ||
To indicate properties for a given trace, you will use the indexed properties | ||
(the ones whose type is *indexed(type)*). When setting the value of an indexed | ||
property, you can specify which trace this property should apply to: you will | ||
use the *property_name[index]* syntax, where the indices start at index 1, to | ||
specify which trace is targeted for this property. | ||
|
||
Indexed properties can have a default value (using the *property_name* syntax with | ||
no index) which is overridden by any specified indexed property:<br/> | ||
Here is an example where *i_property* is an indexed property: | ||
|
||
``` | ||
# This value applies to all the traces of the chart control | ||
general_value = <some_value> | ||
# This value applies to only the second trace of the chart control | ||
specific_value = <some_other_value> | ||
|
||
page = "<|...|chart|...|i_property={general_value}|i_property[2]={specific_value}|...|>" | ||
``` | ||
|
||
In the definition for *page*, you can see that the value *general_value* is set to the | ||
property without the index operator ([]) syntax. That means it applies to all the traces | ||
of the chart control.<br/> | ||
*specific_value*, on the other hand, applies only to the second trace. | ||
|
||
An indexed property can also be assigned an array, without the index operator syntax. | ||
Then each value of the array is set to the property at the appropriate index, in sequence: | ||
|
||
``` | ||
values = [ | ||
value1, | ||
value2, | ||
value3 | ||
] | ||
|
||
page = "<|...|chart|...|i_property={values}|...|>" | ||
``` | ||
|
||
is equivalent to | ||
|
||
``` | ||
page = "<|...|chart|...|i_property[1]={value1}|i_property[2]={value2}|i_property[3]={value3}|...|>" | ||
``` | ||
|
||
or slightly shorter (and if there are no more than three traces): | ||
|
||
``` | ||
page = "<|...|chart|...|i_property={value1}|i_property[2]={value2}|i_property[3]={value3}|...|>" | ||
``` | ||
|
||
## Styling | ||
|
||
All the chart controls are generated with the "taipy-chart" CSS class. You can use this class | ||
name to select the charts on your page and apply style. | ||
|
||
### [Stylekit](../styling/stylekit.md) support | ||
|
||
The [Stylekit](../styling/stylekit.md) provides a specific class that you can use to style charts: | ||
|
||
* *has-background*<br/> | ||
When the chart control uses the *has-background* class, the rendering of the chart | ||
background is left to the charting library.<br/> | ||
The default behavior is to render the chart transparently. | ||
|
||
## Usage | ||
|
||
Here is a list of several sub-sections that you can check to get more details on a specific | ||
domain covered by the chart control: | ||
|
||
- [Basic concepts](charts/basics.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
A control that can display and specify a formatted date, with or without time. | ||
|
||
## Styling | ||
|
||
All the date controls are generated with the "taipy-date" CSS class. You can use this class | ||
name to select the date selectors on your page and apply style. | ||
|
||
### [Stylekit](../styling/stylekit.md) support | ||
|
||
The [Stylekit](../styling/stylekit.md) provides a specific class that you can use to style date selectors: | ||
|
||
* *fullwidth*<br/> | ||
If a date selector uses the *fullwidth* class, then it uses the whole available | ||
horizontal space. | ||
|
||
## Usage | ||
|
||
### Using the full date and time | ||
|
||
Assuming a variable _dt_ contains a Python `datetime` object, you can create | ||
a date selector that represents it: | ||
|
||
!!! example "Page content" | ||
|
||
=== "Markdown" | ||
|
||
``` | ||
<|{dt}|date|> | ||
``` | ||
|
||
=== "HTML" | ||
|
||
```html | ||
<taipy:date>{dt}</taipy:date> | ||
``` | ||
|
||
### Using only the date | ||
|
||
If you don't need to use the date, you can do so: | ||
|
||
!!! example "Page content" | ||
|
||
=== "Markdown" | ||
|
||
``` | ||
<|{dt}|date|not with_time|> | ||
``` | ||
|
||
=== "HTML" | ||
|
||
```html | ||
<taipy:date with_time="false">{dt}</taipy:date> | ||
``` | ||
|
||
|
Oops, something went wrong.