From 0c30aea0f5a2641f1545bb8999402689ba19cf72 Mon Sep 17 00:00:00 2001 From: Hel Nershing Thapa Date: Mon, 21 Aug 2023 13:19:01 +0545 Subject: [PATCH] Add `StatsTimestamp` component - Introduce a new component, `StatsTimestamp`, responsible for displaying timestamps with tooltips. This component accepts a `messageType` prop to determine whether to show a generic or project-specific message. The inconsistent icon usage has been resolved, now consistently using an info icon. - Reorganized the codebase by removing timestamp implementations from the User Contributions and Project Stats components. Instead, these components now utilize the newly introduced `StatsTimestamp` component for timestamp display. - Integrated the `StatsTimestamp` component into the Total Features section of the overall statistics page. --- frontend/src/components/projectStats/edits.js | 21 +++---- .../src/components/projectStats/messages.js | 4 -- .../src/components/statsTimestamp/index.js | 44 +++++++++++++ .../src/components/statsTimestamp/messages.js | 13 ++++ .../components/teamsAndOrgs/featureStats.js | 62 +++++++++++-------- .../src/components/teamsAndOrgs/messages.js | 4 ++ .../components/userDetail/elementsMapped.js | 14 +---- .../src/components/userDetail/messages.js | 5 -- frontend/src/locales/en.json | 6 +- frontend/src/views/messages.js | 4 -- frontend/src/views/stats.js | 3 - 11 files changed, 111 insertions(+), 69 deletions(-) create mode 100644 frontend/src/components/statsTimestamp/index.js create mode 100644 frontend/src/components/statsTimestamp/messages.js diff --git a/frontend/src/components/projectStats/edits.js b/frontend/src/components/projectStats/edits.js index 04a8a96164..7f76e9733f 100644 --- a/frontend/src/components/projectStats/edits.js +++ b/frontend/src/components/projectStats/edits.js @@ -1,14 +1,13 @@ import React from 'react'; -import ReactTooltip from 'react-tooltip'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import projectMessages from './messages'; import userDetailMessages from '../userDetail/messages'; -import { MappingIcon, HomeIcon, RoadIcon, EditIcon, InfoIcon } from '../svgIcons'; +import { MappingIcon, HomeIcon, RoadIcon, EditIcon } from '../svgIcons'; import { StatsCard } from '../statsCard'; +import StatsTimestamp from '../statsTimestamp'; export const EditsStats = ({ data }) => { - const intl = useIntl(); const { changesets, buildings, roads, edits } = data; const iconClass = 'h-50 w-50'; @@ -16,14 +15,12 @@ export const EditsStats = ({ data }) => { return (
-

- - -

- +
+

+ +

+ +
{ + fetchExternalJSONAPI(`${OHSOME_STATS_BASE_URL}/metadata`) + .then((res) => { + setLastUpdated(res.result.max_timestamp); + }) + .catch((error) => console.error(error)); + }, []); + + const dateOptions = { + year: 'numeric', + month: 'short', + day: '2-digit', + hour: 'numeric', + minute: 'numeric', + }; + + return ( +
+ + +
+ ); +} + +export default StatsTimestamp; diff --git a/frontend/src/components/statsTimestamp/messages.js b/frontend/src/components/statsTimestamp/messages.js new file mode 100644 index 0000000000..143599e81a --- /dev/null +++ b/frontend/src/components/statsTimestamp/messages.js @@ -0,0 +1,13 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + generic: { + id: 'stats.ohsome.timestamp.generic', + defaultMessage: 'These statistics were last updated at {formattedDate}', + }, + project: { + id: 'stats.ohsome.timestamp.project', + defaultMessage: + 'These stats were retrieved using the default changeset comment of the project and were last updated at {formattedDate}', + }, +}); diff --git a/frontend/src/components/teamsAndOrgs/featureStats.js b/frontend/src/components/teamsAndOrgs/featureStats.js index 3d6b8c07e6..ffeeb5bd31 100644 --- a/frontend/src/components/teamsAndOrgs/featureStats.js +++ b/frontend/src/components/teamsAndOrgs/featureStats.js @@ -2,10 +2,12 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { FormattedMessage } from 'react-intl'; +import messages from './messages'; import userDetailMessages from '../userDetail/messages'; import { OHSOME_STATS_BASE_URL } from '../../config'; import { RoadIcon, HomeIcon, WavesIcon, MarkerIcon } from '../svgIcons'; import { StatsCard } from '../statsCard'; +import StatsTimestamp from '../statsTimestamp'; export const FeatureStats = () => { const [stats, setStats] = useState({ edits: 0, buildings: 0, roads: 0, pois: 0, waterways: 0 }); @@ -35,31 +37,39 @@ export const FeatureStats = () => { const iconStyle = { height: '45px' }; return ( -
- } - description={} - value={stats.buildings || 0} - className={'w-25-l w-50-m w-100 mv1'} - /> - } - description={} - value={stats.roads || 0} - className={'w-25-l w-50-m w-100 mv1'} - /> - } - description={} - value={stats.pois || 0} - className={'w-25-l w-50-m w-100 mv1'} - /> - } - description={} - value={stats.waterways || 0} - className={'w-25-l w-50-m w-100 mv1'} - /> -
+ <> +
+

+ +

