chore:little fixes and formating and linting and patches

apps/start/src/components/overview/overview-line-chart.tsx

@@ -1,6 +1,4 @@
-import { useNumber } from '@/hooks/use-numer-formatter';
-import { cn } from '@/utils/cn';
-import { getChartColor } from '@/utils/theme';
+import type { IInterval } from '@openpanel/validation';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   CartesianGrid,
@@ -11,12 +9,13 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-
-import type { RouterOutputs } from '@/trpc/client';
-import type { IInterval } from '@openpanel/validation';
 import { useXAxisProps, useYAxisProps } from '../report-chart/common/axis';
 import { SerieIcon } from '../report-chart/common/serie-icon';
 import { OverviewLineChartTooltip } from './overview-line-chart-tooltip';
+import { useNumber } from '@/hooks/use-numer-formatter';
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';
 
 type SeriesData =
   RouterOutputs['overview']['topGenericSeries']['items'][number];
@@ -30,7 +29,7 @@ interface OverviewLineChartProps {
 
 function transformDataForRecharts(
   items: SeriesData[],
-  searchQuery?: string,
+  searchQuery?: string
 ): Array<{
   date: string;
   timestamp: number;
@@ -108,7 +107,7 @@ export function OverviewLineChart({
 
   const chartData = useMemo(
     () => transformDataForRecharts(data.items, searchQuery),
-    [data.items, searchQuery],
+    [data.items, searchQuery]
   );
 
   const visibleItems = useMemo(() => {
@@ -130,7 +129,7 @@ export function OverviewLineChart({
   if (visibleItems.length === 0) {
     return (
       <div
-        className={cn('flex items-center justify-center h-[358px]', className)}
+        className={cn('flex h-[358px] items-center justify-center', className)}
       >
         <div className="text-muted-foreground text-sm">
           {searchQuery ? 'No results found' : 'No data available'}
@@ -146,10 +145,10 @@ export function OverviewLineChart({
           <ResponsiveContainer>
             <LineChart data={chartData}>
               <CartesianGrid
-                strokeDasharray="3 3"
-                horizontal={true}
-                vertical={false}
                 className="stroke-border"
+                horizontal={true}
+                strokeDasharray="3 3"
+                vertical={false}
               />
               <XAxis {...xAxisProps} />
               <YAxis {...yAxisProps} />
@@ -162,13 +161,13 @@ export function OverviewLineChart({
                   : item.name;
                 return (
                   <Line
-                    key={key}
-                    type="monotone"
                     dataKey={`${key}:sessions`}
-                    stroke={color}
-                    strokeWidth={2}
                     dot={false}
                     isAnimationActive={false}
+                    key={key}
+                    stroke={color}
+                    strokeWidth={2}
+                    type="monotone"
                   />
                 );
               })}
@@ -183,31 +182,31 @@ export function OverviewLineChart({
   );
 }
 
-function LegendScrollable({
-  items,
-}: {
-  items: SeriesData[];
-}) {
+function LegendScrollable({ items }: { items: SeriesData[] }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [showLeftGradient, setShowLeftGradient] = useState(false);
   const [showRightGradient, setShowRightGradient] = useState(false);
 
   const updateGradients = useCallback(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
 
     const { scrollLeft, scrollWidth, clientWidth } = el;
     const hasOverflow = scrollWidth > clientWidth;
 
     setShowLeftGradient(hasOverflow && scrollLeft > 0);
     setShowRightGradient(
-      hasOverflow && scrollLeft < scrollWidth - clientWidth - 1,
+      hasOverflow && scrollLeft < scrollWidth - clientWidth - 1
     );
   }, []);
 
   useEffect(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      return;
+    }
 
     updateGradients();
 
@@ -230,15 +229,15 @@ function LegendScrollable({
       {/* Left gradient */}
       <div
         className={cn(
-          'pointer-events-none absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-card to-transparent transition-opacity duration-200',
-          showLeftGradient ? 'opacity-100' : 'opacity-0',
+          'pointer-events-none absolute top-0 left-0 z-10 h-full w-8 bg-gradient-to-r from-card to-transparent transition-opacity duration-200',
+          showLeftGradient ? 'opacity-100' : 'opacity-0'
         )}
       />
 
       {/* Scrollable legend */}
       <div
+        className="hide-scrollbar flex gap-x-4 gap-y-1 overflow-x-auto px-2 py-1 text-xs"
         ref={scrollRef}
-        className="flex gap-x-4 gap-y-1 overflow-x-auto px-2 py-1 hide-scrollbar text-xs"
       >
         {items.map((item, index) => {
           const color = getChartColor(index);
@@ -249,7 +248,7 @@ function LegendScrollable({
               style={{ color }}
             >
               <SerieIcon name={item.prefix || item.name} />
-              <span className="font-semibold whitespace-nowrap">
+              <span className="whitespace-nowrap font-semibold">
                 {item.prefix && (
                   <>
                     <span className="text-muted-foreground">{item.prefix}</span>
@@ -266,8 +265,8 @@ function LegendScrollable({
       {/* Right gradient */}
       <div
         className={cn(
-          'pointer-events-none absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-card to-transparent transition-opacity duration-200',
-          showRightGradient ? 'opacity-100' : 'opacity-0',
+          'pointer-events-none absolute top-0 right-0 z-10 h-full w-8 bg-gradient-to-l from-card to-transparent transition-opacity duration-200',
+          showRightGradient ? 'opacity-100' : 'opacity-0'
         )}
       />
     </div>
@@ -281,21 +280,17 @@ export function OverviewLineChartLoading({
 }) {
   return (
     <div
-      className={cn('flex items-center justify-center h-[358px]', className)}
+      className={cn('flex h-[358px] items-center justify-center', className)}
     >
       <div className="text-muted-foreground text-sm">Loading...</div>
     </div>
   );
 }
 
-export function OverviewLineChartEmpty({
-  className,
-}: {
-  className?: string;
-}) {
+export function OverviewLineChartEmpty({ className }: { className?: string }) {
   return (
     <div
-      className={cn('flex items-center justify-center h-[358px]', className)}
+      className={cn('flex h-[358px] items-center justify-center', className)}
     >
       <div className="text-muted-foreground text-sm">No data available</div>
     </div>