Merge pull request #332 from duyet/feat/ui

chore: fix area breakdown

app/overview/page.tsx

@@ -28,13 +28,34 @@ export default async function Overview() {
           <TabsTrigger value="backups">Backups</TabsTrigger>
         </TabsList>
       </div>
+
       <TabsContent value="overview" className="space-y-4">
         <div className="grid grid-cols-1 items-stretch gap-5 md:grid-cols-2">
+          <ServerComponentLazy>
+            <ChartQueryCountByUser
+              title="Query Count last 24h"
+              lastHours={24}
+              interval="toStartOfHour"
+              className="w-full p-5"
+              chartClassName="h-64"
+            />
+          </ServerComponentLazy>
+
+          <ServerComponentLazy>
+            <ChartQueryCountByUser
+              title="Query Count last 14d"
+              lastHours={24 * 14}
+              interval="toStartOfDay"
+              className="w-full p-5"
+              chartClassName="h-64"
+            />
+          </ServerComponentLazy>
+
           <ServerComponentLazy>
             <ChartMemoryUsage
               title="Memory Usage last 24h (avg / 10 minutes)"
               className="w-full"
-              chartClassName="h-72"
+              chartClassName="h-64"
               interval="toStartOfTenMinutes"
               lastHours={24}
             />
@@ -44,29 +65,19 @@ export default async function Overview() {
             <ChartCPUUsage
               title="CPU Usage last 24h (avg / 10 minutes)"
               className="w-full"
-              chartClassName="h-72"
+              chartClassName="h-64"
               interval="toStartOfTenMinutes"
               lastHours={24}
             />
           </ServerComponentLazy>
 
-          <ServerComponentLazy>
-            <ChartQueryCountByUser
-              title="Query Count last 24h"
-              lastHours={24}
-              interval="toStartOfHour"
-              className="w-full p-5"
-              chartClassName="h-72"
-            />
-          </ServerComponentLazy>
-
           <ServerComponentLazy>
             <ChartMergeCount
               title="Merge and PartMutation last 24h (avg)"
               lastHours={24}
               interval="toStartOfHour"
               className="w-full p-5"
-              chartClassName="h-72"
+              chartClassName="h-64"
             />
           </ServerComponentLazy>
 
@@ -77,6 +88,7 @@ export default async function Overview() {
           <ServerComponentLazy>
             <ChartNewPartsCreated
               className="w-full p-5"
+              chartClassName="h-64"
               title="New Parts Created over last 7 days"
               interval="toStartOfHour"
               lastHours={24 * 7}
@@ -93,6 +105,7 @@ export default async function Overview() {
           <ServerComponentLazy>
             <ChartDisksUsage
               className="w-full p-5"
+              chartClassName="h-64"
               title="Disks Usage over last 30 days"
               interval="toStartOfDay"
               lastHours={24 * 30}
@@ -104,7 +117,11 @@ export default async function Overview() {
       <TabsContent value="backups" className="space-y-4">
         <div className="grid grid-cols-1 items-stretch gap-5 md:grid-cols-2">
           <ServerComponentLazy>
-            <ChartBackupSize className="w-full p-5" title="Backup" />
+            <ChartBackupSize
+              className="w-full p-5"
+              title="Backup"
+              chartClassName="h-64"
+            />
           </ServerComponentLazy>
         </div>
       </TabsContent>

components/charts/query-count.tsx

@@ -49,7 +49,7 @@ export async function ChartQueryCount({
     {
       event_time: string
       query_count: number
-      breakdown: Array<[string, number]>
+      breakdown: Array<[string, number] | Record<string, string>>
     }[]
   >({ query })
 
@@ -65,6 +65,8 @@ export async function ChartQueryCount({
         showLegend={false}
         colors={['--chart-yellow']}
         breakdown="breakdown"
+        breakdownLabel="query_kind"
+        breakdownValue="count"
         {...props}
       />
     </ChartCard>

components/generic-charts/area.cy.tsx

@@ -231,7 +231,28 @@ describe('<AreaChart />', () => {
     },
   ]
 
-  it('renders with breakdown', () => {
+  const dataWithBreakdown2 = [
+    {
+      date: '2025-01-01',
+      query_count: 1000,
+      query_duration: 1000,
+      breakdown: [
+        { query_kind: 'select', count: '500' },
+        { query_kind: 'insert', count: '500' },
+      ],
+    },
+    {
+      date: '2025-01-02',
+      query_count: 2000,
+      query_duration: 2000,
+      breakdown: [
+        { query_kind: 'select', count: '1000' },
+        { query_kind: 'insert', count: '1000' },
+      ],
+    },
+  ]
+
+  it('renders with breakdown as array of array format (old clickhouse)', () => {
     cy.mount(
       <AreaChart
         data={dataWithBreakdown}
@@ -261,8 +282,40 @@ describe('<AreaChart />', () => {
     )
   })
 
-  it('renders with breakdown custom breakdownLabel', () => {
-    const breakdownLabel = 'Custom breakdown'
+  it('renders with breakdown as array of object', () => {
+    cy.mount(
+      <AreaChart
+        data={dataWithBreakdown2}
+        categories={['query_count']}
+        index="date"
+        showLegend
+        breakdown="breakdown"
+        breakdownLabel="query_kind"
+        breakdownValue="count"
+        tooltipActive={true /* always show tooltip for test/debugging */}
+      />
+    )
+    cy.screenshot()
+
+    // Render as svg
+    cy.get('svg:first').as('chart').should('be.visible')
+
+    // Hover to show tooltip
+    cy.get('@chart').trigger('mouseover')
+
+    // Show breakdown in tooltip
+    cy.get('.recharts-tooltip-wrapper [role="breakdown"]').should(
+      'contain',
+      'Breakdown'
+    )
+    cy.get('[role="breakdown"] [role="row"]').should(
+      'have.length',
+      dataWithBreakdown[0].breakdown.length
+    )
+  })
+
+  it('renders with breakdown custom breakdownHeading', () => {
+    const breakdownHeading = 'Custom breakdown'
 
     cy.mount(
       <AreaChart
@@ -271,7 +324,7 @@ describe('<AreaChart />', () => {
         index="date"
         showLegend
         breakdown="breakdown"
-        breakdownLabel={breakdownLabel}
+        breakdownHeading={breakdownHeading}
         tooltipActive={true /* always show tooltip for test/debugging */}
       />
     )
@@ -280,7 +333,7 @@ describe('<AreaChart />', () => {
     // Show breakdown in tooltip
     cy.get('.recharts-tooltip-wrapper [role="breakdown"]').should(
       'contain',
-      breakdownLabel
+      breakdownHeading
     )
   })
 })

components/generic-charts/area.tsx

@@ -34,6 +34,8 @@ export function AreaChart({
   tickFormatter,
   breakdown,
   breakdownLabel,
+  breakdownValue,
+  breakdownHeading,
   tooltipActive,
   className,
 }: AreaChartProps) {
@@ -85,6 +87,8 @@ export function AreaChart({
         {renderChartTooltip({
           breakdown,
           breakdownLabel,
+          breakdownValue,
+          breakdownHeading,
           tooltipActive,
           chartConfig,
           categories,
@@ -112,12 +116,19 @@ export function AreaChart({
 function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
   breakdown,
   breakdownLabel,
+  breakdownValue,
+  breakdownHeading,
   tooltipActive,
   chartConfig,
   categories,
 }: Pick<
   AreaChartProps,
-  'breakdown' | 'breakdownLabel' | 'tooltipActive' | 'categories'
+  | 'breakdown'
+  | 'breakdownLabel'
+  | 'breakdownValue'
+  | 'breakdownHeading'
+  | 'tooltipActive'
+  | 'categories'
 > & {
   chartConfig: ChartConfig
 }) {
@@ -173,16 +184,29 @@ function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
         <ChartTooltipContent
           hideLabel
           className="w-fit"
-          formatter={(
-            value,
-            name,
-            item,
-            index,
-            payload: Array<Payload<ValueType, NameType>>
-          ) => {
+          formatter={(value, name, item, index, payload: any) => {
             const breakdownData = payload[
               breakdown as keyof typeof payload
-            ] as any[]
+            ] as Array<any>
+            const breakdownDataMap = breakdownData.map((item) => {
+              // breakdown: [('A', 1000)]
+              if (Array.isArray(item) && item.length === 2) {
+                return item
+              }
+
+              // breakdown: [{ name: 'A', value: 1000 }]
+              if (typeof item === 'object') {
+                if (!breakdownLabel || !breakdownValue) {
+                  throw new Error('Missing breakdownLabel or breakdownValue')
+                }
+
+                return [item[breakdownLabel], item[breakdownValue]]
+              }
+
+              throw new Error(
+                'Invalid breakdown data, expected array(2) or object'
+              )
+            })
 
             return (
               <>
@@ -209,9 +233,9 @@ function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
                       role="breakdown"
                     >
                       <div className="mt-1.5">
-                        {breakdownLabel || 'Breakdown'}
+                        {breakdownHeading || 'Breakdown'}
                       </div>
-                      {breakdownData.map(([name, value], index) => (
+                      {breakdownDataMap.map(([name, value], index) => (
                         <div
                           key={name + index}
                           className="mt-1.5 flex items-center gap-1.5"
@@ -226,11 +250,10 @@ function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
                             }
                           />
 
-                          {chartConfig[name as keyof typeof chartConfig]
-                            ?.label || name}
+                          {item[breakdownLabel as keyof typeof item] || name}
 
                           <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                            {value}
+                            {value.toLocaleString()}
                             <span className="font-normal text-muted-foreground"></span>
                           </div>
                         </div>

types/charts.ts

@@ -124,6 +124,8 @@ export interface AreaChartProps extends BaseChartProps {
   opacity?: number
   breakdown?: string
   breakdownLabel?: string
+  breakdownValue?: string
+  breakdownHeading?: string
   tooltipActive?: boolean
 
   // TODO: support these features