Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/240339
Change subject: CXStas: Club the cumulative and trend under tabs
......................................................................
CXStas: Club the cumulative and trend under tabs
Bug: T113335
Bug: T113356
Change-Id: I882c28294f35e5c0ec8e883ac6f328694a936808
---
M modules/stats/ext.cx.stats.js
1 file changed, 166 insertions(+), 104 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/39/240339/1
diff --git a/modules/stats/ext.cx.stats.js b/modules/stats/ext.cx.stats.js
index 39f09d9..867b8ce 100644
--- a/modules/stats/ext.cx.stats.js
+++ b/modules/stats/ext.cx.stats.js
@@ -32,79 +32,25 @@
$( '<div>' ).addClass( 'bounce3' )
);
this.$highlights = $( '<div>' ).addClass( 'cx-stats-highlights'
);
- this.$cumulativeGraph = $( '<canvas>' ).attr( {
- id: 'cxcumulative',
- width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
- height: 400
- } );
-
- this.$languageCumulativeGraph = $( '<canvas>' ).attr( {
- id: 'cxlangcumulative',
- width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
- height: 400
- } );
-
- this.$translatonTrendBarChart = $( '<canvas>' ).attr( {
- id: 'cxtrendchart',
- width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
- height: 400
- } );
-
- this.$langTranslatonTrendBarChart = $( '<canvas>' ).attr( {
- id: 'cxlangtrendchart',
- width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
- height: 400
- } );
-
- this.$container.append(
- $spinner,
- this.$highlights,
- $( '<h2>' ).text( mw.msg(
'cx-stats-all-translations-title' ) ),
- $( '<div>' )
- .addClass( 'cx-stats-graph
cx-stats-cumulative-total' )
- .append( this.$cumulativeGraph ),
- $( '<h2>' ).text( mw.message(
- 'cx-trend-translations-to',
- $.uls.data.getAutonym( mw.config.get(
'wgContentLanguage' ) )
- ).escaped() ),
- $( '<div>' )
- .addClass( 'cx-stats-graph
cx-stats-cumulative-lang' )
- .append( this.$languageCumulativeGraph ),
- $( '<h2>' ).text( mw.msg(
'cx-trend-published-translations-title' ) ),
- $( '<div>' )
- .addClass( 'cx-stats-graph
cx-stats-trend-total' )
- .append( this.$translatonTrendBarChart ),
- $( '<h2>' ).text( mw.message(
- 'cx-trend-translations-to-title',
- $.uls.data.getAutonym( mw.config.get(
'wgContentLanguage' ) )
- ).escaped() ),
- $( '<div>' )
- .addClass( 'cx-stats-graph cx-stats-trend-lang'
)
- .append( this.$langTranslatonTrendBarChart )
- );
+ this.$container.append( $spinner, this.$highlights );
$.when(
this.getCXTrends(),
- this.getCXTrends( mw.config.get( 'wgContentLanguage' ) )
- ).done( function ( totalTrend, languageTrend ) {
+ this.getCXTrends( mw.config.get( 'wgContentLanguage' )
),
+ this.getCXStats()
+ ).done( function ( totalTrend, languageTrend, stats ) {
+ // Remove spinner
+ $spinner.remove();
+ // Do the maths
self.totalTranslationTrend = totalTrend.translations;
self.totalDraftTrend = totalTrend.drafts;
-
self.languageTranslationTrend =
languageTrend.translations;
self.languageDraftTrend = languageTrend.drafts;
self.languageDeletionTrend = languageTrend.deletions;
+ self.transformJsonToModel( stats[ 0
].query.contenttranslationstats );
+ // Now render them all
self.renderHighlights();
- self.drawCumulativeGraph( 'count' );
- self.drawLanguageCumulativeGraph( 'count' );
- self.drawTranslationTrend();
- self.drawLangTranslationTrend();
- } );
- this.getCXStats().then( function ( data ) {
- if ( !data || !data.query ) {
- return;
- }
- $spinner.remove();
- self.drawCharts( data.query.contenttranslationstats );
+ self.render();
} );
};
@@ -230,11 +176,96 @@
this.$highlights.append( $total, $weeklyStats );
};
- CXStats.prototype.drawCharts = function ( stats ) {
- this.transformJsonToModel( stats );
- this.$container.append(
- $( '<h2>' ).text( mw.msg(
'cx-stats-published-translations-title' ) ),
- createTabs( 'cx-stats-published', [
+ CXStats.prototype.render = function () {
+ var self = this;
+
+ this.$cumulativeGraph = $( '<canvas>' ).attr( {
+ id: 'cxcumulative',
+ width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
+ height: 400
+ } );
+
+ this.$languageCumulativeGraph = $( '<canvas>' ).attr( {
+ id: 'cxlangcumulative',
+ width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
+ height: 400
+ } );
+
+ this.$translatonTrendBarChart = $( '<canvas>' ).attr( {
+ id: 'cxtrendchart',
+ width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
+ height: 400
+ } );
+
+ this.$langTranslatonTrendBarChart = $( '<canvas>' ).attr( {
+ id: 'cxlangtrendchart',
+ width: this.$container.width() - 200, // Leave a 200px
margin buffer to avoid overflow
+ height: 400
+ } );
+
+ this.$container.append( $( '<h2>' ).text( mw.msg(
'cx-stats-all-translations-title' ) ) );
+ this.createTabs(
+ 'cx-graph-total',
+ [
+ {
+ title: mw.msg(
'cx-stats-all-translations-title' ),
+ content: $( '<div>' )
+ .addClass( 'cx-stats-graph
cx-stats-cumulative-total' )
+ .append( this.$cumulativeGraph
),
+ onVisible: function () {
+ self.drawCumulativeGraph(
'count' );
+ }
+ },
+ {
+ title: mw.msg(
'cx-trend-published-translations-title' ),
+ content: $( '<div>' )
+ .addClass( 'cx-stats-graph
cx-stats-trend-total' )
+ .append(
this.$translatonTrendBarChart ),
+ onVisible: function () {
+ self.drawTranslationTrend();
+ }
+ }
+ ]
+ );
+
+ this.$container.append( $( '<h2>' ).text( mw.message(
+ 'cx-trend-translations-to',
+ $.uls.data.getAutonym( mw.config.get(
'wgContentLanguage' ) )
+ ).escaped() ) );
+ this.createTabs(
+ 'cx-graph-language',
+ [
+ {
+ title: mw.message(
+ 'cx-trend-translations-to',
+ $.uls.data.getAutonym(
mw.config.get( 'wgContentLanguage' ) )
+ ).escaped(),
+ content: $( '<div>' )
+ .addClass( 'cx-stats-graph
cx-stats-cumulative-lang' )
+ .append(
this.$languageCumulativeGraph ),
+ onVisible: function () {
+
self.drawLanguageCumulativeGraph( 'count' );
+ }
+ },
+ {
+ title: mw.message(
+
'cx-trend-translations-to-title',
+ $.uls.data.getAutonym(
mw.config.get( 'wgContentLanguage' ) )
+ ).escaped(),
+ content: $( '<div>' )
+ .addClass( 'cx-stats-graph
cx-stats-trend-lang' )
+ .append(
this.$langTranslatonTrendBarChart ),
+ onVisible: function () {
+ self.drawLangTranslationTrend();
+ }
+ }
+ ]
+ );
+
+ this.$container.append( $( '<h2>' ).text( mw.msg(
'cx-stats-published-translations-title' ) ) );
+ this.createTabs(
+ 'cx-stats-published',
+ [
{
title: mw.msg(
'cx-stats-published-target-source' ),
content: this.drawTranslationsChart(
'to', 'published', 'count' )
@@ -243,9 +274,14 @@
title: mw.msg(
'cx-stats-published-source-target' ),
content: this.drawTranslationsChart(
'from', 'published', 'count' )
}
- ] ),
- $( '<h2>' ).text( mw.msg(
'cx-stats-draft-translations-label' ) ),
- createTabs( 'cx-stats-draft', [
+ ],
+ true
+ );
+
+ this.$container.append( $( '<h2>' ).text( mw.msg(
'cx-stats-draft-translations-label' ) ) );
+ this.createTabs(
+ 'cx-stats-draft',
+ [
{
title: mw.msg(
'cx-stats-draft-target-source' ),
content: this.drawTranslationsChart(
'to', 'draft', 'count' )
@@ -254,9 +290,14 @@
title: mw.msg(
'cx-stats-draft-source-target' ),
content: this.drawTranslationsChart(
'from', 'draft', 'count' )
}
- ] ),
- $( '<h2>' ).text( mw.msg(
'cx-stats-published-translators-title' ) ),
- createTabs( 'cx-stats-translators', [
+ ],
+ true
+ );
+
+ this.$container.append( $( '<h2>' ).text( mw.msg(
'cx-stats-published-translators-title' ) ) );
+ this.createTabs(
+ 'cx-stats-translators',
+ [
{
title: mw.msg(
'cx-stats-published-target-source' ),
content: this.drawTranslationsChart(
'to', 'published', 'translators' )
@@ -265,57 +306,78 @@
title: mw.msg(
'cx-stats-published-source-target' ),
content: this.drawTranslationsChart(
'from', 'published', 'translators' )
}
- ] )
+ ],
+ true
);
};
- function createTabs( id, items ) {
- var $container, $content, i, $tabs, $tab, $expand;
+ /**
+ * Create a tabbed container for holding related stats.
+ *
+ * @param {string} id tab id
+ * @param {Object[]} items
+ * @param {boolean} expandable
+ */
+ CXStats.prototype.createTabs = function ( id, items, expandable ) {
+ var $tabContainer, $content, i, $tabs, $tab, $expand;
- $container = $( '<div>' ).addClass( 'cx-stats-tabs-container' );
+ $tabContainer = $( '<div>' ).addClass(
'cx-stats-tabs-container' );
$tabs = $( '<ul>' ).addClass( 'cx-stats-tabs' );
- $container.append( $tabs );
+ $tabContainer.append( $tabs );
+ this.$container.append( $tabContainer );
for ( i = 0; i < items.length; i++ ) {
$tab = $( '<li>' )
.addClass( 'cx-stats-tabs-tabtitle' )
- .data( 'tab', id + 'tab-' + i )
+ .attr( 'about', id + 'tab-' + i )
+ .attr( 'data-itemid', i )
.text( items[ i ].title );
$content = items[ i ].content
.attr( 'id', id + 'tab-' + i )
.addClass( 'cx-stats-tabs-tab-content
cx-stats-tabs-collapsed' );
-
+ $tabs.append( $tab );
+ $tabContainer.append( $content );
if ( i === 0 ) {
$tab.addClass( 'cx-stats-tabs-current' );
$content.addClass( 'cx-stats-tabs-current' );
+ if ( items[ i ].onVisible ) {
+ items[ i ].onVisible.apply( this );
+ items[ i ].onVisible = null;
+ }
}
-
- $tabs.append( $tab );
- $container.append( $content );
}
// Click handler for tabs
$tabs.find( 'li' ).click( function () {
- var tabId = $( this ).data( 'tab' );
+ var onVisible,
+ $this = $( this ),
+ tabId = $( this ).attr( 'about' ),
+ itemId = $this.data( 'itemid' );
$tabs.find( 'li' ).removeClass( 'cx-stats-tabs-current'
);
- $container.find( '.cx-stats-tabs-tab-content' )
+ $tabContainer.find( '.cx-stats-tabs-tab-content' )
.removeClass( 'cx-stats-tabs-current' );
$( this ).addClass( 'cx-stats-tabs-current' );
$( '#' + tabId ).addClass( 'cx-stats-tabs-current' );
+
+ onVisible = items[ itemId ].onVisible;
+ if ( onVisible ) {
+ onVisible.apply( this );
+ items[ itemId ].onVisible = null;
+ }
} );
-
- $expand = $( '<a>' )
- .addClass( 'cx-stats-tabs-toggle-all' )
- .text( mw.msg( 'cx-stats-tabs-expand' ) )
- .click( function () {
- $container.find( '.cx-stats-tabs-tab-content' )
- .removeClass( 'cx-stats-tabs-collapsed'
);
- $( this ).remove();
- } );
- $container.append( $expand );
-
- return $container;
- }
+ if ( expandable ) {
+ $expand = $( '<a>' )
+ .addClass( 'cx-stats-tabs-toggle-all' )
+ .text( mw.msg( 'cx-stats-tabs-expand' ) )
+ .click( function () {
+ $tabContainer
+ .find(
'.cx-stats-tabs-tab-content' )
+ .removeClass(
'cx-stats-tabs-collapsed' );
+ $( this ).remove();
+ } );
+ $tabContainer.append( $expand );
+ }
+ };
CXStats.prototype.drawTranslationsChart = function ( direction, status,
property ) {
var $chart, $bar, translations, $translations, model, i, j,
$rows = [],
@@ -412,7 +474,7 @@
} )
.text( model[ i ].language );
- $autonym = $( '<span>' )
+ $autonym = $( '<span>' )
.addClass( 'cx-stats-chart__autonym' )
.prop( {
lang: model[ i ].language,
@@ -457,7 +519,7 @@
* Get the Content Translation stats.
*/
CXStats.prototype.getCXStats = function () {
- return ( new mw.Api() ).get( {
+ return new mw.Api().get( {
action: 'query',
list: 'contenttranslationstats'
} );
@@ -501,7 +563,7 @@
} )
},
{
- label: mw.msg(
'cx-stats-draft-translations-label' ),
+ label: mw.msg(
'cx-stats-draft-translations-label' ),
strokeColor: '#777',
pointColor: '#777',
pointStrokeColor: '#fff',
@@ -602,7 +664,7 @@
} )
},
{
- label: mw.msg(
'cx-stats-new-draft-translations-label' ),
+ label: mw.msg(
'cx-stats-new-draft-translations-label' ),
strokeColor: '#777',
fillColor: '#777',
pointColor: '#777',
--
To view, visit https://gerrit.wikimedia.org/r/240339
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I882c28294f35e5c0ec8e883ac6f328694a936808
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
