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

refactor(FE): Add week navigation to UniformityGaugeChart

Browse Source
This commit is contained in:
rstubryan
2026-01-05 09:11:54 +07:00
parent 7579cd5533
commit 62b05bf9c0
1 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+50 -23
View File
@@ -1,7 +1,8 @@
import React from 'react';
import React, { useState } from 'react';
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
import Card from '@/components/Card';
import { formatNumber } from '@/lib/helper';
import { Icon } from '@iconify/react';
interface UniformityGaugeChartProps {
value: number;
@@ -9,6 +10,9 @@ interface UniformityGaugeChartProps {
week?: string;
currentValue?: number;
totalValue?: number;
onWeekChange?: (direction: 'prev' | 'next') => void;
hasPrevWeek?: boolean;
hasNextWeek?: boolean;
}
const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
@@ -17,6 +21,9 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
week,
currentValue,
totalValue,
onWeekChange,
hasPrevWeek = false,
hasNextWeek = false,
}) => {
const numberOfSegments = 50;
const filledSegments = Math.round((value / 100) * numberOfSegments);
@@ -70,29 +77,49 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
</div>
</div>
</div>
<Card
variant='bordered'
className={{
wrapper: 'max-w-max mx-auto',
}}
>
<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 text-center flex justify-center'>
{week}
</span>
<div className='flex items-center justify-center gap-2 w-full'>
<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'
aria-label='Previous week'
>
<Icon icon='heroicons:chevron-left' width={20} height={20} />
</button>
<Card
variant='bordered'
className={{
wrapper: 'max-w-xs',
}}
>
<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'>
{week}
</span>
</div>
<div className='text-xl font-bold text-[#18181B80]'>
<span className='text-[#0069E0] break-all'>
{formatNumber(currentValue ?? 0)}
</span>
<span className='mx-1 text-gray-400 text-base'>From</span>
<span className='break-all'>
{formatNumber(totalValue ?? 0)}
</span>
</div>
</div>
<div className='text-xl font-bold text-[#18181B80]'>
<span className='text-[#0069E0] break-all'>
{formatNumber(currentValue ?? 0)}
</span>
<span className='mx-1 text-gray-400 text-base'>From</span>
<span className='break-all'>{formatNumber(totalValue ?? 0)}</span>
</div>
</div>
</section>
</Card>
</section>
</Card>
<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'
aria-label='Next week'
>
<Icon icon='heroicons:chevron-right' width={20} height={20} />
</button>
</div>
</div>
);
};