Merge pull request hotosm#6601 from hotosm/enhancement/6599-partners-…

…mapswipe-page-fixes Enhancements in Partner Stats MapSwipe page
naxa-developers · Nov 13, 2024 · 1f35f84 · 1f35f84
2 parents ac37153 + cd34616
commit 1f35f84
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 119 deletions.
diff --git a/frontend/src/components/homepage/stats.js b/frontend/src/components/homepage/stats.js
@@ -3,6 +3,7 @@ import shortNumber from 'short-number';
 
 import messages from './messages';
 import { useOsmStatsQuery, useSystemStatisticsQuery } from '../../api/stats';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const StatsNumber = (props) => {
   const value = shortNumber(props.value);
@@ -38,8 +39,10 @@ export const StatsSection = () => {
   const hasStatsLoaded = hasTmStatsLoaded && hasOsmStatsLoaded;
 
   return (
-    <>
-      <div className="pt5 pb2 ph6-l ph4 flex justify-around flex-wrap flex-nowrap-ns stats-container">
+    <div className="pt5 pb2 ph6-l ph4 ">
+      <StatsInfoFooter className="mb4" />
+
+      <div className="flex justify-around flex-wrap flex-nowrap-ns stats-container">
         <StatsColumn
           label={messages.buildingsStats}
           value={hasStatsLoaded ? osmStatsData?.buildings : undefined}
@@ -61,6 +64,6 @@ export const StatsSection = () => {
           value={hasStatsLoaded ? tmStatsData.data.mappersOnline : undefined}
         />
       </div>
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/components/partnerMapswipeStats/overview.js b/frontend/src/components/partnerMapswipeStats/overview.js
@@ -30,7 +30,7 @@ export const formatSecondsToTwoUnits = (seconds, shortFormat = false) => {
     years: 'yrs',
     months: 'mos',
     weeks: 'wks',
-    days: 'ds',
+    days: 'days',
     hours: 'hrs',
     minutes: 'mins',
     seconds: 'secs',
@@ -82,8 +82,11 @@ export const Overview = () => {
       customPlaceholder={<OverviewPlaceholder />}
       ready={!isLoading && !isRefetching}
     >
+      <h3 class="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib mb3">
+        {data?.nameInsideProvider}
+      </h3>
       <div
-        className="flex justify-between items-stretch flex-wrap flex-nowrap-ns"
+        className="flex justify-between items-stretch flex-wrap flex-nowrap-l"
         style={{ gap: '1.6rem' }}
       >
         <div

diff --git a/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js b/frontend/src/components/partnerMapswipeStats/projectTypeAreaStats.js
@@ -46,7 +46,7 @@ export const ProjectTypeAreaStats = ({
 
   return (
     <div
-      className="flex justify-between items-center flex-wrap flex-nowrap-ns"
+      className="flex justify-between items-center flex-wrap flex-nowrap-l"
       style={{ gap: '1.6rem' }}
     >
       <div className="pa4 flex items-center bg-white shadow-6 w-100" style={{ gap: '1.75rem' }}>

diff --git a/frontend/src/components/partnerMapswipeStats/swipesByOrganization.js b/frontend/src/components/partnerMapswipeStats/swipesByOrganization.js
@@ -80,11 +80,10 @@ export const SwipesByOrganization = ({ contributionsByOrganization = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByOrganization} />
       </h3>
-
       <div className="bg-white pa4 shadow-6 relative" style={{ height: '450px' }}>
         <canvas ref={chartRef}></canvas>
         {contributionsByOrganization.length === 0 && (

diff --git a/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js b/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js
@@ -82,7 +82,7 @@ export const SwipesByProjectType = ({ contributionsByProjectType = [] }) => {
   }, []);
 
   return (
-    <div style={{ width: '48.5%' }}>
+    <div className="mapswipe-stats-piechart">
       <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb4">
         <FormattedMessage {...messages.swipesByProjectType} />
       </h3>

diff --git a/frontend/src/components/partners/leaderboard.js b/frontend/src/components/partners/leaderboard.js
@@ -4,10 +4,13 @@ import messages from '../../views/messages';
 import { StatsSection } from './partnersStats';
 import { Activity } from './partnersActivity';
 import { CurrentProjects } from './currentProjects';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const Leaderboard = ({ partner, partnerStats }) => {
   return (
     <div className="pa4 bg-tan flex flex-column gap-1.25">
+      <StatsInfoFooter className="mv3" />
+
       <div className="flex justify-between items-center">
         <h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
           {partner.primary_hashtag

diff --git a/frontend/src/components/partners/partners.js b/frontend/src/components/partners/partners.js
@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-        <Link to={`/partners/${details.permalink}/stats/leaderboard`}>
+        <Link to={`/partners/${details.permalink}/stats`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"

diff --git a/frontend/src/components/partners/partnersStats.js b/frontend/src/components/partners/partnersStats.js
@@ -4,7 +4,6 @@ import shortNumber from 'short-number';
 import messages from './messages';
 import { StatsCard } from '../statsCard';
 import { MappingIcon, EditIcon, RoadIcon, HomeIcon } from '../svgIcons';
-import StatsInfoFooter from '../statsInfoFooter';
 
 const iconClass = 'h-50 w-50';
 const iconStyle = { height: '45px' };
@@ -71,7 +70,6 @@ export const StatsSection = ({ partner }) => {
           className={'w-25-l w-50-m w-100 mv1'}
         />
       </div>
-      <StatsInfoFooter />
     </div>
   );
 };
diff --git a/frontend/src/components/projectStats/edits.js b/frontend/src/components/projectStats/edits.js
@@ -4,7 +4,7 @@ import projectMessages from './messages';
 import userDetailMessages from '../userDetail/messages';
 import { MappingIcon, HomeIcon, RoadIcon, EditIcon } from '../svgIcons';
 import { StatsCard } from '../statsCard';
-import StatsTimestamp from '../statsTimestamp';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const EditsStats = ({ data }) => {
   const { changesets, buildings, roads, edits } = data;
@@ -18,30 +18,32 @@ export const EditsStats = ({ data }) => {
         <h3 className="barlow-condensed ttu f3">
           <FormattedMessage {...projectMessages.edits} />
         </h3>
-        <StatsTimestamp messageType="project" />
       </div>
-      <div className="db pb2 project-edit-stats">
-        <StatsCard
-          field={'changesets'}
-          icon={<MappingIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...projectMessages.changesets} />}
-          value={changesets || 0}
-        />
-        <StatsCard
-          icon={<EditIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...projectMessages.totalEdits} />}
-          value={edits || 0}
-        />
-        <StatsCard
-          icon={<HomeIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
-          value={buildings || 0}
-        />
-        <StatsCard
-          icon={<RoadIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.roadMapped} />}
-          value={roads || 0}
-        />
+      <div>
+        <StatsInfoFooter className="mb4" />
+        <div className="db pb2 project-edit-stats">
+          <StatsCard
+            field={'changesets'}
+            icon={<MappingIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...projectMessages.changesets} />}
+            value={changesets || 0}
+          />
+          <StatsCard
+            icon={<EditIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...projectMessages.totalEdits} />}
+            value={edits || 0}
+          />
+          <StatsCard
+            icon={<HomeIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
+            value={buildings || 0}
+          />
+          <StatsCard
+            icon={<RoadIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.roadMapped} />}
+            value={roads || 0}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/components/statsInfoFooter/index.jsx b/frontend/src/components/statsInfoFooter/index.jsx
@@ -2,27 +2,37 @@ import { useIntl } from 'react-intl';
 
 import { useOsmStatsMetadataQuery } from '../../api/stats';
 import { dateOptions } from '../statsTimestamp';
+import { InfoIcon } from '../svgIcons';
+import '../../views/partnersMapswipeStats.scss';
 
-export default function StatsInfoFooter() {
+export default function StatsInfoFooter({ className }) {
   const intl = useIntl();
 
   const { data: osmStatsMetadata } = useOsmStatsMetadataQuery();
 
   return (
-    <div className="cf w-100 relative tr pt3">
-      <span className="ma0 f7 fw4 blue-grey mb1 i">
-        These statistics come from{' '}
-        <a
-          className="blue-grey fw7"
-          href="https://stats.now.ohsome.org/about"
-          target="_blank"
-          rel="noreferrer"
-        >
-          ohsomeNow Stats
-        </a>{' '}
-        and were last updated at{' '}
-        <strong>{intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}</strong> (
-        {intl.timeZone}).
+    <div
+      className={`pr3 pv2 pl0 relative inline-flex mapswipe-stats-info-banner
+      blue-dark ${className}`}
+    >
+      <span className="inline-flex items-center ">
+        <InfoIcon className="mr2" style={{ height: '20px' }} />
+        <span>
+          These statistics come from{' '}
+          <a
+            className="blue-grey"
+            href="https://stats.now.ohsome.org/about"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ohsomeNow Stats
+          </a>{' '}
+          and were last updated at{' '}
+          <span className="fw5 stats-info-datetime">
+            {intl.formatDate(osmStatsMetadata?.max_timestamp, dateOptions)}
+          </span>{' '}
+          ({intl.timeZone})
+        </span>
       </span>
     </div>
   );

diff --git a/frontend/src/components/teamsAndOrgs/featureStats.js b/frontend/src/components/teamsAndOrgs/featureStats.js
@@ -7,7 +7,7 @@ import userDetailMessages from '../userDetail/messages';
 import { OHSOME_STATS_BASE_URL, defaultChangesetComment } from '../../config';
 import { RoadIcon, HomeIcon, WavesIcon, MarkerIcon } from '../svgIcons';
 import { StatsCard } from '../statsCard';
-import StatsTimestamp from '../statsTimestamp';
+import StatsInfoFooter from '../statsInfoFooter';
 
 export const FeatureStats = () => {
   const [stats, setStats] = useState({ edits: 0, buildings: 0, roads: 0, pois: 0, waterways: 0 });
@@ -42,33 +42,36 @@ export const FeatureStats = () => {
         <h4 className="f3 fw6 ttu barlow-condensed blue-dark">
           <FormattedMessage {...messages.totalFeatures} />
         </h4>
-        <StatsTimestamp messageType="generic" />
       </div>
       <div className="w-100 cf">
-        <StatsCard
-          icon={<HomeIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
-          value={stats.buildings || 0}
-          className={'w-25-l w-50-m w-100 mv1'}
-        />
-        <StatsCard
-          icon={<RoadIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.roadMapped} />}
-          value={stats.roads || 0}
-          className={'w-25-l w-50-m w-100 mv1'}
-        />
-        <StatsCard
-          icon={<MarkerIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.poiMapped} />}
-          value={stats.pois || 0}
-          className={'w-25-l w-50-m w-100 mv1'}
-        />
-        <StatsCard
-          icon={<WavesIcon className={iconClass} style={iconStyle} />}
-          description={<FormattedMessage {...userDetailMessages.waterwaysMapped} />}
-          value={stats.waterways || 0}
-          className={'w-25-l w-50-m w-100 mv1'}
-        />
+        <StatsInfoFooter className="mb4" />
+
+        <div className="flex gap-1 flex-nowrap-l flex-wrap">
+          <StatsCard
+            icon={<HomeIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.buildingsMapped} />}
+            value={stats.buildings || 0}
+            className={'w-25-l w-50-m w-100 mv1'}
+          />
+          <StatsCard
+            icon={<RoadIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.roadMapped} />}
+            value={stats.roads || 0}
+            className={'w-25-l w-50-m w-100 mv1'}
+          />
+          <StatsCard
+            icon={<MarkerIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.poiMapped} />}
+            value={stats.pois || 0}
+            className={'w-25-l w-50-m w-100 mv1'}
+          />
+          <StatsCard
+            icon={<WavesIcon className={iconClass} style={iconStyle} />}
+            description={<FormattedMessage {...userDetailMessages.waterwaysMapped} />}
+            value={stats.waterways || 0}
+            className={'w-25-l w-50-m w-100 mv1'}
+          />
+        </div>
       </div>
     </>
   );

diff --git a/frontend/src/components/userDetail/elementsMapped.js b/frontend/src/components/userDetail/elementsMapped.js
@@ -125,6 +125,8 @@ export const ElementsMapped = ({ userStats, osmStats }) => {
 
   return (
     <div>
+      <StatsInfoFooter className="mb4" />
+
       <div className="w-100 relative stats-cards-container">
         <StatsCard
           invertColors={true}
@@ -173,8 +175,6 @@ export const ElementsMapped = ({ userStats, osmStats }) => {
           unitLess={osmStats?.waterway?.modified?.unit_less}
         />
       </div>
-
-      <StatsInfoFooter />
     </div>
   );
 };
diff --git a/frontend/src/views/home.js b/frontend/src/views/home.js
@@ -8,7 +8,6 @@ import { WhoIsMapping } from '../components/homepage/whoIsMapping';
 import { Testimonials } from '../components/homepage/testimonials';
 import { Alert } from '../components/alert';
 import homeMessages from '../components/homepage/messages';
-import StatsTimestamp from '../components/statsTimestamp/';
 
 export function Home() {
   return (
@@ -24,9 +23,6 @@ export function Home() {
         }
       >
         <StatsSection />
-        <div class="cf w-100 relative tr pt3 pr3">
-          <StatsTimestamp messageType="generic" />
-        </div>
       </ErrorBoundary>
       <MappingFlow />
       <WhoIsMapping />

diff --git a/frontend/src/views/partnersMapswipeStats.css b/frontend/src/views/partnersMapswipeStats.css