-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #398 from duyet/chore/update-update
feat: introduce a new 'CardMultiMetrics' component
- Loading branch information
Showing
13 changed files
with
206 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { CardMultiMetrics } from './card-multi-metrics' | ||
|
|
||
| describe('<CardMultiMetrics />', () => { | ||
| const mockItems = [ | ||
| { | ||
| current: 100, | ||
| target: 200, | ||
| currentReadable: '100 users', | ||
| targetReadable: '200 users', | ||
| }, | ||
| { | ||
| current: 50, | ||
| target: 150, | ||
| currentReadable: '50 sessions', | ||
| targetReadable: '150 sessions', | ||
| }, | ||
| ] | ||
|
|
||
| it('renders with default props', () => { | ||
| cy.mount(<CardMultiMetrics />) | ||
|
|
||
| // Should have aria-description | ||
| cy.get('[aria-description="card-metrics"]').should('exist') | ||
|
|
||
| // Should not render labels when no items | ||
| cy.contains('Current').should('not.exist') | ||
| cy.contains('Total').should('not.exist') | ||
| }) | ||
|
|
||
| it('renders with primary content', () => { | ||
| cy.mount(<CardMultiMetrics primary="Dashboard Metrics" />) | ||
|
|
||
| cy.get('div.text-xl').contains('Dashboard Metrics').should('be.visible') | ||
| }) | ||
|
|
||
| it('renders with custom labels and items', () => { | ||
| cy.mount( | ||
| <CardMultiMetrics | ||
| currentLabel="Active" | ||
| targetLabel="Maximum" | ||
| items={mockItems} | ||
| /> | ||
| ) | ||
|
|
||
| // Labels should be visible when items exist | ||
| cy.contains('Active').should('be.visible') | ||
| cy.contains('Maximum').should('be.visible') | ||
| }) | ||
|
|
||
| it('renders with items data', () => { | ||
| cy.mount(<CardMultiMetrics items={mockItems} />) | ||
|
|
||
| // Check if readable values are displayed | ||
| cy.contains('100 users').should('be.visible') | ||
| cy.contains('200 users').should('be.visible') | ||
| cy.contains('50 sessions').should('be.visible') | ||
| cy.contains('150 sessions').should('be.visible') | ||
|
|
||
| // Check for dotted separators | ||
| cy.get('hr.border-dotted').should('have.length', mockItems.length) | ||
| }) | ||
|
|
||
| it('renders with custom className', () => { | ||
| const customClass = 'custom-test-class' | ||
| cy.mount(<CardMultiMetrics className={customClass} />) | ||
|
|
||
| cy.get('[aria-description="card-metrics"]').should( | ||
| 'have.class', | ||
| customClass | ||
| ) | ||
| }) | ||
|
|
||
| it('renders with ReactNode as primary content', () => { | ||
| cy.mount( | ||
| <CardMultiMetrics | ||
| primary={<div className="test-primary">Custom Primary</div>} | ||
| /> | ||
| ) | ||
|
|
||
| cy.get('.test-primary').contains('Custom Primary').should('be.visible') | ||
| }) | ||
|
|
||
| it('handles empty items array', () => { | ||
| cy.mount(<CardMultiMetrics items={[]} />) | ||
|
|
||
| // Should not render labels when items array is empty | ||
| cy.contains('Current').should('not.exist') | ||
| cy.contains('Total').should('not.exist') | ||
|
|
||
| // Should not render any separators | ||
| cy.get('hr.border-dotted').should('not.exist') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { cn } from '@/lib/utils' | ||
|
|
||
| export interface CardMultiMetricsProps { | ||
| primary?: string | number | React.ReactNode | ||
| items?: { | ||
| current: number | ||
| target: number | ||
| currentReadable?: string | ||
| targetReadable?: string | ||
| }[] | ||
| currentLabel?: string | ||
| targetLabel?: string | ||
| className?: string | ||
| } | ||
|
|
||
| export function CardMultiMetrics({ | ||
| primary, | ||
| items = [], | ||
| currentLabel = 'Current', | ||
| targetLabel = 'Total', | ||
| className, | ||
| }: CardMultiMetricsProps) { | ||
| return ( | ||
| <div | ||
| className={cn('flex flex-col gap-4', className)} | ||
| aria-description="card-metrics" | ||
| > | ||
| <div className="text-xl md:text-3xl">{primary}</div> | ||
|
|
||
| <div className="flex flex-col justify-between text-sm"> | ||
| {items.length ? ( | ||
| <div className="mt-2 flex flex-row justify-between font-bold"> | ||
| <span className="truncate">{currentLabel}</span> | ||
| <span className="truncate">{targetLabel}</span> | ||
| </div> | ||
| ) : null} | ||
|
|
||
| {items.map((item, i) => { | ||
| const _percent = (item.current / item.target) * 100 | ||
|
|
||
| return ( | ||
| <div key={i}> | ||
| <div className="mt-2 flex flex-row items-center justify-between gap-2"> | ||
| <span className="truncate text-muted-foreground"> | ||
| {item.currentReadable} | ||
| </span> | ||
| <hr className="shrink grow border-dotted" /> | ||
| <span className="text-nowrap">{item.targetReadable}</span> | ||
| </div> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
4ac530cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
clickhouse-monitoring – ./
clickhouse-monitoring-git-main-duyet-team.vercel.app
clickhouse-monitor.vercel.app
clickhouse-monitoring-duyet-team.vercel.app
clickhouse.duyet.net
clickhouse-dashboard.vercel.app
clickhouse-monitoring.vercel.app