Frontend changes for showing tabbed course overview stats #5064
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import OverviewStat from './overview_stat'; | ||
|
|
||
| const NamespaceOverviewStats = ({ statistics }) => { | ||
| return ( | ||
| <div className="stat-display"> | ||
| <OverviewStat | ||
| id="articles-created" | ||
| className="stat-display__value" | ||
| stat={statistics.new_count} | ||
| statMsg={I18n.t('metrics.articles_created')} | ||
| renderZero={false} | ||
| /> | ||
| <OverviewStat | ||
| id="articles-edited" | ||
| className="stat-display__value" | ||
| stat = {statistics.edited_count} | ||
| statMsg={I18n.t('metrics.articles_edited')} | ||
| renderZero={true} | ||
| /> | ||
| <OverviewStat | ||
| id="total-edits" | ||
| className="stat-display__value" | ||
| stat = {statistics.revision_count} | ||
| statMsg={I18n.t('metrics.edit_count_description')} | ||
| renderZero={true} | ||
| /> | ||
| <OverviewStat | ||
| id="student-editors" | ||
| className="stat-display__value" | ||
| stat={statistics.user_count} | ||
| statMsg={I18n.t('courses.student_editors')} | ||
| renderZero={true} | ||
| /> | ||
| <OverviewStat | ||
| id="word-count" | ||
| className="stat-display__value" | ||
| stat={statistics.word_count} | ||
| statMsg={I18n.t('metrics.word_count')} | ||
| renderZero={true} | ||
| /> | ||
| <OverviewStat | ||
| id="references-count" | ||
| className="stat-display__value" | ||
| stat={statistics.references_count} | ||
| statMsg={I18n.t('metrics.references_count')} | ||
| renderZero={false} | ||
| /> | ||
| <OverviewStat | ||
| id="view-count" | ||
| className="stat-display__value" | ||
| stat={statistics.views_count} | ||
| statMsg={I18n.t('metrics.view_count_description')} | ||
| renderZero={true} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| NamespaceOverviewStats.propTypes = { | ||
| statistics: PropTypes.object.isRequired | ||
| }; | ||
|
|
||
| export default NamespaceOverviewStats; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const OverviewStatsTab = ({ id, title, active, onClick }) => { | ||
| const isActive = (active) ? ' active' : ''; | ||
| const tabClass = `tab${isActive}`; | ||
| return ( | ||
| <div className={tabClass} onClick={onClick} id={id}> | ||
| <p>{title}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| OverviewStatsTab.propTypes = { | ||
| id: PropTypes.number.isRequired, | ||
| title: PropTypes.string.isRequired, | ||
| active: PropTypes.bool.isRequired, | ||
| onClick: PropTypes.func.isRequired | ||
| }; | ||
|
|
||
| export default OverviewStatsTab; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React, { useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import OverviewStatsTab from './OverviewStats/overview_stats_tab'; | ||
| import NamespaceOverviewStats from './OverviewStats/namespace_overview_stats'; | ||
| import WikidataOverviewStats from './wikidata_overview_stats'; | ||
|
|
||
| import ArticleUtils from '../../utils/article_utils'; | ||
|
|
||
|
|
||
| const OverviewStatsTabs = ({ statistics }) => { | ||
| const [currentTabId, setCurrentTabId] = useState(0); | ||
|
|
||
| const getTabTitle = (ns_id, wiki) => { | ||
|
There was a problem hiding this comment. These two functions should probably be in a utils file rather than in this component. Tests for them would also be good. |
||
| const project = wiki.split('.')[1]; | ||
| let ns_title = ArticleUtils.NamespaceIdMapping[ns_id]; | ||
| if (typeof (ns_title) !== 'string') ns_title = ns_title[project]; | ||
| return `${I18n.t(`namespace.${ns_title}`)} (${wiki})`; | ||
| }; | ||
|
|
||
| const getContentTitle = (ns_id, wiki) => { | ||
| const project = wiki.split('.')[1]; | ||
| let ns_title = ArticleUtils.NamespaceIdMapping[ns_id]; | ||
| if (typeof (ns_title) !== 'string') ns_title = ns_title[project]; | ||
| return `Stats for ${I18n.t(`namespace.${ns_title}`)} (${wiki})`; | ||
|
There was a problem hiding this comment. This message shouldn't be hard-coded in English. Per the design image I shared, we might not need a message like this anyway; the label for each tab could just be the domain plus the namespace name (when there is one). |
||
| }; | ||
|
|
||
| const onTabChange = (e) => { | ||
| return setCurrentTabId(Number(e.currentTarget.id)); | ||
| }; | ||
|
|
||
| const hasWikidataStats = () => { | ||
| if (statistics['www.wikidata.org']) return true; | ||
| return false; | ||
| }; | ||
|
|
||
| const statsDataList = []; | ||
| // if there are wikidata overview stats, they should be displayed on first tab | ||
|
There was a problem hiding this comment. This and the forEach loop are more data manipulation than I'd like to see. If possible, it would be best to do this in a way that doesn't special-case Wikidata. (I don't think it necessarily needs to be first.) There was a problem hiding this comment. Also, I got this conceptual question. For each tab we have a different content rendered by different component. So, is it better to create this components, store and use them (like I am doing now), or is it better to initialize and render them instantaneously when a tab is selected? I think in our case, the compoents are not that heavy and so they can probably be stored before hand. |
||
| if (hasWikidataStats) { | ||
| statsDataList.push({ | ||
| id: 0, | ||
| tabTitle: 'Wikidata', | ||
| contentTitle: null, // title for wikidata stats already exists in WikidataOverviewStats component | ||
| data: statistics['www.wikidata.org'] | ||
| }); | ||
| } | ||
|
|
||
| let index = hasWikidataStats ? 1 : 0; | ||
| Object.keys(statistics).forEach((wiki_ns) => { | ||
| if (!wiki_ns.includes('namespace')) return; // return if it doesn't contain namespace stats | ||
|
|
||
| const ns_id = Number(wiki_ns.split('-')[2]); // namespace id | ||
| const wiki = wiki_ns.split('-')[0]; | ||
| const id = index; | ||
| const tabTitle = getTabTitle(ns_id, wiki); | ||
| const contentTitle = getContentTitle(ns_id, wiki); | ||
| const data = statistics[wiki_ns]; | ||
| statsDataList.push({ id, tabTitle, contentTitle, data }); | ||
| index += 1; | ||
| }); | ||
|
|
||
| const tabsList = statsDataList.map((obj) => { | ||
| return ( | ||
| <OverviewStatsTab | ||
| key={obj.id} | ||
| id={obj.id} | ||
| onClick={onTabChange} | ||
| title={obj.tabTitle} | ||
| active={currentTabId === obj.id} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| const contentTitle = statsDataList[currentTabId].contentTitle; | ||
| const data = statsDataList[currentTabId].data; | ||
| const content = (hasWikidataStats && currentTabId === 0) | ||
| ? <WikidataOverviewStats statistics={data} isCourseOverview={true}/> | ||
|
There was a problem hiding this comment. It might make sense here to implement another simple component (eg, There was a problem hiding this comment. Well, I have already created a component named There was a problem hiding this comment. You're right, And yes, I think having this component identify wikidata vs namespace stats should be done in that new component. There was a problem hiding this comment. @ragesoss, I have created the |
||
| : <NamespaceOverviewStats statistics={data} />; | ||
|
|
||
| return ( | ||
| <div className="overview-stats-tabs-container"> | ||
| <div className="tabs-container"> | ||
| {tabsList} | ||
| </div> | ||
| <div className="content-container"> | ||
| <h2 className="title">{contentTitle}</h2> | ||
| <div className="stats-data"> | ||
| {content} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| OverviewStatsTabs.propTypes = { | ||
| statistics: PropTypes.object.isRequired | ||
| }; | ||
|
|
||
| export default OverviewStatsTabs; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,7 +38,8 @@ const initialState = { | |
| loading: true, | ||
| updates: {}, | ||
| wikis: [], | ||
| article_count: 0, | ||
| course_stats: {} | ||
| }; | ||
|
|
||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the user count needs to be in any namespace-specific stats.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Won't it give insight of how many students worked on particular tracked namespace?