Merge pull request #4542 from plotly/plotly-js-2-30-0

Update plotly js to 2.30.0

Author: LiamConnors

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/[email protected].6
+  browser-tools: circleci/[email protected].8
 
 commands:
   test_core:

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## UNRELEASED
+
+### Updated
+- Updated Plotly.js from version 2.29.1 to version 2.30.0. See the [plotly.js CHANGELOG](https://github.com/plotly/plotly.js/blob/master/CHANGELOG.md#2300----2024-03-06) for more information. These changes are reflected in the auto-generated `plotly.graph_objects` module. Notable changes include:
+  - Add fill gradients for scatter traces [[#6905](https://github.com/plotly/plotly.js/pull/6905)], with thanks to @lumip for the contribution!
+  - Add `indentation` to legend [[#6874](https://github.com/plotly/plotly.js/pull/6874)], with thanks to @my-tien for the contribution!
+
+
 ## [5.19.0] - 2024-02-15
 
 ### Updated

doc/python/filled-area-plots.md

@@ -6,9 +6,9 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.1
+      jupytext_version: 1.16.1
   kernelspec:
-    display_name: Python 3
+    display_name: Python 3 (ipykernel)
     language: python
     name: python3
   language_info:
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.8.8
+    version: 3.10.11
   plotly:
     description: How to make filled area plots in Python with Plotly.
     display_as: basic
@@ -80,13 +80,11 @@ fig = px.area(df, x="medal", y="count", color="nation",
 fig.show()
 ```
 
-<!-- #region tags=[] -->
 ### Filled area chart with plotly.graph_objects
 
 #### Basic Overlaid Area Chart
-<!-- #endregion -->
 
-```python tags=[]
+```python
 import plotly.graph_objects as go
 
 fig = go.Figure()
@@ -131,6 +129,44 @@ fig.add_trace(go.Scatter(
 fig.show()
 ```
 
+#### Gradient Fill
+
+*New in 5.20*
+
+Scatter traces with a fill support a `fillgradient`, which is a `dict` of options that defines the gradient. Use `fillgradient.colorscale` to define the [colorscale](https://plotly.com/python/colorscales) for the gradient and choose a `type` to define the orientation of the gradient (`'horizontal'`, `'vertical'` or `'radial'`). 
+
+In the following example, we've defined a `horizontal` `fillgradient` with a colorscale of three colors. 
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    [
+        go.Scatter(
+            x=[1, 2, 3, 4],
+            y=[3, 4, 8, 3],
+            fill=None,
+            mode="lines",
+            line_color="darkblue",
+        ),
+        go.Scatter(
+            x=[1, 2, 3, 4],
+            y=[1, 6, 2, 6],
+            fill="tonexty",
+            mode="lines",
+            line_color="darkblue",
+            fillgradient=dict(
+                type="horizontal",
+                colorscale=[(0.0, "darkblue"), (0.5, "royalblue"), (1.0, "cyan")],
+            ),
+        ),
+    ]
+)
+
+fig.show()
+
+```
+
 #### Stacked Area Chart
 
 The `stackgroup` parameter is used to add the `y` values of the different traces in the same group. Traces in the same group fill up to the next trace of the group.

doc/python/legend.md

@@ -6,7 +6,7 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.7
+      jupytext_version: 1.16.1
   kernelspec:
     display_name: Python 3 (ipykernel)
     language: python
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.10.4
+    version: 3.10.11
   plotly:
     description: How to configure and style the legend in Plotly with Python.
     display_as: file_settings
@@ -546,6 +546,40 @@ fig.update_layout(title="Try Clicking on the Legend Items!")
 fig.show()
 ```
 
+#### Indent Legend Entries
+
+*New in 5.20*
+
+To indent legend entries, set `indenation` on `layout.legend` to a number of pixels. In the following example, we indent legend entries by 10 pixels. 
+
+```python
+import plotly.graph_objects as go
+from plotly import data
+
+df = data.iris()
+
+fig = go.Figure(
+    [
+        go.Scatter(
+            x=df[df["species"] == species]["sepal_width"],
+            y=df[df["species"] == species]["sepal_length"],
+            mode="markers",
+            name=species,
+        )
+        for species in df["species"].unique()
+    ],
+    layout=dict(
+        legend=dict(
+            title="Species",
+            indentation=10
+        )
+    ),
+)
+
+
+fig.show()
+```
+
 #### Group click toggle behavior
 
 *New in v5.3*

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.29.1"
+    "plotly.js": "^2.30.0"
   },
   "jupyterlab": {
     "extension": "lib/jupyterlab-plugin",

packages/javascript/jupyterlab-plotly/package.json

@@ -2848,6 +2848,13 @@
       "valType": "number"
      }
     },
+    "indentation": {
+     "description": "Sets the indentation (in px) of the legend entries.",
+     "dflt": 0,
+     "editType": "legend",
+     "min": -15,
+     "valType": "number"
+    },
     "itemclick": {
      "description": "Determines the behavior on legend item click. *toggle* toggles the visibility of the item clicked on the graph. *toggleothers* makes the clicked item the sole visible item on the graph. *false* disables legend item click interactions.",
      "dflt": "toggle",
@@ -45035,10 +45042,42 @@
     },
     "fillcolor": {
      "anim": true,
-     "description": "Sets the fill color. Defaults to a half-transparent variant of the line color, marker color, or marker line color, whichever is available.",
+     "description": "Sets the fill color. Defaults to a half-transparent variant of the line color, marker color, or marker line color, whichever is available. If fillgradient is specified, fillcolor is ignored except for setting the background color of the hover label, if any.",
      "editType": "style",
      "valType": "color"
     },
+    "fillgradient": {
+     "colorscale": {
+      "description": "Sets the fill gradient colors as a color scale. The color scale is interpreted as a gradient applied in the direction specified by *orientation*, from the lowest to the highest value of the scatter plot along that axis, or from the center to the most distant point from it, if orientation is *radial*.",
+      "editType": "style",
+      "valType": "colorscale"
+     },
+     "description": "Sets a fill gradient. If not specified, the fillcolor is used instead.",
+     "editType": "calc",
+     "role": "object",
+     "start": {
+      "description": "Sets the gradient start value. It is given as the absolute position on the axis determined by the orientiation. E.g., if orientation is *horizontal*, the gradient will be horizontal and start from the x-position given by start. If omitted, the gradient starts at the lowest value of the trace along the respective axis. Ignored if orientation is *radial*.",
+      "editType": "calc",
+      "valType": "number"
+     },
+     "stop": {
+      "description": "Sets the gradient end value. It is given as the absolute position on the axis determined by the orientiation. E.g., if orientation is *horizontal*, the gradient will be horizontal and end at the x-position given by end. If omitted, the gradient ends at the highest value of the trace along the respective axis. Ignored if orientation is *radial*.",
+      "editType": "calc",
+      "valType": "number"
+     },
+     "type": {
+      "description": "Sets the type/orientation of the color gradient for the fill. Defaults to *none*.",
+      "dflt": "none",
+      "editType": "calc",
+      "valType": "enumerated",
+      "values": [
+       "radial",
+       "horizontal",
+       "vertical",
+       "none"
+      ]
+     }
+    },
     "fillpattern": {
      "bgcolor": {
       "arrayOk": true,

packages/python/plotly/codegen/resources/plot-schema.json

@@ -13179,6 +13179,7 @@ def add_scatter(
         error_y=None,
         fill=None,
         fillcolor=None,
+        fillgradient=None,
         fillpattern=None,
         groupnorm=None,
         hoverinfo=None,
@@ -13315,7 +13316,12 @@ def add_scatter(
         fillcolor
             Sets the fill color. Defaults to a half-transparent
             variant of the line color, marker color, or marker line
-            color, whichever is available.
+            color, whichever is available. If fillgradient is
+            specified, fillcolor is ignored except for setting the
+            background color of the hover label, if any.
+        fillgradient
+            Sets a fill gradient. If not specified, the fillcolor
+            is used instead.
         fillpattern
             Sets the pattern within the marker.
         groupnorm
@@ -13705,6 +13711,7 @@ def add_scatter(
             error_y=error_y,
             fill=fill,
             fillcolor=fillcolor,
+            fillgradient=fillgradient,
             fillpattern=fillpattern,
             groupnorm=groupnorm,
             hoverinfo=hoverinfo,