Дашборды

Существует возможность изменять расчеты в воронке, которая подключена к объекту раздела Продажи, для отображения по нему аналитики. Для этого нужно создать новый модуль для расчетов и заменить клиентскую схему отображения воронки.

Последовательность действий для изменения расчетов в воронке: 

1. Создать новый класс, который наследуется от FunnelBaseDataProvider и задать логику расчетов.
2. Создать схему замещающей модели представления FunnelChartSchema и использовать в ней новый класс расчетов.

Пример изменения отображения расчетов в воронке продаж в срезе “по количеству” 

Описание кейса 

Необходимо изменить расчеты воронки, поменяв отображение количества продаж на количество продуктов, добавленных в продажи.

Алгоритм реализации кейса 

1. В пользовательском пакете создать новый модуль 

В пользовательском пакете необходимо создать новый клиентский модуль провайдера расчетов. Провайдер расчетов — это класс, который отвечает за выборку, фильтрацию и обработку данных для графика воронки.

В качестве имени и заголовка для создаваемого модуля необходимо указать, например, UsrFunnelByProductCountDataProvider (рис. 1).

Рис. 1. — Свойства модуля провайдера расчетов

2. Добавить локализируемые строки 

В коллекцию локализируемых строк созданного клиентского модуля необходимо добавить строку со значением Количество продуктов. Для этого, щелкнув правой клавишей мыши по узлу структуры LocalizableStrings, нужно из всплывающего меню выбрать команду Добавить. Для созданной строки нужно установить свойства так, как показано на рисунке 2.

Рис. 2. — Свойства локализируемой строки

Также аналогичным образом необходимо добавить локализируемую строку CntOpportunity со значением Количество продаж.

3. Добавить реализацию в модуль провайдера 

Для изменения расчетов воронки нужно переопределить:

• метод формирования колонок addQueryColumns для выборки данных;
• методы обработки данных выборки.

Для обработки одной записи выборки нужно определить метод getSeriesDataConfigByItem. Для обработки всей коллекции нужно определить метод prepareFunnelResponseCollection. Для желаемой фильтрации записей нужно переопределить метод applyFunnelPeriodFilters.

Ниже приведен исходный код нового модуля провайдера расчетов воронки продаж.

define("UsrFunnelByProductCountDataProvider", ["ext-base", "terrasoft", "UsrFunnelByProductCountDataProviderResources",
        "FunnelBaseDataProvider"],
    function(Ext, Terrasoft, resources) {
        // Определение нового провайдера расчетов.
        Ext.define("Terrasoft.configuration.UsrFunnelByProductCountDataProvider", {
            // Наследование от базового провайдера.
            extend: "Terrasoft.FunnelBaseDataProvider",
            // Сокращенное имя нового провайдера
            alternateClassName: "Terrasoft.UsrFunnelByProductCountDataProvider",
            // Метод для обработки всей коллекции.
            prepareFunnelResponseCollection: function(collection) {
                this.callParent(arguments);
            },
            // Расширение метода базового модуля FunnelBaseDataProvider. 
            // Устанавливает колонку количества продуктов для выборки данных.
            addQueryColumns: function(entitySchemaQuery) {
                // Вызов родительского метода.
                this.callParent(arguments);
                // Добавляет в выборку колонку количества продуктов
                entitySchemaQuery.addAggregationSchemaColumn("[OpportunityProductInterest:Opportunity].Quantity",
                        Terrasoft.AggregationType.SUM, "ProductsAmount");
            },
            // Расширение метода базового класса FunnelBaseDataProvider.
            // Устанавливает фильтрацию для выборки
            applyFunnelPeriodFilters: function(filterGroup) {
                // Вызов родительского метода.
                this.callParent(arguments);
                // Создает группу фильтров.
                var endStageFilterGroup = Terrasoft.createFilterGroup();
                // Устанавливает тип оператора для группы.
                endStageFilterGroup.logicalOperation = Terrasoft.LogicalOperatorType.OR;
                // Добавляет фильтр, который указывает, что стадия на продаже еще не окончена.
                endStageFilterGroup.addItem(
                    Terrasoft.createColumnIsNullFilter(this.getDetailColumnPath("DueDate")));
                // Добавляет фильтр, который указывает, что стадия на продаже является завершающей.
                endStageFilterGroup.addItem(
                    Terrasoft.createColumnFilterWithParameter(Terrasoft.ComparisonType.EQUAL,
                        this.getDetailColumnPath("Stage.End"), true, Terrasoft.DataValueType.BOOLEAN));
                filterGroup.addItem(endStageFilterGroup);
            },
            // Расширение метода базового модуля FunnelBaseDataProvider. 
            // Обрабатывает данные для стадий в воронке.
            getSeriesDataConfigByItem: function(responseItem) {
                // Объект, хранящий локализируемые строки.
                var lcz = resources.localizableStrings;
                // Получает объект данных стадии из родительского метода.
                var config = this.callParent(arguments);
                // Получает данные о количестве продуктов в продаже из результата выборки.
                var products = responseItem.get("ProductsAmount");
                products = Ext.isNumber(products) ? products : 0;
                // Форматирует строки.
                var name = Ext.String.format("{0}<br/>{1}: {2}<br/>{3}: {4}",
                    config.menuHeaderValue, lcz.CntOpportunity, config.y, lcz.FunnelProductsCaption, products);
                var displayValue = Ext.String.format("<br/>{0}: {1}", lcz.FunnelProductsCaption, products);
                // Устанавливает новые данные в объект данных и возвращает его.
                return Ext.apply(config, {
                    name: name,
                    displayValue: displayValue
                });
            }
        });
    });

