Merge pull request #306 from duyet/chore/ui

.github/workflows/base.yml

@@ -55,7 +55,10 @@ jobs:
       - name: Yarn Cache
         uses: actions/cache@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/.cache
+            ~/.cache
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-

.github/workflows/test.yml

@@ -128,12 +128,15 @@ jobs:
       - name: Yarn Cache
         uses: actions/cache@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/.cache
+            ~/.cache
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Yarn Cache
+      - name: Next Cache
         uses: actions/cache@v4
         with:
           path: .next/cache
@@ -180,7 +183,10 @@ jobs:
       - name: Yarn Cache
         uses: actions/cache@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ${{ github.workspace }}/.cache
+            ~/.cache
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-

app/[query]/more/top-usage-columns.ts

@@ -19,7 +19,7 @@ export const topUsageColumnsConfig: QueryConfig = {
       ORDER BY 2 DESC`,
   columns: ['column', 'count'],
   columnFormats: {
-    count: ColumnFormat.BackgroundBar,
+    count: [ColumnFormat.BackgroundBar, { numberFormat: true }],
   },
   defaultParams: { table: '' },
 }

components/data-table/cells/background-bar-format.cy.tsx

@@ -0,0 +1,107 @@
+import { BackgroundBarFormat } from './background-bar-format'
+
+describe('<BackgroundBarFormat />', () => {
+  const mockTable = {
+    getCoreRowModel: () => ({
+      rows: [1, 2, 3],
+    }),
+  }
+
+  const mockRow = {
+    original: {
+      column1: 100,
+      pct_column1: 50,
+      column2: 200,
+      readable_column2: 'Two hundred',
+      pct_column2: 75,
+    },
+  }
+
+  it('renders with basic props', () => {
+    cy.mount(
+      <BackgroundBarFormat
+        table={mockTable}
+        row={mockRow}
+        columnName="column1"
+        value={100}
+      />
+    )
+
+    cy.get('div[aria-roledescription="background-bar"]').as('cell')
+
+    cy.get('@cell').should('contain.text', '100')
+    cy.get('@cell').should('have.attr', 'title', '100 (50%)')
+    cy.get('@cell')
+      .should('have.css', 'background')
+      .and('include', 'linear-gradient')
+  })
+
+  it('renders with numberFormat option', () => {
+    cy.mount(
+      <BackgroundBarFormat
+        table={mockTable}
+        row={mockRow}
+        columnName="column1"
+        value={1000}
+        options={{ numberFormat: true }}
+      />
+    )
+    cy.get('div[aria-roledescription="background-bar"]').as('cell')
+    cy.get('@cell').should('contain.text', '1,000')
+  })
+
+  it('handles readable column names', () => {
+    cy.mount(
+      <BackgroundBarFormat
+        table={mockTable}
+        row={mockRow}
+        columnName="readable_column2"
+        value="Two hundred"
+      />
+    )
+
+    cy.get('div[aria-roledescription="background-bar"]').as('cell')
+    cy.get('@cell').should('contain.text', 'Two hundred')
+    cy.get('@cell').should('have.attr', 'title', '200 (75%)')
+  })
+
+  it('returns raw value when table has 1 or fewer rows', () => {
+    const singleRowTable = {
+      getCoreRowModel: () => ({
+        rows: [1],
+      }),
+    }
+
+    cy.mount(
+      <BackgroundBarFormat
+        table={singleRowTable}
+        row={mockRow}
+        columnName="column1"
+        value={100}
+      />
+    )
+
+    cy.get('div[aria-roledescription="background-bar"]').should('not.exist')
+    cy.contains('100').should('exist')
+  })
+
+  it('handles missing percentage column', () => {
+    const rowWithoutPct = {
+      original: {
+        column1: 100,
+      },
+    }
+
+    cy.mount(
+      <BackgroundBarFormat
+        table={mockTable}
+        row={rowWithoutPct}
+        columnName="column1"
+        value={100}
+      />
+    )
+
+    cy.get('div').should('contain.text', '100')
+    cy.get('div').should('not.have.attr', 'title')
+  })
+})

components/data-table/cells/background-bar-format.tsx

@@ -1,15 +1,23 @@
+import { formatReadableQuantity } from '@/lib/format-readable'
+
+export interface BackgroundBarOptions {
+  numberFormat?: boolean
+}
+
 interface BackgroundBarFormatProps {
   table: any
   row: any
   columnName: string
   value: any
+  options?: BackgroundBarOptions
 }
 
 export function BackgroundBarFormat({
   table,
   row,
   columnName,
   value,
+  options,
 }: BackgroundBarFormatProps) {
   // Disable if row count <= 1
   if (table.getCoreRowModel()?.rows?.length <= 1) return value
@@ -38,8 +46,10 @@ export function BackgroundBarFormat({
                 transparent ${pct}%, transparent 100%)`,
       }}
       title={`${orgValue} (${pct}%)`}
+      aria-label={`${orgValue} (${pct}%)`}
+      aria-roledescription="background-bar"
     >
-      {value}
+      {options?.numberFormat ? formatReadableQuantity(value, 'long') : value}
     </div>
   )
 }

components/data-table/format-cell.tsx

@@ -6,7 +6,10 @@ import { ColumnFormat, type ColumnFormatOptions } from '@/types/column-format'
 
 import { ActionFormat } from './cells/action-format'
 import { type Action } from './cells/actions/types'
-import { BackgroundBarFormat } from './cells/background-bar-format'
+import {
+  BackgroundBarFormat,
+  type BackgroundBarOptions,
+} from './cells/background-bar-format'
 import { BadgeFormat } from './cells/badge-format'
 import { BooleanFormat } from './cells/boolean-format'
 import {
@@ -43,6 +46,7 @@ export const formatCell = <TData extends RowData, TValue>(
           row={row}
           columnName={columnName}
           value={value}
+          options={columnFormatOptions as BackgroundBarOptions}
         />
       )
 

types/column-format.ts

@@ -1,6 +1,7 @@
 import { LinkProps } from 'next/link'
 
 import { type Action } from '@/components/data-table/cells/actions/types'
+import { type BackgroundBarOptions } from '@/components/data-table/cells/background-bar-format'
 import { type CodeDialogOptions } from '@/components/data-table/cells/code-dialog-format'
 import { type CodeToggleOptions } from '@/components/data-table/cells/code-toggle-format'
 import { type HoverCardOptions } from '@/components/data-table/cells/hover-card-format'
@@ -29,6 +30,7 @@ export type ColumnFormatWithArgs =
   | [ColumnFormat.HoverCard, HoverCardOptions]
   | [ColumnFormat.CodeDialog, CodeDialogOptions]
   | [ColumnFormat.CodeToggle, CodeToggleOptions]
+  | [ColumnFormat.BackgroundBar, BackgroundBarOptions]
 
 // Union of all possible format options
 export type ColumnFormatOptions = ColumnFormatWithArgs[1]