+ +
+
+ } + description={} + value={stats.buildings || 0} + className={'w-25-l w-50-m w-100 mv1'} + /> + } + description={} + value={stats.roads || 0} + className={'w-25-l w-50-m w-100 mv1'} + /> + } + description={} + value={stats.pois || 0} + className={'w-25-l w-50-m w-100 mv1'} + /> + } + description={} + value={stats.waterways || 0} + className={'w-25-l w-50-m w-100 mv1'} + /> +
+ ); }; diff --git a/frontend/src/components/teamsAndOrgs/messages.js b/frontend/src/components/teamsAndOrgs/messages.js index 3bdde8966b..9eb884e3a4 100644 --- a/frontend/src/components/teamsAndOrgs/messages.js +++ b/frontend/src/components/teamsAndOrgs/messages.js @@ -549,4 +549,8 @@ export default defineMessages({ id: 'management.stats.overview', defaultMessage: 'Overview', }, + totalFeatures: { + id: 'management.stats.features', + defaultMessage: 'Total features', + }, }); diff --git a/frontend/src/components/userDetail/elementsMapped.js b/frontend/src/components/userDetail/elementsMapped.js index 4e61d31d57..1a4da1ef7b 100644 --- a/frontend/src/components/userDetail/elementsMapped.js +++ b/frontend/src/components/userDetail/elementsMapped.js @@ -1,6 +1,5 @@ import React from 'react'; import humanizeDuration from 'humanize-duration'; -import ReactTooltip from 'react-tooltip'; import { FormattedMessage } from 'react-intl'; import messages from './messages'; @@ -10,11 +9,11 @@ import { HomeIcon, WavesIcon, MarkerIcon, - QuestionCircleIcon, MappedIcon, ValidatedIcon, } from '../svgIcons'; import { StatsCard } from '../statsCard'; +import StatsTimestamp from '../statsTimestamp'; export const TaskStats = ({ userStats, username }) => { const { @@ -156,16 +155,7 @@ export const ElementsMapped = ({ userStats, osmStats }) => { />
- - {(msg) => ( - - )} - - +
); diff --git a/frontend/src/components/userDetail/messages.js b/frontend/src/components/userDetail/messages.js index afc47e52f4..61c8e8359e 100644 --- a/frontend/src/components/userDetail/messages.js +++ b/frontend/src/components/userDetail/messages.js @@ -121,11 +121,6 @@ export default defineMessages({ id: 'users.detail.heatmapLegendLess', defaultMessage: 'less', }, - delayPopup: { - id: 'users.detail.delay_popup', - defaultMessage: - 'These statistics need heavy calculations and changes are showing up with a delay of around one hour.', - }, teams: { id: 'users.detail.teams', defaultMessage: 'Teams', diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 9901b9ba1d..be2749fae0 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -616,7 +616,8 @@ "project.stats.totalEdits": "Total map edits", "project.stats.changesets": "Changesets", "project.stats.edits": "Edits", - "project.stats.edits.info": "These stats are retrieved using the default changeset comment of the project", + "stats.ohsome.timestamp.generic": "These statistics were last updated at {formattedDate}", + "stats.ohsome.timestamp.project": "These stats were retrieved using the default changeset comment of the project and were last updated at {formattedDate}", "project.tasks.unsaved_map_changes.title": "You have some unsaved map changes", "project.tasks.unsaved_map_changes.split": "Save or undo it to be able to split the task", "project.tasks.unsaved_map_changes.unlock": "Save or undo it to be able to select another task", @@ -944,6 +945,7 @@ "management.stats.new_users.email_verified": "Confirmed email address", "management.stats.title": "Statistics", "management.stats.overview": "Overview", + "management.stats.features": "Total features", "user.nextLevel": "{changesets} / {nextLevelThreshold} changesets to {level}", "user.personalInfo": "Personal information", "user.name": "Name", @@ -1064,7 +1066,6 @@ "users.detail.heatmapContributions": "contributions", "users.detail.heatmapLegendMore": "more", "users.detail.heatmapLegendLess": "less", - "users.detail.delay_popup": "These statistics need heavy calculations and changes are showing up with a delay of around one hour.", "users.detail.teams": "Teams", "error.page.title": "An error occurred", "error.page.description": "Something did not work well...", @@ -1082,7 +1083,6 @@ "management.managers": "Managers", "management.users.title": "Manage users", "management.stats.users.title": "New users", - "management.stats.features": "Total features", "teamsAndOrgs.management.organisation.creation": "Create new organization", "teamsAndOrgs.management.organisation.orgCreationNameExistsError": "Organisation name already exists", "teamsAndOrgs.management.organisation.edit": "Edit organization", diff --git a/frontend/src/views/messages.js b/frontend/src/views/messages.js index 207d265491..2045f07b3b 100644 --- a/frontend/src/views/messages.js +++ b/frontend/src/views/messages.js @@ -68,10 +68,6 @@ export default defineMessages({ id: 'management.stats.users.title', defaultMessage: 'New users', }, - totalFeatures: { - id: 'management.stats.features', - defaultMessage: 'Total features', - }, newOrganisation: { id: 'teamsAndOrgs.management.organisation.creation', defaultMessage: 'Create new organization', diff --git a/frontend/src/views/stats.js b/frontend/src/views/stats.js index 309ddaebd0..c98f99541f 100644 --- a/frontend/src/views/stats.js +++ b/frontend/src/views/stats.js @@ -45,9 +45,6 @@ export const Stats = () => {
-

- -