Skip to content

Commit 5d4be66

Browse files
AbhishekfmAbhishekfm
committed
Default selection should be current month
1 parent 53429a1 commit 5d4be66

13 files changed

+246
-38
lines changed

‎app/[locale]/[state]/analytics/components/analytics-layout.tsx‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import React, { useState } from 'react';
3+
import React, { useEffect, useState } from 'react';
44
import { useParams, useSearchParams } from 'next/navigation';
55
import { useQuery } from '@tanstack/react-query';
66
import { parseAsString, useQueryState } from 'next-usequerystate';
@@ -38,22 +38,36 @@ export function AnalyticsMainLayout() {
3838
const searchParams = useSearchParams();
3939
const indicator = searchParams.get('indicator') || '';
4040

41+
// console.log('searchParams.get', searchParams.get('time-period'));
42+
const [maxTimePeriod, setMaxTimePeriod] = useState<string | null>(null);
43+
4144
const timePeriod = searchParams.get('time-period')
4245
? getLatestDate(searchParams.get('time-period')?.split(',') || [])?.split(
4346
'-'
4447
) || process.env.NEXT_PUBLIC_TIME_PERIOD
4548
: null;
4649

50+
// console.log('timePeriod', timePeriod);
51+
52+
// Use latest time period from query (maxTimePeriod) as primary fallback, then env variable
4753
const timePeriodSelected = timePeriod
4854
? `${timePeriod[0]}_${timePeriod[1]}`
49-
: process.env.NEXT_PUBLIC_TIME_PERIOD;
55+
: (maxTimePeriod ?? process.env.NEXT_PUBLIC_TIME_PERIOD);
56+
57+
// console.log('timePeriod', timePeriod);
58+
// console.log(
59+
// 'date now',
60+
// `${new Date().getFullYear()}_${new Date().getMonth() + 1}`
61+
// );
62+
// console.log('timePeriodSelected', timePeriodSelected);
5063

5164
const [districtCode, setDistrictCode] = useQueryState(
5265
'district-code',
5366
parseAsString.withDefault('')
5467
);
5568
const [revenueCode, setRevenueCode] = useQueryState('revenue-code');
5669
const [view, setView] = useQueryState('view');
70+
const [timePeriodParam, setTimePeriodParam] = useQueryState('time-period');
5771
const routerParams = useParams();
5872

5973
const statesListData = useQuery({
@@ -106,6 +120,8 @@ export function AnalyticsMainLayout() {
106120
refetchOnReconnect: false,
107121
});
108122

123+
// console.log('mapData', mapData);
124+
109125
const revenueMapData = useQuery({
110126
queryKey: [
111127
`mapQuery_revenue-circle_${currentSelectedState.code}_${indicator}_${timePeriodSelected}`,
@@ -177,6 +193,45 @@ export function AnalyticsMainLayout() {
177193
refetchOnReconnect: false,
178194
});
179195

196+
useEffect(() => {
197+
if (
198+
timePeriods.data?.getDataTimePeriods &&
199+
timePeriods.data?.getDataTimePeriods.length > 0 &&
200+
timePeriods.data?.getDataTimePeriods[0].value
201+
) {
202+
setMaxTimePeriod(timePeriods.data?.getDataTimePeriods[0].value);
203+
}
204+
}, [timePeriods.data]);
205+
206+
// Auto-set latest time period to URL if no time-period is present initially
207+
useEffect(() => {
208+
if (
209+
timePeriods.data?.getDataTimePeriods &&
210+
timePeriods.data?.getDataTimePeriods.length > 0
211+
) {
212+
const latestTimePeriod = timePeriods.data?.getDataTimePeriods[0]?.value;
213+
if (
214+
!timePeriodParam &&
215+
latestTimePeriod &&
216+
!timePeriods.isFetching &&
217+
timePeriods.isFetched
218+
) {
219+
setTimePeriodParam(latestTimePeriod, { shallow: false });
220+
}
221+
}
222+
}, [
223+
timePeriods.data,
224+
timePeriods.isFetching,
225+
timePeriods.isFetched,
226+
timePeriodParam,
227+
setTimePeriodParam,
228+
]);
229+
230+
// console.log(
231+
// 'timePeriods for last',
232+
// timePeriods.data?.getDataTimePeriods[0].value
233+
// );
234+
180235
const indicatorsData = useQuery({
181236
queryKey: [`indicators_${indicator}`],
182237
queryFn: () =>

‎app/[locale]/[state]/analytics/components/analytics-sidebar-layout.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22

33
import React from 'react';
44
import { useRouter } from 'next/navigation';
5+
import { useQuery } from '@tanstack/react-query';
56
import { Select, Spinner, Text } from 'opub-ui';
67

8+
import { ANALYTICS_TIME_PERIODS } from '@/config/graphql/analaytics-queries';
9+
import { GraphQL } from '@/lib/api';
710
import { cn } from '@/lib/utils';
811
import { MediaRendering } from '@/components/media-rendering';
912
import { FactorList } from './factor-list';
@@ -58,6 +61,23 @@ export function AnalyticsSideBarLayout({
5861
export function IndicatorListWrapper({ statesList, currentState }: any) {
5962
const router = useRouter();
6063

64+
const timePeriods = useQuery({
65+
queryKey: [`timePeriods`],
66+
queryFn: () =>
67+
GraphQL(
68+
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
69+
ANALYTICS_TIME_PERIODS
70+
),
71+
refetchOnMount: false,
72+
refetchOnWindowFocus: false,
73+
refetchOnReconnect: false,
74+
});
75+
76+
// Get the latest time period (first item in the array, which is the most recent)
77+
const latestTimePeriod =
78+
timePeriods.data?.getDataTimePeriods[0]?.value ||
79+
`${new Date().getFullYear()}_${new Date().getMonth() + 1}`;
80+
6181
return (
6282
<React.Fragment>
6383
{/* DESKTOP */}
@@ -98,7 +118,7 @@ export function IndicatorListWrapper({ statesList, currentState }: any) {
98118
})}
99119
onChange={(e) => {
100120
router.push(
101-
`/${e}/analytics/?indicator=risk-score&time-period=${process.env.TIME_PERIOD || process.env.NEXT_PUBLIC_TIME_PERIOD}&view=map`
121+
`/${e}/analytics/?indicator=risk-score&time-period=${latestTimePeriod}&view=map`
102122
);
103123
}}
104124
/>

‎app/[locale]/[state]/analytics/components/filter-component.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,8 +241,12 @@ export const RenderOptions = ({
241241
const onRadioButtonChange = (selectedValue: string, value: string) => {
242242
if (value === 'state') {
243243
setSelectedState(selectedValue);
244+
// Use the latest time period from the query (first item, which is the most recent)
245+
const latestTimePeriod =
246+
timePeriodData?.data?.getDataTimePeriods[0]?.value ||
247+
`${new Date().getFullYear()}_${new Date().getMonth() + 1}`;
244248
router.push(
245-
`/${selectedValue}/analytics/?indicator=risk-score&time-period=${process.env.TIME_PERIOD || process.env.NEXT_PUBLIC_TIME_PERIOD}&view=${view}`
249+
`/${selectedValue}/analytics/?indicator=risk-score&time-period=${latestTimePeriod}&view=${view}`
246250
);
247251
// console.log('---Selected State ---', selectedState);
248252
} else if (value === 'district') {

‎app/[locale]/[state]/analytics/components/filter-dropdown-options.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ export default function FilterDropdownOptions({
2525
monthMulti?: boolean;
2626
timeLimits: any;
2727
}) {
28+
// console.log('timeLimits', timeLimits);
2829
const [districtCode, setDistrictCode] = useQueryState(
2930
'district-code',
3031
parseAsString.withDefault('')
3132
);
33+
const [timePeriod] = useQueryState('time-period');
3234
const [revenueCode, setRevenueCode] = useQueryState('revenue-code');
3335

3436
const getRevenueCircleOptionsForDistrict = (districtCode: string) => {
@@ -47,6 +49,7 @@ export default function FilterDropdownOptions({
4749

4850
let minDate, maxDate;
4951
// Below is code to set limits to the calendar
52+
// console.log('timeLimits', timeLimits.data);
5053
if (timeLimits.data) {
5154
const datesArray = timeLimits?.data?.getDataTimePeriods.map((date: any) => {
5255
const [year, month] = date.value.split('_');
@@ -84,6 +87,11 @@ export default function FilterDropdownOptions({
8487
...(getRevenueCircleOptionsForDistrict(districtCode) || []),
8588
]);
8689

90+
const getDefaultDate = (timePeriod: string) => {
91+
const [year, month] = timePeriod.split('_');
92+
return parseDate(`${year}-${month?.padStart(2, '0')}-01`);
93+
};
94+
8795
return (
8896
<div>
8997
<div className="mb-2 flex items-start justify-evenly gap-3 p-4 pb-0 pt-0">
@@ -125,6 +133,7 @@ export default function FilterDropdownOptions({
125133
return parseDate(`${year}-${month.padStart(2, '0')}-01`);
126134
}) || []
127135
}
136+
// defaultValues={getDefaultDate(timePeriod || '')}
128137
label="Select Months"
129138
minValue={parseDate(minDate || '2023-01-04')}
130139
maxValue={parseDate(maxDate || '2023-01-04')}
@@ -148,7 +157,7 @@ export default function FilterDropdownOptions({
148157
? parseDate(
149158
getLatestDate(selectedTimePeriod || []) || '2023-08-01'
150159
)
151-
: null
160+
: getDefaultDate(timePeriod || '')
152161
}
153162
label="Select Month"
154163
minValue={parseDate(minDate || '2023-01-04')}

‎app/[locale]/[state]/analytics/components/output-window.tsx‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ import { useQueryState } from 'next-usequerystate';
1616
import { Button, Icon, Text, Tooltip, useScreenshot } from 'opub-ui';
1717

1818
import { Factors, RiskText } from '@/config/consts';
19-
import { ANALYTICS_TIME_TRENDS } from '@/config/graphql/analaytics-queries';
19+
import {
20+
ANALYTICS_TIME_PERIODS,
21+
ANALYTICS_TIME_TRENDS,
22+
} from '@/config/graphql/analaytics-queries';
2023
import { GraphQL } from '@/lib/api';
2124
import { cn, formatDateString } from '@/lib/utils';
2225
import Icons from '@/components/icons';
@@ -37,16 +40,33 @@ export function OutputWindow({
3740
currentState,
3841
}: any) {
3942
const searchParams = useSearchParams();
40-
if (!process.env.NEXT_PUBLIC_TIME_PERIOD) {
41-
throw new Error('TIME_PERIOD is not defined');
42-
}
43-
const DEFAULT_TIME_PERIOD: string = process.env.NEXT_PUBLIC_TIME_PERIOD;
43+
// if (!process.env.NEXT_PUBLIC_TIME_PERIOD) {
44+
// throw new Error('TIME_PERIOD is not defined');
45+
// }
46+
// const DEFAULT_TIME_PERIOD: string = process.env.NEXT_PUBLIC_TIME_PERIOD;
4447
let processedTime = getLatestDate(
4548
searchParams.get('time-period')?.split(',') || []
4649
)?.split('-');
50+
51+
const timePeriods = useQuery({
52+
queryKey: [`timePeriods`],
53+
queryFn: () =>
54+
GraphQL(
55+
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
56+
ANALYTICS_TIME_PERIODS
57+
),
58+
refetchOnMount: false,
59+
refetchOnWindowFocus: false,
60+
refetchOnReconnect: false,
61+
});
62+
63+
const latestTimePeriod =
64+
timePeriods.data?.getDataTimePeriods[0]?.value ||
65+
process.env.NEXT_PUBLIC_TIME_PERIOD;
66+
4767
const timePeriod = processedTime
4868
? `${processedTime[0]}_${processedTime[1]}`
49-
: DEFAULT_TIME_PERIOD;
69+
: (latestTimePeriod as string);
5070

5171
const formattedTimePeriod = formatDateString(timePeriod);
5272
const region = searchParams.get('district-code') || '';
@@ -169,6 +189,7 @@ export function OutputWindow({
169189
setIsExpanded(!isExpanded); // Toggle expanded state
170190
};
171191

192+
console.log('DataBasedOnBoundary', DataBasedOnBoundary);
172193
return (
173194
<>
174195
<MediaRendering minWidth="1024" maxWidth={null}>
@@ -199,7 +220,10 @@ export function OutputWindow({
199220
</Button>
200221
{RevenueRegion && (
201222
<Text className="uppercase" variant="bodyLg">
202-
{DataBasedOnBoundary[0]['district']} District
223+
{DataBasedOnBoundary &&
224+
DataBasedOnBoundary.length > 0 &&
225+
DataBasedOnBoundary[0]['district']}{' '}
226+
District
203227
</Text>
204228
)}
205229

‎app/[locale]/[state]/analytics/components/revenue-circle-accordion.tsx‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import Link from 'next/link';
33
import { useSearchParams } from 'next/navigation';
44
import { InfoSquare } from '@/public/InfoCircle';
5+
import { useQuery } from '@tanstack/react-query';
56
import {
67
Accordion,
78
AccordionContent,
@@ -13,6 +14,8 @@ import {
1314
} from 'opub-ui';
1415

1516
import { RiskColorMap } from '@/config/consts';
17+
import { ANALYTICS_TIME_PERIODS } from '@/config/graphql/analaytics-queries';
18+
import { GraphQL } from '@/lib/api';
1619
import { deSlugify } from '@/lib/utils';
1720
import {
1821
formatNumberToIndianSystem,
@@ -122,11 +125,25 @@ export const ScoreInfo = ({
122125
indicatorDescription,
123126
}: ScoreProps) => {
124127
const searchParams = useSearchParams();
125-
if (!process.env.NEXT_PUBLIC_TIME_PERIOD) {
126-
throw new Error('TIME_PERIOD not specified');
127-
}
128+
// if (!process.env.NEXT_PUBLIC_TIME_PERIOD) {
129+
// throw new Error('TIME_PERIOD not specified');
130+
// }
131+
const timePeriods = useQuery({
132+
queryKey: [`timePeriods`],
133+
queryFn: () =>
134+
GraphQL(
135+
`${process.env.NEXT_PUBLIC_DATA_MANAGEMENT_LAYER_URL}/graphql`,
136+
ANALYTICS_TIME_PERIODS
137+
),
138+
refetchOnMount: false,
139+
refetchOnWindowFocus: false,
140+
refetchOnReconnect: false,
141+
});
142+
const latestTimePeriod =
143+
timePeriods.data?.getDataTimePeriods[0]?.value ||
144+
process.env.NEXT_PUBLIC_TIME_PERIOD;
128145
const time_period =
129-
searchParams.get('time-period') || process.env.NEXT_PUBLIC_TIME_PERIOD;
146+
searchParams.get('time-period') || (latestTimePeriod as string);
130147
const boundary = searchParams.get('boundary') || 'district';
131148
const region = searchParams.get('region') || '';
132149

0 commit comments

Comments
 (0)