Custom dashboard

[seanrockster]

Is it possible to replace the ootb dashboard with a custom dashboard?

[seanrockster]

It would be good to specify a range for orders its ok to see today, but about yesterday, last week, last week, orders by customer maybe top 10 etc, most popular products, quite a few metrics that clients like to see. Having the ability to add this as plugins would very useful.

[mattbrailsford]

Are those use cases not covered by the analytics section? That is pluggable and you can add your own widgets.

The goal of the dashboard was just to give an instance overview and lead store owners to orders that need attention. For more in depth stats, they would use the analytics section.

[seanrockster]

You're correct, I hadn't even considered that. Is there documentation on how add widgets?

[mattbrailsford]

Unfortunately not a great deal. It ultimately works similar to the order editor config so there is a custom config file where you can add widgets to. If you create a config file {storealias}.analytics.dashboard.config.json in the App_Plugins\UmbracoCommerce\config directory with the contents as follows:

{
    "widgets": [
        {
            "name": "Total Orders",
            "description": "The total number of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/totalorders.html"
        },
        {
            "name": "Total Revenue",
            "description": "The total revenue of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/totalrevenue.html"
        },
        {
            "name": "Average Order Value",
            "description": "The average order amount of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/avgordervalue.html"
        },
        {
            "name": "Cart Conversion Rates",
            "description": "The rate of conversion of news carts to purchases of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/cartconversionrates.html"
        },
        {
            "name": "Repeat Customer Rates",
            "description": "The rate of return vs first-time customers of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/repeatcustomerrates.html"
        },
        {
            "name": "Top Selling Products",
            "description": "The top selling products of orders within the given period",
            "view": "/App_Plugins/UmbracoCommerce/backoffice/views/analytics/widgets/topsellingproducts.html"
        }
    ]
}

You can then add widgets to it. They ultimately point to angular JS views that render some kind of chart.

Here's an example of a widget and it's controller

<div ng-controller="Umbraco.Commerce.Controllers.AvgOrderValueWidgetController as vm" class="umbraco-commerce">
    <uc-analytics-chart-widget 
        config="config" 
        timeframe="timeframe"
        on-load-data="vm.loadData(timeframe)">
    </uc-analytics-chart-widget>
</div>

(function () {

    'use strict';

    function AvgOrderValueWidgetController($scope, ucAnalyticsResource, ucDateHelper) {

        var vm = this;

        vm.loadData = function (timeframe) {
            return ucAnalyticsResource.getAverageOrderValueReport($scope.config.storeId,
                timeframe.dateRange.from, timeframe.dateRange.to,
                timeframe.compareTo ? timeframe.compareTo.from : undefined,
                timeframe.compareTo ? timeframe.compareTo.to : undefined,
                ucDateHelper.getLocalTimezoneOffset()
            );
        }
    };

    angular.module('umbraco.commerce').controller('Umbraco.Commerce.Controllers.AvgOrderValueWidgetController', AvgOrderValueWidgetController);

}());

Hopefully this helps

[seanrockster]

Ok thats great thank.