Add quick stats footer

TAKEHOME.md

@@ -0,0 +1,47 @@
+### Quick Stats
+
+This is a simple feature to show some quick stats about the Visits and Actions in the last 120mins.
+This is made of a single Vue component (QuickStats.vue) that displays a button at the foot of each page.
+Clicking the button will show a modal with the stats taken from the API endpoint given.
+The vue component is then injected into the footer using `Template.pageFooter` hook.
+### How this works
+This feature uses a Vue component to display the stats. 
+It fetches the data from the Matomo API using AjaxHelper component to get data from `Live.getCounters` method, 
+which returns the last visits, their actions and other statistics.
+
+### Initial Setup
+ - Create fake visits in the last 120 minutes using 
+   ``` 
+   ddev matomo:console plugin:activate VisitorGenerator
+   ddev matomo:console visitorgenerator:generate-visits
+   ```
+ - Make sure the `Live.getCounters` API method is enabled in your Matomo instance.
+ - Make sure to enable the `QuickStats` plugin in your Matomo instance.
+   - You can enable the plugin using the following command:
+     ```
+     ddev matomo:console plugin:activate QuickStats
+     ```
+   - Alternatively, you can enable it from the Matomo UI by going to the "Plugins" section and activating the "QuickStats" plugin.
+### Future Improvements
+ - The current implementation is a basic one. 
+ - Make the UI look better by styling the footer button more and making the statistics cards more visually appealing.
+ - The Vue component could be made more reusable by passing in the API `lastMinutes` parameter as a prop.
+ - Would also be good to pass the `idSite` parameter as a prop especially if there are more than 1 website added in Matomo.
+
+### Running the Test
+ - To run the test, you can use the following command:
+   ```
+   ddev matomo:console test:run-ui --plugin=QuickStats
+   ```
+ - There are a few gotchas with running the tests:
+   - Remember to use `ddev matomo:console test:run-ui --plugin=PluginName` instead of `./console test:run-ui --plugin=QuickStats` 
+   to ensure the correct environment is used.
+
+
+### Other Testing Considerations
+ - I would probably add a SystemTest to check that the api we use `Live.getCounters` is returning the expected data.
+   - I will put this under `plugin/QuickStats/tests/System`
+ - I'll also add in an integreation test to check that the Vue component is rendering correctly and that the data is being displayed as expected.
+   - This should also test that when the button is clicked the modal opens.
+   - This could also test that when the modal is opened, the API to fetch counters is called and that the data is displayed correctly.
+   - This will be under `plugin/QuickStats/tests/Integration`

mysqldefaults.conf

@@ -0,0 +1,3 @@
+[client]
+user=db
+password=db

plugins/QuickStats/CHANGELOG.md

@@ -0,0 +1,3 @@
+## Changelog
+
+Here goes the changelog text.

plugins/QuickStats/QuickStats.php

@@ -0,0 +1,36 @@
+<?php
+
+/**
+ * Matomo - free/libre analytics platform
+ *
+ * @link    https://matomo.org
+ * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Plugins\QuickStats;
+
+use Piwik\View;
+
+class QuickStats extends \Piwik\Plugin
+{
+    public function registerEvents()
+    {
+        return [
+            'CronArchive.getArchivingAPIMethodForPlugin' => 'getArchivingAPIMethodForPlugin',
+            'Template.pageFooter' => 'getPageFooter',
+        ];
+    }
+
+    // support archiving just this plugin via core:archive
+    public function getArchivingAPIMethodForPlugin(&$method, $plugin)
+    {
+        if ($plugin == 'QuickStats') {
+            $method = 'QuickStats.getExampleArchivedMetric';
+        }
+    }
+    public function getPageFooter(&$out)
+    {
+        $view = new View('@QuickStats/footer.twig');
+        $out .= $view->render();
+    }
+}

plugins/QuickStats/README.md

@@ -0,0 +1,6 @@
+# Matomo QuickStats Plugin
+
+## Description
+
+Add your plugin description here.
+

plugins/QuickStats/config/config.php

@@ -0,0 +1,3 @@
+<?php
+
+return array();

plugins/QuickStats/config/tracker.php

@@ -0,0 +1,3 @@
+<?php
+
+return array();

plugins/QuickStats/docs/faq.md

@@ -0,0 +1,5 @@
+## FAQ
+
+__My question?__
+
+My answer

plugins/QuickStats/docs/index.md

@@ -0,0 +1 @@
+## Documentation

plugins/QuickStats/plugin.json

@@ -0,0 +1,29 @@
+{
+    "name": "QuickStats",
+    "description": "This should add a button in the footer of all Matomo pages that would open up a modal with quick stats",
+    "version": "0.1.0",
+    "theme": false,
+    "require": {
+        "matomo": ">=5.4.0-b4,<6.0.0-b1"
+    },
+    "authors": [
+        {
+            "name": "Matomo",
+            "email": "",
+            "homepage": ""
+        }
+    ],
+    "support": {
+        "email": "",
+        "issues": "",
+        "forum": "",
+        "irc": "",
+        "wiki": "",
+        "source": "",
+        "docs": "",
+        "rss": ""
+    },
+    "homepage": "",
+    "license": "GPL v3+",
+    "keywords": []
+}

plugins/QuickStats/stylesheets/footer.less

@@ -0,0 +1,9 @@
+#footerLinks {
+  text-align: center;
+  font-size: .7rem;
+  color: @color-silver;
+
+  a {
+    color: @color-silver;
+  }
+}

plugins/QuickStats/templates/footer.twig

@@ -0,0 +1,3 @@
+<div id="footerLinks">
+    <div vue-entry="QuickStats.QuickStats"></div>
+</div>

plugins/QuickStats/tests/UI/.gitignore

@@ -0,0 +1,2 @@
+/processed-ui-screenshots
+/screenshot-diffs

plugins/QuickStats/tests/UI/QuickStatsDialog_spec.js

@@ -0,0 +1,29 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * Screenshot integration tests.
+ *
+ * @link    https://matomo.org
+ * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("QuickStatsDialog", function () {
+    this.timeout(0);
+
+    it('should show the QuickStats dialog', async function () {
+      await page.goto("?module=CoreHome&action=index&idSite=1&period=day&date=today");
+      await page.waitForNetworkIdle();
+
+      // Wait for and click the QuickStats button (adjust selector if needed)
+      await page.waitForSelector('.quick-stat-component .btn-flat');
+      await page.click('.quick-stat-component .btn-flat');
+
+      // Wait for the dialog to appear
+      await page.waitForSelector('.card-container');
+      await page.waitForNetworkIdle();
+
+      // Take a screenshot of the dialog
+      const dialog = await page.$('.card-container');
+      expect(await dialog.screenshot()).to.matchImage('QuickStatsDialog');
+    });
+});