4. Создать схему замещающей модели представления для графика воронки 

Для того, чтобы в расчетах использовался новый модуль провайдера, нужно переопределить метод формирования провайдеров расчетов воронки продаж.

Для этого необходимо создать схему замещающей модели представления и указать ей схему FunnelChartSchema в качестве родительского объекта (рис. 3).

Рис. 3. — Свойства схемы замещающей модели представления

Также необходимо добавить в зависимости новый модуль для расчетов (секция Dependencies), указав его имя в поля Зависимость и Название значения UsrFunnelByProductCountDataProvider (рис. 4).

Рис. 4. — Свойства зависимости схемы воронки

5. Указать новый провайдер расчетов в замещенной схеме воронки 

Для этого в замещенной схеме необходимо переопределить метод getProvidersCollectionConfig, возвращающий конфигурационный объект с коллекцией провайдеров.

define("FunnelChartSchema", ["UsrFunnelByProductCountDataProvider"],
    function() {
        return {
            entitySchemaName: "Opportunity",
            methods: {
                getProvidersCollectionConfig: function() {
                    // Вызывает родительский метод.
                    // Возвращает массив провайдеров.
                    var config = this.callParent();
                    // Ищет провайдер данных в срезе по количеству продаж.
                    var byCount = Terrasoft.findItem(config, {tag: "byNumberConversion"});
                    // Заменяет на новый класс.
                    byCount.item.className = "Terrasoft.UsrFunnelByProductCountDataProvider";
                    return config;
                }
            }
        };
    });

После сохранения схемы в воронке продаж будет использоваться новый модуль расчетов воронки, а воронка будет отображать общее количество продуктов по стадиям (рис. 5).

Рис. 5. — Воронка продаж с отображением количества продуктов, добавленных в продажи

Существует возможность подключить дополнительную фильтрацию для расчетов в воронке.

Для этого необходимо реализовать следующую последовательность действий:

1. Создать унаследованный от провайдера расчетов новый класс, в котором нужно реализовать необходимую логику фильтрации.
2. Создать схему замещающей модели представления FunnelChartSchema и использовать в ней новый класс расчетов.

Описание примера 

Необходимо добавить фильтрацию к расчетам воронки продаж в срезе "по количеству" для выбора только тех продаж, у которых в поле Клиент указан контрагент.

Исходный код 

Пакет с реализацией примера можно скачать по ссылке.

Алгоритм реализации примера 

