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

Add ss 120

Browse Source
This commit is contained in:
yznahmad 2025-06-23 16:25:35 +03:00
parent 87c325a363
commit 6babb7fe20
1 changed files with 88 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
webapp/src/components/dashboard/home/membersOverviewChart.tsx
View File

@ -10,8 +10,7 @@ import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/redux/store'; import { AppDispatch } from '@/redux/store';
import { setCurrentMembersGeneralOverviewDuration } from '@/redux/features/statistics-slice' import { setCurrentMembersGeneralOverviewDuration } from '@/redux/features/statistics-slice'
export default function MembersOverviewChart() export default function MembersOverviewChart() {
{
// get needed redux state // get needed redux state
const report = useAppSelector((state) => state.statisticsReducer.value.report) const report = useAppSelector((state) => state.statisticsReducer.value.report)
const currentMembersGeneralOverviewDuration = useAppSelector((state) => state.statisticsReducer.value.currentMembersGeneralOverviewDuration) const currentMembersGeneralOverviewDuration = useAppSelector((state) => state.statisticsReducer.value.currentMembersGeneralOverviewDuration)
@ -23,16 +22,15 @@ export default function MembersOverviewChart()
const locale = cookies.get("NEXT_LOCALE") const locale = cookies.get("NEXT_LOCALE")
const isRtl = locale == 'ar' ? true : false const isRtl = locale == 'ar' ? true : false
const isDark = themeType == 'dark' ? true : false const isDark = themeType == 'dark' ? true : false
const [chartSeries , setChartSeries] = useState<{}[]>([]); const [chartSeries, setChartSeries] = useState<{}[]>([]);
const [labels , setLabels] = useState<string[]>([]) const [labels, setLabels] = useState<string[]>([])
// revenue Chart // revenue Chart
// prepare chart series and handle the transaction between currentMembersGeneralOverviewDuration // prepare chart series and handle the transaction between currentMembersGeneralOverviewDuration
useEffect(() => { useEffect(() => {
// if chart duration is set to this week // if chart duration is set to this week
if(currentMembersGeneralOverviewDuration == 'thisWeek') if (currentMembersGeneralOverviewDuration == 'thisWeek') {
{
// set the labels // set the labels
setLabels([t('sat') , t('sun') , t('mon') , t('tue') , t('wed') , t('thu') , t('fri')]) setLabels([t('sat'), t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri')])
// init this weekdata // init this weekdata
let data_thisWeek = { let data_thisWeek = {
'sat': { 'sat': {
@ -86,9 +84,15 @@ export default function MembersOverviewChart()
} }
} }
// if there is a data from the backend we overwrite the currentData // if there is a data from the backend we overwrite the currentData
if(report?.membersGeneralOverview?.value.thisWeek.days) { // if(report?.membersGeneralOverview?.value.thisWeek.days) {
data_thisWeek = report?.membersGeneralOverview?.value.thisWeek.days; // data_thisWeek = report?.membersGeneralOverview?.value.thisWeek.days;
// }
// To this:
if (report?.membersGeneralOverview?.thisWeek?.days) {
data_thisWeek = report.membersGeneralOverview.thisWeek.days;
} }
// prepare the chart series // prepare the chart series
setChartSeries([ setChartSeries([
{ {
@ -114,11 +118,10 @@ export default function MembersOverviewChart()
]) ])
} }
// if chart duration is set to this month // if chart duration is set to this month
else if(currentMembersGeneralOverviewDuration == 'thisMonth') else if (currentMembersGeneralOverviewDuration == 'thisMonth') {
{ let thisMonthTotalSum: {
let thisMonthTotalSum : { week: number,
week : number, thisWeekSum: {
thisWeekSum : {
"totalMembers": number, "totalMembers": number,
"totalActiveSubs": number, "totalActiveSubs": number,
"totalUnActiveSubs": number, "totalUnActiveSubs": number,
@ -126,12 +129,11 @@ export default function MembersOverviewChart()
"totalGirlsMembers": number "totalGirlsMembers": number
} }
}[]; }[];
if(report?.membersGeneralOverview?.value.thisMonth) if (report?.membersGeneralOverview?.value.thisMonth) {
{
// if we founded a data for the current month // if we founded a data for the current month
thisMonthTotalSum = report?.membersGeneralOverview?.value.thisMonth.weeks.map((v : any , i : number) : { thisMonthTotalSum = report?.membersGeneralOverview?.value.thisMonth.weeks.map((v: any, i: number): {
week : number, week: number,
thisWeekSum : { thisWeekSum: {
"totalMembers": number, "totalMembers": number,
"totalActiveSubs": number, "totalActiveSubs": number,
"totalUnActiveSubs": number, "totalUnActiveSubs": number,
@ -148,7 +150,7 @@ export default function MembersOverviewChart()
"totalGirlsMembers": 0 "totalGirlsMembers": 0
} }
// we map through this month weeks // we map through this month weeks
v.days.map((w : { v.days.map((w: {
'sat': { 'sat': {
'totalMembers': number, 'totalMembers': number,
'totalActiveSubs': number, 'totalActiveSubs': number,
@ -198,10 +200,10 @@ export default function MembersOverviewChart()
'totalMansMembers': number, 'totalMansMembers': number,
'totalGirlsMembers': number, 'totalGirlsMembers': number,
} }
} , i : number) => { }, i: number) => {
// we loop through week days and we sum there data // we loop through week days and we sum there data
Object.keys(w).forEach(function(key : "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id" , index : number) { Object.keys(w).forEach(function (key: "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id", index: number) {
if(key == '_id') return if (key == '_id') return
thisWeekSum.totalMembers = thisWeekSum.totalMembers + w[key].totalMembers thisWeekSum.totalMembers = thisWeekSum.totalMembers + w[key].totalMembers
thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + w[key].totalActiveSubs thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + w[key].totalActiveSubs
thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + w[key].totalUnActiveSubs thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + w[key].totalUnActiveSubs
@ -215,14 +217,14 @@ export default function MembersOverviewChart()
thisWeekSum: thisWeekSum thisWeekSum: thisWeekSum
} }
}) })
let labels : [] = []; let labels: [] = [];
thisMonthTotalSum.forEach(function(v , i) { thisMonthTotalSum.forEach(function (v, i) {
labels.push(t('week')+ ' ' +thisMonthTotalSum[i]["week"]) labels.push(t('week') + ' ' + thisMonthTotalSum[i]["week"])
}) })
// set the labels // set the labels
setLabels(labels) setLabels(labels)
// we setup chart_series ( chart data ) // we setup chart_series ( chart data )
let a : { let a: {
name: string, name: string,
data: { data: {
"totalMembers": number, "totalMembers": number,
@ -231,7 +233,7 @@ export default function MembersOverviewChart()
"totalMansMembers": number, "totalMansMembers": number,
"totalGirlsMembers": number "totalGirlsMembers": number
} }
}[] = ['totalMembers' , 'totalActiveSubs' , 'totalUnActiveSubs' , 'totalMansMembers' , 'totalGirlsMembers'].map((v : string , i : number) : { }[] = ['totalMembers', 'totalActiveSubs', 'totalUnActiveSubs', 'totalMansMembers', 'totalGirlsMembers'].map((v: string, i: number): {
name: string, name: string,
data: { data: {
"totalMembers": number, "totalMembers": number,
@ -241,7 +243,7 @@ export default function MembersOverviewChart()
"totalGirlsMembers": number "totalGirlsMembers": number
} }
} => { } => {
let data = thisMonthTotalSum.map((v2 : { let data = thisMonthTotalSum.map((v2: {
week: number, week: number,
thisWeekSum: { thisWeekSum: {
"totalMembers": number, "totalMembers": number,
@ -250,8 +252,8 @@ export default function MembersOverviewChart()
"totalMansMembers": number, "totalMansMembers": number,
"totalGirlsMembers": number "totalGirlsMembers": number
} }
},i2 : number) => { }, i2: number) => {
let index : 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; let index: 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v;
return v2.thisWeekSum[index]; return v2.thisWeekSum[index];
}) })
// return the line data // return the line data
@ -266,31 +268,30 @@ export default function MembersOverviewChart()
else { else {
setChartSeries([ setChartSeries([
{ {
name: '1'+t('week'), name: '1' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '2'+t('week'), name: '2' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '3'+t('week'), name: '3' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '4'+t('week'), name: '4' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
} }
]) ])
} }
} }
// if chart duration is set to this month // if chart duration is set to this month
else if(currentMembersGeneralOverviewDuration == 'thisYear') else if (currentMembersGeneralOverviewDuration == 'thisYear') {
{
// set the labels // set the labels
setLabels([t('1month'), t('2month'), t('3month'), t('4month'), t('5month'), t('6month'), t('7month'), t('8month'), t('9month'), t('10month'), t('11month')]) setLabels([t('1month'), t('2month'), t('3month'), t('4month'), t('5month'), t('6month'), t('7month'), t('8month'), t('9month'), t('10month'), t('11month')])
// check if there is current month report // check if there is current month report
let thisYearTotalSum : { let thisYearTotalSum: {
month: number, month: number,
thisMonthWeeksSum: { thisMonthWeeksSum: {
"totalMembers": number, "totalMembers": number,
@ -300,12 +301,11 @@ export default function MembersOverviewChart()
"totalGirlsMembers": number "totalGirlsMembers": number
} }
}[] }[]
if(report?.membersGeneralOverview?.value.thisYear) if (report?.membersGeneralOverview?.value.thisYear) {
{
// if we founded a data for the current month // if we founded a data for the current month
thisYearTotalSum = report?.membersGeneralOverview?.value.thisYear.months.map((v : any , i : number) : { thisYearTotalSum = report?.membersGeneralOverview?.value.thisYear.months.map((v: any, i: number): {
month : number, month: number,
thisMonthWeeksSum : { thisMonthWeeksSum: {
"totalMembers": number, "totalMembers": number,
"totalActiveSubs": number, "totalActiveSubs": number,
"totalUnActiveSubs": number, "totalUnActiveSubs": number,
@ -313,9 +313,9 @@ export default function MembersOverviewChart()
"totalGirlsMembers": number "totalGirlsMembers": number
} }
} => { } => {
let summedWeeks = v.weeks.map((w : any , i : number) => { let summedWeeks = v.weeks.map((w: any, i: number) => {
// we map through this month weeks // we map through this month weeks
let weekSum = w.days.map((d : { let weekSum = w.days.map((d: {
'sat': { 'sat': {
'totalMembers': number, 'totalMembers': number,
'totalActiveSubs': number, 'totalActiveSubs': number,
@ -365,7 +365,7 @@ export default function MembersOverviewChart()
'totalMansMembers': number, 'totalMansMembers': number,
'totalGirlsMembers': number, 'totalGirlsMembers': number,
} }
} , i : number) => { }, i: number) => {
// we init the this week sum // we init the this week sum
let thisWeekSum = { let thisWeekSum = {
"totalMembers": 0, "totalMembers": 0,
@ -375,8 +375,8 @@ export default function MembersOverviewChart()
"totalGirlsMembers": 0 "totalGirlsMembers": 0
} }
// we loop through week days and we sum there data // we loop through week days and we sum there data
Object.keys(d).forEach(function(key : "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id" , index : number) { Object.keys(d).forEach(function (key: "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id", index: number) {
if(key == '_id') return if (key == '_id') return
thisWeekSum.totalMembers = thisWeekSum.totalMembers + d[key].totalMembers thisWeekSum.totalMembers = thisWeekSum.totalMembers + d[key].totalMembers
thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + d[key].totalActiveSubs thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + d[key].totalActiveSubs
thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + d[key].totalUnActiveSubs thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + d[key].totalUnActiveSubs
@ -400,13 +400,15 @@ export default function MembersOverviewChart()
"totalGirlsMembers": 0 "totalGirlsMembers": 0
} }
summedWeeks.map((v : {week: number, weekSum: { summedWeeks.map((v: {
week: number, weekSum: {
"totalMembers": number, "totalMembers": number,
"totalActiveSubs": number, "totalActiveSubs": number,
"totalUnActiveSubs": number, "totalUnActiveSubs": number,
"totalMansMembers": number, "totalMansMembers": number,
"totalGirlsMembers": number "totalGirlsMembers": number
}[]},i : number) => { }[]
}, i: number) => {
thisMonthWeeksSum.totalMembers += v.weekSum[0].totalMembers thisMonthWeeksSum.totalMembers += v.weekSum[0].totalMembers
thisMonthWeeksSum.totalActiveSubs += v.weekSum[0].totalActiveSubs thisMonthWeeksSum.totalActiveSubs += v.weekSum[0].totalActiveSubs
thisMonthWeeksSum.totalUnActiveSubs += v.weekSum[0].totalUnActiveSubs thisMonthWeeksSum.totalUnActiveSubs += v.weekSum[0].totalUnActiveSubs
@ -420,13 +422,13 @@ export default function MembersOverviewChart()
} }
}) })
// prepare the labels // prepare the labels
let labels : [] = []; let labels: [] = [];
thisYearTotalSum.forEach(function(v , i) { thisYearTotalSum.forEach(function (v, i) {
labels.push(t(thisYearTotalSum[i]["month"]+"month")) labels.push(t(thisYearTotalSum[i]["month"] + "month"))
}) })
setLabels(labels) setLabels(labels)
// we setup chart_series ( chart data ) // we setup chart_series ( chart data )
let a : { let a: {
name: string, name: string,
data: { data: {
"totalMembers": number, "totalMembers": number,
@ -435,7 +437,7 @@ export default function MembersOverviewChart()
"totalMansMembers": number, "totalMansMembers": number,
"totalGirlsMembers": number "totalGirlsMembers": number
} }
}[] = ['totalMembers' , 'totalActiveSubs' , 'totalUnActiveSubs' , 'totalMansMembers' , 'totalGirlsMembers'].map((v : string , i : number) : { }[] = ['totalMembers', 'totalActiveSubs', 'totalUnActiveSubs', 'totalMansMembers', 'totalGirlsMembers'].map((v: string, i: number): {
name: string, name: string,
data: { data: {
"totalMembers": number, "totalMembers": number,
@ -445,7 +447,7 @@ export default function MembersOverviewChart()
"totalGirlsMembers": number "totalGirlsMembers": number
} }
} => { } => {
let data = thisYearTotalSum.map((v2 : { let data = thisYearTotalSum.map((v2: {
month: number, month: number,
thisMonthWeeksSum: { thisMonthWeeksSum: {
"totalMembers": number, "totalMembers": number,
@ -454,8 +456,8 @@ export default function MembersOverviewChart()
"totalMansMembers": number, "totalMansMembers": number,
"totalGirlsMembers": number "totalGirlsMembers": number
} }
},i2 : number) => { }, i2: number) => {
let index : 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; let index: 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v;
return v2.thisMonthWeeksSum[index]; return v2.thisMonthWeeksSum[index];
}) })
// return the line data // return the line data
@ -470,27 +472,27 @@ export default function MembersOverviewChart()
else { else {
setChartSeries([ setChartSeries([
{ {
name: '1'+t('week'), name: '1' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '2'+t('week'), name: '2' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '3'+t('week'), name: '3' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
}, },
{ {
name: '4'+t('week'), name: '4' + t('week'),
data: [0,0,0,0,0], data: [0, 0, 0, 0, 0],
} }
]) ])
} }
} }
}, [currentMembersGeneralOverviewDuration]) }, [currentMembersGeneralOverviewDuration])
// prepare the chart options // prepare the chart options
const options : any = { const options: any = {
series: chartSeries, series: chartSeries,
options: { options: {
chart: { chart: {
@ -520,7 +522,7 @@ export default function MembersOverviewChart()
left: -7, left: -7,
top: 22, top: 22,
}, },
colors: ['#38C172', '#38C172' , '#E3342F' , '#0263FF', '#FF30F7'], colors: ['#38C172', '#38C172', '#E3342F', '#0263FF', '#FF30F7'],
markers: { markers: {
//discrete: [ //discrete: [
// { // {
@ -564,8 +566,7 @@ export default function MembersOverviewChart()
tickAmount: 7, tickAmount: 7,
labels: { labels: {
formatter: (value: number) => { formatter: (value: number) => {
if(value > 1000) if (value > 1000) {
{
return parseInt(value.toFixed(0)) + t('k') return parseInt(value.toFixed(0)) + t('k')
} }
else { else {