From 1951c3611e5cd21fe571a86971bfd8592b0a9e6e Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Sun, 19 May 2024 19:39:13 +0200
Subject: [PATCH] add new sortorder option

---
 .../vis-elements/BarList/BarList.tsx          | 12 ++++-----
 src/stories/vis-elements/BarList.stories.tsx  | 27 +++++++++++++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/vis-elements/BarList/BarList.tsx b/src/components/vis-elements/BarList/BarList.tsx
index 862554e79..a34a7041a 100644
--- a/src/components/vis-elements/BarList/BarList.tsx
+++ b/src/components/vis-elements/BarList/BarList.tsx
@@ -29,7 +29,7 @@ export interface BarListProps<T = any> extends React.HTMLAttributes<HTMLDivEleme
   color?: Color;
   showAnimation?: boolean;
   onValueChange?: (payload: Bar<T>) => void;
-  sortOrder?: "ascending" | "descending";
+  sortOrder?: "ascending" | "descending" | "none";
 }
 
 function BarListInner<T>(props: BarListProps<T>, ref: React.ForwardedRef<HTMLDivElement>) {
@@ -46,12 +46,12 @@ function BarListInner<T>(props: BarListProps<T>, ref: React.ForwardedRef<HTMLDiv
 
   const Component = onValueChange ? "button" : "div";
   const sortedData = React.useMemo(() => {
-    if (sortOrder) {
-      return [...data].sort((a, b) => {
-        return sortOrder === "ascending" ? a.value - b.value : b.value - a.value;
-      });
+    if (sortOrder === "none") {
+      return data;
     }
-    return data;
+    return [...data].sort((a, b) => {
+      return sortOrder === "ascending" ? a.value - b.value : b.value - a.value;
+    });
   }, [data, sortOrder]);
 
   const widths = React.useMemo(() => {
diff --git a/src/stories/vis-elements/BarList.stories.tsx b/src/stories/vis-elements/BarList.stories.tsx
index f7b06482e..b1ce912c4 100644
--- a/src/stories/vis-elements/BarList.stories.tsx
+++ b/src/stories/vis-elements/BarList.stories.tsx
@@ -24,9 +24,9 @@ const getData = (
   additionalItems: BarListProps["data"] = [],
 ) => {
   const basicData = [
-    { name: "/home", value: 100000000 },
-    { name: "/imprint", value: 351 },
+    { name: "/home", value: 10000 },
     { name: "/cancellation", value: 271 },
+    { name: "/imprint", value: 3351 },
     {
       name: `/special-offer-august-getsahdkjhagskdfjhgakshjgdfkjahsgdfjkgasdjkhfgajkshgdfjkhagsdkjhfgajhksdgfjkhasdg
           fjkhagsdjhkgfasjkdgfjkasdhgkjgfdsk`,
@@ -92,3 +92,26 @@ export const WithOnValueChange: Story = {
     onValueChange: (data) => alert(JSON.stringify(data)),
   },
 };
+
+export const SortOrderDescending: Story = {
+  render: (args) => <BarList {...args} />,
+  args: {
+    data: getData(),
+  },
+};
+
+export const SortOrderAscending: Story = {
+  render: (args) => <BarList {...args} />,
+  args: {
+    data: getData(),
+    sortOrder: "ascending",
+  },
+};
+
+export const SortOrderNone: Story = {
+  render: (args) => <BarList {...args} />,
+  args: {
+    data: getData(),
+    sortOrder: "none",
+  },
+};