1. В пользовательском пакете создать новый модуль 

В пользовательском пакете создайте новый клиентский модуль провайдера расчетов. Провайдер расчетов — это класс, который отвечает за выборку, фильтрацию и обработку данных для графика воронки.

В качестве имени и заголовка для создаваемого модуля укажите, например, UsrFunnelByCountDataProvider (рис. 1).

Рис. 1. — Свойства модуля провайдера расчетов

2. Определить новый класс провайдера и задать логику фильтрации 

Для добавления фильтрации к расчетам в срезе “по количеству” нужно наследовать созданный класс от класса FunnelByCountDataProvider и переопределить метод getFunnelFixedFilters.

Исходный код модуля:

define("UsrFunnelByCountDataProvider", ["ext-base",
    "terrasoft", "UsrFunnelByCountDataProviderResources",
    "FunnelByCountDataProvider"],
    function(Ext, Terrasoft, resources) {
        // Определение нового провайдера расчетов.
        Ext.define("Terrasoft.configuration.UsrFunnelByCountDataProvider", {
            // Наследование от провайдера 'по количеству'.
            extend: "Terrasoft.FunnelByCountDataProvider",
            // Сокращенное имя нового провайдера.
            alternateClassName: "Terrasoft.UsrFunnelByCountDataProvider",
            // Расширение метода базового модуля FunnelByCountDataProvider.
            // Возвращает фильтры для выборки.
            getFunnelFixedFilters: function() {
                // Вызов родительского метода.
                var esqFiltersGroup = this.callParent(arguments);
                // Добавляет фильтр, который указывает, что в продаже клиентом указан контрагент.
                esqFiltersGroup.addItem(
                    Terrasoft.createColumnIsNotNullFilter("Account"));
                return esqFiltersGroup;
            }
        });
    });

После внесения изменений сохраните модуль.

3. В пользовательском пакете реализовать модуль для графика воронки 

Чтобы в расчетах использовался новый модуль провайдера, создайте схему замещающей модели представления, в которой в качестве родительской схемы укажите FunnelChartSchema из пакета Opportunity (рис. 2).

Рис. 2. — Свойства замещающего модуля

4. Указать новый провайдер расчетов в замещенной схеме воронки 

Для этого в замещенной схеме переопределите метод формирования провайдеров расчетов воронки продаж и укажите новый класс провайдера расчетов.

Исходный код схемы замещающей модели представления:

define("FunnelChartSchema", ["UsrFunnelByCountDataProvider"], function() {
    return {
        entitySchemaName: "Opportunity",
        methods: {
            getProvidersCollectionConfig: function() {
                // Вызывает родительский метод, который возвращает массив провайдеров.
                var config = this.callParent();
                // Ищет провайдер данных для среза по количеству.
                var byCount = Terrasoft.findItem(config, {tag: "byNumberConversion"});
                // Заменяет на новый класс.
                byCount.item.className = "Terrasoft.UsrFunnelByCountDataProvider";
                return config;
            }
        }
    };
});

После сохранения схемы в воронке продаж будет использоваться новый модуль расчетов: будут отображаться только те продажи, у которых в поле Клиент указан контрагент.

1. Создать модуль курса валют 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

   

3. Заполните свойства схемы.

   • Код (Code) — "UsrCurrencyIndicatorModule".
   • Заголовок (Title) — "Модуль показателя валюты" ("Currency indicator module").
   

