feat: Legend scroll

src/assets/ChevronLeftFill.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ChevronLeftFill = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M8 12L14 6V18L8 12Z"></path>
+  </svg>
+);
+
+export default ChevronLeftFill;

src/assets/ChevronRightFill.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ChevronRightFill = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M16 12L10 18V6L16 12Z"></path>
+  </svg>
+);
+
+export default ChevronRightFill;

src/assets/index.ts

@@ -14,7 +14,9 @@ export { default as ExclamationFilledIcon } from "./ExclamationFilledIcon";
 export { default as EyeIcon } from "./EyeIcon";
 export { default as EyeOffIcon } from "./EyeOffIcon";
 export { default as LoadingSpinner } from "./LoadingSpinner";
-export { default as MinusIcon } from "./MinusIcon";
-export { default as PlusIcon } from "./PlusIcon";
 export { default as SearchIcon } from "./SearchIcon";
 export { default as XCircleIcon } from "./XCircleIcon";
+export { default as PlusIcon } from "./PlusIcon";
+export { default as MinusIcon } from "./MinusIcon";
+export { default as ChevronLeftFill } from "./ChevronLeftFill";
+export { default as ChevronRightFill } from "./ChevronRightFill";

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -73,6 +73,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     noDataText,
     className,
     onValueChange,
+    enableLegendSlider = false,
     customTooltip,
     ...other
   } = props;
@@ -144,6 +145,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                   }
                 : undefined
             }
+            margin={{ left: 20, right: 20 }}
           >
             {showGridLines ? (
               <CartesianGrid
@@ -245,6 +247,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                     hasOnValueChange
                       ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)
                       : undefined,
+                    enableLegendSlider,
                   )
                 }
               />

src/components/chart-elements/BarChart/BarChart.tsx

@@ -76,6 +76,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     onValueChange,
     customTooltip,
     className,
+    enableLegendSlider = false,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -139,6 +140,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                   }
                 : undefined
             }
+            margin={{ left: 20, right: 20 }}
           >
             {showGridLines ? (
               <CartesianGrid
@@ -290,6 +292,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                     hasOnValueChange
                       ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)
                       : undefined,
+                    enableLegendSlider,
                   )
                 }
               />

src/components/chart-elements/LineChart/LineChart.tsx

@@ -69,6 +69,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     noDataText,
     className,
     onValueChange,
+    enableLegendSlider = false,
     customTooltip,
     ...other
   } = props;
@@ -141,6 +142,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                   }
                 : undefined
             }
+            margin={{ left: 20, right: 20 }}
           >
             {showGridLines ? (
               <CartesianGrid
@@ -243,6 +245,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                     hasOnValueChange
                       ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)
                       : undefined,
+                    enableLegendSlider,
                   )
                 }
               />

src/components/chart-elements/ScatterChart/ScatterChart.tsx

@@ -71,6 +71,7 @@ export interface ScatterChartProps
   maxYValue?: number;
   allowDecimals?: boolean;
   noDataText?: string;
+  enableLegendSlider?: boolean;
   onValueChange?: (value: EventProps) => void;
   customTooltip?: React.ComponentType<CustomTooltipType>;
 }
@@ -130,6 +131,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     onValueChange,
     customTooltip,
     className,
+    enableLegendSlider = false,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -338,6 +340,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                     hasOnValueChange
                       ? (clickedLegendItem: string) => onCategoryClick(clickedLegendItem)
                       : undefined,
+                    enableLegendSlider,
                   )
                 }
               />

src/components/chart-elements/common/BaseChartProps.tsx

@@ -34,6 +34,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   allowDecimals?: boolean;
   noDataText?: string;
   onValueChange?: (value: EventProps) => void;
+  enableLegendSlider?: boolean;
   customTooltip?: React.ComponentType<CustomTooltipType>;
 }
 

src/components/chart-elements/common/ChartLegend.tsx

@@ -11,6 +11,7 @@ const ChartLegend = (
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: Color) => void,
+  enableLegendSlider?: boolean,
 ) => {
   const legendRef = useRef<HTMLDivElement>(null);
 
@@ -31,6 +32,7 @@ const ChartLegend = (
         colors={filteredPayload.map((entry: any) => categoryColors.get(entry.value))}
         onClickLegendItem={onClick}
         activeLegend={activeLegend}
+        enableLegendSlider={enableLegendSlider}
       />
     </div>
   );

src/components/input-elements/Switch/Switch.tsx

@@ -97,7 +97,6 @@ const Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {
                     "translate-x-5 border-white",
                   )
                 : "translate-x-0 bg-tremor-border dark:bg-dark-tremor-border border-white",
-
               "pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-tremor-full border-2 shadow-tremor-input duration-100 ease-in-out transition",
               isFocused ? tremorTwMerge("ring-2 ring-blue-200") : "",
             )}