-
Notifications
You must be signed in to change notification settings - Fork 31
Feature/lmi insights #487
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
MarcoBgn
wants to merge
17
commits into
maestrano:lmi-insights
Choose a base branch
from
MarcoBgn:feature/lmi-insights
base: lmi-insights
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Feature/lmi insights #487
Changes from all commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
35c82af
add sales-average-purchase-size Widget
da4141a
Custom template for Highchart-LMI + Widgets
3c4ba45
Remove double controller
d9aed2b
WIP info panel
490eddb
Add customer engagement widget, demo LMI customisation
3faa8df
[IMPAC-741] Add $ to right axis
52ae0bd
[IMPAC-741] Disable zooming for average visit
3e3bd78
[IMPAC-741] Add margin to legend
c3014b2
[IMPAC-741] Standardize navigator line to straight dashed
6aa4439
Merge pull request #1 from iseessel/improvement/741-impac-lmi-widgets…
6755f5a
Solve merge conflicts
c32815e
Merge branch 'lmi-insights' of github.com:maestrano/impac-angular int…
8641af1
Remove Angular Scenario breaking JQuery
6e210e0
Get Impac Theming colors for Highcharts
manu-d 7902a41
Merge branch 'fix/travis-chromelauncher' into fix/dependencies-and-specs
xaun 7616571
Fix dashboard specs (relating to IMPAC-750)
xaun 00b562f
changes after review
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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
88 changes: 88 additions & 0 deletions
88
...mponents/widgets/sales-average-purchase-size/sales-average-purchase-size.directive.coffee
This file contains hidden or 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' | ||
| } | ||
| ) | ||
20 changes: 20 additions & 0 deletions
20
src/components/widgets/sales-average-purchase-size/sales-average-purchase-size.less
This file contains hidden or 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)' | ||
| } | ||
| } |
59 changes: 59 additions & 0 deletions
59
src/components/widgets/sales-average-purchase-size/sales-average-purchase-size.tmpl.html
This file contains hidden or 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-show="widget.demoData" common-data-not-found /> | ||
| </div> | ||
| </div> |
80 changes: 80 additions & 0 deletions
80
src/components/widgets/sales-average-visit/sales-average-visit.directive.coffee
This file contains hidden or 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' | ||
| } | ||
| ) |
15 changes: 15 additions & 0 deletions
15
src/components/widgets/sales-average-visit/sales-average-visit.less
This file contains hidden or 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 :)