From 6ddda74edf3e9d0149b25be556b7620008464f22 Mon Sep 17 00:00:00 2001 From: SamPoyigi Date: Tue, 30 Jul 2019 23:22:03 +0100 Subject: [PATCH] Fix js issue with displaying multiple dashboard charts --- app/admin/controllers/Dashboard.php | 7 ++ app/admin/dashboardwidgets/Charts.php | 91 +++--------------- .../charts/assets/js/charts.js | 8 +- app/admin/dashboardwidgets/charts/charts.php | 8 +- app/admin/traits/HasChartDatasets.php | 94 +++++++++++++++++++ app/admin/widgets/DashboardContainer.php | 6 +- 6 files changed, 129 insertions(+), 85 deletions(-) create mode 100644 app/admin/traits/HasChartDatasets.php diff --git a/app/admin/controllers/Dashboard.php b/app/admin/controllers/Dashboard.php index 00af00f0e2..4f3da6d879 100644 --- a/app/admin/controllers/Dashboard.php +++ b/app/admin/controllers/Dashboard.php @@ -34,6 +34,7 @@ public function initDashboardContainer() { $this->containerConfig['canSetDefault'] = AdminAuth::isSuperUser(); $this->containerConfig['defaultWidgets'] = $this->getDefaultWidgets(); + $this->containerConfig['canAddAndDelete'] = $this->canAddAndDeleteWidgets(); new DashboardContainer($this, $this->containerConfig); } @@ -91,4 +92,10 @@ protected function getDefaultWidgets() ], ]; } + + protected function canAddAndDeleteWidgets() + { + return $this->getUser()->hasPermission('Admin.Dashboard.Add') + AND $this->getUser()->hasPermission('Admin.Dashboard.Delete'); + } } \ No newline at end of file diff --git a/app/admin/dashboardwidgets/Charts.php b/app/admin/dashboardwidgets/Charts.php index bb593e2fa2..a54fdb143a 100644 --- a/app/admin/dashboardwidgets/Charts.php +++ b/app/admin/dashboardwidgets/Charts.php @@ -5,22 +5,28 @@ use Admin\Models\Orders_model; use Admin\Models\Reservations_model; use Admin\Models\Reviews_model; -use Carbon\Carbon; -use DateInterval; -use DatePeriod; -use DB; -use Illuminate\Support\Collection; +use Admin\Traits\HasChartDatasets; /** * Charts dashboard widget. */ class Charts extends BaseDashboardWidget { + use HasChartDatasets; + /** * @var string A unique alias to identify this widget. */ protected $defaultAlias = 'charts'; + protected $datasetOptions = [ + 'label' => null, + 'data' => [], + 'fill' => TRUE, + 'backgroundColor' => null, + 'borderColor' => null, + ]; + public function initialize() { $this->setProperty('rangeFormat', 'MMMM D, YYYY'); @@ -44,17 +50,6 @@ public function render() return $this->makePartial('charts/charts'); } - public function loadAssets() - { - $this->addJs('~/app/system/assets/ui/js/vendor/moment.min.js', 'moment-js'); - $this->addJs('vendor/daterange/daterangepicker.js', 'daterangepicker-js'); - $this->addCss('vendor/daterange/daterangepicker.css', 'daterangepicker-css'); - - $this->addJs('vendor/chartjs/Chart.min.js', 'chartsjs-js'); - $this->addCss('css/charts.css', 'charts-css'); - $this->addJs('js/charts.js', 'charts-js'); - } - public function listContext() { return [ @@ -85,17 +80,6 @@ public function listContext() ]; } - public function onFetchDatasets() - { - $start = post('start'); - $end = post('end'); - - $start = Carbon::parse($start); - $end = Carbon::parse($end); - - return $this->getDatasets($start, $end); - } - protected function getDatasets($start, $end) { $result = []; @@ -105,57 +89,4 @@ protected function getDatasets($start, $end) return $result; } - - protected function makeDataset($config, $start, $end) - { - list($r, $g, $b) = sscanf($config['color'], '#%02x%02x%02x'); - $backgroundColor = sprintf('rgba(%s, %s, %s, 0.5)', $r, $g, $b); - $borderColor = sprintf('rgb(%s, %s, %s)', $r, $g, $b); - - return [ - 'label' => lang($config['label']), - 'data' => $this->queryDatasets($config, $start, $end), - 'fill' => TRUE, - 'backgroundColor' => $backgroundColor, - 'borderColor' => $borderColor, - ]; - } - - protected function queryDatasets($config, $start, $end) - { - $modelClass = $config['model']; - $dateColumnName = $config['column']; - - $dateColumn = DB::raw('DATE_FORMAT('.$dateColumnName.', "%Y-%m-%d") as x'); - $query = $modelClass::select($dateColumn, DB::raw('count(*) as y')); - $query->whereBetween($dateColumnName, [$start, $end])->groupBy('x'); - - $dateRanges = $this->getDatePeriod($start, $end); - - return $this->getPointsArray($dateRanges, $query->get()); - } - - protected function getDatePeriod($start, $end) - { - return new DatePeriod( - Carbon::parse($start), - new DateInterval('P1D'), - Carbon::parse($end) - ); - } - - protected function getPointsArray($dateRanges, Collection $result) - { - $points = []; - $keyedResult = $result->keyBy('x'); - foreach ($dateRanges as $date) { - $x = $date->format('Y-m-d'); - $points[] = [ - 'x' => $x, - 'y' => $keyedResult->get($x) ?? 0, - ]; - } - - return $points; - } } diff --git a/app/admin/dashboardwidgets/charts/assets/js/charts.js b/app/admin/dashboardwidgets/charts/assets/js/charts.js index 50bf495615..3a4329672d 100644 --- a/app/admin/dashboardwidgets/charts/assets/js/charts.js +++ b/app/admin/dashboardwidgets/charts/assets/js/charts.js @@ -13,7 +13,7 @@ var ChartControl = function (element, options) { this.options = options this.$el = $(element) - this.$rangeEl = this.$el.find('[data-control="daterange"]') + this.$rangeEl = $(options.rangeSelector) this.chartJs = null this.rangePicker = null @@ -25,6 +25,8 @@ ChartControl.DEFAULTS = { alias: undefined, rangeFormat: 'MMMM D, YYYY', + rangeSelector: '[data-control="daterange"]', + rangeParentSelector: '.chart-toolbar', responsive: true, type: 'line', options: { @@ -75,7 +77,9 @@ } ChartControl.prototype.initDateRange = function () { - this.$rangeEl.daterangepicker(ChartControl.DATE_RANGE_DEFAULTS, $.proxy(this.onRangeSelected, this)) + var options = ChartControl.DATE_RANGE_DEFAULTS + options.parentEl = this.options.rangeParentSelector + this.$rangeEl.daterangepicker(options, $.proxy(this.onRangeSelected, this)) this.rangePicker = this.$rangeEl.data('daterangepicker'); this.onRangeSelected(ChartControl.DATE_RANGE_DEFAULTS.startDate, ChartControl.DATE_RANGE_DEFAULTS.endDate) diff --git a/app/admin/dashboardwidgets/charts/charts.php b/app/admin/dashboardwidgets/charts/charts.php index 5d6ac5a579..94b0a37d80 100644 --- a/app/admin/dashboardwidgets/charts/charts.php +++ b/app/admin/dashboardwidgets/charts/charts.php @@ -4,10 +4,16 @@ class="chart-container" data-control="chart" data-alias="alias; ?>" + data-range-selector="#alias; ?>-daterange" + data-range-parent-selector="#alias; ?>-daterange-parent" data-range-format="property('rangeFormat'); ?>" > -
+