feat: add new sortorder option (#1048)

Author: severinlandolt

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(() => {

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",
+  },
+};