refactor examples and add themes example to mdbook

Signed-off-by: Andrei Gherghescu <8067229+andrei-ng@users.noreply.github.com>

Author: andrei-ng

.github/workflows/ci.yml

@@ -95,6 +95,7 @@ jobs:
           3d_charts,
           basic_charts,
           custom_controls,
+          customization,
           financial_charts,
           images,
           kaleido,
@@ -103,6 +104,7 @@ jobs:
           scientific_charts,
           shapes,
           subplots,
+          themes,
         ]
     runs-on: ubuntu-latest
     steps:
@@ -140,5 +142,6 @@ jobs:
           cd ${{ github.workspace }}/examples/3d_charts && cargo run
           cd ${{ github.workspace }}/examples/subplots && cargo run
           cd ${{ github.workspace }}/examples/shapes && cargo run
+          cd ${{ github.workspace }}/examples/themes && cargo run
       - name: Build book 
         run: mdbook build docs/book

docs/book/src/SUMMARY.md

@@ -29,3 +29,4 @@
     - [Subplots](./recipes/subplots.md)
         - [Subplots](./recipes/subplots/subplots.md)
         - [Multiple Axes](./recipes/subplots/multiple_axes.md)
+    - [Themes](./recipes/themes.md)

docs/book/src/recipes/themes.md

@@ -0,0 +1,66 @@
+# Themes
+
+The complete source code for the following examples can also be found [here](https://github.com/plotly/plotly.rs/tree/main/examples/themes).
+
+# Use different theme templates
+
+Similar to [Plotly Python templates](https://plotly.com/python/templates/), plotly.rs provides several built-in themes that can be applied to your plots.
+
+```rust,no_run
+use plotly::{
+    common::{Marker, Mode, Title},
+    layout::{Layout, BuiltinTheme},
+    Plot, Scatter,
+};
+```
+
+The `to_inline_html` method is used to produce the html plot displayed in this page.
+
+## Default Theme (Plotly)
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly.html}}
+
+## Plotly White Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly_white.html}}
+
+## Plotly Dark Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotly_dark.html}}
+
+## Seaborn Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_seaborn.html}}
+
+## Matplotlib Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_matplotlib.html}}
+
+## Plotnine Theme
+
+{{#include ../../../../examples/themes/output/inline_gapminder_plotnine.html}}
+
+## Available Themes
+
+The following built-in themes are available in plotly.rs:
+
+- `BuiltinTheme::Default` - Default Plotly theme
+- `BuiltinTheme::PlotlyWhite` - Clean white background theme
+- `BuiltinTheme::PlotlyDark` - Dark theme
+- `BuiltinTheme::Seaborn` - Seaborn-style theme
+- `BuiltinTheme::SeabornWhitegrid` - Seaborn with white grid
+- `BuiltinTheme::SeabornDark` - Dark Seaborn theme
+- `BuiltinTheme::Matplotlib` - Matplotlib-style theme
+- `BuiltinTheme::Plotnine` - Plotnine-style theme
+
+## Using Themes
+
+To apply a theme to your plot, use the `template()` method on the layout:
+
+```rust
+let theme = BuiltinTheme::Seaborn;
+let layout = Layout::new().template(theme.build());
+plot.set_layout(layout);
+```
+
+The example above uses real Gapminder 2007 data showing the relationship between GDP per capita, life expectancy, and population size across different continents, with marker sizes representing population and colors representing continents.

examples/3d_charts/Cargo.toml

@@ -8,3 +8,4 @@ edition = "2021"
 ndarray = "0.16"
 rand = "0.9"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }

examples/3d_charts/src/main.rs

@@ -7,6 +7,7 @@ use plotly::{
     layout::{Axis, Camera, Layout, LayoutScene, Legend, Margin, ProjectionType},
     Mesh3D, Plot, Scatter3D, Surface,
 };
+use plotly_utils::write_example_to_html;
 use rand::Rng;
 
 // 3D Scatter Plots
@@ -259,18 +260,6 @@ fn colorscale_plot(show: bool, file_name: &str) {
 }
 // ANCHOR_END: colorscale_plot
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
     // Scatter3D Plots

examples/Cargo.toml

@@ -1,4 +1,4 @@
 [workspace]
-members = ["*"]
+members = ["*", "plotly_utils"]
 resolver = "2"
 exclude = ["jupyter", "target", "wasm-yew"]

examples/basic_charts/Cargo.toml

@@ -7,5 +7,6 @@ edition = "2021"
 [dependencies]
 ndarray = "0.16"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }
 rand = "0.9"
 rand_distr = "0.5"

examples/basic_charts/src/main.rs

@@ -15,6 +15,7 @@ use plotly::{
     traces::table::{Cells, Header},
     Bar, Pie, Plot, Sankey, Scatter, ScatterPolar, Table,
 };
+use plotly_utils::write_example_to_html;
 use rand_distr::{Distribution, Normal, Uniform};
 
 // Scatter Plots
@@ -996,18 +997,6 @@ fn grouped_donout_pie_charts(show: bool, file_name: &str) {
 }
 // ANCHOR_END: grouped_donout_pie_charts
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.
 

examples/custom_controls/Cargo.toml

@@ -7,3 +7,4 @@ edition = "2021"
 [dependencies]
 itertools = "0.10"
 plotly = { path = "../../plotly" }
+plotly_utils = { path = "../plotly_utils" }

examples/custom_controls/src/main.rs

@@ -9,6 +9,7 @@ use plotly::{
     },
     Bar, HeatMap, Layout, Plot,
 };
+use plotly_utils::write_example_to_html;
 
 /// Display a bar chart with an associated dropdown selector to show different
 /// data.
@@ -117,18 +118,6 @@ fn bar_chart_with_modifiable_bar_mode(show: bool, file_name: &str) {
 }
 // ANCHOR_END: colorscale_plot
 
-fn write_example_to_html(plot: &Plot, name: &str) -> String {
-    std::fs::create_dir_all("./output").unwrap();
-    // Write inline HTML
-    let html = plot.to_inline_html(Some(name));
-    let path = format!("./output/inline_{}.html", name);
-    std::fs::write(path, html).unwrap();
-    // Write standalone HTML
-    let path = format!("./output/{}.html", name);
-    plot.write_html(&path);
-    path
-}
-
 fn main() {
     // Change false to true on any of these lines to display the example.