4. Реализуйте бизнес-логику модуля показателя валюты.

   Исходный код схемы UsrCurrencyIndicatorModule модуля представлен ниже.

   UsrCurrencyIndicatorModule

   define("UsrCurrencyIndicatorModule", ["UsrCurrencyIndicatorModuleResources", "IndicatorModule"], function() {
   
       /* Класс, который генерирует конфигурацию представления модуля показателя валюты. */
       Ext.define("Terrasoft.configuration.CurrencyIndicatorViewConfig", {
           extend: "Terrasoft.BaseModel",
           alternateClassName: "Terrasoft.CurrencyIndicatorViewConfig",
           /* Генерирует конфигурацию представления модуля показателя валюты. */
           generate: function(config) {
               var style = config.style || "";
               var fontStyle = config.fontStyle || "";
               var wrapClassName = Ext.String.format("{0}", style);
               var id = Terrasoft.Component.generateId();
               /* Возвращаемый конфигурационный объект представления. */
               var result = {
                   "name": id,
                   "itemType": Terrasoft.ViewItemType.CONTAINER,
                   "classes": {wrapClassName: [wrapClassName, "indicator-module-wrapper"]},
                   "styles": {
                       "display": "table",
                       "width": "100%",
                       "height": "100%"
                   },
                   "items": [
                       {
                           "name": id + "-wrap",
                           "itemType": Terrasoft.ViewItemType.CONTAINER,
                           "styles": {
                               "display": "table-cell",
                               "vertical-align": "middle"
                           },
                           "classes": {wrapClassName: ["indicator-wrap"]},
                           "items": [
                               /* Отображение названия валюты. */
                               {
                                   "name": "indicator-caption" + id,
                                   "itemType": Terrasoft.ViewItemType.LABEL,
                                   "caption": {"bindTo": "CurrencyName"},
                                   "classes": {"labelClass": ["indicator-caption"]}
                               },
                               /* Отображение курса валюты. */
                               {
                                   "name": "indicator-value" + id,
                                   "itemType": Terrasoft.ViewItemType.LABEL,
                                   "caption": {
                                       "bindTo": "CurrencyValue"
                                   },
                                   "classes": {"labelClass": ["indicator-value " + fontStyle]}
                               }
                           ]
                       }
                   ]
               };
               return result;
           }
       });
   
       /* Класс модели представления модуля показателя валюты. */
       Ext.define("Terrasoft.configuration.CurrencyIndicatorViewModel", {
           extend: "Terrasoft.BaseModel",
           alternateClassName: "Terrasoft.CurrencyIndicatorViewModel",
           Ext: null,
           Terrasoft: null,
           sandbox: null,
           columns: {
               /* Название валюты. */
               CurrencyName: {
                   type: Terrasoft.core.enums.ViewModelSchemaItem.ATTRIBUTE,
                   dataValueType: Terrasoft.DataValueType.TEXT,
                   value: null
               },
               /* Значение валюты. */
               CurrencyValue: {
                   type: Terrasoft.core.enums.ViewModelSchemaItem.ATTRIBUTE,
                   dataValueType: Terrasoft.DataValueType.FLOAT,
                   value: null
               }
           },
           onRender: Ext.emptyFn,
           /* В зависимости от названия, возвращает значение валюты. Метод приведен в качестве примера. Для пользовательской задачи необходимо выбрать индивидуальный способ получения данных, например, REST API, запрос к базе данных и т. д. */
           getCurrencyValue: function(currencyName, callback, scope) {
               var result = 0;
               if (currencyName === "USD to EUR") {
                   result = 0.95;
               }
               if (currencyName === "EUR to USD") {
                   result = 1.06;
               }
               callback.call(scope || this, result);
           },
           /* Получает и отображает данные на дашборде. */
           prepareIndicator: function(callback, scope) {
               this.getCurrencyValue(this.get("CurrencyName"), function(currencyValue) {
                   this.set("CurrencyValue", currencyValue);
                   callback.call(scope);
               }, this);
           },
           /* Инициализирует дашборд. */
           init: function(callback, scope) {
               this.prepareIndicator(callback, scope);
           }
       });
   
       /* Класс модуля дашборда. */
       Ext.define("Terrasoft.configuration.CurrencyIndicatorModule", {
           extend: "Terrasoft.IndicatorModule",
           alternateClassName: "Terrasoft.CurrencyIndicatorModule",
           /* Название класса модели представления дашборда. */
           viewModelClassName: "Terrasoft.CurrencyIndicatorViewModel",
           /* Название класса-генератора конфигурации представления. */
           viewConfigClassName: "Terrasoft.CurrencyIndicatorViewConfig",
           /* Подписка на сообщения сторонних модулей. */
           subscribeMessages: function() {
               this.sandbox.subscribe("GenerateIndicator", this.onGenerateIndicator, this, [this.sandbox.id]);
           }
       });
   
       return Terrasoft.CurrencyIndicatorModule;
   });
   

