NC20: Dashboard Widget #61

Rello · Aug 20, 2020 · 5ec3973 · 5ec3973
1 parent 38a896f
commit 5ec3973
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 14 deletions.
diff --git a/css/dashboard.scss b/css/dashboard.scss
@@ -6,4 +6,36 @@
  *
  * @author Marcel Scherello <audioplayer@scherello.de>
  * @copyright 2020 Marcel Scherello
- */
+ */
+
+ .icon-analytics {
+ 	background-image: url(./../../apps/analytics/img/app-dark.svg);
+ }
+
+ body.dark .icon-analytics {
+ 	background-image: url(./../../apps/analyticsimg/app.svg);
+ }
+
+ // Dashboard Widget Section
+
+ .analyticsWidgetItem {
+     padding: 10px;
+     border-radius: 9px;
+     margin-bottom: 10px;
+     background-color: white;
+     height: 60px;
+ }
+
+ .analyticsWidgetReport {
+ }
+
+ .analyticsWidgetSmall {
+    text-align: right;
+    font-size: x-small;
+    line-height: 10px;
+ }
+ .analyticsWidgetValue {
+    text-align: right;
+    line-height: 30px;
+    font-size: x-large;
+ }
diff --git a/js/dashboard.js b/js/dashboard.js
@@ -11,7 +11,111 @@
 'use strict';
 
 document.addEventListener('DOMContentLoaded', function () {
-    alert('test');
-    OCA.Dashboard.register('github', (el, {widget}) => {
-    })
-})
+
+    OCA.Dashboard.register('analytics', (el) => {
+        el.innerHTML = '<ul id="ulAnalytics"><li id="ilAnalyticsFavorites">Favorites</li><li id="ilAnalyticsRecent">Recent</li></ul>';
+    });
+    OCA.Analytics.Dashboard.getData(20);
+    OCA.Analytics.Dashboard.getData(155);
+    OCA.Analytics.Dashboard.getData(103);
+
+})
+
+if (!OCA.Analytics) {
+    /**
+     * @namespace
+     */
+    OCA.Analytics = {};
+}
+/**
+ * @namespace OCA.Analytics.Dashboard
+ */
+OCA.Analytics.Dashboard = {
+    getData: function (datasetId) {
+        const url = OC.generateUrl('apps/analytics/data/' + datasetId, true);
+
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.setRequestHeader('requesttoken', OC.requestToken);
+        xhr.setRequestHeader('OCS-APIREQUEST', 'true');
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                let jsondata = JSON.parse(xhr.response);
+                OCA.Analytics.Dashboard.createWidgetContent(jsondata);
+            }
+        };
+        xhr.send();
+    },
+
+    createWidgetContent: function (jsondata) {
+        let report = jsondata['options']['name'];
+        let subheader = jsondata['options']['subheader'];
+        let data = jsondata['data'][jsondata['data'].length - 1];
+        let kpi = data[0];
+        let value = data[data.length - 1];
+
+        let li = OCA.Analytics.Dashboard.buildWidgetKpiRow(report, kpi, value, jsondata.thresholds);
+        document.getElementById('ilAnalyticsFavorites').insertAdjacentHTML('afterend', li);
+    },
+
+    buildWidgetKpiRow: function (report, kpi, value, thresholds) {
+        let thresholdColor = OCA.Analytics.Dashboard.validateThreshold(kpi, value, thresholds)
+        return `<li class="analyticsWidgetItem">
+            <div style="float: left;">
+                <div class="details">
+                    <div class="analyticsWidgetReport">${report}</div>
+                </div>
+            </div>
+            <div style="float: right;">
+                <div class="details">
+                    <div ${thresholdColor} class="analyticsWidgetValue">${parseFloat(value)}</div>
+                    <div class="analyticsWidgetSmall">${kpi}</div>
+                </div>
+            </div>
+        </li>`;
+    },
+
+    validateThreshold: function (kpi, value, thresholds) {
+        const operators = {
+            '=': function (a, b) {
+                return a === b
+            },
+            '<': function (a, b) {
+                return a < b
+            },
+            '>': function (a, b) {
+                return a > b
+            },
+            '<=': function (a, b) {
+                return a <= b
+            },
+            '>=': function (a, b) {
+                return a >= b
+            },
+            '!=': function (a, b) {
+                return a !== b
+            },
+        };
+        let thresholdColor;
+
+        thresholds = thresholds.filter(p => p.dimension1 === kpi || p.dimension1 === '*');
+
+        for (let threshold of thresholds) {
+            const comparison = operators[threshold['option']](parseFloat(value), parseFloat(threshold['value']));
+            threshold['severity'] = parseInt(threshold['severity']);
+            if (comparison === true) {
+                if (threshold['severity'] === 2) {
+                    thresholdColor = 'style="color: red;"';
+                } else if (threshold['severity'] === 3) {
+                    thresholdColor = 'style="color: orange;"';
+                } else if (threshold['severity'] === 4) {
+                    thresholdColor = 'style="color: green;"';
+                }
+            }
+        }
+
+        return thresholdColor;
+    },
+
+}
diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
@@ -16,7 +16,7 @@
 use OCA\Analytics\Notification\Notifier;
 use OCP\AppFramework\App;
 use OCP\AppFramework\QueryException;
