Merge pull request #3056 from danswer-ai/form_stretch

Improve form

web/src/app/ee/admin/performance/usage/DanswerBotChart.tsx

@@ -58,9 +58,6 @@ export function DanswerBotChart({
         categories={["Total Queries", "Automatically Resolved"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
-        }
         yAxisWidth={60}
       />
     );

web/src/app/ee/admin/performance/usage/FeedbackChart.tsx

@@ -56,9 +56,6 @@ export function FeedbackChart({
         categories={["Positive Feedback", "Negative Feedback"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
-        }
         yAxisWidth={60}
       />
     );

web/src/app/ee/admin/performance/usage/QueryPerformanceChart.tsx

@@ -74,10 +74,21 @@ export function QueryPerformanceChart({
         categories={["Queries", "Unique Users"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
+        yAxisFormatter={(number: number) =>
+          new Intl.NumberFormat("en-US", {
+            notation: "standard",
+            maximumFractionDigits: 0,
+          }).format(number)
         }
+        xAxisFormatter={(dateStr: string) => {
+          const date = new Date(dateStr);
+          return date.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+          });
+        }}
         yAxisWidth={60}
+        allowDecimals={false}
       />
     );
   }

web/src/components/admin/CardSection.tsx

@@ -11,7 +11,7 @@ export default function CardSection({
   return (
     <div
       className={cn(
-        "p-6  shadow-sm rounded-lg bg-white border border-border-strong/80",
+        "p-6 shadow-sm rounded-lg bg-white border border-border-strong/80",
         className
       )}
     >

web/src/components/admin/connectors/Field.tsx

@@ -635,22 +635,20 @@ export function SelectorFormField({
               className={maxHeight ? `max-h-[${maxHeight}]` : undefined}
               container={container}
             >
-              {options.length == 0 && (
+              {options.length === 0 ? (
                 <SelectItem value="default">Select...</SelectItem>
+              ) : (
+                options.map((option) => (
+                  <SelectItem
+                    icon={option.icon}
+                    key={option.value}
+                    value={String(option.value)}
+                    selected={field.value === option.value}
+                  >
+                    {option.name}
+                  </SelectItem>
+                ))
               )}
-              {defaultValue && (
-                <SelectItem value={defaultValue}>{defaultValue}</SelectItem>
-              )}
-              {options.map((option) => (
-                <SelectItem
-                  icon={option.icon}
-                  key={option.value}
-                  value={String(option.value)}
-                  selected={field.value === option.value}
-                >
-                  {option.name}
-                </SelectItem>
-              ))}
             </SelectContent>
           )}
         </Select>

web/src/components/credentials/actions/CreateCredential.tsx

@@ -188,7 +188,7 @@ export default function CreateCredential({
       onSubmit={() => {}} // This will be overridden by our custom submit handlers
     >
       {(formikProps) => (
-        <Form>
+        <Form className="w-full flex items-stretch">
           {!hideSource && (
             <p className="text-sm">
               Check our

web/src/components/ui/areaChart.tsx

@@ -24,7 +24,6 @@ interface AreaChartProps {
   categories?: string[];
   index?: string;
   colors?: string[];
-  valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
   showYAxis?: boolean;
@@ -42,6 +41,8 @@ interface AreaChartProps {
   className?: string;
   title?: string;
   description?: string;
+  xAxisFormatter?: (value: any) => string;
+  yAxisFormatter?: (value: any) => string;
 }
 
 export function AreaChartDisplay({
@@ -49,8 +50,6 @@ export function AreaChartDisplay({
   categories = [],
   index,
   colors = ["indigo", "fuchsia"],
-  valueFormatter = (number: number) =>
-    `${Intl.NumberFormat("us").format(number).toString()}`,
   startEndOnly = false,
   showXAxis = true,
   showYAxis = true,
@@ -68,6 +67,8 @@ export function AreaChartDisplay({
   className,
   title,
   description,
+  xAxisFormatter = (dateStr: string) => dateStr,
+  yAxisFormatter = (number: number) => number.toString(),
 }: AreaChartProps) {
   return (
     <Card className={className}>
@@ -94,7 +95,7 @@ export function AreaChartDisplay({
                   tickLine={false}
                   axisLine={false}
                   tickMargin={8}
-                  tickFormatter={(value) => value.slice(0, 3)}
+                  tickFormatter={(value) => xAxisFormatter(value)}
                 />
               )}
               {showYAxis && (
@@ -102,7 +103,7 @@ export function AreaChartDisplay({
                   width={yAxisWidth}
                   tickLine={false}
                   axisLine={false}
-                  tickFormatter={valueFormatter}
+                  tickFormatter={(value) => yAxisFormatter(value)}
                   allowDecimals={allowDecimals}
                 />
               )}