5. Добавьте стили модуля.

   1. На панели свойств дизайнера модуля перейдите в узел LESS структуры модуля.
   2. Задайте необходимые стили отображения дашборда.
   Настройка стилей отображения дашборда

   /* Настройка отображения текста дашборда по центру элемента.*/
   .indicator-module-wrapper {
       text-align: center;
   }
   

6. В схему модуля добавьте сообщение родительского модуля с направлением Публикация (Publish).

   1. В контекстном меню узла Сообщения (Messages) структуры модуля нажмите .

   2. Задайте свойства сообщения.

      • Код (Code) — "GetIndicatorConfig".
      • Направление (Direction) — выберите "Публикация" ("Publish").
      • Режим (Mode) — выберите "Адрес" ("Address").
      
   3. Для добавления сообщения нажмите Добавить (Add).

7. Аналогично в схему модуля добавьте сообщение родительского модуля с направлением Подписка (Subscribe).

   1. В контекстном меню узла Сообщения (Messages) структуры модуля нажмите .

   2. Задайте свойства сообщения.

      • Код (Code) — "GenerateIndicator".
      • Направление (Direction) — выберите "Подписка" ("Subscribe").
      • Режим (Mode) — выберите "Адрес" ("Address").
      
   3. Для добавления сообщения нажмите Добавить (Add).
8. На панели инструментов дизайнера модуля нажмите Сохранить (Save).

2. Добавить дашборд на панель итогов 

1. Перейдите в раздел Итоги (Dashboards).
2. На панели инструментов раздела нажмите —> Добавить (New).
3. Заполните свойство панели итогов Заголовок (Title) — "Валюты" ("Currencies").

4. Добавьте дашборд, который отображает курс USD к EUR.

   1. В области настройки нажмите —> Дашборд (Widget).
   2. В поле Модуль (Module) выберите "Модуль показателя валюты" ("Currency indicator module").

   3. В поле Параметры модуля (Module parameters) добавьте конфигурационный JSON-объект c необходимыми параметрами модуля Модуль показателя валюты (Currency indicator module).

      Параметры модуля Модуль показателя валюты (Currency indicator module)

      {
          "parameters": {
              "CurrencyName": "USD to EUR",
              "style": "widget-blue"
          },
          "configurationMessage": "GetIndicatorConfig"
      }
      

      CurrencyName — валюта, курс которой необходимо отобразить.

      style — цвет дашборда. Возможные значения: "green", "mustard", "orange", "coral", "violet", "blue", "light-blue", "dark-turquoise", "turquoise".

      configurationMessage — сообщение, при помощи которого передается конфигурационный объект.

   4. На панели инструментов страницы настройки дашборда нажмите Сохранить (Save).

5. Аналогично добавьте дашборд, который отображает курс EUR к USD.

   1. В области настройки нажмите —> Дашборд (Widget).
   2. В поле Модуль (Module) выберите "Модуль показателя валюты" ("Currency indicator module").

   3. В поле Параметры модуля (Module parameters) добавьте конфигурационный JSON-объект c необходимыми параметрами модуля Модуль показателя валюты (Currency indicator module).

      Параметры модуля Модуль показателя валюты (Currency indicator module)

      {
          "parameters": {
              "CurrencyName": "EUR to USD",
              "style": "widget-dark-turquoise"
          },
          "configurationMessage": "GetIndicatorConfig"
      }
      

   4. На панели инструментов страницы настройки дашборда нажмите Сохранить (Save).
6. На панели инструментов страницы настройки панели итогов нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

1. Перейдите в раздел Итоги (Dashboards).
2. Перейдите на панель итогов Валюты (Currencies).

В результате выполнения примера на панели итогов Валюты (Currencies) отображаются дашборды, которые содержат курсы USD к EUR и EUR к USD.