Skip to content

Commit 1f35f84

Browse files
ramyaragupathyramyaragupathy
authored
Merge pull request #6601 from hotosm/enhancement/6599-partners-mapswipe-page-fixes
Enhancements in Partner Stats MapSwipe page
2 parents ac37153 + cd34616 commit 1f35f84

17 files changed

Lines changed: 166 additions & 119 deletions

File tree

‎frontend/src/components/homepage/stats.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import shortNumber from 'short-number';
33

44
import messages from './messages';
55
import { useOsmStatsQuery, useSystemStatisticsQuery } from '../../api/stats';
6+
import StatsInfoFooter from '../statsInfoFooter';
67

78
export const StatsNumber = (props) => {
89
const value = shortNumber(props.value);
@@ -38,8 +39,10 @@ export const StatsSection = () => {
3839
const hasStatsLoaded = hasTmStatsLoaded && hasOsmStatsLoaded;
3940

4041
return (
41-
<>
42-
<div className="pt5 pb2 ph6-l ph4 flex justify-around flex-wrap flex-nowrap-ns stats-container">
42+
<div className="pt5 pb2 ph6-l ph4 ">
43+
<StatsInfoFooter className="mb4" />
44+
45+
<div className="flex justify-around flex-wrap flex-nowrap-ns stats-container">
4346
<StatsColumn
4447
label={messages.buildingsStats}
4548
value={hasStatsLoaded ? osmStatsData?.buildings : undefined}
@@ -61,6 +64,6 @@ export const StatsSection = () => {
6164
value={hasStatsLoaded ? tmStatsData.data.mappersOnline : undefined}
6265
/>
6366
</div>
64-
</>
67+
</div>
6568
);
6669
};

‎frontend/src/components/partnerMapswipeStats/overview.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const formatSecondsToTwoUnits = (seconds, shortFormat = false) => {
3030
years: 'yrs',
3131
months: 'mos',
3232
weeks: 'wks',
33-
days: 'ds',
33+
days: 'days',
3434
hours: 'hrs',
3535
minutes: 'mins',
3636
seconds: 'secs',
@@ -82,8 +82,11 @@ export const Overview = () => {
8282
customPlaceholder={<OverviewPlaceholder />}
8383
ready={!isLoading && !isRefetching}
8484
>
85+
<h3 class="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib mb3">
86+
{data?.nameInsideProvider}
87+
</h3>
8588
<div
86-
className="flex justify-between items-stretch flex-wrap flex-nowrap-ns"
89+
className="flex justify-between items-stretch flex-wrap flex-nowrap-l"
8790
style={{ gap: '1.6rem' }}
8891
>
8992
<div

‎frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const ProjectTypeAreaStats = ({
4646

4747
return (
4848
<div
49-
className="flex justify-between items-center flex-wrap flex-nowrap-ns"
49+
className="flex justify-between items-center flex-wrap flex-nowrap-l"
5050
style={{ gap: '1.6rem' }}
5151
>
5252
<div className="pa4 flex items-center bg-white shadow-6 w-100" style={{ gap: '1.75rem' }}>

‎frontend/src/components/partnerMapswipeStats/swipesByOrganization.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,10 @@ export const SwipesByOrganization = ({ contributionsByOrganization = [] }) => {
8080
}, []);
8181

8282
return (
83-
<div style={{ width: '48.5%' }}>
83+
<div className="mapswipe-stats-piechart">
8484
<h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
8585
<FormattedMessage {...messages.swipesByOrganization} />
8686
</h3>
87-
8887
<div className="bg-white pa4 shadow-6 relative" style={{ height: '450px' }}>
8988
<canvas ref={chartRef}></canvas>
9089
{contributionsByOrganization.length === 0 && (

‎frontend/src/components/partnerMapswipeStats/swipesByProjectType.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const SwipesByProjectType = ({ contributionsByProjectType = [] }) => {
8282
}, []);
8383

8484
return (
85-
<div style={{ width: '48.5%' }}>
85+
<div className="mapswipe-stats-piechart">
8686
<h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
8787
<FormattedMessage {...messages.swipesByProjectType} />
8888
</h3>

‎frontend/src/components/partners/leaderboard.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@ import messages from '../../views/messages';
44
import { StatsSection } from './partnersStats';
55
import { Activity } from './partnersActivity';
66
import { CurrentProjects } from './currentProjects';
7+
import StatsInfoFooter from '../statsInfoFooter';
78

89
export const Leaderboard = ({ partner, partnerStats }) => {
910
return (
1011
<div className="pa4 bg-tan flex flex-column gap-1.25">
12+
<StatsInfoFooter className="mv3" />
13+
1114
<div className="flex justify-between items-center">
1215
<h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
1316
{partner.primary_hashtag

‎frontend/src/components/partners/partners.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
9595
<FormattedMessage {...messages.edit} />
9696
</CustomButton>
9797
</Link>
98-
<Link to={`/partners/${details.permalink}/stats/leaderboard`}>
98+
<Link to={`/partners/${details.permalink}/stats`}>
9999
<CustomButton
100100
style={{ backgroundColor: '#e2e2e2' }}
101101
className="blue-dark ba b--grey-light pa2 br1 f5 pointer"

‎frontend/src/components/partners/partnersStats.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import shortNumber from 'short-number';
44
import messages from './messages';
55
import { StatsCard } from '../statsCard';
66
import { MappingIcon, EditIcon, RoadIcon, HomeIcon } from '../svgIcons';
7-
import StatsInfoFooter from '../statsInfoFooter';
87

98
const iconClass = 'h-50 w-50';
109
const iconStyle = { height: '45px' };
@@ -71,7 +70,6 @@ export const StatsSection = ({ partner }) => {
7170
className={'w-25-l w-50-m w-100 mv1'}
7271
/>
7372
</div>
74-
<StatsInfoFooter />
7573
</div>
7674
);
7775
};

‎frontend/src/components/projectStats/edits.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import projectMessages from './messages';
44
import userDetailMessages from '../userDetail/messages';
55
import { MappingIcon, HomeIcon, RoadIcon, EditIcon } from '../svgIcons';
66
import { StatsCard } from '../statsCard';
7-
import StatsTimestamp from '../statsTimestamp';
7+
import StatsInfoFooter from '../statsInfoFooter';
88

99
export const EditsStats = ({ data }) => {
1010
const { changesets, buildings, roads, edits } = data;
@@ -18,30 +18,32 @@ export const EditsStats = ({ data }) => {
1818
<h3 className="barlow-condensed ttu f3">
1919
<FormattedMessage {...projectMessages.edits} />
2020
</h3>
21-
<StatsTimestamp messageType="project" />
2221
</div>
23-
<div className="db pb2 project-edit-stats">
24-
<StatsCard
25-
field={'changesets'}
26-
icon={<MappingIcon className={iconClass} style={iconStyle} />}
27-
description={<FormattedMessage {...projectMessages.changesets} />}
28-
value={changesets || 0}
29-
/>
30-
<StatsCard
31-
icon={<EditIcon className={iconClass} style={iconStyle} />}
32-
description={<FormattedMessage {...projectMessages.totalEdits} />}
33-
value={edits || 0}
34-
/>
35-
<StatsCard
36-
icon={<HomeIcon className={iconClass} style={iconStyle} />}
37-
description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
38-
value={buildings || 0}
39-
/>
40-
<StatsCard
41-
icon={<RoadIcon className={iconClass} style={iconStyle} />}
42-
description={<FormattedMessage {...userDetailMessages.roadMapped} />}
43-
value={roads || 0}
44-
/>
22+
<div>
23+
<StatsInfoFooter className="mb4" />
24+
<div className="db pb2 project-edit-stats">
25+
<StatsCard
26+
field={'changesets'}
27+
icon={<MappingIcon className={iconClass} style={iconStyle} />}
28+
description={<FormattedMessage {...projectMessages.changesets} />}
29+
value={changesets || 0}
30+
/>
31+
<StatsCard
32+
icon={<EditIcon className={iconClass} style={iconStyle} />}
33+
description={<FormattedMessage {...projectMessages.totalEdits} />}
34+
value={edits || 0}
35+
/>
36+
<StatsCard
37+
icon={<HomeIcon className={iconClass} style={iconStyle} />}
38+
description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
39+
value={buildings || 0}
40+
/>
41+
<StatsCard
42+
icon={<RoadIcon className={iconClass} style={iconStyle} />}
43+
description={<FormattedMessage {...userDetailMessages.roadMapped} />}
44+
value={roads || 0}
45+
/>
46+
</div>
4547
</div>
4648
</div>
4749
);

‎frontend/src/components/statsInfoFooter/index.jsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,37 @@ import { useIntl } from 'react-intl';
22

33
import { useOsmStatsMetadataQuery } from '../../api/stats';
44
import { dateOptions } from '../statsTimestamp';
5+
import { InfoIcon } from '../svgIcons';
6+
import '../../views/partnersMapswipeStats.scss';
57

6-
export default function StatsInfoFooter() {
8+
export default function StatsInfoFooter({ className }) {
79
const intl = useIntl();
810

911
const { data: osmStatsMetadata } = useOsmStatsMetadataQuery();
1012

1113
return (
12-
<div className="cf w-100 relative tr pt3">
13-
<span className="ma0 f7 fw4 blue-grey mb1 i">
14-
These statistics come from{' '}
15-
<a
16-
className="blue-grey fw7"
17-
href="https://stats.now.ohsome.org/about"
18-
target="_blank"
19-
rel="noreferrer"
20-
>
21-
ohsomeNow Stats
22-
</a>{' '}
23-
and were last updated at{' '}
24-
<strong>{intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}</strong> (
25-
{intl.timeZone}).
14+
<div
15+
className={`pr3 pv2 pl0 relative inline-flex mapswipe-stats-info-banner
16+
blue-dark ${className}`}
17+
>
18+
<span className="inline-flex items-center ">
19+
<InfoIcon className="mr2" style={{ height: '20px' }} />
20+
<span>
21+
These statistics come from{' '}
22+
<a
23+
className="blue-grey"
24+
href="https://stats.now.ohsome.org/about"
25+
target="_blank"
26+
rel="noreferrer"
27+
>
28+
ohsomeNow Stats
29+
</a>{' '}
30+
and were last updated at{' '}
31+
<span className="fw5 stats-info-datetime">
32+
{intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}
33+
</span>{' '}
34+
({intl.timeZone})
35+
</span>
2636
</span>
2737
</div>
2838
);

0 commit comments

Comments
 (0)