Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Jul 06, 2014 @ 13:40
    Bjarne Fyrstenborg
    0

    Sortable table columns and ecommerce data

    Perhaps it would be a nice feature to have sortable columns in the tables so it's possible to sort by e.g. visits or page views.

    Furthermore, when tracking data from your webshop, e.g. Tea Commerce, via Google Analytics you have some data about e.g. most purchased products.. if there is some data here it would be nice to have an addtional tree node "e-commerce" with those data.

    /Bjarne

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jul 06, 2014 @ 18:23
    Warren Buckley
    0

    A nice suggestion.
    However my time is very limited at the moment, so if you have a suggestion happy to take pull requests :)

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Jul 06, 2014 @ 18:34
    Bjarne Fyrstenborg
    0

    Yeah :)
    I looked a bit on how the sorting in listview property editor works.. but I think I need to study a bit closer on how it works and learn more about AngularJS :) 

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Jul 14, 2014 @ 12:17
    Bjarne Fyrstenborg
    100

    I have added some changes to the tables to add sortable columns like in the listview property editor.

    As a starting point I have done this with the keywords table. I think the sorting could use the default icons for sorting like icon-sort (which listview property editor also use), icon-caret-down and icon-caret-up. But it seems these icons are missing in Umbraco as the listview doesn't display the sort direction. Issue created here: http://issues.umbraco.org/issue/U4-4688

    So I have modified keywords.html and Keyword.Controller.js + added a new folder "/App_Plugins/Analytics/backOffice/AnalyticsTree/icons/" where I have copied the folder /css and /fonts from font-awesome-4.1.0 just to include the sorting icons. Perhaps there is a better way to do this.

    keywords.html

    <div ng-controller="Analytics.KeywordController">
        <div class="umb-pane">
    
            <div ng-model="dateFilter" date-range-picker class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
            </div>   
    
            <h4>Keywords</h4>
    
            <div class="clearfix"></div>
            <div ng-show="loadingViews">
                <div class="umb-loader" style="height: 10px; margin: 10px 0px;"></div>
            </div>
    
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th id="keyword"><a href="#" ng-click="sort('keyword')" prevent-default>Keyword <i class="fa fa-sort"></i></a></th> <!-- icon-sort -->
                        <th id="visits"><a href="#" ng-click="sort('visits')" prevent-default>Visits <i class="fa fa-sort"></i></a></th>
                        <th id="pageviews"><a href="#" ng-click="sort('pageviews')" prevent-default>Page Views <i class="fa fa-sort"></i></a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:sortField:descending">
                        <td>{{ item.keyword }}</td>
                        <td>{{ item.visits }}</td>
                        <td>{{ item.pageviews }}</td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    </div>

     

    Keyword.Controller.js

    angular.module("umbraco").controller("Analytics.KeywordController",
        function ($scope, $location, statsResource, settingsResource, assetsService) {
    
            var profileID = "";
    
            // Item List Arrays
            $scope.items = [];
    
            $scope.sort = function (newSortField) {
                if ($scope.sortField == newSortField)
                    $scope.descending = !$scope.descending;
    
                $scope.sortField = newSortField;
    
                $('th i').each(function () {
                    $(this).removeClass().addClass('fa fa-sort'); //icon-sort  // reset sort icon for columns with existing icons
                });
                if ($scope.descending)
                    $('#' + newSortField + ' i').removeClass().addClass('fa fa-sort-down'); //icon-caret-down
                else
                    $('#' + newSortField + ' i').removeClass().addClass('fa fa-sort-up'); //icon-caret-up
            };
    
            $scope.dateFilter = settingsResource.getDateFilter();
            $scope.loadingViews = true;
            $scope.$watch('dateFilter', function () {
                $scope.loadingViews = true;
                settingsResource.setDateFilter($scope.dateFilter.startDate, $scope.dateFilter.endDate);
                //Get Profile
                settingsResource.getprofile().then(function(response) {
                    $scope.profile = response.data;
                    profileID = response.data.Id;
    
                    if (profileID == null || profileID == "") {
                        $location.path("/analytics/analyticsTree/edit/settings");
                        return;
                    }
                    $scope.loadingViews = false;
                    //Get Browser via statsResource - does WebAPI GET call
                    statsResource.getkeywords(profileID,$scope.dateFilter.startDate, $scope.dateFilter.endDate).then(function (response) {
                        $scope.keywords = response.data.ApiResult;
    
                        angular.forEach($scope.keywords.Rows, function (item) {
                            $scope.items.push({
                                keyword: item.Cells[0],
                                visits: parseInt(item.Cells[1]),
                                pageviews: parseInt(item.Cells[2])
                            });
                        });
    
                        var defaultSort = "pageviews"; // default sorting
                        $scope.sortField = defaultSort;
                        $scope.descending = true;
    
                        $('th i').each(function () {
                            $(this).removeClass().addClass('fa fa-sort'); //icon-sort // reset sort icon for columns with existing icons
                        });
                        if ($scope.descending)
                            $('#' + defaultSort + ' i').removeClass().addClass('fa fa-sort-down'); //icon-caret-down
                        else
                            $('#' + defaultSort + ' i').removeClass().addClass('fa fa-sort-up'); //icon-caret-up
    
                        //$scope.filteredItems = [];
    
    
                        //var chartData = response.data.ChartData;
    
                        ////Create Bar Chart
                        //var ctx = document.getElementById("keywords").getContext("2d");
                        //var keywordsChart = new Chart(ctx).Bar(chartData);
                    });
    
                });
            });
    
            //load the seperat css for the editor to avoid it blocking our js loading
            assetsService.loadCss("/umbraco/assets/css/umbraco.css");
            assetsService.loadCss("/App_Plugins/Analytics/backOffice/AnalyticsTree/icons/css/font-awesome.css");
        });

    It looks like this:

    /Bjarne

Please Sign in or register to post replies

Write your reply to:

Draft