Fixed documentation for dialog

docs/refmans/gui/viselements/generic/button.md_template

@@ -1,5 +1,39 @@
 A control that can trigger a function when pressed.
 
+# Usage
+
+## Simple button
+
+The button label, which is the button control's default property, is simply displayed as the button
+text.
+
+!!! taipy-element
+    default=Button Label
+
+<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.
+
+If you want some function called *button_pressed()* to be invoked when the user presses a button,
+you can define this function as follows:
+```py
+def button_pressed(state):
+  # React to the button press action
+```
+
+Then refer to this function in the definition of the control, as the value of the button's
+[*on_action*](#p-on_action) property:
+
+!!! taipy-element
+    default=Button Label
+    on_action:f=button_pressed
+
 # Styling
 
 All the button controls are generated with the "taipy-button" CSS class. You can use this class
@@ -44,37 +78,3 @@ The [Stylekit](../../../../userman/gui/styling/stylekit.md) provides specific cl
 
 * *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.
-
-!!! taipy-element
-    default=Button Label
-
-<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.
-
-If you want some function called *button_pressed()* to be invoked when the user presses a button,
-you can define this function as follows:
-```py
-def button_pressed(state):
-  # React to the button press action
-```
-
-Then refer to this function in the definition of the control, as the value of the button's
-[*on_action*](#p-on_action) property:
-
-!!! taipy-element
-    default=Button Label
-    on_action:f=button_pressed

docs/refmans/gui/viselements/generic/chart.md_template

@@ -209,7 +209,7 @@ To use these algorithms and manage the challenges posed by representing large da
 instantiate the decimator class that best matches the dataset you are dealing with and set the
 instance to the [`decimator`](#p-decimator) property of the chart control that represents the data.
 
-## The *rebuild* property {data-source="gui:doc/examples/charts/example-rebuild.py"}
+## The *rebuild* property {data-source="gui:doc/examples/charts/example_rebuild.py"}
 
 Some of the chart control's properties may result in Taipy GUI having to entirely reconstruct the
 graphical component running on the front-end (the user's browser). The chart control provides some
@@ -286,6 +286,11 @@ button, the page will reflect the change without explicit refresh:
     <figcaption>After the type was switched, with <i>rebuild</i> set to True</figcaption>
 </figure>
 
+# 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:
+
 # Styling
 
 All the chart controls are generated with the "taipy-chart" CSS class. You can use this class
@@ -299,9 +304,3 @@ The [Stylekit](../../../../userman/gui/styling/stylekit.md) provides a specific
     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:
-

docs/refmans/gui/viselements/generic/charts/advanced.md_template

@@ -5,7 +5,7 @@ Taipy exposes advanced features that the Plotly library provides. This section
 demonstrates some of those features, when they are needed and how to use them
 in your Taipy application.
 
-## Multiple traces with different dataset sizes {data-source="gui:doc/examples/charts/advanced-unbalanced-datasets.py"}
+## Multiple traces with different dataset sizes {data-source="gui:doc/examples/charts/advanced_unbalanced_datasets.py"}
 
 The [*Adding a trace*](basics.md#adding-a-trace) example explained how to create multiple
 traces on the same chart.<br/>
@@ -161,7 +161,7 @@ Here is how the annotated chart control shows on the page:
     <figcaption>Text annotations</figcaption>
 </figure>
 
-## Adding shapes {data-source="gui:doc/examples/charts/advanced-shapes.py"}
+## Adding shapes {data-source="gui:doc/examples/charts/advanced_shapes.py"}
 
 Shapes can be rendered on top of a chart at defined locations.<br/>
 To create shapes, you must add shape descriptors to the *shapes* property of
@@ -229,7 +229,7 @@ And here is what the resulting chart looks like:
     <figcaption>Shapes on chart</figcaption>
 </figure>
 
-## Tracking selection {data-source="gui:doc/examples/charts/advanced-selection.py"}
+## Tracking selection {data-source="gui:doc/examples/charts/advanced_selection.py"}
 
 The chart control has the [*selected*](../chart.md#p-selected) property
 that can be used to track data point selection in the chart control.<br/>
@@ -383,7 +383,7 @@ When the page is displayed, the Plotly magic operates:
 </figure>
 
 <!--- TODO: when range tracking works.. say... better
-## Tracking range changes {data-source="gui:doc/examples/charts/advanced-range-tracking.py"}
+## Tracking range changes {data-source="gui:doc/examples/charts/advanced_range_tracking.py"}
 
 You can be notified when the visible range of the chart is changed. That happens when the
 user zooms or pans the chart content using the Zoom or Pan tools.

docs/refmans/gui/viselements/generic/charts/bar.md_template

@@ -19,13 +19,13 @@ in the chart control is set to "bar".
 
 ## Examples
 
-### Simple bar chart {data-source="gui:doc/examples/charts/bar-simple.py"}
+### Simple bar chart {data-source="gui:doc/examples/charts/bar_simple.py"}
 
 Here is an example of how to use bar charts in an application.
 
 You want to display the popular vote percentage for every presidential
 election in the US since 1852 (source
-[Wikipedia](https://en.wikipedia.org/wiki/List_of_United_States_presidential_elections_by_popular_vote_margin])).
+[Wikipedia](https://en.wikipedia.org/wiki/List_of_United_States_presidential_elections_by_popular_vote_margin)).
 
 The Python code will look like this:
 ```python
@@ -53,7 +53,7 @@ has picked up):
     <figcaption>Simple bar chart</figcaption>
 </figure>
 
-### Multiple data sets {data-source="gui:doc/examples/charts/bar-multiple.py"}
+### Multiple data sets {data-source="gui:doc/examples/charts/bar_multiple.py"}
 
 Say you want to display the score of the winning side next to the
 score of the losing side.
@@ -86,7 +86,7 @@ Here is how this new data set is represented:
     <figcaption>Multiple data sets</figcaption>
 </figure>
 
-### Stacked bar chart {data-source="gui:doc/examples/charts/bar-stacked.py"}
+### Stacked bar chart {data-source="gui:doc/examples/charts/bar_stacked.py"}
 
 When different data sets are available from the same set of *x* values, it
 may be relevant to stack those values in the same bar.
@@ -117,7 +117,7 @@ Here is the resulting image:
 
 And each bar adds up to 100, as expected.
 
-### Facing bar charts {data-source="gui:doc/examples/charts/bar-facing.py"}
+### Facing bar charts {data-source="gui:doc/examples/charts/bar_facing.py"}
 
 It's sometimes helpful to display two bar charts facing each other
 so comparing data is more manageable.

docs/refmans/gui/viselements/generic/charts/basics.md_template

@@ -16,7 +16,7 @@ in different situations. It also shows basic customization hints.
 
 ## Examples
 
-### Plotting a series of values {data-source="gui:doc/examples/charts/basics-simple.py"}
+### Plotting a series of values {data-source="gui:doc/examples/charts/basics_simple.py"}
 
 Say you want to create a line chart connecting a series of values.<br/>
 The *x* values will be the index of each plotted value.
@@ -33,7 +33,7 @@ Here is how this chart is displayed:
     <figcaption>Plotting a series</figcaption>
 </figure>
 
-### Defining the range for *x* {data-source="gui:doc/examples/charts/basics-xrange.py"}
+### Defining the range for *x* {data-source="gui:doc/examples/charts/basics_xrange.py"}
 
 The example above does not explicitly define an *x* axis: we use the index of the
 *y* value in the input array.<br/>
@@ -79,7 +79,7 @@ The resulting image is the following:
 Note that the axes now have relevant names: because the series are named in
 the source data, both the *x* and *y* axes are labeled accordingly.
 
-### Decorating a chart {data-source="gui:doc/examples/charts/basics-title.py"}
+### Decorating a chart {data-source="gui:doc/examples/charts/basics_title.py"}
 
 In the first example, you may have noticed the '0' sitting under
 the *x* axis. This is the 'name' of the axis. Because we were not using
@@ -118,7 +118,7 @@ The result is the following:
     <figcaption>Title and x axis label</figcaption>
 </figure>
 
-### Adding a trace {data-source="gui:doc/examples/charts/basics-multiple.py"}
+### Adding a trace {data-source="gui:doc/examples/charts/basics_multiple.py"}
 
 You will often want to display several traces in the same chart control.
 
@@ -167,7 +167,7 @@ If you want to change the color of a trace, you can use the
 [*color*](../chart.md#p-color) property: setting *color[2]* to "red" will impact the
 color of the second trace, so it is displayed in red.
 
-### Adding a *y* axis {data-source="gui:doc/examples/charts/basics-two-y-axis.py"}
+### Adding a *y* axis {data-source="gui:doc/examples/charts/basics_two_y_axis.py"}
 
 Let us look at a situation where the two *y* series use ranges that are very
 different:
@@ -250,7 +250,7 @@ The resulting plot is far more relevant:
     <figcaption>Second <i>y</i> axis</figcaption>
 </figure>
 
-### Using a time series {data-source="gui:doc/examples/charts/basics-timeline.py"}
+### Using a time series {data-source="gui:doc/examples/charts/basics_timeline.py"}
 
 Many charts will represent data that is based on a timeline. Taipy allows you
 to define an *x* axis that represents a time range.

docs/refmans/gui/viselements/generic/charts/bubble.md_template

@@ -21,7 +21,7 @@ the data points get rendered.
 
 ## Examples
 
-### Simple bubble chart {data-source="gui:doc/examples/charts/bubble-simple.py"}
+### Simple bubble chart {data-source="gui:doc/examples/charts/bubble_simple.py"}
 
 A simple use case for bubble charts is a data set where data points have a related color,
 size, and opacity to be applied for their representation.
@@ -61,7 +61,7 @@ The result looks like this:
     <figcaption>Simple bubble chart</figcaption>
 </figure>
 
-### Setting data point symbols {data-source="gui:doc/examples/charts/bubble-symbols.py"}
+### Setting data point symbols {data-source="gui:doc/examples/charts/bubble_symbols.py"}
 
 Setting the symbol that is used for every data point is a matter of setting
 the *symbol* property of the dictionary used in the chart control's
@@ -101,7 +101,7 @@ And the resulting chart looks like this:
     <figcaption>Bubble chart symbols</figcaption>
 </figure>
 
-### Hover text {data-source="gui:doc/examples/charts/bubble-hover.py"}
+### Hover text {data-source="gui:doc/examples/charts/bubble_hover.py"}
 
 You can customize the text that would appear should the user move the pointing
 device on top of a data point symbol.<br/>

docs/refmans/gui/viselements/generic/charts/candlestick.md_template

@@ -24,7 +24,7 @@ property is set to "candlestick".
 
 ## Examples
 
-### Simple candlestick chart {data-source="gui:doc/examples/charts/candlestick-simple.py"}
+### Simple candlestick chart {data-source="gui:doc/examples/charts/candlestick_simple.py"}
 
 The following example creates a candlestick chart for the AAPL stock price. It shows all
 the relevant daily information for an entire month.
@@ -61,7 +61,7 @@ The chart is displayed like this:
     <figcaption>Simple candlestick chart</figcaption>
 </figure>
 
-### Styling candlestick charts {data-source="gui:doc/examples/charts/candlestick-styling.py"}
+### Styling candlestick charts {data-source="gui:doc/examples/charts/candlestick_styling.py"}
 
 By default, Plotly creates green candlestick bars when the value grows (when *close* is
 greater than *open*) and red candlestick bars when the value decreases.<br/>
@@ -126,7 +126,7 @@ This is what the customized candlestick chart looks like:
     <figcaption>Styling candlestick charts</figcaption>
 </figure>
 
-### Using a time series {data-source="gui:doc/examples/charts/candlestick-timeseries.py"}
+### Using a time series {data-source="gui:doc/examples/charts/candlestick_timeseries.py"}
 
 So far, the *x* values were taken from the Pandas DataFrame that was built by the
 [*yfinance*](https://pypi.org/project/yfinance/) API: the *index* of the DataFrame

docs/refmans/gui/viselements/generic/charts/continuous-error.md_template

@@ -21,7 +21,7 @@ usually displayed under the reference trace, created as a
 
 ## Examples
 
-### Simple continuous error band {data-source="gui:doc/examples/charts/continuous-error-simple.py"}
+### Simple continuous error band {data-source="gui:doc/examples/charts/continuous_error_simple.py"}
 
 Here is a complete example that demonstrates how to create a continuous
 error band.
@@ -104,7 +104,7 @@ Here is the result:
     <figcaption>Continuous Error</figcaption>
 </figure>
 
-### Multiple bands {data-source="gui:doc/examples/charts/continuous-error-multiple.py"}
+### Multiple bands {data-source="gui:doc/examples/charts/continuous_error_multiple.py"}
 
 Of course, you may need to display several traces with their related
 continuous error bands.<br/>

docs/refmans/gui/viselements/generic/charts/error-bars.md_template

@@ -22,7 +22,7 @@ for a complete description of these settings.
 
 ## Examples
 
-### Simple error bars {data-source="gui:doc/examples/charts/error-bars-simple.py"}
+### Simple error bars {data-source="gui:doc/examples/charts/error_bars_simple.py"}
 
 The example shown here creates two traces in the same chart: one is a perfect sine trace,
 and the other is the same sine trace, except that the *y* values of its data points are
@@ -77,7 +77,7 @@ Here is the result:
     <figcaption>Simple error bars</figcaption>
 </figure>
 
-### Asymmetric error bars {data-source="gui:doc/examples/charts/error-bars-asymmetric.py"}
+### Asymmetric error bars {data-source="gui:doc/examples/charts/error_bars_asymmetric.py"}
 
 The previous example uses an error range applied to every data point. The error
 bar of each data point would represent the whole error range as a segment centered on

docs/refmans/gui/viselements/generic/charts/filled-area.md_template

@@ -22,7 +22,7 @@ of the Plotly documentation
 
 ## Examples
 
-### Simple filled area chart {data-source="gui:doc/examples/charts/filled-area-simple.py"}
+### Simple filled area chart {data-source="gui:doc/examples/charts/filled_area_simple.py"}
 
 Here is how we can create a filled area chart to represent the number of items sold every
 weekday:
@@ -55,7 +55,7 @@ The resulting chart is displayed as follows:
     <figcaption>Filled area chart</figcaption>
 </figure>
 
-### Overlayed filled areas {data-source="gui:doc/examples/charts/filled-area-overlay.py"}
+### Overlayed filled areas {data-source="gui:doc/examples/charts/filled_area_overlay.py"}
 
 Suppose we want also to visualize the price of the items.<br/>
 One way of doing this could be to overlay the two traces on top of each other.
@@ -101,7 +101,7 @@ Here is what the result looks like:
     <figcaption>Overlay of Area Charts</figcaption>
 </figure>
 
-### Stacked Area Chart {data-source="gui:doc/examples/charts/filled-area-stacked.py"}
+### Stacked Area Chart {data-source="gui:doc/examples/charts/filled_area_stacked.py"}
 
 Multiple traces in a filled area chart can also be displayed as a stack of traces.
 
@@ -143,7 +143,7 @@ Here is the resulting display:
     <figcaption>Stacking areas</figcaption>
 </figure>
 
-### Normalized Stacked Area Chart {data-source="gui:doc/examples/charts/filled-area-normalized.py"}
+### Normalized Stacked Area Chart {data-source="gui:doc/examples/charts/filled_area_normalized.py"}
 
 Normalizing a stacked area chart makes it easy to visualize relative quantities
 among different data. All values for a given 'x' value are displayed as a