From 36d6490d9f4b8eb8ddbd39f855dcc0e0e5014023 Mon Sep 17 00:00:00 2001 From: Taiwo Ladipo Date: Wed, 24 Oct 2018 13:27:32 +0100 Subject: [PATCH 1/2] Integrate Periodic Count Chart Type --- src/asset-files/css/styles.css | 26 ++++++- src/asset-files/js/download-dashboard.js | 7 +- src/asset-files/less/dashboard.less | 28 ++++++- src/asset-files/less/zoom-widget-dialog.less | 2 + src/factories/DashboardWidgetFactory.php | 5 ++ src/widgets/BaseDashboardWidget.php | 1 + src/widgets/CountWidget.php | 2 +- src/widgets/DashboardViewWidget.php | 4 + src/widgets/PeriodicCountWidget.php | 80 ++++++++++++++++++++ 9 files changed, 146 insertions(+), 9 deletions(-) create mode 100644 src/widgets/PeriodicCountWidget.php diff --git a/src/asset-files/css/styles.css b/src/asset-files/css/styles.css index 1513f65..f755770 100644 --- a/src/asset-files/css/styles.css +++ b/src/asset-files/css/styles.css @@ -22,26 +22,45 @@ } .cricket-wrapper .cricket-dashboard-view__count-widget { background: #fff; + padding-bottom: 10px; } .cricket-wrapper .cricket-dashboard-view__count-widget--data { padding: 15px 0; text-align: center; } .cricket-wrapper .cricket-dashboard-view__count-widget--data-label { - font-size: 20px; + font-size: 18px; text-transform: uppercase; display: block; + margin-bottom: 8px; } .cricket-wrapper .cricket-dashboard-view__count-widget--data-value { - font-size: 50px; + font-size: 32px; font-weight: 500; color: #777; } +.cricket-wrapper .cricket-dashboard-view__count-widget--periodic-data { + display: block; + font-size: 16px; +} +.cricket-wrapper .cricket-dashboard-view__count-widget--last-date { + display: block; + font-size: 14px; +} .cricket-wrapper .cricket-dashboard-view .zoom-widget-btn { text-decoration: none; color: #d3d3d3; font-size: 24px; } +.cricket-wrapper .text-success { + color: #3c763d; +} +.cricket-wrapper .text-danger { + color: #b70b0b; +} +.cricket-wrapper .text-muted { + color: #777; +} .cricket-wrapper .cricket-card { border-radius: 4px; -webkit-box-shadow: 0 2px 0 rgba(90, 97, 105, 0.07), 0 4px 8px rgba(90, 97, 105, 0.08), 0 10px 10px rgba(90, 97, 105, 0.03), 0 7px 70px rgba(90, 97, 105, 0.08); @@ -242,6 +261,9 @@ right: auto; } } +.cricket-wrapper .cricket-zoom-in-modal { + background: transparent; +} .cricket-wrapper .cricket-zoom-in-modal .modal-dialog { width: 96% !important; } diff --git a/src/asset-files/js/download-dashboard.js b/src/asset-files/js/download-dashboard.js index 96cdb7b..20954c8 100644 --- a/src/asset-files/js/download-dashboard.js +++ b/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); } }); diff --git a/src/asset-files/less/dashboard.less b/src/asset-files/less/dashboard.less index e409ae6..75aa678 100644 --- a/src/asset-files/less/dashboard.less +++ b/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; + } } \ No newline at end of file diff --git a/src/asset-files/less/zoom-widget-dialog.less b/src/asset-files/less/zoom-widget-dialog.less index 2b97bd2..4375cf0 100644 --- a/src/asset-files/less/zoom-widget-dialog.less +++ b/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; } diff --git a/src/factories/DashboardWidgetFactory.php b/src/factories/DashboardWidgetFactory.php index 7abefa9..cab3506 100644 --- a/src/factories/DashboardWidgetFactory.php +++ b/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); diff --git a/src/widgets/BaseDashboardWidget.php b/src/widgets/BaseDashboardWidget.php index 67d62d6..364ce61 100644 --- a/src/widgets/BaseDashboardWidget.php +++ b/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; diff --git a/src/widgets/CountWidget.php b/src/widgets/CountWidget.php index 6e59f96..ca38cca 100644 --- a/src/widgets/CountWidget.php +++ b/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', diff --git a/src/widgets/DashboardViewWidget.php b/src/widgets/DashboardViewWidget.php index a33e40c..ac34425 100644 --- a/src/widgets/DashboardViewWidget.php +++ b/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(); } diff --git a/src/widgets/PeriodicCountWidget.php b/src/widgets/PeriodicCountWidget.php new file mode 100644 index 0000000..b0ab72e --- /dev/null +++ b/src/widgets/PeriodicCountWidget.php @@ -0,0 +1,80 @@ + + * @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 ' + ' . ' ' . number_format($value, 2) . '% ' . + ''; + } elseif ($value > 0) { + return ' + ' . ' ' . number_format($value, 2) . '% ' . + ''; + } + return '' . $value . ' ' . ''; + } +} From 7ef7602454f3e2c56025d1d1ac5221fc011ba002 Mon Sep 17 00:00:00 2001 From: Taiwo Ladipo Date: Wed, 24 Oct 2018 13:48:44 +0100 Subject: [PATCH 2/2] Fix percentage change condition --- src/widgets/PeriodicCountWidget.php | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/widgets/PeriodicCountWidget.php b/src/widgets/PeriodicCountWidget.php index b0ab72e..92bd636 100644 --- a/src/widgets/PeriodicCountWidget.php +++ b/src/widgets/PeriodicCountWidget.php @@ -30,7 +30,6 @@ public function init() protected function renderBody() { - $latestData = array_pop($this->data); $count = ArrayHelper::getValue($latestData, 'count', 0); $percentageChange = ArrayHelper::getValue($latestData, 'percentage_change', 0); @@ -68,12 +67,12 @@ private function getValueWithIcon($value) { if ($value > 0) { return ' - ' . ' ' . number_format($value, 2) . '% ' . - ''; - } elseif ($value > 0) { + ' . ' ' . number_format($value, 2) . '% ' . + ''; + } elseif ($value < 0) { return ' - ' . ' ' . number_format($value, 2) . '% ' . - ''; + ' . ' ' . number_format($value, 2) . '% ' . + ''; } return '' . $value . ' ' . ''; }