-use OCP\Dashboard\RegisterPanelEvent;
+use OCP\Dashboard\RegisterWidgetEvent;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Util;
 
@@ -33,9 +33,9 @@ public function __construct(array $urlParams = [])
         if ($version >= 20) {
             /** @var IEventDispatcher $dispatcher */
             $dispatcher = $container->getServer()->query(IEventDispatcher::class);
-            $dispatcher->addListener(RegisterPanelEvent::class, function (RegisterPanelEvent $event) use ($container) {
+            $dispatcher->addListener(RegisterWidgetEvent::class, function (RegisterWidgetEvent $event) use ($container) {
                 // \OCP\Util::addScript('analytics', 'dashboard');
-                $event->registerPanel(Widget::class);
+                $event->registerWidget(Widget::class);
             });
         }
 

diff --git a/lib/Dashboard/Widget.php b/lib/Dashboard/Widget.php
@@ -11,21 +11,25 @@
 
 namespace OCA\Analytics\Dashboard;
 
-use OCP\Dashboard\IPanel;
 use OCP\Dashboard\IWidget;
 use OCP\IL10N;
+use OCP\IURLGenerator;
 use OCP\Util;
 
-class Widget implements IPanel
+class Widget implements IWidget
 {
 
+    /** @var IURLGenerator */
+    private $url;
     /** @var IL10N */
     private $l10n;
 
     public function __construct(
+        IURLGenerator $url,
         IL10N $l10n
     )
     {
+        $this->url = $url;
         $this->l10n = $l10n;
     }
 
@@ -58,15 +62,15 @@ public function getOrder(): int
      */
     public function getIconClass(): string
     {
-        return 'icon-github';
+        return 'icon-analytics';
     }
 
     /**
      * @inheritDoc
      */
     public function getUrl(): ?string
     {
-        return \OC::$server->getURLGenerator()->linkToRoute('settings.PersonalSettings.index', ['section' => 'linked-accounts']);
+        return $this->url->linkToRouteAbsolute('analytics.Page.main');
     }
 
     /**

diff --git a/lib/Datasource/GithubService.php b/lib/Datasource/GithubService.php
@@ -71,6 +71,10 @@ public function read($option)
         $header[0] = 'Version';
         $header[1] = 'Count';
 
+
+        usort($data, function ($a, $b) {
+            return $a[0] <=> $b[0];
+        });
         return [
             'header' => $header,
             'data' => $data,

diff --git a/templates/part.templates.php b/templates/part.templates.php
@@ -199,9 +199,9 @@
                 </div>
             </div>
             <div style="display: table-row;">
-                <div id="sidebarThresholdTextvalue"
+                <div id="sidebarThresholdTextValue"
                      style="display: table-cell; width: 120px;"><?php p($l->t('Value')); ?></div>
-                <div style="display: table-cell;"><input id="sidebarThresholdvalue" class="input150"></div>
+                <div style="display: table-cell;"><input id="sidebarThresholdValue" class="input150"></div>
             </div>
             <div style="display: table-row;">
                 <div style="display: table-cell;"><?php p($l->t('Severity')); ?></div>