Feature/lmi insights #487
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| # | ||
| # Component generated by Impac! Widget Generator! | ||
| # | ||
| module = angular.module('impac.components.widgets.sales-average-purchase-size', []) | ||
| module.controller('WidgetSalesAveragePurchaseSizeCtrl', ($scope, $q, $filter, ImpacWidgetsSvc, ImpacAssets, HighchartsFactory, ImpacUtilities) -> | ||
|
|
||
| w = $scope.widget | ||
| $scope.isChartDisplayed = true | ||
|
|
||
| # Define settings | ||
| # -------------------------------------- | ||
| $scope.orgDeferred = $q.defer(); | ||
| settingsPromises = [$scope.orgDeferred.promise] | ||
|
|
||
| # Time management | ||
| todayUTC = moment().startOf('day').add(moment().utcOffset(), 'minutes') | ||
|
|
||
| # Timestamps stored in the back-end are in UTC => the filter on the date must be UTC too | ||
| dateFilter = (timestamp) -> | ||
| pickedDate = moment.utc(timestamp) | ||
| if pickedDate <= todayUTC then "lte #{pickedDate.format('YYYY-MM-DD')}" else pickedDate.format('YYYY-MM-DD') | ||
|
|
||
| # Unique identifier for the chart object in the DOM | ||
| $scope.chartId = -> | ||
| "averagePurchaseSizeChart-#{w.id}" | ||
|
|
||
| # # == Sub-Components - Needed? ============================================================= | ||
| $scope.chartDeferred = $q.defer() | ||
|
|
||
| # == Chart Events Callbacks ===================================================================== | ||
| # Sets the transactions list resources type and displays it | ||
| onClickBar = (event) -> | ||
| $scope.isChartDisplayed = false | ||
|
|
||
| # == Directive Events Callbacks ===================================================================== | ||
| $scope.onButtonBack = () -> | ||
| $scope.isChartDisplayed = true | ||
|
|
||
| # Widget specific methods | ||
| # -------------------------------------- | ||
| w.initContext = -> | ||
| $scope.isDataFound = w.content? | ||
|
|
||
| w.format = -> | ||
| # Instantiate and render chart | ||
| options = | ||
| chartType: 'line' | ||
| chartOnClickCallbacks: [] | ||
| currency: w.metadata.currency | ||
| showToday: true | ||
| showLegend: true | ||
|
|
||
| $scope.chart = new HighchartsFactory($scope.chartId(), w.content.chart, options) | ||
|
|
||
| $scope.chart.formatters = -> | ||
| currency = @options.currency | ||
| xAxisLabels = | ||
| labels: | ||
| formatter: -> | ||
| if (this.chart.rangeSelector.options.selected >= 3) | ||
| moment.utc(this.value).format('MMM YYYY') | ||
| else | ||
| moment.utc(this.value).format('DD MMM') | ||
| yAxisLabels = | ||
| labels: | ||
| formatter: -> | ||
| $filter('mnoCurrency')(this.value, currency, false) | ||
| xAxis: angular.merge([w.content.chart.xAxis[0]], [xAxisLabels]) | ||
| yAxis: angular.merge([w.content.chart.yAxis[0]], [yAxisLabels]) | ||
| rangeSelector: | ||
| selected: 5 | ||
|
|
||
| $scope.chart.render(w.content.chart, options) | ||
|
|
||
| # Add events callbacks to chart object | ||
| $scope.chart.addSeriesEvent('click', onClickBar) | ||
|
|
||
| # Notifies parent element that the chart is ready to be displayed | ||
| $scope.chartDeferred.notify($scope.chart) | ||
|
|
||
| $scope.widgetDeferred.resolve(settingsPromises) | ||
| ) | ||
| module.directive('widgetSalesAveragePurchaseSize', -> | ||
| return { | ||
| restrict: 'A', | ||
| controller: 'WidgetSalesAveragePurchaseSizeCtrl' | ||
| } | ||
| ) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .analytics .widget-item .content.sales-average-purchase-size { | ||
| .tall-widget(); | ||
|
|
||
| .average-purchase-size-chart { | ||
| height: ~"calc(@{impac-big-widget-size} - 50px)"; | ||
| } | ||
|
|
||
| .average-purchase-size-insight { | ||
| height: ~"calc(@{impac-big-widget-size} - 100px)"; | ||
| padding: 150px; | ||
| } | ||
|
|
||
| .highcharts-y-primary { | ||
| fill: 'rgb(68, 208, 218)' | ||
| } | ||
|
|
||
| .highcharts-y-secondary { | ||
| fill: 'rgb(208, 68, 218)' | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <div widget-sales-average-purchase-size> | ||
| <!-- Settings Panel --> | ||
| <div ng-show="widget.isEditMode" class="edit"> | ||
| <h4>Widget settings</h4> | ||
|
|
||
| <div setting-organizations parent-widget="widget" class="part" deferred="::orgDeferred" /> | ||
|
|
||
| <!-- Buttons displayed on the lower --> | ||
| <div class="bottom-buttons" align="right"> | ||
| <button class="btn btn-default" ng-click="initSettings()">Cancel</button> | ||
| <button class="btn btn-warning" ng-click="updateSettings()">Save</button> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- Content Panel --> | ||
| <div ng-hide="widget.isEditMode"> | ||
| <!-- Data found --> | ||
| <!-- Content Panel --> | ||
|
|
||
| <div ng-show="isChartDisplayed" class=""> | ||
| <!-- Chart --> | ||
| <div id="{{chartId()}}" class="average-purchase-size-chart"></div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- <div ng-show="isLoading" class="loader" align="center"> | ||
| <div> | ||
| <i class="fa fa-spinner fa-pulse fa-3x"></i> | ||
| <p translate="impac.widget.loader"></p> | ||
| </div> | ||
|
|
||
| </div> --> | ||
|
|
||
| <div ng-show="!isChartDisplayed" class=""> | ||
| <button ng-if="!isChartDisplayed" ng-click="onButtonBack()"> < Back</button> | ||
| <!-- Chart --> | ||
| <div class="average-purchase-size-insight"> | ||
| <h1> Partner report: </h1> | ||
|
|
||
| <h3> The purchase size grew by <strong> 0.98% </strong> compared to last month. (Not real data) </h3> | ||
| <h4> In your Industry, in <strong> April </strong> your customer spend an average <strong> + 20.5% </strong> </h4> | ||
|
|
||
| <h2> The report found top store strategies on the horizon include: </h2> | ||
| <p> ---------------------------------------------------------------- </p> | ||
| <p> <strong> 40% </strong> OFFER SPACE FOR IN-STORE DEMOS AND EVENTS <p> | ||
| <p> <strong> 39% </strong> INCREASE STAFFING <p> | ||
| <p> <strong> 35% </strong> OFFER CLICK-AND-COLLECT SERVICES <p> | ||
| <p> <strong> 35% </strong> INTRODUCE AUGMENTED REALITY AND/OR VIRTUAL REALITY TECHNOLOGY <p> | ||
|
|
||
| <p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- No data found --> | ||
| <div ng-if="(isDataFound==false)" common-data-not-found on-display-alerts="onDisplayAlerts()" endpoint="::widget.category" width="::widget.width" /> | ||
|
There was a problem hiding this comment. This is the old implementation of the data-not-found directive. I know the generator created it, but its out of date. I updated this in the generator in v1.6.9 but the lmi feature branch is behind. The data-not-found is now a modal, so no need to show/hide content on $scope.isDataFound. Replace this directive with: Take a look at cash projection template for example, test with a bolt widget for org with no bolt data. |
||
| </div> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| # | ||
| # Component generated by Impac! Widget Generator! | ||
| # | ||
| module = angular.module('impac.components.widgets.sales-average-visit', []) | ||
| module.controller('WidgetSalesAverageVisitCtrl', ($scope, $q, $filter, ImpacWidgetsSvc, ImpacAssets, HighchartsFactory, BoltResources) -> | ||
|
|
||
| w = $scope.widget | ||
|
|
||
| # Define settings | ||
| # -------------------------------------- | ||
| $scope.orgDeferred = $q.defer(); | ||
| settingsPromises = [$scope.orgDeferred.promise] | ||
|
|
||
| # Time management | ||
| todayUTC = moment().startOf('day').add(moment().utcOffset(), 'minutes') | ||
|
|
||
| # Timestamps stored in the back-end are in UTC => the filter on the date must be UTC too | ||
| dateFilter = (timestamp) -> | ||
| pickedDate = moment.utc(timestamp) | ||
| if pickedDate <= todayUTC then "lte #{pickedDate.format('YYYY-MM-DD')}" else pickedDate.format('YYYY-MM-DD') | ||
|
|
||
| # Unique identifier for the chart object in the DOM | ||
| $scope.chartId = -> | ||
| "averageVisitChart-#{w.id}" | ||
|
|
||
| $scope.chartDeferred = $q.defer() | ||
| # Widget specific methods | ||
| # -------------------------------------- | ||
| w.initContext = -> | ||
| $scope.isDataFound = w.content? | ||
|
|
||
| w.format = -> | ||
|
|
||
| # Instantiate and render chart | ||
| options = | ||
| chartType: 'line' | ||
| chartOnClickCallbacks: [] | ||
| currency: w.metadata.currency | ||
| showToday: true | ||
| showLegend: true | ||
| zoomType: false | ||
|
|
||
| $scope.chart = new HighchartsFactory($scope.chartId(), w.content.chart, options) | ||
|
|
||
| $scope.chart.formatters = -> | ||
| currency = @options.currency | ||
| xAxisLabels = | ||
| labels: | ||
| formatter: -> | ||
| if (this.chart.rangeSelector.options.selected >= 3) | ||
| moment.utc(this.value).format('MMM YYYY') | ||
| else | ||
| moment.utc(this.value).format('DD MMM') | ||
| yAxisLabels = | ||
| labels: | ||
| formatter: -> | ||
| $filter('mnoCurrency')(this.value, currency, false) | ||
| leftYAxis = w.content.chart.yAxis[0] | ||
| rightYAxis = angular.merge(w.content.chart.yAxis[1], yAxisLabels) | ||
|
|
||
| xAxis: angular.merge([w.content.chart.xAxis[0]], [xAxisLabels]) | ||
| yAxis: [leftYAxis, rightYAxis] | ||
| rangeSelector: | ||
| selected: 5 | ||
|
|
||
| $scope.chart.render(w.content.chart, options) | ||
|
|
||
| # Notifies parent element that the chart is ready to be displayed | ||
| $scope.chartDeferred.notify($scope.chart) | ||
|
|
||
| # Widget is ready: can trigger the "wait for settings to be ready" | ||
| # -------------------------------------- | ||
| $scope.widgetDeferred.resolve(settingsPromises) | ||
| ) | ||
| module.directive('widgetSalesAverageVisit', -> | ||
| return { | ||
| restrict: 'A', | ||
| controller: 'WidgetSalesAverageVisitCtrl' | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .analytics .widget-item .content.sales-average-visit { | ||
| .tall-widget(); | ||
|
|
||
| .average-visit-chart { | ||
| height: ~"calc(@{impac-big-widget-size} - 50px)"; | ||
| } | ||
|
|
||
| .highcharts-y-primary { | ||
| fill: 'rgb(68, 208, 218)' | ||
| } | ||
|
|
||
| .highcharts-y-secondary { | ||
| fill: 'rgb(208, 68, 218)' | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The yAxisLabels are the same as default (right?), for overriding the formatters method, I suggest leveraging the formatters method's returned defaults by savings them to a variable in the outer scope.
Also, rather than having to merge the new v2 bolt layouts response options (xAxis, yAxis, tooltip etc) for every single custom widget template, the highcharts factory should be extended to use these by default.
Then you could do this sort of thing:
EDIT: so I can see now that you have extended the highcharts formatter, so would simply be saving the
defaultFormattersbe enough to not have to do theangular.merge([w.content.chart.xAxis[0] .. )? Seems like you are giving the formatter the w.content.chart.xAxis in initialization, but then having to re-provide it with it to merge in the custom opts.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@xaun I am not completely sure about this as there seem to be slight differences in the overridden formatters
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MarcoBgn Im not completely across the intricacies of your customisations, so my solution isn't comprehensive for your use-case. I am just showing you a way you can store the existing defaults, then modify the object and reassign the formatters method.
The main thing is, this method is massive in the widget controller, it redefines some values that are already defined in the default, and looks very similar across all of the new widgets. So for my review, I request that we think of a solution to improve this. If this is not in the scope of this body of work, or it needs to be quick & dirty merged or something, that's another story :)