yazan/ironGym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 30 n123

Browse Source
This commit is contained in:
yznahmad 2025-06-21 04:17:25 +03:00
parent f2cad9ec1a
commit 66fddb2a83
1 changed files with 95 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
webapp/src/components/dashboard/home/incomeOutcome.tsx
View File

@ -2,6 +2,7 @@ import { useAppSelector } from '@/redux/store';
import { useTranslations } from 'next-intl';
import dynamic from 'next/dynamic';
import Cookies from 'universal-cookie';
import { useEffect, useState } from 'react';
const ReactApexChart = dynamic(() => import('react-apexcharts'), {
ssr: false,
});
@ -9,23 +10,39 @@ const ReactApexChart = dynamic(() => import('react-apexcharts'), {
export default function IncomeOutcome()
{
// get needed redux state
const report = useAppSelector((state) => state.statisticsReducer.value.report)
const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol)
const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType)
const report = useAppSelector((state) => state.statisticsReducer.value.report);
const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol || '$');
const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
const [isClient, setIsClient] = useState(false);
// declare global variables
const cookies = new Cookies();
const t = useTranslations('statistics');
const locale = cookies.get("NEXT_LOCALE")
const isRtl = locale == 'ar' ? true : false
const isDark = themeType == 'dark' ? true : false
// if loading show load screen
if(!report) return
const locale = cookies.get("NEXT_LOCALE");
const isRtl = locale === 'ar';
const isDark = themeType === 'dark';
// Set isClient to true after component mounts
useEffect(() => {
setIsClient(true);
}, []);
// if loading or no report, don't render the chart
if (!report || !isClient) {
return (
<div className="w-full h-[350px] flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
</div>
);
}
// prepare chart data
let data = [report?.totalIncome , report?.totalOutcome]
const data = [report?.totalIncome || 0, report?.totalOutcome || 0];
// prepare chart labels
let labels = [t('income') , t('outcome')]
const labels = [t('income'), t('outcome')];
// prepare chart options
var options = {
const options = {
series: [{
name: currencySymbol,
data: data
@ -47,6 +64,9 @@ export default function IncomeOutcome()
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
@ -69,6 +89,7 @@ export default function IncomeOutcome()
horizontal: 10,
vertical: 5,
},
show: false
},
fill: {
type: isDark ? '' : 'gradient',
@ -80,7 +101,7 @@ export default function IncomeOutcome()
stops: isDark ? [100, 100] : [45, 100],
},
},
colors: ['#0263FF' , '#E3342F'],
colors: ['#0263FF', '#E3342F'],
dataLabels: {
enabled: false
},
@ -90,7 +111,7 @@ export default function IncomeOutcome()
},
grid: {
row: {
colors: [isDark ? '#333' : '#fff', '#f2f2f2'] // Adjust the grid row color for dark mode
colors: [isDark ? '#333' : '#fff', '#f2f2f2']
},
},
xaxis: {
@ -100,39 +121,68 @@ export default function IncomeOutcome()
offsetY: 5,
style: {
colors: isDark ? '#fff' : '#000',
fontSize: '12px',
cssClass: 'apexcharts-xaxis-title',
},
formatter: function(value: string) {
return value;
}
},
categories: labels,
tickPlacement: 'on'
axisBorder: {
show: false
},
axisTicks: {
show: false
},
},
yaxis: {
tickAmount: 7,
labels: {
offsetX: isRtl ? -30 : -10,
offsetY: 0,
style: {
colors: isDark ? '#fff' : '#000',
fontSize: '12px',
cssClass: 'apexcharts-yaxis-title',
},
},
}
}
},
tooltip: {
theme: isDark ? 'dark' : 'light',
x: {
show: true,
y: {
formatter: function(val: number) {
return `${currencySymbol} ${val}`;
}
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetY: 10,
horizontalAlign: 'center',
fontSize: '12px',
markers: {
width: 10,
height: 10,
offsetX: isRtl ? 5 : -5,
},
itemMargin: {
horizontal: 10,
vertical: 5,
},
},
}
}]
};
// return the ui
return (
<>
<div className="flex flex-col gap-5 [&_*]:dark:!text-text-dark p-5 w-full shadow border border-secondary-light bg-primary dark:bg-primary-dark rounded-[5px]">
<h3 className="text-xl font-bold">{t('incomeOutcomeGeneralOverview')}</h3>
<ReactApexChart series={options.series} options={options} type="bar" height={350} width={'100%'} />
<div className="w-full h-auto p-5 shadow border border-secondary-light bg-primary dark:bg-primary-dark rounded-[5px]">
<h3 className="text-xl font-bold mb-5">{t('incomeOutcomeGeneralOverview')}</h3>
<div className="w-full h-[350px]">
<ReactApexChart
options={options}
series={options.series}
type="bar"
height="100%"
width="100%"
/>
</div>
</>
)
</div>
);
}