Frontend changes for showing tabbed course overview stats

app/assets/javascripts/components/common/OverviewStats/namespace_overview_stats.jsx

@@ -17,28 +17,28 @@ const NamespaceOverviewStats = ({ statistics }) => {
  className="stat-display__value"
  stat = {statistics.edited_count}
  statMsg={I18n.t('metrics.articles_edited')}
- renderZero={true}
+ renderZero={false}
  />
  <OverviewStat
  id="total-edits"
  className="stat-display__value"
  stat = {statistics.revision_count}
  statMsg={I18n.t('metrics.edit_count_description')}
- renderZero={true}
+ renderZero={false}
  />
  <OverviewStat
  id="student-editors"
  className="stat-display__value"
  stat={statistics.user_count}
  statMsg={I18n.t('courses.student_editors')}
- renderZero={true}
+ renderZero={false}
  />
  <OverviewStat
  id="word-count"
  className="stat-display__value"
  stat={statistics.word_count}
  statMsg={I18n.t('metrics.word_count')}
- renderZero={true}
+ renderZero={false}
  />
  <OverviewStat
  id="references-count"
@@ -52,7 +52,7 @@ const NamespaceOverviewStats = ({ statistics }) => {
  className="stat-display__value"
  stat={statistics.views_count}
  statMsg={I18n.t('metrics.view_count_description')}
- renderZero={true}
+ renderZero={false}
  />
  </div>
  );

app/assets/javascripts/components/common/OverviewStats/overview_stats_tab.jsx

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 const OverviewStatsTab = ({ id, title, active, onClick }) => {
  const isActive = (active) ? ' active' : '';
  const tabClass = `tab${isActive}`;
+ const tabId = `tab-${id}`;
  return (
- <div className={tabClass} onClick={onClick} id={id}>
+ <div className={tabClass} onClick={onClick} id={tabId}>
  <p>{title}</p>
  </div>
  );

app/assets/javascripts/components/common/overview_stats_tabs.jsx

@@ -11,7 +11,9 @@ const OverviewStatsTabs = ({ statistics }) => {
  const [currentTabId, setCurrentTabId] = useState(0);
 
  const onTabChange = (e) => {
- return setCurrentTabId(Number(e.currentTarget.id));
+ const tabId = e.currentTarget.id;
+ const tabIdNumber = Number(tabId.split('-')[1]);
+ return setCurrentTabId(tabIdNumber);
  };
 
  const statsList = [];

app/assets/javascripts/components/students/components/Articles/SelectedStudent/RevisionsList/StudentRevisionsList.jsx

@@ -8,14 +8,15 @@ import StudentRevisionRow from './StudentRevisionRow';
 
 // Libraries
 import CourseUtils from '~/app/assets/javascripts/utils/course_utils.js';
+import ArticleUtils from '~/app/assets/javascripts/utils/article_utils.js';
 import studentListKeys from '@components/students/shared/StudentList/student_list_keys.js';
 
 export class StudentRevisionsList extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
  isOpen: false,
- namespace: -1 // show all namespace revisions by default
+ namespace: 'all' // show all namespace revisions by default
  };
 
  this.toggleDrawer = this.toggleDrawer.bind(this);
@@ -24,7 +25,7 @@ export class StudentRevisionsList extends React.Component {
  onNamespaceChange = (e) => {
  // Open the drawer when filter is used
  if (!this.state.isOpen) this.setState({ isOpen: true });
- return this.setState({ namespace: Number(e.target.value) });
+ return this.setState({ namespace: e.target.value });
  };
 
  // filter the revisions according to namespace
@@ -33,10 +34,11 @@ export class StudentRevisionsList extends React.Component {
 
  let revisions = [];
  if (userRevisions[student.id] !== undefined && userRevisions[student.id] !== null) {
- revisions = (this.state.namespace === -1)
+ revisions = (this.state.namespace === 'all')
  ? userRevisions[student.id]
  : userRevisions[student.id].filter((rev) => {
- return rev.article.namespace === this.state.namespace;
+ const current_ns_id = ArticleUtils.getNamespaceId(this.state.namespace);
+ return rev.article.namespace === current_ns_id;
  });
  }
  return revisions;
@@ -97,10 +99,10 @@ export class StudentRevisionsList extends React.Component {
  value={this.state.namespace}
  onChange={this.onNamespaceChange}
  >
- <option value={-1}>{I18n.t('namespace.all')}</option>
- <option value={0}>{I18n.t('namespace.article')}</option>
- <option value={2}>{I18n.t('namespace.user')}</option>
- <option value={1}>{I18n.t('namespace.talk')}</option>
+ <option value={'all'}>{I18n.t('namespace.all')}</option>
+ <option value={'main'}>{I18n.t('namespace.main')}</option>
+ <option value={'user'}>{I18n.t('namespace.user')}</option>
+ <option value={'talk'}>{I18n.t('namespace.talk')}</option>
  </select>
  );
  return (

app/assets/javascripts/utils/article_utils.js

@@ -58,4 +58,11 @@ export default class ArticleUtils {
  wikiversity: 'collection'
  }
  };
+
+ // Get namespace id from its title
+ static getNamespaceId(namespace) {
+ const ns_id_mapping = this.NamespaceIdMapping;
+ const ns_id = Object.keys(ns_id_mapping).find(ns => ns_id_mapping[ns] === namespace);
+ return Number(ns_id);
+ }
 }

app/helpers/course_helper.rb

@@ -29,12 +29,15 @@ def course_i18n(message_key, course = nil)
  I18n.t("#{string_prefix}.#{message_key}")
  end
 
- def format_wikidata_stats(course_stats)
- course_stats['www.wikidata.org']['other updates'] += course_stats['www.wikidata.org']['unknown']
- course_stats['www.wikidata.org'].reject! { |k, _v| k == 'unknown' }
- course_stats.each_value do |stat|
- stat.each do |key, value|
- stat[key] = number_to_human(value)
+ def format_course_stats(course_stats)
+ course_stats.each do |wiki_ns_key, wiki_ns_stats|
+ if wiki_ns_key == 'www.wikidata.org'
+ course_stats[wiki_ns_key]['other updates'] += course_stats[wiki_ns_key]['unknown']
+ course_stats[wiki_ns_key].reject! { |k, _v| k == 'unknown' }
+ end
+ # convert stats to human readable values
+ course_stats[wiki_ns_key].each do |stat_key, stat|
+ course_stats[wiki_ns_key][stat_key] = number_to_human(stat)
  end
  end
  course_stats

app/presenters/courses_presenter.rb

@@ -151,9 +151,9 @@ def trained_percent
  end
 
  def wikidata_stats
- stats ||= courses.joins(:course_stat).where.not(course_stats: nil).map do |course|
+ stats ||= courses.joins(:course_stat).where.not(course_stats: nil).map { |course|
  course.course_stat.stats_hash['www.wikidata.org']
- end
+ }.compact
  return { 'www.wikidata.org' => stats.inject { |a, b| a.merge(b) { |_, x, y| x + y } } }
  end
 

app/views/campaigns/show.json.jbuilder

@@ -31,7 +31,7 @@ if @campaign
  json.created_at @campaign.created_at
 
  if @presenter.wikidata_stats['www.wikidata.org']
- json.course_stats format_wikidata_stats(@presenter.wikidata_stats)
+ json.course_stats format_course_stats(@presenter.wikidata_stats)
  end
  end
 end

app/views/courses/course.json.jbuilder

@@ -35,7 +35,7 @@ json.course do
  json.wiki_string_prefix @course.home_wiki.string_prefix
 
  if @course.course_stat
- @course.course_stat.stats_hash = format_wikidata_stats(@course.course_stat.stats_hash)
+ @course.course_stat.stats_hash = format_course_stats(@course.course_stat.stats_hash)
  json.course_stats @course.course_stat, :id, :stats_hash
  end
 

spec/features/detailed_course_stats_spec.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe 'Detailed course overview stats', type: :feature, js: true do
+ let(:course) { create(:course, start: '2022-01-01', end: '2023-01-01') }
+ before do
+ create(:course_stats, course: course,
+ stats_hash: {
+ 'www.wikidata.org': {
+ 'claims created': 35,
+ 'other updates': 2,
+ 'unknown': 6
+ },
+ 'en.wikibooks.org-namespace-102': {
+ 'new_count': 5,
+ 'edited_count': 72
+ },
+ 'en.wikipedia.org-namespace-0': {
+ 'new_count': 16,
+ 'edited_count': 103
+ }
+ }
+ )
+ visit "/courses/#{course.slug}"
+ end
+
+ it 'shows tabs for all the course stats objects' do
+ expect(page.find('#tab-0')).to have_content('www.wikidata.org')
+ expect(page.find('#tab-1')).to have_content('en.wikibooks.org - Cookbook')
+ expect(page.find('#tab-2')).to have_content('en.wikipedia.org - Mainspace')
+ end
+
+ it 'shows cookbook stats on clicking the \'en.wikibooks.org - Cookbook\' tab' do
+ page.find('#tab-1').click
+ expect(page).to have_content('en.wikibooks.org - Cookbook')
+ expect(page).to have_content('Articles Edited')
+ end
+
+ it 'shows wikidata overview stats on clicking the \'www.wikidata.org\' tab' do
+ page.find('#tab-0').click
+ expect(page).to have_content('www.wikidata.org')
+ expect(page).to have_content('Claims')
+ end
+end