refactor(frontend): polish dashboard tables per code review
- Drop unused `letterSpacing: 0.2` from TH_SX in both table cards (HTML mockup has no letter-spacing on headers) - Move `eventStatusTone` from EventsCard to dashboardVisual.ts for symmetry with `eventTypeTone` (single source of tone semantics) - Drop unused `columnWidths` prop and `widthsFor` override branch in BrokerDashboardTableSkeleton (no caller passes it) - Drop redundant `role="presentation"` on skeleton wrapper (rows already carry `aria-hidden="true"`) - Drop unused `TypeTone` import from EventsCard after moving eventStatusTone out
This commit is contained in:
parent
94f8bb876d
commit
27fb6e77be
@ -73,6 +73,10 @@ export function incomeTypeTone(label: DashboardIncomeTypeLabel): TypeTone {
|
||||
}
|
||||
}
|
||||
|
||||
export function eventStatusTone(source: BrokerEventItem['source']): TypeTone {
|
||||
return source === 'actual' ? 'success' : 'neutral'
|
||||
}
|
||||
|
||||
function nonEmpty(value: string | null | undefined): string | null {
|
||||
return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import { formatBrokerDate } from '@/shared/lib/formatters'
|
||||
import type { DashboardDatePreset, DashboardEventType } from '../lib/dashboardFilters'
|
||||
import { eventStatusLabel, eventTypeLabel } from '../lib/dashboardFormatters'
|
||||
import {
|
||||
eventStatusTone,
|
||||
eventTypeTone,
|
||||
formatDashboardCurrency,
|
||||
instrumentDisplay,
|
||||
@ -39,7 +40,6 @@ const TH_SX = {
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
textTransform: 'uppercase' as const,
|
||||
whiteSpace: 'nowrap' as const,
|
||||
}
|
||||
@ -86,10 +86,6 @@ type BrokerDashboardEventsCardProps = {
|
||||
canGoForward: boolean
|
||||
}
|
||||
|
||||
function eventStatusTone(event: BrokerEventItem): TypeTone {
|
||||
return event.source === 'actual' ? 'success' : 'neutral'
|
||||
}
|
||||
|
||||
function eventAmountValue(event: BrokerEventItem): number | null {
|
||||
return event.source === 'actual' ? event.actualAmount : event.estimatedAmount
|
||||
}
|
||||
@ -254,7 +250,7 @@ export function BrokerDashboardEventsCard({
|
||||
<Box component="td" sx={TD_SX_RIGHT}>
|
||||
<Chip
|
||||
label={eventStatusLabel(event)}
|
||||
tone={eventStatusTone(event)}
|
||||
tone={eventStatusTone(event.source)}
|
||||
selected={false}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@ -34,7 +34,6 @@ const TH_SX = {
|
||||
color: 'text.secondary',
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
textTransform: 'uppercase' as const,
|
||||
whiteSpace: 'nowrap' as const,
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import { Skeleton } from '@moex-vibe/design-system'
|
||||
import { Box } from '@mui/material'
|
||||
|
||||
type ColumnWidth = number | string
|
||||
type ColumnWidth = string
|
||||
|
||||
type BrokerDashboardTableSkeletonProps = {
|
||||
rows?: number
|
||||
columns?: number
|
||||
columnWidths?: ColumnWidth[]
|
||||
}
|
||||
|
||||
const DEFAULT_EVENT_WIDTHS: ColumnWidth[] = ['14%', '32%', '18%', '18%', '18%']
|
||||
@ -21,8 +20,7 @@ const EVENT_ROW_VARIANTS: Array<'short' | 'long' | 'full'> = [
|
||||
]
|
||||
const INCOME_ROW_VARIANTS: Array<'short' | 'long' | 'full'> = ['short', 'long', 'medium', 'short']
|
||||
|
||||
function widthsFor(columns: number, override?: ColumnWidth[]): ColumnWidth[] {
|
||||
if (override && override.length === columns) return override
|
||||
function widthsFor(columns: number): ColumnWidth[] {
|
||||
if (columns === 4) return DEFAULT_INCOME_WIDTHS
|
||||
if (columns === 5) return DEFAULT_EVENT_WIDTHS
|
||||
return Array.from({ length: columns }, () => '100%')
|
||||
@ -36,16 +34,15 @@ function rowVariantsFor(columns: number): Array<'short' | 'long' | 'full' | 'med
|
||||
export function BrokerDashboardTableSkeleton({
|
||||
rows = 5,
|
||||
columns = 5,
|
||||
columnWidths,
|
||||
}: BrokerDashboardTableSkeletonProps) {
|
||||
const widths = widthsFor(columns, columnWidths)
|
||||
const widths = widthsFor(columns)
|
||||
const variants = rowVariantsFor(columns)
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ display: 'grid', gap: 1, py: 1 }}
|
||||
data-testid="dashboard-table-skeleton"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{Array.from({ length: rows }, (_, i) => (
|
||||
<Box
|
||||
@ -57,7 +54,6 @@ export function BrokerDashboardTableSkeleton({
|
||||
minHeight: 38,
|
||||
py: 0.5,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{widths.map((width, j) => (
|
||||
<Box key={j} sx={{ flex: `0 0 ${width}`, minWidth: 0 }}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user