Merge pull request #14 from CottaCush/features/add-periodic-count-widget

Integrate Periodic Count Chart Type

src/asset-files/js/download-dashboard.js

@@ -24,12 +24,11 @@
                 newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
 
             if (extension === TYPE_PDF) {
-                var doc = new jsPDF('p', 'px', 'a3');
+                var doc = new jsPDF('p', 'px', 'a2');
                 doc.addImage(imageData, 'png', 10, 20);
-                doc.save('dashboard.' + extension);
+                doc.save(dashboardName + '.' + extension);
             } else {
-                thisLink.attr("download", 'dashboard.' + extension).attr("href", newData);
-
+                thisLink.attr("download", dashboardName + '.' + extension).attr("href", newData);
             }
         });
 

src/asset-files/less/dashboard.less

@@ -3,6 +3,7 @@
   .cricket-dashboard-view {
     &__count-widget {
       background: #fff;
+      padding-bottom: 10px;
     }
 
     &__count-widget--data {
@@ -11,21 +12,44 @@
     }
 
     &__count-widget--data-label {
-      font-size: 20px;
+      font-size: 18px;
       text-transform: uppercase;
       display: block;
+      margin-bottom: 8px;
     }
 
     &__count-widget--data-value {
-      font-size: 50px;
+      font-size: 32px;
       font-weight: 500;
       color: #777;
     }
 
+    &__count-widget--periodic-data {
+      display: block;
+      font-size: 16px;
+    }
+
+    &__count-widget--last-date{
+      display: block;
+      font-size: 14px;
+    }
+
     .zoom-widget-btn {
       text-decoration: none;
       color: #d3d3d3;
       font-size: 24px;
     }
   }
+
+  .text-success {
+    color: #3c763d;
+  }
+
+  .text-danger {
+    color: #b70b0b;
+  }
+
+  .text-muted {
+    color: #777;
+  }
 }

src/asset-files/less/zoom-widget-dialog.less

@@ -1,5 +1,7 @@
 .cricket-wrapper {
   .cricket-zoom-in-modal {
+    background: transparent;
+
     .modal-dialog {
       width: 96% !important;
     }

src/factories/DashboardWidgetFactory.php

@@ -7,6 +7,7 @@
 use CottaCush\Cricket\Dashboards\Widgets\CountWidget;
 use CottaCush\Cricket\Dashboards\Widgets\DoughnutWidget;
 use CottaCush\Cricket\Dashboards\Widgets\LineChartWidget;
+use CottaCush\Cricket\Dashboards\Widgets\PeriodicCountWidget;
 use CottaCush\Cricket\Dashboards\Widgets\PieChartWidget;
 use CottaCush\Cricket\Dashboards\Widgets\ScatterPlotWidget;
 use CottaCush\Cricket\Dashboards\Widgets\TableWidget;
@@ -58,6 +59,10 @@ public function createWidget(CricketQueryableInterface $model)
                 $widget = new ScatterPlotWidget($config);
                 break;
 
+            case BaseDashboardWidget::TYPE_PERIODIC_COUNT:
+                $widget = new PeriodicCountWidget($config);
+                break;
+
             case BaseDashboardWidget::TYPE_COUNT:
             default:
                 $widget = new CountWidget($config);

src/widgets/BaseDashboardWidget.php

@@ -31,6 +31,7 @@ abstract class BaseDashboardWidget extends Yii2BaseWidget
     const TYPE_PIE_CHART = 'pie-chart';
     const TYPE_SCATTER_PLOT = 'scatter-plot';
     const TYPE_TABLE = 'table';
+    const TYPE_PERIODIC_COUNT = 'periodic-count';
 
     protected $data;
     protected $columns;

src/widgets/CountWidget.php

@@ -33,7 +33,7 @@ public function init()
 
     protected function renderBody()
     {
-        echo $this->beginDiv('cricket-card-body cricket-dashboard-view__count-widget');
+        echo $this->beginDiv('cricket-dashboard-view__count-widget equal-height');
         echo $this->beginDiv('cricket-dashboard-view__count-widget--data');
         echo Html::tag(
             'h1',

src/widgets/DashboardViewWidget.php

@@ -12,6 +12,8 @@
 use CottaCush\Yii2\Widgets\EmptyStateWidget;
 use yii\db\Connection;
 use yii\helpers\ArrayHelper;
+use yii\helpers\Json;
+use yii\web\View;
 
 /**
  * Class DashboardViewWidget
@@ -47,6 +49,8 @@ public function init()
         DashboardViewAsset::register($this->view);
         krsort($this->locationalWidgets);
 
+        $this->view->registerJs('var dashboardName = ' . Json::encode($this->dashboard->name) . ';', View::POS_HEAD);
+
         parent::init();
     }
 

src/widgets/PeriodicCountWidget.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace CottaCush\Cricket\Dashboards\Widgets;
+
+use CottaCush\Cricket\Generators\SQL\SQLGenerator;
+use CottaCush\Yii2\Helpers\Html;
+use yii\helpers\ArrayHelper;
+
+/**
+ * Class PeriodicCountWidget
+ * @author Taiwo Ladipo <[email protected]>
+ * @package CottaCush\Cricket\Dashboards\Widgets
+ */
+class PeriodicCountWidget extends BaseDashboardWidget
+{
+    protected $queryFunction = SQLGenerator::QUERY_ALL;
+
+    protected function renderHeader()
+    {
+        return;
+    }
+
+    public function init()
+    {
+        parent::init();
+        if (empty($this->data)) {
+            $this->data = [];
+        }
+    }
+
+    protected function renderBody()
+    {
+        $latestData = array_pop($this->data);
+        $count = ArrayHelper::getValue($latestData, 'count', 0);
+        $percentageChange = ArrayHelper::getValue($latestData, 'percentage_change', 0);
+        $lastDate = ArrayHelper::getValue($latestData, 'last_date', 0);
+
+        echo $this->beginDiv('cricket-dashboard-view__count-widget equal-height');
+        echo $this->beginDiv('cricket-dashboard-view__count-widget--data');
+        echo Html::tag(
+            'h4',
+            $count,
+            ['class' => 'cricket-dashboard-view__count-widget--data-value']
+        );
+        echo Html::tag('span', $this->model->name, ['class' => 'cricket-dashboard-view__count-widget--data-label']);
+
+        echo Html::beginTag('span', ['class' => 'cricket-dashboard-view__count-widget--periodic-data']);
+        echo Html::tag('span',
+            is_null($percentageChange) ? Html::tag('span', 'N/A ', ['class' => 'text-muted']) : $this->getValueWithIcon($percentageChange)
+        );
+        echo Html::tag('span', 'last ' . $this->model->interval);
+        echo Html::endTag('span');
+
+        if ($lastDate) {
+            echo Html::tag(
+                'span',
+                'as at ' .  date('j M Y g:ia', strtotime($lastDate)),
+                ['class' => 'text-muted cricket-dashboard-view__count-widget--last-date']
+            );
+        }
+
+        echo $this->endDiv();
+        echo $this->endDiv();
+    }
+
+    private function getValueWithIcon($value)
+    {
+        if ($value > 0) {
+            return '<span class = "text-success">
+                    <span class = "fa fa-caret-up"></span>' . ' ' . number_format($value, 2) . '% ' .
+                    '</span>';
+        } elseif ($value < 0) {
+            return '<span class = "text-danger">
+                    <span class = "fa fa-caret-down"></span>' . ' ' . number_format($value, 2) . '% ' .
+                    '</span>';
+        }
+        return '<span class = "text-muted">' . $value . ' ' . '</span>';
+    }
+}