gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Update UniformityGaugeChart styles

Browse Source
This commit is contained in:
rstubryan
2026-01-30 14:13:38 +07:00
parent 64bd57cad4
commit a5613980c0
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+15 -12
View File
@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
</Pie> </Pie>
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
<div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'> <div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
<span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'> <span className='text-2xl font-medium text-base-content mb-4 leading-8'>
{value}% {value}%
</span> </span>
<div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'> <div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
<span className='text-sm font-medium text-gray-700 mb-32'> <span className='text-lg font-medium text-base-content leading-6'>
{label} {label}
</span> </span>
</div> </div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button <button
onClick={() => onWeekChange?.('prev')} onClick={() => onWeekChange?.('prev')}
disabled={!hasPrevWeek} disabled={!hasPrevWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm' className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Previous week' aria-label='Previous week'
> >
<Icon icon='heroicons:chevron-left' width={20} height={20} /> <Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<Card <Card
variant='bordered' variant='bordered'
className={{ className={{
wrapper: 'max-w-xs', wrapper: 'max-w-40 rounded-lg',
body: 'p-3',
}} }}
> >
<section className='flex items-center justify-center gap-4'> <section className='flex items-center justify-center gap-4'>
<div className='grid grid-cols-1 min-w-0 text-center'> <div className='grid grid-cols-1 min-w-0 text-center'>
<div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'> <div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
<span className='text-[#0069E0] font-semibold truncate'> <span className='text-primary font-semibold truncate'>
{week} {week}
</span> </span>
</div> </div>
<div className='text-xl font-bold text-[#18181B80]'> <div className='text-xl font-bold text-base-content/50'>
<span className='text-[#0069E0] break-all'> <span className='text-primary break-all'>
{formatNumber(currentValue ?? 0)} {formatNumber(currentValue ?? 0)}
</span> </span>
<span className='mx-1 text-gray-400 text-base'>From</span> <span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
From
</span>
<span className='break-all'> <span className='break-all'>
{formatNumber(totalValue ?? 0)} {formatNumber(totalValue ?? 0)}
</span> </span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button <button
onClick={() => onWeekChange?.('next')} onClick={() => onWeekChange?.('next')}
disabled={!hasNextWeek} disabled={!hasNextWeek}
className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm' className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
aria-label='Next week' aria-label='Next week'
> >
<Icon icon='heroicons:chevron-right' width={20} height={20} /> <Icon icon='heroicons:chevron-right' width={20} height={20} />