Add ss 120
This commit is contained in:
parent
87c325a363
commit
6babb7fe20
@ -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<string[]>([])
|
||||
const [chartSeries, setChartSeries] = useState<{}[]>([]);
|
||||
const [labels, setLabels] = useState<string[]>([])
|
||||
// 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,13 +400,15 @@ 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
|
||||
@ -420,13 +422,13 @@ export default function MembersOverviewChart()
|
||||
}
|
||||
})
|
||||
// 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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user