Merge pull request #4165 from plotly/update-plotlyjs-docs

Update plotlyjs version to 2.22.0 and update docs

Author: LiamConnors

doc/python/legend.md

@@ -6,7 +6,7 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.1
+      jupytext_version: 1.14.5
   kernelspec:
     display_name: Python 3 (ipykernel)
     language: python
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.8.0
+    version: 3.8.8
   plotly:
     description: How to configure and style the legend in Plotly with Python.
     display_as: file_settings
@@ -574,6 +574,70 @@ fig.update_layout(width=600, title_text='Exploration of a vector field using sev
 fig.show()
 ```
 
+### Adding Multiple Legends
+
+*New in 5.15*
+
+By default, all traces appear on one legend. To have multiple legends, specify an alternative legend for a trace using the `legend` property. For a second legend, set `legend="legend2"`. Specify more legends with `legend="legend3"`, `legend="legend4"` and so on.
+
+In this example, the last two scatter traces display on the second legend, "legend2". On the figure's layout, we then position and style this legend to display on the right of the graph below the first legend.
+
+
+```python
+import plotly.graph_objects as go
+from plotly import data
+
+df = data.gapminder()
+
+df_germany = df.loc[(df.country.isin(["Germany"]))]
+df_france = df.loc[(df.country.isin(["France"]))]
+df_uk = df.loc[(df.country.isin(["United Kingdom"]))]
+
+
+df_averages_europe = (
+    df.loc[(df.continent.isin(["Europe"]))].groupby(by="year").mean(numeric_only=True)
+)
+df_averages_americas = (
+    df.loc[(df.continent.isin(["Americas"]))].groupby(by="year").mean(numeric_only=True)
+)
+
+
+fig = go.Figure(
+    data=[
+        go.Scatter(x=df_germany.year, y=df_germany.gdpPercap, name="Germany"),
+        go.Scatter(x=df_france.year, y=df_france.gdpPercap, name="France"),
+        go.Scatter(x=df_uk.year, y=df_uk.gdpPercap, name="UK"),
+        go.Scatter(
+            x=df_averages_europe.index,
+            y=df_averages_europe.gdpPercap,
+            name="Europe",
+            legend="legend2",
+        ),
+        go.Scatter(
+            x=df_averages_americas.index,
+            y=df_averages_americas.gdpPercap,
+            name="Americas",
+            legend="legend2",
+        ),
+    ],
+    layout=dict(
+        title="GDP Per Capita",
+        legend={"title": "By country", "bgcolor": "Orange",},
+        legend2={
+            "x": 1.155,
+            "y": 0.55,
+            "xanchor": "right",
+            "yanchor": "middle",
+            "bgcolor": "Gold",
+            "title": {"text": "By continent"},
+        },
+    ),
+)
+
+fig.show()
+
+```
+
 #### Reference
 
 See https://plotly.com/python/reference/layout/#layout-legend for more information!

doc/python/shapes.md

@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.10.9
+    version: 3.8.8
   plotly:
     description: How to make SVG shapes in python. Examples of lines, circle, rectangle,
       and path.
@@ -913,5 +913,91 @@ fig.add_shape(
 fig.show()
 ```
 
+#### Variables in Shape Label Text
+
+*New in 5.15*
+
+Use `texttemplate` to add text with variables to shapes. `texttemplate` uses d3 number and date formatting and supports raw variables, which use the raw data from the shape definition, and some calculated variables. Add a variable with "%{variable}".
+
+This example adds the raw variables `x0` and `y0` to a rectangle and shows the calculated variables `height`, `slope`, and `width` on three other shapes. 
+
+For a complete list of available variables, see the [Shape Reference Docs](https://plotly.com/python/reference/layout/shapes/).
+
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure()
+
+fig.add_shape(
+    type="rect",
+    fillcolor="MediumSlateBlue",
+    x0=-0.5,
+    y0=-0.5,
+    x1=1,
+    y1=1,
+    label=dict(
+        texttemplate="x0 is %{x0:.3f}, y0 is %{y0:.3f}", font=dict(color="DarkOrange")
+    ),
+)
+
+fig.add_shape(
+    type="rect",
+    fillcolor="LightGreen",
+    x0=1,
+    y0=1.75,
+    x1=2.25,
+    y1=3,
+    label=dict(texttemplate="Height: %{height:.3f}", font=dict(color="DarkOrange")),
+)
+fig.add_shape(
+    type="line",
+    x0=3,
+    y0=0.5,
+    x1=5,
+    y1=0.8,
+    line_width=3,
+    label=dict(texttemplate="Slope: %{slope:.3f}", font=dict(size=20)),
+)
+fig.add_shape(
+    type="rect",
+    fillcolor="Lavender",
+    x0=2.5,
+    y0=2.5,
+    x1=5,
+    y1=3.5,
+    label=dict(
+        texttemplate="Width: %{width:.3f}",
+        font=dict(family="Courier New, monospace", size=20),
+    ),
+)
+
+fig.show()
+
+```
+
+#### Variables in Shape Label Text for New Shapes
+
+*New in 5.15*
+
+Use `texttemplate` to add text with variables to new shapes drawn on the graph. This example figure is configured to allow the user to draw lines and automatically labels each line with its slope. Select **Draw line** in the modebar to try it out.
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    layout=go.Layout(newshape=dict(label=dict(texttemplate="Slope: %{slope:.3f}")))
+)
+
+fig.show(
+    config={
+        "modeBarButtonsToAdd": [
+            "drawline",
+        ]
+    }
+)
+
+```
+
 ### Reference
 See https://plotly.com/python/reference/layout/shapes/ for more information and chart attribute options!

packages/javascript/jupyterlab-plotly/package-lock.json

@@ -65,7 +65,7 @@
     "@lumino/messaging": "^1.2.3",
     "@lumino/widgets": "^1.8.1",
     "lodash": "^4.17.4",
-    "plotly.js": "^2.20.0"
+    "plotly.js": "^2.22.0"
   },
   "jupyterlab": {
     "extension": "lib/jupyterlab-plugin",