mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
fix(FE): fixing classname using dynamic value
This commit is contained in:
randy-ar
@@ -147,11 +147,12 @@ const DashboardLineChart = ({
|
||||
return (
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg',
|
||||
wrapper: 'w-full rounded-lg p-0',
|
||||
body: 'p-4',
|
||||
}}
|
||||
variant='bordered'
|
||||
>
|
||||
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-[12px]'>
|
||||
<div className='flex flex-col sm:flex-row justify-between items-start gap-4 mb-3'>
|
||||
<div className='text-lg font-semibold'>
|
||||
Performance{' '}
|
||||
<Icon
|
||||
@@ -165,28 +166,28 @@ const DashboardLineChart = ({
|
||||
<Dropdown
|
||||
align='end'
|
||||
direction='bottom'
|
||||
className={{
|
||||
content: 'mt-1 min-w-full',
|
||||
}}
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className='py-[10px] pl-[12px] pr-[4px] text-[#18181B]/50 rounded-[8px] text-[14px] border-[#18181B]/10 shadow-button-soft'
|
||||
className='py-2.5 pl-3 pr-2 text-base-content/50 rounded-lg text-sm border-base-content/10 shadow-button-soft'
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{chartTypeLabels[chartData]}{' '}
|
||||
<div className='w-[26px] h-[20px] flex items-center justify-center border-l border-[#18181B]/10'>
|
||||
<div className='w-6 h-5 flex items-center justify-center border-l border-base-content/10'>
|
||||
<Icon icon='heroicons:chevron-down' width={14} height={14} />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
className={{
|
||||
content: '',
|
||||
}}
|
||||
controlled={open}
|
||||
>
|
||||
<Menu>
|
||||
<Menu className='p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg'>
|
||||
<MenuItem
|
||||
title='Body weight'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('body_weight');
|
||||
setOpen(!open);
|
||||
@@ -194,7 +195,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Performance'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('performance');
|
||||
setOpen(!open);
|
||||
@@ -202,7 +203,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='FCR'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('fcr');
|
||||
setOpen(!open);
|
||||
@@ -210,7 +211,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Quality Control'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('quality_control');
|
||||
setOpen(!open);
|
||||
@@ -218,7 +219,7 @@ const DashboardLineChart = ({
|
||||
/>
|
||||
<MenuItem
|
||||
title='Deplesi'
|
||||
className='text-sm padding-[12px] whitespace-nowrap'
|
||||
className='text-sm padding-3 whitespace-nowrap'
|
||||
onClick={() => {
|
||||
setChartData('deplesi');
|
||||
setOpen(!open);
|
||||
@@ -267,14 +268,14 @@ const DashboardLineChart = ({
|
||||
}}
|
||||
variant='outline'
|
||||
color='none'
|
||||
className={`flex items-center gap-[8px] px-[12px] py-[10px] rounded-[8px] border transition-colors ${
|
||||
className={`flex items-center gap-2 p-3 rounded-lg border transition-colors ${
|
||||
isVisible
|
||||
? 'border-[#18181B]/10 hover:bg-[#18181B]/4'
|
||||
: 'border-[#18181B]/10 bg-[#18181B]/4'
|
||||
? 'border-base-content/10 hover:bg-base-content/4'
|
||||
: 'border-base-content/10 bg-base-content/4'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-[20px] h-[2px] ${
|
||||
className={`w-5 h-0.5 ${
|
||||
isStandard ? 'border-t-2 border-dashed' : ''
|
||||
} ${!isVisible ? 'opacity-30' : ''}`}
|
||||
style={{
|
||||
@@ -287,7 +288,7 @@ const DashboardLineChart = ({
|
||||
}}
|
||||
></div>
|
||||
<span
|
||||
className={`font-semibold text-[14px] ${isVisible ? 'text-[#18181B]/50' : 'text-[#18181B]/50'}`}
|
||||
className={`font-semibold text-sm ${isVisible ? 'text-base-content/50' : 'text-base-content/50'}`}
|
||||
>
|
||||
{series.label}
|
||||
</span>
|
||||
@@ -295,7 +296,7 @@ const DashboardLineChart = ({
|
||||
icon='heroicons:eye'
|
||||
width={16}
|
||||
height={16}
|
||||
className='text-[#18181B]/40'
|
||||
className='text-base-content/40'
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
@@ -371,7 +372,8 @@ const DashboardLineChart = ({
|
||||
fontWeight: 600,
|
||||
}}
|
||||
label={
|
||||
chartData === 'body_weight' || chartData === 'performance'
|
||||
(chartData === 'body_weight' || chartData === 'performance') &&
|
||||
analysisMode === 'OVERVIEW'
|
||||
? {
|
||||
value:
|
||||
chartData === 'body_weight'
|
||||
@@ -379,7 +381,7 @@ const DashboardLineChart = ({
|
||||
: 'Percentage',
|
||||
position: 'insideLeft',
|
||||
angle: -90,
|
||||
offset: 25,
|
||||
offset: 5,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
@@ -387,7 +389,20 @@ const DashboardLineChart = ({
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
: analysisMode === 'COMPARISON'
|
||||
? {
|
||||
value: 'Percentage',
|
||||
position: 'insideLeft',
|
||||
angle: -90,
|
||||
offset: 5,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
fill: '#18181B',
|
||||
opacity: 0.2,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: '#C1C1C180', opacity: 0.5 }}
|
||||
@@ -508,6 +523,7 @@ const DashboardLineChart = ({
|
||||
|
||||
return Array.from(tickSet).sort((a, b) => a - b);
|
||||
})()}
|
||||
tickFormatter={(value) => formatNumber(Number(value))}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
@@ -522,8 +538,8 @@ const DashboardLineChart = ({
|
||||
labelFormatter={(value) => `Week ${value}`}
|
||||
content={(props) => {
|
||||
return (
|
||||
<div className='flex flex-col gap-[6px] rounded-lg bg-neutral-950 p-4 text-white'>
|
||||
<p className='text-neutral-300 text-[12px] font-semibold text-start'>
|
||||
<div className='flex flex-col gap-1.5 rounded-lg bg-neutral-950 p-4 text-white'>
|
||||
<p className='text-white/50 text-xs font-semibold text-start'>
|
||||
{analysisMode === 'OVERVIEW'
|
||||
? selectedKandang
|
||||
? selectedKandang.label || 'Overview Performance'
|
||||
@@ -563,11 +579,11 @@ const DashboardLineChart = ({
|
||||
return (
|
||||
<li
|
||||
key={`${item.name}-${index}`}
|
||||
className='flex w-full justify-between items-center flex-row gap-y-[6px] gap-x-[12px] p-0'
|
||||
className='flex w-full justify-between items-center flex-row gap-y-1.5 gap-x-3 p-0'
|
||||
>
|
||||
<span className='flex flex-row gap-1 items-center'>
|
||||
<span className='flex flex-row gap-1.5 items-center'>
|
||||
<div
|
||||
className='h-[20px] w-[20px] m-0 rounded-[4px]'
|
||||
className='h-5 w-5 m-0 rounded'
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
@@ -582,7 +598,7 @@ const DashboardLineChart = ({
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<p className='text-neutral-300 text-[12px] text-start'>
|
||||
<p className='text-white/50 text-xs text-start'>
|
||||
Week {props.label}
|
||||
</p>
|
||||
</div>
|
||||
@@ -705,8 +721,8 @@ const DashboardLineChart = ({
|
||||
return (
|
||||
<div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
|
||||
{/* Chart icon */}
|
||||
<div className='w-[50px] h-[50px] bg-[var(--main-color-base-100,#FFFFFF)] border-[1px] border-[#18181B]/10 rounded-[14px] border border-[#18181B] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-4'>
|
||||
<div className='w-[38px] h-[38px] bg-[#0069E0] rounded-[8px] border-[1px] border-[#0069E0] flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[14px] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
|
||||
<div className='w-9.5 h-9.5 bg-primary rounded-[8px] border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
@@ -717,10 +733,10 @@ const DashboardLineChart = ({
|
||||
</div>
|
||||
|
||||
{/* Empty state text */}
|
||||
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||
<h3 className='text-base-content/50 font-semibold text-sm mb-1'>
|
||||
Data Not Yet Available
|
||||
</h3>
|
||||
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||
<p className='text-base-content/50 text-xs text-center max-w-xs'>
|
||||
Please change your filters to get the data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user