gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 05:22:02 +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>
</PieChart>
</ResponsiveContainer>
<div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
<span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
<div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
<span className='text-2xl font-medium text-base-content mb-4 leading-8'>
{value}%
</span>
<div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
<span className='text-sm font-medium text-gray-700 mb-32'>
<div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
<span className='text-lg font-medium text-base-content leading-6'>
{label}
</span>
</div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('prev')}
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'
>
<Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<Card
variant='bordered'
className={{
wrapper: 'max-w-xs',
wrapper: 'max-w-40 rounded-lg',
body: 'p-3',
}}
>
<section className='flex items-center justify-center gap-4'>
<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'>
<span className='text-[#0069E0] font-semibold truncate'>
<div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
<span className='text-primary font-semibold truncate'>
{week}
</span>
</div>
<div className='text-xl font-bold text-[#18181B80]'>
<span className='text-[#0069E0] break-all'>
<div className='text-xl font-bold text-base-content/50'>
<span className='text-primary break-all'>
{formatNumber(currentValue ?? 0)}
</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'>
{formatNumber(totalValue ?? 0)}
</span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
<button
onClick={() => onWeekChange?.('next')}
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'
>
<Icon icon='heroicons:chevron-right' width={20} height={20} />