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 { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
import Card from '@/components/Card'; import Card from '@/components/Card';
import { formatNumber } from '@/lib/helper'; import { formatNumber } from '@/lib/helper';
import { Icon } from '@iconify/react';
interface UniformityGaugeChartProps { interface UniformityGaugeChartProps {
value: number; value: number;
@@ -9,6 +10,9 @@ interface UniformityGaugeChartProps {
week?: string; week?: string;
currentValue?: number; currentValue?: number;
totalValue?: number; totalValue?: number;
onWeekChange?: (direction: 'prev' | 'next') => void;
hasPrevWeek?: boolean;
hasNextWeek?: boolean;
} }
const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
@@ -17,6 +21,9 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
week, week,
currentValue, currentValue,
totalValue, totalValue,
onWeekChange,
hasPrevWeek = false,
hasNextWeek = false,
}) => { }) => {
const numberOfSegments = 50; const numberOfSegments = 50;
const filledSegments = Math.round((value / 100) * numberOfSegments); const filledSegments = Math.round((value / 100) * numberOfSegments);
@@ -70,29 +77,49 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
</div> </div>
</div> </div>
</div> </div>
<Card <div className='flex items-center justify-center gap-2 w-full'>
variant='bordered' <button
className={{ onClick={() => onWeekChange?.('prev')}
wrapper: 'max-w-max mx-auto', 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'
<section className='flex items-center justify-center gap-4'> >
<div className='grid grid-cols-1 min-w-0 text-center'> <Icon icon='heroicons:chevron-left' width={20} height={20} />
<div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'> </button>
<span className='text-[#0069E0] font-semibold truncate text-center flex justify-center'> <Card
{week} variant='bordered'
</span> 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>
<div className='text-xl font-bold text-[#18181B80]'> </section>
<span className='text-[#0069E0] break-all'> </Card>
{formatNumber(currentValue ?? 0)} <button
</span> onClick={() => onWeekChange?.('next')}
<span className='mx-1 text-gray-400 text-base'>From</span> disabled={!hasNextWeek}
<span className='break-all'>{formatNumber(totalValue ?? 0)}</span> 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'
</div> aria-label='Next week'
</div> >
</section> <Icon icon='heroicons:chevron-right' width={20} height={20} />
</Card> </button>
</div>
</div> </div>
); );
}; };