update

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

@@ -45,6 +45,7 @@ export function QueryPerformanceChart({
   } else {
     const initialDate = timeRange.from || new Date(queryAnalyticsData[0].date);
     const dateRange = getDatesList(initialDate);
+    console.log("dateRange", dateRange);
 
     const dateToQueryAnalytics = new Map(
       queryAnalyticsData.map((queryAnalyticsEntry) => [
@@ -58,6 +59,8 @@ export function QueryPerformanceChart({
         userAnalyticsEntry,
       ])
     );
+    // console.log("dateToQueryAnalytics", dateToQueryAnalytics);
+    // console.log("dateToUserAnalytics", dateToUserAnalytics);
 
     chart = (
       <AreaChartDisplay
@@ -75,9 +78,28 @@ export function QueryPerformanceChart({
         index="Day"
         colors={["indigo", "fuchsia"]}
         valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
+          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",
+          });
+        }}
+        tooltipFormatter={(dateStr: string) => {
+          const date = new Date(dateStr);
+          return date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          });
+        }}
         yAxisWidth={60}
+        allowDecimals={false}
       />
     );
   }

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

@@ -637,22 +637,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/ui/areaChart.tsx

@@ -42,6 +42,7 @@ interface AreaChartProps {
   className?: string;
   title?: string;
   description?: string;
+  xAxisFormatter?: (dateStr: string) => string;
 }
 
 export function AreaChartDisplay({
@@ -49,6 +50,7 @@ export function AreaChartDisplay({
   categories = [],
   index,
   colors = ["indigo", "fuchsia"],
+  xAxisFormatter,
   valueFormatter = (number: number) =>
     `${Intl.NumberFormat("us").format(number).toString()}`,
   startEndOnly = false,
@@ -94,7 +96,7 @@ export function AreaChartDisplay({
                   tickLine={false}
                   axisLine={false}
                   tickMargin={8}
-                  tickFormatter={(value) => value.slice(0, 3)}
+                  tickFormatter={(value) => xAxisFormatter?.(value) || value}
                 />
               )}
               {showYAxis && (