From be70ed1b8636c30595d0393ba0aa57ce071c7c07 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 00:44:04 -0600 Subject: [PATCH 01/12] Add chart to ?action=info --- extension.json | 6 ++ includes/HookHandlers/Main.php | 17 ++-- includes/MatomoAnalyticsWiki.php | 7 +- modules/ext.matomoanalytics.infochart.js | 118 ++++++++++++++++++++++ modules/ext.matomoanalytics.infopage.less | 3 + 5 files changed, 142 insertions(+), 9 deletions(-) create mode 100644 modules/ext.matomoanalytics.infochart.js create mode 100644 modules/ext.matomoanalytics.infopage.less diff --git a/extension.json b/extension.json index 8fd257a..acf18be 100644 --- a/extension.json +++ b/extension.json @@ -72,6 +72,12 @@ "ext.matomoanalytics.graphs": { "scripts": "ext.matomoanalytics.graphs.js" }, + "ext.matomoanalytics.infochart": { + "scripts": "ext.matomoanalytics.infochart.js" + }, + "ext.matomoanalytics.infopage": { + "styles": "ext.matomoanalytics.infopage.less" + }, "ext.matomoanalytics.special": { "styles": "ext.matomoanalytics.special.less" } diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index 9dd485d..17853bd 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -85,22 +85,25 @@ public function onSkinAfterBottomScripts( $skin, &$text ) { return true; } - /** - * Display total pageviews in the last 30 days and show a graph with details when clicked. - * @param IContextSource $context - * @param array &$pageInfo - */ public function onInfoAction( $context, &$pageInfo ) { $mA = new MatomoAnalyticsWiki( $context->getConfig()->get( MainConfigNames::DBname ) ); + $context->getOutput()->addModules( [ 'ext.matomoanalytics.infocharts' ] ); + $context->getOutput()->addModuleStyles( [ 'ext.matomoanalytics.infopage' ] ); + $title = $context->getTitle(); $url = $title->getFullURL(); - $data = $mA->getPageViews( $url ); - $total = array_sum( $data ); + $data = $mA->getPageViews( $url, 'days' ); + $total = array_sum( array_filter( $data, 'is_numeric') ); $pageInfo['header-basic'][] = [ $context->msg( 'matomoanalytics-labels-pastmonth' ), $context->msg( 'matomoanalytics-count' )->numParams( $total )->parse() ]; + + $pageInfo['header-raw'][] = [ + $context->msg( 'matomoanalytics-labels-rawdata' ), + $context->msg( 'matomoanalytics-count' )->rawParams( json_encode( $data ) )->parse() + ]; } } diff --git a/includes/MatomoAnalyticsWiki.php b/includes/MatomoAnalyticsWiki.php index 0979c52..30b354a 100644 --- a/includes/MatomoAnalyticsWiki.php +++ b/includes/MatomoAnalyticsWiki.php @@ -70,6 +70,9 @@ private function getData( foreach ( $siteJson as $key => $val ) { if ( $flat ) { $arrayOut[$key] = $val[$jsonLabel] ?: '-'; + } elseif ( $pageUrl !== null && $period == 'days' ) { + // Support Actions.getPageUrl being such a special little snowflake + $arrayOut[$key] = $val[0][$jsonLabel] ?: '0'; } else { $arrayOut[$val[$jsonLabel]] = $val[$jsonData] ?: '-'; } @@ -183,8 +186,8 @@ public function getTopPages() { } // Get visits for specific pages - public function getPageViews( string $pageUrl, string $period = 'range' ) { - return $this->getData( 'Actions.getPageUrl', $period, 'label', 'nb_visits', false, 30, $pageUrl ); + public function getPageViews( string $pageUrl, string $periodType = 'range', int $days = 31 ) { + return $this->getData( 'Actions.getPageUrl', $periodType, 'label', 'nb_visits', false, $days, $pageUrl ); } // Get number of visits to the site diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js new file mode 100644 index 0000000..c626e0d --- /dev/null +++ b/modules/ext.matomoanalytics.infochart.js @@ -0,0 +1,118 @@ +// Portions of code derived from PageViewInfo extension by Wikimedia +( function ( $, mw ) { + $( function () { + var $count = $( '.mw-matomoanalytics-labels-rawdata' ), + count = $count.text(); + + // Turn it into an tag so it's obvious you can click on it + $count.html( mw.html.element( 'a', { href: '#' }, count ) ); + + $count.click( function ( e ) { + var dialog, windowManager; + e.preventDefault(); + function MatomoInfoPane( config ) { + MatomoInfoPane.parent.call( this, config ); + } + OO.inheritClass( MatomoInfoPane, OO.ui.ProcessDialog ); + + MatomoInfoPane.static.title = mw.msg( 'matomoanalytics-label-pane-title', info.start, info.end ); + MatomoInfoPane.static.name = 'MatomoAnalytics'; + MatomoInfoPane.static.actions = [ + { label: mw.msg( 'matomoanalytics-label-pane-close' ), flags: 'safe' } + ]; + + MatomoInfoPane.prototype.initialize = function () { + MatomoInfoPane.parent.prototype.initialize.apply( this, arguments ); + this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); + this.$body.append( this.content.$element ); + + // Parse the JSON data inside the tag with ID "mw-matomoanalytics-labels-rawdata" + var jsonData = JSON.parse($('#mw-matomoanalytics-labels-rawdata').text()); + + // Prepare labels and data for the chart + var labels = Object.keys(jsonData); + var data = Object.values(jsonData).map(value => value === '-' ? null : parseInt(value, 10)); + + // Create a canvas for the chart + var canvas = $('').get(0); + this.content.$element.append(canvas); + + // Generate the chart with parsed data + makeChart(canvas, labels, data); + }; + MatomoInfoPane.prototype.getActionProcess = function ( action ) { + var dialog = this; + if ( action ) { + return new OO.ui.Process( function () { + dialog.close( { action: action } ); + } ); + } + return MatomoInfoPane.parent.prototype.getActionProcess.call( this, action ); + }; + + windowManager = new OO.ui.WindowManager(); + $( 'body' ).append( windowManager.$element ); + + dialog = new MatomoInfoPane( { size: 'large' } ); + windowManager.addWindows( [ dialog ] ); + windowManager.openWindow( dialog ); + } ); + + } ); +}( jQuery, mediaWiki ) ); + +// Chart.js plugin registration and functions +// eslint-disable-next-line no-undef +Chart.register({ + id: 'noData', + afterDraw: function (chart) { + var datasets = chart.data.datasets; + + // Improved data check to exclude NaN, null, undefined, or 0 values + var hasData = datasets.some(dataset => + dataset.data.length > 0 && + dataset.data.some(value => value !== null && value !== undefined && value !== 0 && !Number.isNaN(value)) + ); + + // Display the message if there's no valid data + if (!hasData) { + var ctx = chart.ctx; + var width = chart.width; + var height = chart.height; + + // Clear the chart canvas + ctx.save(); + ctx.clearRect(0, 0, width, height); + + // Set text properties and display the message + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.font = '16px Arial'; + ctx.fillStyle = 'gray'; + ctx.fillText('No data to display', width / 2, height / 2); + + ctx.restore(); + } + }, +}); + +function makeChart( canvas, labels, data ) { + // eslint-disable-next-line + new Chart(canvas, { + type: 'line', + data: { + labels: labels, + datasets: [{ + data: data, + borderWidth: 1 + }] + }, + options: { + plugins: { + legend: { + display: false + } + } + } + }); +} diff --git a/modules/ext.matomoanalytics.infopage.less b/modules/ext.matomoanalytics.infopage.less new file mode 100644 index 0000000..6e541c5 --- /dev/null +++ b/modules/ext.matomoanalytics.infopage.less @@ -0,0 +1,3 @@ +#mw-matomoanalytics-labels-rawdata { + display: none; +} \ No newline at end of file From 528938c3362ed27aa3be3da8f4e38de9d8d30bef Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 11 Nov 2024 06:45:37 +0000 Subject: [PATCH 02/12] CI: lint code to MediaWiki standards Check commit and GitHub actions for more details --- includes/HookHandlers/Main.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index 17853bd..c48a42f 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -2,7 +2,6 @@ namespace Miraheze\MatomoAnalytics\HookHandlers; -use MediaWiki\Context\IContextSource; use MediaWiki\Hook\InfoActionHook; use MediaWiki\Hook\SkinAfterBottomScriptsHook; use MediaWiki\Html\Html; @@ -94,7 +93,7 @@ public function onInfoAction( $context, &$pageInfo ) { $title = $context->getTitle(); $url = $title->getFullURL(); $data = $mA->getPageViews( $url, 'days' ); - $total = array_sum( array_filter( $data, 'is_numeric') ); + $total = array_sum( array_filter( $data, 'is_numeric' ) ); $pageInfo['header-basic'][] = [ $context->msg( 'matomoanalytics-labels-pastmonth' ), From 24d661ee162536f1d71cff1f197db920c334733d Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:04:39 -0600 Subject: [PATCH 03/12] day, not days --- includes/HookHandlers/Main.php | 2 +- includes/MatomoAnalyticsWiki.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index c48a42f..ed3c2d1 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -92,7 +92,7 @@ public function onInfoAction( $context, &$pageInfo ) { $title = $context->getTitle(); $url = $title->getFullURL(); - $data = $mA->getPageViews( $url, 'days' ); + $data = $mA->getPageViews( $url, 'day' ); $total = array_sum( array_filter( $data, 'is_numeric' ) ); $pageInfo['header-basic'][] = [ diff --git a/includes/MatomoAnalyticsWiki.php b/includes/MatomoAnalyticsWiki.php index 30b354a..eff3b75 100644 --- a/includes/MatomoAnalyticsWiki.php +++ b/includes/MatomoAnalyticsWiki.php @@ -70,9 +70,9 @@ private function getData( foreach ( $siteJson as $key => $val ) { if ( $flat ) { $arrayOut[$key] = $val[$jsonLabel] ?: '-'; - } elseif ( $pageUrl !== null && $period == 'days' ) { + } elseif ( $pageUrl !== null && $period == 'day' ) { // Support Actions.getPageUrl being such a special little snowflake - $arrayOut[$key] = $val[0][$jsonLabel] ?: '0'; + $arrayOut[$key] = $val[0][$jsonLabel] ?: 0; } else { $arrayOut[$val[$jsonLabel]] = $val[$jsonData] ?: '-'; } From 92f01ef63289ffd18176341c0b6dc25242cb8359 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:05:39 -0600 Subject: [PATCH 04/12] Fix header --- includes/HookHandlers/Main.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index ed3c2d1..5b51307 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -100,7 +100,7 @@ public function onInfoAction( $context, &$pageInfo ) { $context->msg( 'matomoanalytics-count' )->numParams( $total )->parse() ]; - $pageInfo['header-raw'][] = [ + $pageInfo['header-basic'][] = [ $context->msg( 'matomoanalytics-labels-rawdata' ), $context->msg( 'matomoanalytics-count' )->rawParams( json_encode( $data ) )->parse() ]; From 0f1bd9b6f26e2a6ca3b34813bf5a855ecb4d915b Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:07:51 -0600 Subject: [PATCH 05/12] Fix --- includes/MatomoAnalyticsWiki.php | 2 +- modules/ext.matomoanalytics.infochart.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/MatomoAnalyticsWiki.php b/includes/MatomoAnalyticsWiki.php index eff3b75..367b669 100644 --- a/includes/MatomoAnalyticsWiki.php +++ b/includes/MatomoAnalyticsWiki.php @@ -187,7 +187,7 @@ public function getTopPages() { // Get visits for specific pages public function getPageViews( string $pageUrl, string $periodType = 'range', int $days = 31 ) { - return $this->getData( 'Actions.getPageUrl', $periodType, 'label', 'nb_visits', false, $days, $pageUrl ); + return $this->getData( 'Actions.getPageUrl', $periodType, 'nb_visits', 'nb_visits', false, $days, $pageUrl ); } // Get number of visits to the site diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index c626e0d..52fc2d2 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -1,7 +1,7 @@ // Portions of code derived from PageViewInfo extension by Wikimedia ( function ( $, mw ) { $( function () { - var $count = $( '.mw-matomoanalytics-labels-rawdata' ), + var $count = $( '#mw-matomoanalytics-labels-rawdata' ), count = $count.text(); // Turn it into an tag so it's obvious you can click on it From 1ac52d627d23deda0b7b597a85e799490431f765 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 01:09:29 -0600 Subject: [PATCH 06/12] Load ChartJS --- includes/HookHandlers/Main.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index 5b51307..3e2e7c9 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -87,7 +87,7 @@ public function onSkinAfterBottomScripts( $skin, &$text ) { public function onInfoAction( $context, &$pageInfo ) { $mA = new MatomoAnalyticsWiki( $context->getConfig()->get( MainConfigNames::DBname ) ); - $context->getOutput()->addModules( [ 'ext.matomoanalytics.infocharts' ] ); + $context->getOutput()->addModules( [ 'ext.matomoanalytics.charts', 'ext.matomoanalytics.infocharts' ] ); $context->getOutput()->addModuleStyles( [ 'ext.matomoanalytics.infopage' ] ); $title = $context->getTitle(); From 947916539b820fbc4dc2c8b2a0caceac4376645d Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 10:49:09 -0600 Subject: [PATCH 07/12] Rewrite --- extension.json | 3 +- modules/ext.matomoanalytics.infochart.js | 143 +++++++++-------------- 2 files changed, 57 insertions(+), 89 deletions(-) diff --git a/extension.json b/extension.json index acf18be..0083174 100644 --- a/extension.json +++ b/extension.json @@ -73,7 +73,8 @@ "scripts": "ext.matomoanalytics.graphs.js" }, "ext.matomoanalytics.infochart": { - "scripts": "ext.matomoanalytics.infochart.js" + "scripts": "ext.matomoanalytics.infochart.js", + "dependencies": "oojs-ui" }, "ext.matomoanalytics.infopage": { "styles": "ext.matomoanalytics.infopage.less" diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index 52fc2d2..a4d1084 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -1,118 +1,85 @@ -// Portions of code derived from PageViewInfo extension by Wikimedia -( function ( $, mw ) { - $( function () { - var $count = $( '#mw-matomoanalytics-labels-rawdata' ), - count = $count.text(); - - // Turn it into an tag so it's obvious you can click on it - $count.html( mw.html.element( 'a', { href: '#' }, count ) ); - - $count.click( function ( e ) { - var dialog, windowManager; - e.preventDefault(); - function MatomoInfoPane( config ) { - MatomoInfoPane.parent.call( this, config ); - } - OO.inheritClass( MatomoInfoPane, OO.ui.ProcessDialog ); - - MatomoInfoPane.static.title = mw.msg( 'matomoanalytics-label-pane-title', info.start, info.end ); - MatomoInfoPane.static.name = 'MatomoAnalytics'; - MatomoInfoPane.static.actions = [ - { label: mw.msg( 'matomoanalytics-label-pane-close' ), flags: 'safe' } - ]; - - MatomoInfoPane.prototype.initialize = function () { - MatomoInfoPane.parent.prototype.initialize.apply( this, arguments ); - this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } ); - this.$body.append( this.content.$element ); - - // Parse the JSON data inside the tag with ID "mw-matomoanalytics-labels-rawdata" - var jsonData = JSON.parse($('#mw-matomoanalytics-labels-rawdata').text()); - - // Prepare labels and data for the chart - var labels = Object.keys(jsonData); - var data = Object.values(jsonData).map(value => value === '-' ? null : parseInt(value, 10)); - - // Create a canvas for the chart - var canvas = $('').get(0); - this.content.$element.append(canvas); - - // Generate the chart with parsed data - makeChart(canvas, labels, data); - }; - MatomoInfoPane.prototype.getActionProcess = function ( action ) { - var dialog = this; - if ( action ) { - return new OO.ui.Process( function () { - dialog.close( { action: action } ); - } ); - } - return MatomoInfoPane.parent.prototype.getActionProcess.call( this, action ); - }; - - windowManager = new OO.ui.WindowManager(); - $( 'body' ).append( windowManager.$element ); - - dialog = new MatomoInfoPane( { size: 'large' } ); - windowManager.addWindows( [ dialog ] ); - windowManager.openWindow( dialog ); - } ); - - } ); -}( jQuery, mediaWiki ) ); - -// Chart.js plugin registration and functions -// eslint-disable-next-line no-undef +// Add Chart.js plugin for displaying "No data to display" if no valid data Chart.register({ id: 'noData', afterDraw: function (chart) { var datasets = chart.data.datasets; - - // Improved data check to exclude NaN, null, undefined, or 0 values var hasData = datasets.some(dataset => dataset.data.length > 0 && dataset.data.some(value => value !== null && value !== undefined && value !== 0 && !Number.isNaN(value)) ); - // Display the message if there's no valid data if (!hasData) { var ctx = chart.ctx; var width = chart.width; var height = chart.height; - // Clear the chart canvas ctx.save(); ctx.clearRect(0, 0, width, height); - - // Set text properties and display the message ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '16px Arial'; ctx.fillStyle = 'gray'; ctx.fillText('No data to display', width / 2, height / 2); - ctx.restore(); } }, }); -function makeChart( canvas, labels, data ) { - // eslint-disable-next-line - new Chart(canvas, { - type: 'line', - data: { - labels: labels, - datasets: [{ - data: data, - borderWidth: 1 - }] - }, - options: { - plugins: { - legend: { - display: false +// Function to parse JSON data from tag and create a chart +function parseJSONAndCreateChart() { + const trElement = document.getElementById("mw-matomoanalytics-labels-rawdata"); + if (!trElement) return; + + const jsonData = JSON.parse(trElement.textContent.trim()); + const labels = Object.keys(jsonData); + const data = Object.values(jsonData).map(value => value === "-" ? null : Number(value)); + + // Create a popup window with Codex for the chart + const popup = new OO.ui.WindowManager(); + document.body.appendChild(popup.$element[0]); + const chartWindow = new OO.ui.MessageDialog(); + popup.addWindows([chartWindow]); + popup.openWindow(chartWindow, { + title: 'Data Chart', + message: $(''), + size: 'large' + }).then(function (opened) { + opened.closed.then(function () { + document.body.removeChild(popup.$element[0]); + }); + + const canvas = document.getElementById("matomoanalytics-chart-info"); + new Chart(canvas, { + type: 'line', // Set to desired chart type + data: { + labels: labels, + datasets: [{ + label: 'Page views over the past 30 days', + data: data, + borderWidth: 1, + borderColor: 'blue', + backgroundColor: 'lightblue', + fill: true + }] + }, + options: { + plugins: { + legend: { + display: false + } + }, + scales: { + y: { + beginAtZero: true + } } } - } + }); }); } + +// Add a clickable link to trigger the chart display +document.querySelectorAll('#mw-matomoanalytics-labels-rawdata').forEach(element => { + element.style.cursor = 'pointer'; + element.addEventListener('click', parseJSONAndCreateChart); +}); From 888a1b1222231cab733be9ee6bf1fcbd664d67b6 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 10:49:50 -0600 Subject: [PATCH 08/12] Fix --- includes/HookHandlers/Main.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/HookHandlers/Main.php b/includes/HookHandlers/Main.php index 3e2e7c9..4529929 100644 --- a/includes/HookHandlers/Main.php +++ b/includes/HookHandlers/Main.php @@ -87,7 +87,7 @@ public function onSkinAfterBottomScripts( $skin, &$text ) { public function onInfoAction( $context, &$pageInfo ) { $mA = new MatomoAnalyticsWiki( $context->getConfig()->get( MainConfigNames::DBname ) ); - $context->getOutput()->addModules( [ 'ext.matomoanalytics.charts', 'ext.matomoanalytics.infocharts' ] ); + $context->getOutput()->addModules( [ 'ext.matomoanalytics.charts', 'ext.matomoanalytics.infochart' ] ); $context->getOutput()->addModuleStyles( [ 'ext.matomoanalytics.infopage' ] ); $title = $context->getTitle(); From 1943022594976bc64b39b85c4b61e694a6e7bba1 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 10:50:39 -0600 Subject: [PATCH 09/12] Fix --- modules/ext.matomoanalytics.infochart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index a4d1084..b0af2f4 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -79,7 +79,7 @@ function parseJSONAndCreateChart() { } // Add a clickable link to trigger the chart display -document.querySelectorAll('#mw-matomoanalytics-labels-rawdata').forEach(element => { +document.querySelectorAll('.mw-matomoanalytics-labels-pastmonth').forEach(element => { element.style.cursor = 'pointer'; element.addEventListener('click', parseJSONAndCreateChart); }); From 6596a74f93d9fdaa1e77c61870319a2e8030c5d8 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 10:54:45 -0600 Subject: [PATCH 10/12] Update --- modules/ext.matomoanalytics.infochart.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index b0af2f4..d6458b0 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -30,7 +30,11 @@ function parseJSONAndCreateChart() { const trElement = document.getElementById("mw-matomoanalytics-labels-rawdata"); if (!trElement) return; - const jsonData = JSON.parse(trElement.textContent.trim()); + // Select the second element within the + const tdElements = trElement.querySelectorAll("td"); + if (tdElements.length < 2) return; + const jsonData = JSON.parse(tdElements[1].textContent.trim()); + const labels = Object.keys(jsonData); const data = Object.values(jsonData).map(value => value === "-" ? null : Number(value)); @@ -79,7 +83,7 @@ function parseJSONAndCreateChart() { } // Add a clickable link to trigger the chart display -document.querySelectorAll('.mw-matomoanalytics-labels-pastmonth').forEach(element => { +document.querySelectorAll('#mw-matomoanalytics-labels-pastmonth').forEach(element => { element.style.cursor = 'pointer'; element.addEventListener('click', parseJSONAndCreateChart); }); From 837aaaa76edfdfaa1d61b670c0af3ae2c07ea71a Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:09:59 -0600 Subject: [PATCH 11/12] Update --- modules/ext.matomoanalytics.infochart.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index d6458b0..ff47f8c 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -25,12 +25,12 @@ Chart.register({ }, }); -// Function to parse JSON data from tag and create a chart +// Function to parse JSON data from the second tag and create a chart function parseJSONAndCreateChart() { - const trElement = document.getElementById("mw-matomoanalytics-labels-rawdata"); + const trElement = document.getElementById("mw-matomoanalytics-labels-pastmonth"); if (!trElement) return; - // Select the second element within the + // Select the second element within the const tdElements = trElement.querySelectorAll("td"); if (tdElements.length < 2) return; const jsonData = JSON.parse(tdElements[1].textContent.trim()); @@ -43,22 +43,22 @@ function parseJSONAndCreateChart() { document.body.appendChild(popup.$element[0]); const chartWindow = new OO.ui.MessageDialog(); popup.addWindows([chartWindow]); + + // Open the window and directly render the chart on success popup.openWindow(chartWindow, { title: 'Data Chart', message: $(''), size: 'large' - }).then(function (opened) { - opened.closed.then(function () { - document.body.removeChild(popup.$element[0]); - }); + }); - const canvas = document.getElementById("matomoanalytics-chart-info"); + const canvas = document.getElementById("matomoanalytics-chart-info"); + if (canvas) { new Chart(canvas, { - type: 'line', // Set to desired chart type + type: 'line', data: { labels: labels, datasets: [{ - label: 'Page views over the past 30 days', + label: 'Data over Time', data: data, borderWidth: 1, borderColor: 'blue', @@ -79,11 +79,11 @@ function parseJSONAndCreateChart() { } } }); - }); + } } // Add a clickable link to trigger the chart display -document.querySelectorAll('#mw-matomoanalytics-labels-pastmonth').forEach(element => { +document.querySelectorAll('#mw-matomoanalytics-labels-rawdata').forEach(element => { element.style.cursor = 'pointer'; element.addEventListener('click', parseJSONAndCreateChart); }); From 85a54e4729146278051c287aa81dedce3f143407 Mon Sep 17 00:00:00 2001 From: Agent Isai <43097272+AgentIsai@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:11:00 -0600 Subject: [PATCH 12/12] Mix up --- modules/ext.matomoanalytics.infochart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ext.matomoanalytics.infochart.js b/modules/ext.matomoanalytics.infochart.js index ff47f8c..469d63b 100644 --- a/modules/ext.matomoanalytics.infochart.js +++ b/modules/ext.matomoanalytics.infochart.js @@ -27,7 +27,7 @@ Chart.register({ // Function to parse JSON data from the second tag and create a chart function parseJSONAndCreateChart() { - const trElement = document.getElementById("mw-matomoanalytics-labels-pastmonth"); + const trElement = document.getElementById("mw-matomoanalytics-labels-rawdata"); if (!trElement) return; // Select the second element within the @@ -83,7 +83,7 @@ function parseJSONAndCreateChart() { } // Add a clickable link to trigger the chart display -document.querySelectorAll('#mw-matomoanalytics-labels-rawdata').forEach(element => { +document.querySelectorAll('#mw-matomoanalytics-labels-pastmonth').forEach(element => { element.style.cursor = 'pointer'; element.addEventListener('click', parseJSONAndCreateChart); });