Add sort to bar plot (#5427)

* Add sort to bar plot

* remove reverse parameter from barplot class

* add changeset

* Rename sort_by to sort in BarPlot class

* Add test

---------

Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/bumpy-walls-watch.md

@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Add sort to bar plot

gradio/components/bar_plot.py

@@ -68,6 +68,7 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
+        sort: Literal["x", "y", "-x", "-y"] | None = None,
     ):
         """
         Parameters:
@@ -97,6 +98,7 @@ def __init__(
             visible: Whether the plot should be visible.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            sort: Specifies the sorting axis as either "x", "y", "-x" or "-y". If None, no sorting is applied.
         """
         self.x = x
         self.y = y
@@ -118,6 +120,7 @@ def __init__(
         self.interactive_chart = interactive
         self.width = width
         self.height = height
+        self.sort = sort
         super().__init__(
             value=value,
             label=label,
@@ -178,6 +181,7 @@ def update(
         scale: int | None = None,
         min_width: int | None = None,
         visible: bool | None = None,
+        sort: Literal["x", "y", "-x", "-y"] | None = None,
     ):
         """Update an existing BarPlot component.
 
@@ -207,6 +211,7 @@ def update(
             label: The (optional) label to display on the top left corner of the plot.
             show_label: Whether the label should be displayed.
             visible: Whether the plot should be visible.
+            sort: Specifies the sorting axis as either "x", "y", "-x" or "-y". If None, no sorting is applied.
         """
         properties = [
             x,
@@ -227,6 +232,7 @@ def update(
             width,
             y_lim,
             interactive,
+            sort,
         ]
         if any(properties):
             if not isinstance(value, pd.DataFrame):
@@ -289,6 +295,7 @@ def create_plot(
         width: int | None = None,
         y_lim: list[int] | None = None,
         interactive: bool | None = True,
+        sort: Literal["x", "y", "-x", "-y"] | None = None,
     ):
         """Helper for creating the bar plot."""
         interactive = True if interactive is None else interactive
@@ -322,6 +329,7 @@ def create_plot(
                 axis=alt.Axis(labelAngle=x_label_angle)
                 if x_label_angle is not None
                 else alt.Axis(),
+                sort=sort if vertical and sort is not None else None,
             ),
             y=alt.Y(
                 y,  # type: ignore
@@ -330,6 +338,7 @@ def create_plot(
                 axis=alt.Axis(labelAngle=x_label_angle)
                 if x_label_angle is not None
                 else alt.Axis(),
+                sort=sort if not vertical and sort is not None else None,
             ),
             **orientation,
         )
@@ -393,6 +402,7 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None:
             interactive=self.interactive_chart,
             height=self.height,
             width=self.width,
+            sort=self.sort,  # type: ignore
         )
 
         return {"type": "altair", "plot": chart.to_json(), "chart": "bar"}

test/test_components.py

@@ -2738,11 +2738,13 @@ def test_no_color(self):
             tooltip=["a", "b"],
             title="Made Up Bar Plot",
             x_title="Variable A",
+            sort="x",
         )
         output = plot.postprocess(simple)
         assert sorted(output.keys()) == ["chart", "plot", "type"]
         assert output["chart"] == "bar"
         config = json.loads(output["plot"])
+        assert config["encoding"]["x"]["sort"] == "x"
         assert config["encoding"]["x"]["field"] == "a"
         assert config["encoding"]["x"]["title"] == "Variable A"
         assert config["encoding"]["y"]["field"] == "b"