Skip to content

Fix book chart rendering for basic charts #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 23, 2024
Merged

Fix book chart rendering for basic charts #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fbccd67
Update basic charts to reference code and renders directly from examples
Nick-Pearson Nov 17, 2024
40ff630
Add a github action to build and deploy the book
Nick-Pearson Nov 19, 2024
c36133b
fix fmt
Nick-Pearson Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions .github/workflows/book.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
name: Book

on:
workflow_dispatch:
push:
tags:
- '[0-9]+.[0-9]+.[0-9]+'

env:
RUST_BACKTRACE: full

jobs:
build:
name: Build and deploy book
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: cargo install mdbook
- name: Build examples
run: cd ${{ github.workspace }}/examples/basic_charts && cargo run
- run: mdbook build docs/book
- name: Checkout gh-pages branch
run: |
git fetch origin gh-pages:gh-pages
git checkout gh-pages
- name: Overwrite book content
run: |
rm -rf content
cp -r gh-pages/content .
- name: Deploy to GitHub Pages
run: |
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'

git add content
git commit --allow-empty -m 'Deploy to GitHub Pages'
git push origin gh-pages
1 change: 1 addition & 0 deletions docs/book/book.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ src = "src"
[build]
build-dir = "../../gh-pages/content"
create-missing = false
extra-watch-dirs = ["../../examples"]

[output.html]
default-theme = "Ayu"
Expand Down
103 changes: 13 additions & 90 deletions docs/book/src/recipes/basic_charts/bar_charts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

The following imports have been used to produce the plots below:

```rust
use itertools_num::linspace;
```rust,no_run
use ndarray::Array;
use plotly::common::{
ColorScale, ColorScalePalette, DashType, Fill, Font, Line, LineShape, Marker, Mode, Title,
};
Expand All @@ -16,99 +16,22 @@ The `to_inline_html` method is used to produce the html plot displayed in this p


## Basic Bar Chart
```rust
fn basic_bar_chart(show: bool) {
let animals = vec!["giraffes", "orangutans", "monkeys"];
let t = Bar::new(animals, vec![20, 14, 23]);
let mut plot = Plot::new();
plot.add_trace(t);
if show {
plot.show();
}
println!("{}", plot.to_inline_html(Some("basic_bar_chart")));
}

```rust,no_run
{{#include ../../../../../examples/basic_charts/src/main.rs:basic_bar_chart}}
```
<div id="basic_bar_chart" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {};
if (document.getElementById("basic_bar_chart")) {
var d3 = Plotly.d3;
var image_element= d3.select('#image-export');
var trace_0 = {"x":["giraffes","orangutans","monkeys"],"y":[20,14,23],"type":"bar"};
var data = [trace_0];
var layout = {};
Plotly.newPlot('basic_bar_chart', data, layout, {"responsive": true});
};
</script>

## Grouped Bar Chart
```rust
fn grouped_bar_chart(show: bool) {
let animals1 = vec!["giraffes", "orangutans", "monkeys"];
let trace1 = Bar::new(animals1, vec![20, 14, 23]).name("SF Zoo");

let animals2 = vec!["giraffes", "orangutans", "monkeys"];
let trace2 = Bar::new(animals2, vec![12, 18, 29]).name("LA Zoo");
{{#include ../../../../../examples/basic_charts/out/basic_bar_chart.html}}

let layout = Layout::new().bar_mode(BarMode::Group);

let mut plot = Plot::new();
plot.add_trace(trace1);
plot.add_trace(trace2);
plot.set_layout(layout);
if show {
plot.show();
}
println!("{}", plot.to_inline_html(Some("grouped_bar_chart")));
}
## Grouped Bar Chart
```rust,no_run
{{#include ../../../../../examples/basic_charts/src/main.rs:grouped_bar_chart}}
```
<div id="grouped_bar_chart" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {};
if (document.getElementById("grouped_bar_chart")) {
var d3 = Plotly.d3;
var image_element= d3.select('#image-export');
var trace_0 = {"x":["giraffes","orangutans","monkeys"],"y":[20,14,23],"type":"bar","name":"SF Zoo"};
var trace_1 = {"x":["giraffes","orangutans","monkeys"],"y":[12,18,29],"type":"bar","name":"LA Zoo"};
var data = [trace_0,trace_1];
var layout = {"barmode":"group"};
Plotly.newPlot('grouped_bar_chart', data, layout, {"responsive": true});
};
</script>

{{#include ../../../../../examples/basic_charts/out/grouped_bar_chart.html}}

## Stacked Bar Chart
```rust
fn stacked_bar_chart(show: bool) {
let animals1 = vec!["giraffes", "orangutans", "monkeys"];
let trace1 = Bar::new(animals1, vec![20, 14, 23]).name("SF Zoo");

let animals2 = vec!["giraffes", "orangutans", "monkeys"];
let trace2 = Bar::new(animals2, vec![12, 18, 29]).name("LA Zoo");

let layout = Layout::new().bar_mode(BarMode::Stack);

let mut plot = Plot::new();
plot.add_trace(trace1);
plot.add_trace(trace2);
plot.set_layout(layout);
if show {
plot.show();
}
println!("{}", plot.to_inline_html(Some("stacked_bar_chart")));
}
```rust,no_run
{{#include ../../../../../examples/basic_charts/src/main.rs:stacked_bar_chart}}
```
<div id="stacked_bar_chart" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {};
if (document.getElementById("stacked_bar_chart")) {
var d3 = Plotly.d3;
var image_element= d3.select('#image-export');
var trace_0 = {"x":["giraffes","orangutans","monkeys"],"y":[20,14,23],"type":"bar","name":"SF Zoo"};
var trace_1 = {"x":["giraffes","orangutans","monkeys"],"y":[12,18,29],"type":"bar","name":"LA Zoo"};
var data = [trace_0,trace_1];
var layout = {"barmode":"stack"};
Plotly.newPlot('stacked_bar_chart', data, layout, {"responsive": true});
};
</script>

{{#include ../../../../../examples/basic_charts/out/stacked_bar_chart.html}}
Loading
Loading