From 6babb7fe2033eebb1f46a3aeb8db11bc2e1e64d7 Mon Sep 17 00:00:00 2001 From: yznahmad Date: Mon, 23 Jun 2025 16:25:35 +0300 Subject: [PATCH] Add ss 120 --- .../dashboard/home/membersOverviewChart.tsx | 175 +++++++++--------- 1 file changed, 88 insertions(+), 87 deletions(-) diff --git a/webapp/src/components/dashboard/home/membersOverviewChart.tsx b/webapp/src/components/dashboard/home/membersOverviewChart.tsx index ae8db59..55901da 100644 --- a/webapp/src/components/dashboard/home/membersOverviewChart.tsx +++ b/webapp/src/components/dashboard/home/membersOverviewChart.tsx @@ -10,8 +10,7 @@ import { useDispatch } from 'react-redux'; import { AppDispatch } from '@/redux/store'; import { setCurrentMembersGeneralOverviewDuration } from '@/redux/features/statistics-slice' -export default function MembersOverviewChart() -{ +export default function MembersOverviewChart() { // get needed redux state const report = useAppSelector((state) => state.statisticsReducer.value.report) const currentMembersGeneralOverviewDuration = useAppSelector((state) => state.statisticsReducer.value.currentMembersGeneralOverviewDuration) @@ -23,16 +22,15 @@ export default function MembersOverviewChart() const locale = cookies.get("NEXT_LOCALE") const isRtl = locale == 'ar' ? true : false const isDark = themeType == 'dark' ? true : false - const [chartSeries , setChartSeries] = useState<{}[]>([]); - const [labels , setLabels] = useState([]) + const [chartSeries, setChartSeries] = useState<{}[]>([]); + const [labels, setLabels] = useState([]) // revenue Chart // prepare chart series and handle the transaction between currentMembersGeneralOverviewDuration useEffect(() => { // if chart duration is set to this week - if(currentMembersGeneralOverviewDuration == 'thisWeek') - { + if (currentMembersGeneralOverviewDuration == 'thisWeek') { // 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 let data_thisWeek = { 'sat': { @@ -86,9 +84,15 @@ export default function MembersOverviewChart() } } // if there is a data from the backend we overwrite the currentData - if(report?.membersGeneralOverview?.value.thisWeek.days) { - data_thisWeek = report?.membersGeneralOverview?.value.thisWeek.days; + // if(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 setChartSeries([ { @@ -114,11 +118,10 @@ export default function MembersOverviewChart() ]) } // if chart duration is set to this month - else if(currentMembersGeneralOverviewDuration == 'thisMonth') - { - let thisMonthTotalSum : { - week : number, - thisWeekSum : { + else if (currentMembersGeneralOverviewDuration == 'thisMonth') { + let thisMonthTotalSum: { + week: number, + thisWeekSum: { "totalMembers": number, "totalActiveSubs": number, "totalUnActiveSubs": number, @@ -126,12 +129,11 @@ export default function MembersOverviewChart() "totalGirlsMembers": number } }[]; - if(report?.membersGeneralOverview?.value.thisMonth) - { + if (report?.membersGeneralOverview?.value.thisMonth) { // if we founded a data for the current month - thisMonthTotalSum = report?.membersGeneralOverview?.value.thisMonth.weeks.map((v : any , i : number) : { - week : number, - thisWeekSum : { + thisMonthTotalSum = report?.membersGeneralOverview?.value.thisMonth.weeks.map((v: any, i: number): { + week: number, + thisWeekSum: { "totalMembers": number, "totalActiveSubs": number, "totalUnActiveSubs": number, @@ -141,14 +143,14 @@ export default function MembersOverviewChart() } => { // we init the this week sum let thisWeekSum = { - "totalMembers": 0, - "totalActiveSubs": 0, - "totalUnActiveSubs": 0, - "totalMansMembers": 0, - "totalGirlsMembers": 0 - } + "totalMembers": 0, + "totalActiveSubs": 0, + "totalUnActiveSubs": 0, + "totalMansMembers": 0, + "totalGirlsMembers": 0 + } // we map through this month weeks - v.days.map((w : { + v.days.map((w: { 'sat': { 'totalMembers': number, 'totalActiveSubs': number, @@ -198,10 +200,10 @@ export default function MembersOverviewChart() 'totalMansMembers': number, 'totalGirlsMembers': number, } - } , i : number) => { + }, i: number) => { // 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) { - if(key == '_id') return + Object.keys(w).forEach(function (key: "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id", index: number) { + if (key == '_id') return thisWeekSum.totalMembers = thisWeekSum.totalMembers + w[key].totalMembers thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + w[key].totalActiveSubs thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + w[key].totalUnActiveSubs @@ -215,14 +217,14 @@ export default function MembersOverviewChart() thisWeekSum: thisWeekSum } }) - let labels : [] = []; - thisMonthTotalSum.forEach(function(v , i) { - labels.push(t('week')+ ' ' +thisMonthTotalSum[i]["week"]) + let labels: [] = []; + thisMonthTotalSum.forEach(function (v, i) { + labels.push(t('week') + ' ' + thisMonthTotalSum[i]["week"]) }) // set the labels setLabels(labels) // we setup chart_series ( chart data ) - let a : { + let a: { name: string, data: { "totalMembers": number, @@ -231,7 +233,7 @@ export default function MembersOverviewChart() "totalMansMembers": 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, data: { "totalMembers": number, @@ -241,7 +243,7 @@ export default function MembersOverviewChart() "totalGirlsMembers": number } } => { - let data = thisMonthTotalSum.map((v2 : { + let data = thisMonthTotalSum.map((v2: { week: number, thisWeekSum: { "totalMembers": number, @@ -250,8 +252,8 @@ export default function MembersOverviewChart() "totalMansMembers": number, "totalGirlsMembers": number } - },i2 : number) => { - let index : 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; + }, i2: number) => { + let index: 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; return v2.thisWeekSum[index]; }) // return the line data @@ -266,31 +268,30 @@ export default function MembersOverviewChart() else { setChartSeries([ { - name: '1'+t('week'), - data: [0,0,0,0,0], + name: '1' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '2'+t('week'), - data: [0,0,0,0,0], + name: '2' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '3'+t('week'), - data: [0,0,0,0,0], + name: '3' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '4'+t('week'), - data: [0,0,0,0,0], + name: '4' + t('week'), + data: [0, 0, 0, 0, 0], } ]) } } // if chart duration is set to this month - else if(currentMembersGeneralOverviewDuration == 'thisYear') - { + else if (currentMembersGeneralOverviewDuration == 'thisYear') { // 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')]) // check if there is current month report - let thisYearTotalSum : { + let thisYearTotalSum: { month: number, thisMonthWeeksSum: { "totalMembers": number, @@ -300,12 +301,11 @@ export default function MembersOverviewChart() "totalGirlsMembers": number } }[] - if(report?.membersGeneralOverview?.value.thisYear) - { + if (report?.membersGeneralOverview?.value.thisYear) { // if we founded a data for the current month - thisYearTotalSum = report?.membersGeneralOverview?.value.thisYear.months.map((v : any , i : number) : { - month : number, - thisMonthWeeksSum : { + thisYearTotalSum = report?.membersGeneralOverview?.value.thisYear.months.map((v: any, i: number): { + month: number, + thisMonthWeeksSum: { "totalMembers": number, "totalActiveSubs": number, "totalUnActiveSubs": number, @@ -313,9 +313,9 @@ export default function MembersOverviewChart() "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 - let weekSum = w.days.map((d : { + let weekSum = w.days.map((d: { 'sat': { 'totalMembers': number, 'totalActiveSubs': number, @@ -365,7 +365,7 @@ export default function MembersOverviewChart() 'totalMansMembers': number, 'totalGirlsMembers': number, } - } , i : number) => { + }, i: number) => { // we init the this week sum let thisWeekSum = { "totalMembers": 0, @@ -375,8 +375,8 @@ export default function MembersOverviewChart() "totalGirlsMembers": 0 } // 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) { - if(key == '_id') return + Object.keys(d).forEach(function (key: "sat" | "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "_id", index: number) { + if (key == '_id') return thisWeekSum.totalMembers = thisWeekSum.totalMembers + d[key].totalMembers thisWeekSum.totalActiveSubs = thisWeekSum.totalActiveSubs + d[key].totalActiveSubs thisWeekSum.totalUnActiveSubs = thisWeekSum.totalUnActiveSubs + d[key].totalUnActiveSubs @@ -400,33 +400,35 @@ export default function MembersOverviewChart() "totalGirlsMembers": 0 } - summedWeeks.map((v : {week: number, weekSum: { - "totalMembers": number, - "totalActiveSubs": number, - "totalUnActiveSubs": number, - "totalMansMembers": number, - "totalGirlsMembers": number - }[]},i : number) => { + summedWeeks.map((v: { + week: number, weekSum: { + "totalMembers": number, + "totalActiveSubs": number, + "totalUnActiveSubs": number, + "totalMansMembers": number, + "totalGirlsMembers": number + }[] + }, i: number) => { thisMonthWeeksSum.totalMembers += v.weekSum[0].totalMembers thisMonthWeeksSum.totalActiveSubs += v.weekSum[0].totalActiveSubs thisMonthWeeksSum.totalUnActiveSubs += v.weekSum[0].totalUnActiveSubs thisMonthWeeksSum.totalMansMembers += v.weekSum[0].totalMansMembers thisMonthWeeksSum.totalGirlsMembers += v.weekSum[0].totalGirlsMembers }) - + return { month: v.month, thisMonthWeeksSum: thisMonthWeeksSum } }) // prepare the labels - let labels : [] = []; - thisYearTotalSum.forEach(function(v , i) { - labels.push(t(thisYearTotalSum[i]["month"]+"month")) + let labels: [] = []; + thisYearTotalSum.forEach(function (v, i) { + labels.push(t(thisYearTotalSum[i]["month"] + "month")) }) setLabels(labels) // we setup chart_series ( chart data ) - let a : { + let a: { name: string, data: { "totalMembers": number, @@ -435,7 +437,7 @@ export default function MembersOverviewChart() "totalMansMembers": 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, data: { "totalMembers": number, @@ -445,7 +447,7 @@ export default function MembersOverviewChart() "totalGirlsMembers": number } } => { - let data = thisYearTotalSum.map((v2 : { + let data = thisYearTotalSum.map((v2: { month: number, thisMonthWeeksSum: { "totalMembers": number, @@ -454,8 +456,8 @@ export default function MembersOverviewChart() "totalMansMembers": number, "totalGirlsMembers": number } - },i2 : number) => { - let index : 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; + }, i2: number) => { + let index: 'totalMembers' | 'totalActiveSubs' | 'totalUnActiveSubs' | 'totalMansMembers' | 'totalGirlsMembers' = v; return v2.thisMonthWeeksSum[index]; }) // return the line data @@ -470,27 +472,27 @@ export default function MembersOverviewChart() else { setChartSeries([ { - name: '1'+t('week'), - data: [0,0,0,0,0], + name: '1' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '2'+t('week'), - data: [0,0,0,0,0], + name: '2' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '3'+t('week'), - data: [0,0,0,0,0], + name: '3' + t('week'), + data: [0, 0, 0, 0, 0], }, { - name: '4'+t('week'), - data: [0,0,0,0,0], + name: '4' + t('week'), + data: [0, 0, 0, 0, 0], } ]) } } }, [currentMembersGeneralOverviewDuration]) // prepare the chart options - const options : any = { + const options: any = { series: chartSeries, options: { chart: { @@ -520,7 +522,7 @@ export default function MembersOverviewChart() left: -7, top: 22, }, - colors: ['#38C172', '#38C172' , '#E3342F' , '#0263FF', '#FF30F7'], + colors: ['#38C172', '#38C172', '#E3342F', '#0263FF', '#FF30F7'], markers: { //discrete: [ // { @@ -564,12 +566,11 @@ export default function MembersOverviewChart() tickAmount: 7, labels: { formatter: (value: number) => { - if(value > 1000) - { + if (value > 1000) { return parseInt(value.toFixed(0)) + t('k') } else { - return parseInt(value.toFixed(0)) + return parseInt(value.toFixed(0)) } }, offsetX: isRtl ? -30 : -10,