user modules

crm/methodologist-manual/src/crm_consist/user_modules.md

 ### Пользовательские компоненты {#userModules}
 
-*   [crm_component_canban](#uMCanban)
+*   [crm_component_canban_deal](#uMCanbanDeal)
+*   [crm_component_deals_dashboard](#uMDealsDashboard)
+*   [crm_component_deals_productivity](#uMDealsProductivity)
 *   [crm_component_deal_button](#uMDealButton)
 *   [crm_component_funnel](#uMFunnel)
+*   [crm_component_funnel_deal](#uMFunnelDeal)
 *   [crm_component_group_button](#uMGroupButton)
+*   [crm_component_group_button_deal](#uMGroupButtonDeal)
+*   [crm_component_leads_dashboard](#uMLeadsDashboard)
 *   [crm_component_notifications](#uMNotifications)
 *   [crm_component_registry_chooser](#uMRegistryChooser)
-*   [crm_component_social_links_accounts](#uMSocialLinksAccounts)
-*   [crm_component_social_links_contacts](#uMSocialLinksContacts)
 
 #### crm_component_canban {#uMCanban}
 
@@ -165,6 +168,198 @@ view.initDnd = redipsInit;
 
 ```
 
+#### crm_component_canban_deal {#uMCanbanDeal}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_canban_deal                                |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<div id="redips-drag">
+
+</div>
+
+```
+
+JAVASCRIPT код:
+
+``` xml
+
+/*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
+/*global window: false, REDIPS: true */
+
+/* enable strict mode */
+"use strict";
+
+// define redips_init variable
+var redipsInit;
+
+
+// redips initialization
+redipsInit = function () {
+    // reference to the REDIPS.drag library and message line
+    var	rd = REDIPS.drag;
+    // how to display disabled elements
+    rd.style.borderDisabled = 'solid';	// border style for disabled element will not be changed (default is dotted)
+    rd.style.opacityDisabled = 60;		// disabled elements will have opacity effect
+    REDIPS.drag.dropMode = 'multiple';
+    // initialization
+    rd.init();
+    // only "smile" can be placed to the marked cell
+    rd.mark.exception.d8 = 'smile';
+    // prepare handlers
+    rd.event.clicked = function () {
+    };
+    rd.event.dblClicked = function () {
+    };
+    rd.event.moved  = function () {
+    };
+    rd.event.notMoved = function () {
+    };
+    rd.event.dropped = function () {
+        var pos = rd.getPosition();
+        console.log($(rd.obj).attr('status'));
+        var status = model.currentData[pos[2]];
+        if ($(rd.obj).attr('status') === status.status) {
+            return;
+        }
+        AS.SERVICES.showWaitWindow();
+        var pFact = jQuery.ajax({
+            url: window.location.origin + "/crm/rest/api/funnel/changeDealStatus?statusID="+(status.status) + "&statusName="+(status.name)+"&leadID=" + rd.obj.id,
+            type: "POST",
+            beforeSend: AS.FORMS.ApiUtils.addAuthHeader,
+            dataType: "text",
+            error: function(jqXHR, textStatus, errorThrown){
+                model.playerModel.redraw();
+                AS.SERVICES.hideWaitWindow();
+                try {
+                    AS.SERVICES.showErrorMessage(jqXHR.responseText);
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        });
+
+        jQuery.when(pFact).then(function (data) {
+            model.playerModel.firstShow = false;
+            console.log(data);
+            model.playerModel.redraw();
+            var object = JSON.parse(data);
+            if (object.dealObject) {
+                var documentID = object.id;
+                var hash = '#' + jQuery.param({
+                        submodule: 'common',
+                        action: 'open_document',
+                        document_identifier: documentID});
+                window.top.location.hash = hash;
+            }
+            AS.SERVICES.hideWaitWindow();
+        });
+    };
+    rd.event.switched = function () {
+    };
+    rd.event.clonedEnd1 = function () {
+    };
+    rd.event.clonedEnd2 = function () {
+    };
+    rd.event.notCloned = function () {
+    };
+    rd.event.deleted = function (cloned) {
+        // if cloned element is directly moved to the trash
+        if (cloned) {
+            // set id of original element (read from redips property)
+            // var id_original = rd.obj.redips.id_original;
+        }
+        else {
+        }
+    };
+    rd.event.undeleted = function () {
+    };
+    rd.event.cloned = function () {
+    };
+    rd.event.changed = function () {
+        // get target and source position (method returns positions as array)
+        var pos = rd.getPosition();
+    };
+};
+
+
+// toggles trash_ask parameter defined at the top
+function toggleConfirm(chk) {
+    if (chk.checked === true) {
+        REDIPS.drag.trash.question = 'Are you sure you want to delete DIV element?';
+    }
+    else {
+        REDIPS.drag.trash.question = null;
+    }
+}
+
+
+// toggles delete_cloned parameter defined at the top
+function toggleDeleteCloned(chk) {
+    REDIPS.drag.clone.drop = !chk.checked;
+}
+
+
+// enables / disables dragging
+function toggleDragging(chk) {
+    REDIPS.drag.enableDrag(chk.checked);
+}
+
+
+// function sets drop_option parameter defined at the top
+function setMode(radioButton) {
+    REDIPS.drag.dropMode = radioButton.value;
+}
+
+
+view.initDnd = redipsInit;
+
+```
+
+#### crm_component_deals_dashboard {#uMDealsDashboard}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_deals_dashboard                            |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%B6%D0%B0%D0%BC%D0%B8?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A36258'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
+
+```
+
+#### crm_component_deals_productivity {#uMDealsProductivity}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_deals_productivity                         |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D1%8C?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A700'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
+
+```
+
 #### crm_component_deal_button {#uMDealButton}
 
 +--------------------------------------------------------+----------------------------------------------------------+
@@ -277,18 +472,449 @@ const options = {
 }
 }
 
-const chart = new D3Funnel('#funnel');
-const picker = document.getElementById('picker');
-chart.draw(data.normal, options);
+const chart = new D3Funnel('#funnel');
+const picker = document.getElementById('picker');
+chart.draw(data.normal, options);
+
+```
+
+#### crm_component_funnel_deal {#uMFunnelDeal}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_funnel_deal                                |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<style>
+.chart {
+    margin: 0 auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    height: 500px;
+    width: 450px;
+}
+</style
+				<!-- Funnel container -->
+				<div class="chart" id="funnel"></div>
+
+```
+
+JAVASCRIPT код:
+
+``` xml
+
+/* global D3Funnel */
+
+const data = {
+normal: [
+   ['Первичная регистрация', [0, ''], '#e73a00'],
+    ['Квалификация', [0, ''], '#fa6c00'],
+    ['Взращивание', [0, ''], '#ffa900'],
+    ['Подтверждение интереса', [0, ''], '#ffc500'],
+    ['В сделку', [0, ''], '#a6cf00'],
+]
+};
+const options = {
+
+        chart: {
+            width: 450,
+            height: 500,
+            bottomWidth: 1 / 2,
+            curve: {
+                enabled: false,
+            },
+        },
+        block: {
+            dynamicHeight: false,
+            highlight: true,
+            minHeight: 40,
+
+        },
+        label: {
+            format: '{l}: {v}\n{f}',
+        },
+        events: {
+            click: {
+                block: (d) => {
+                alert('<' + d.label.raw + '> selected.');
+},
+},
+}
+}
+
+const chart = new D3Funnel('#funnel');
+const picker = document.getElementById('picker');
+chart.draw(data.normal, options);
+
+```
+
+#### crm_component_group_button {#uMGroupButton}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_group_button                               |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<style>
+
+ .btn_boot-group-lg > .btn_boot, .btn_boot-lg {
+     padding: 10px 16px;
+     font-size: 18px;
+     border-radius: 6px
+ }
+
+.btn_boot-group-sm > .btn_boot, .btn_boot-sm {
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px
+}
+
+.btn_boot-group-xs > .btn_boot, .btn_boot-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px
+}
+.btn_boot-group, .btn_boot-group-vertical {
+    position: relative;
+
+    vertical-align: middle;
+    padding-top: 3px;
+}
+
+.btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot {
+    position: relative;
+    float: left
+}
+
+.btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover {
+    z-index: 2
+}
+
+.btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group {
+    margin-left: -1px
+}
+
+.btn_boot-toolbar {
+    margin-left: -5px
+}
+
+.btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group {
+    float: left
+}
+
+.btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group {
+    margin-left: 5px
+}
+
+.btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0
+}
+
+.btn_boot-group > .btn_boot:first-child {
+    margin-left: 0
+}
+
+.btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.btn_boot-group > .btn_boot-group {
+    float: left
+}
+
+.btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
+    border-radius: 0
+}
+
+.btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle {
+    outline: 0
+}
+
+.btn_boot-group > .btn_boot + .dropdown-toggle {
+    padding-right: 8px;
+    padding-left: 8px
+}
+
+.btn_boot-group > .btn_boot-lg + .dropdown-toggle {
+    padding-right: 12px;
+    padding-left: 12px
+}
+
+.btn_boot-group.open .dropdown-toggle {
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
+}
+
+.btn_boot-group.open .dropdown-toggle.btn_boot-link {
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.btn_boot .caret {
+    margin-left: 0
+}
+
+.btn_boot-lg .caret {
+    border-width: 5px 5px 0;
+    border-bottom-width: 0
+}
+
+.dropup .btn_boot-lg .caret {
+    border-width: 0 5px 5px
+}
+
+.btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%
+}
+
+.btn_boot-group-vertical > .btn_boot-group > .btn_boot {
+    float: none
+}
+
+.btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group {
+    margin-top: -1px;
+    margin-left: 0
+}
+
+.btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) {
+    border-radius: 0
+}
+
+.btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px
+}
+
+.btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
+    border-radius: 0
+}
+
+.btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.btn_boot-group-justified {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: separate
+}
+
+.btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group {
+    display: table-cell;
+    float: none;
+    width: 1%
+}
+
+.btn_boot-group-justified > .btn_boot-group .btn_boot {
+    width: 100%
+}
+
+.btn_boot-group-justified > .btn_boot-group .dropdown-menu {
+    left: auto
+}
+
+.btn_boot {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: bolder;
+    line-height: 0.9;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus {
+
+}
+
+.btn_boot.focus, .btn_boot:focus, .btn_boot:hover {
+    color: #333;
+    text-decoration: none
+}
+
+.btn_boot.active, .btn_boot:active {
+    background-image: none;
+    outline: 0;
+}
+
+.btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot {
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    opacity: .65
+}
+
+a.btn_boot.disabled, fieldset[disabled] a.btn_boot {
+    pointer-events: none
+}
+
+.btn_boot-default {
+    color: #333;
+    background-color: #eeeeee;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default.focus, .btn_boot-default:focus {
+    color: #333;
+    background-color: #eeeeee;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default:hover {
+    color: #333;
+    background-color: #eeeeee;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
+    color: #333;
+    background-color: #DDDDDD;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover {
+    color: #333;
+    background-color: #DDDDDD;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
+    background-image: none
+}
+
+.btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover {
+    background-color: #fff;
+    border-color: #D5D5D5
+}
+
+.btn_boot-default .badge {
+    color: #fff;
+    background-color: #8c8c8c
+}
+</style>
+  <div class="btn_boot-group" style="
+width: 190px;
+margin: 0 auto;
+height: 26px;
+align-self: center;
+text-align: center;
+" innerId="group">
+<button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
+<button type="button" class="btn_boot btn_boot-default active" innerId="canban">Канбан</button>
+</div>
+
+```
+
+JAVASCRIPT код:
+
+``` xml
+
+$(".btn_boot-group > .btn_boot").click(function(){
+    $(this).addClass("active").siblings().removeClass("active");
+});
+
+var funnel = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='funnel']");
+funnel.text(i18n.tr('Воронка'));
+var canban = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='canban']");
+canban.text(i18n.tr('Канбан'));
+var funnel_cmp = view.playerView.getViewWithId('crm_form_funnel_funnel');
+var canban_cmp = view.playerView.getViewWithId('crm_form_funnel_canban');
+var bottom_cmp = view.playerView.getViewWithId('crm_form_funnel_bottom_sum');
+model.playerModel.funnelDrawn = false;
+model.playerModel.canbanDrawn = false;
+funnel.click(function(){
+    $('body').css('overflow', 'auto');
+    funnel_cmp.setVisible(true);
+    canban_cmp.setVisible(false);
+    bottom_cmp.setVisible(true);
+    model.playerModel.isFunnel = true;
+    if (!model.playerModel.funnelDrawn) {
+        model.playerModel.redraw();
+    }
+});
+canban.click(function(){
+    $('body').css('overflow', 'auto');
+    funnel_cmp.setVisible(false);
+    canban_cmp.setVisible(true);
+    bottom_cmp.setVisible(false);
+    model.playerModel.isFunnel = false;
+    if (!model.playerModel.canbanDrawn) {
+        model.playerModel.redraw();
+    }
+});
 
 ```
 
-#### crm_component_group_button {#uMGroupButton}
+#### crm_component_group_button_deal {#uMGroupButtonDeal}
 
 +--------------------------------------------------------+----------------------------------------------------------+
 | Свойство                                               | Значение                                                 |
 +========================================================+==========================================================+
-| Код                                                    | crm_component_group_button                               |
+| Код                                                    | crm_component_group_button_deal                          |
 +--------------------------------------------------------+----------------------------------------------------------+
 | Использовать в формах                                  | включен                                                  |
 +--------------------------------------------------------+----------------------------------------------------------+
@@ -297,6 +923,7 @@ HTML код:
 
 ``` xml
 
+
 <style>
 
     .btn_boot-group-lg > .btn_boot, .btn_boot-lg {
@@ -305,194 +932,194 @@ HTML код:
         border-radius: 6px
     }
 
-.btn_boot-group-sm > .btn_boot, .btn_boot-sm {
+    .btn_boot-group-sm > .btn_boot, .btn_boot-sm {
         padding: 5px 10px;
         font-size: 12px;
         line-height: 1.5;
         border-radius: 3px
-}
+    }
 
-.btn_boot-group-xs > .btn_boot, .btn_boot-xs {
+    .btn_boot-group-xs > .btn_boot, .btn_boot-xs {
         padding: 1px 5px;
         font-size: 12px;
         line-height: 1.5;
         border-radius: 3px
-}
-.btn_boot-group, .btn_boot-group-vertical {
+    }
+    .btn_boot-group, .btn_boot-group-vertical {
         position: relative;
 
         vertical-align: middle;
         padding-top: 3px;
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot {
+    .btn_boot-group-vertical > .btn_boot, .btn_boot-group > .btn_boot {
         position: relative;
         float: left
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover {
+    .btn_boot-group-vertical > .btn_boot.active, .btn_boot-group-vertical > .btn_boot:active, .btn_boot-group-vertical > .btn_boot:focus, .btn_boot-group-vertical > .btn_boot:hover, .btn_boot-group > .btn_boot.active, .btn_boot-group > .btn_boot:active, .btn_boot-group > .btn_boot:focus, .btn_boot-group > .btn_boot:hover {
         z-index: 2
-}
+    }
 
-.btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group {
+    .btn_boot-group .btn_boot + .btn_boot, .btn_boot-group .btn_boot + .btn_boot-group, .btn_boot-group .btn_boot-group + .btn_boot, .btn_boot-group .btn_boot-group + .btn_boot-group {
         margin-left: -1px
-}
+    }
 
-.btn_boot-toolbar {
+    .btn_boot-toolbar {
         margin-left: -5px
-}
+    }
 
-.btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group {
+    .btn_boot-toolbar .btn_boot, .btn_boot-toolbar .btn_boot-group, .btn_boot-toolbar .input-group {
         float: left
-}
+    }
 
-.btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group {
+    .btn_boot-toolbar > .btn_boot, .btn_boot-toolbar > .btn_boot-group, .btn_boot-toolbar > .input-group {
         margin-left: 5px
-}
+    }
 
-.btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    .btn_boot-group > .btn_boot:not(:first-child):not(:last-child):not(.dropdown-toggle) {
         border-radius: 0
-}
+    }
 
-.btn_boot-group > .btn_boot:first-child {
+    .btn_boot-group > .btn_boot:first-child {
         margin-left: 0
-}
+    }
 
-.btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) {
+    .btn_boot-group > .btn_boot:first-child:not(:last-child):not(.dropdown-toggle) {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0
-}
+    }
 
-.btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) {
+    .btn_boot-group > .btn_boot:last-child:not(:first-child), .btn_boot-group > .dropdown-toggle:not(:first-child) {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0
-}
+    }
 
-.btn_boot-group > .btn_boot-group {
+    .btn_boot-group > .btn_boot-group {
         float: left
-}
+    }
 
-.btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
+    .btn_boot-group > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
         border-radius: 0
-}
+    }
 
-.btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
+    .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0
-}
+    }
 
-.btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
+    .btn_boot-group > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0
-}
+    }
 
-.btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle {
+    .btn_boot-group .dropdown-toggle:active, .btn_boot-group.open .dropdown-toggle {
         outline: 0
-}
+    }
 
-.btn_boot-group > .btn_boot + .dropdown-toggle {
+    .btn_boot-group > .btn_boot + .dropdown-toggle {
         padding-right: 8px;
         padding-left: 8px
-}
+    }
 
-.btn_boot-group > .btn_boot-lg + .dropdown-toggle {
+    .btn_boot-group > .btn_boot-lg + .dropdown-toggle {
         padding-right: 12px;
         padding-left: 12px
-}
+    }
 
-.btn_boot-group.open .dropdown-toggle {
+    .btn_boot-group.open .dropdown-toggle {
         -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
         box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
-}
+    }
 
-.btn_boot-group.open .dropdown-toggle.btn_boot-link {
+    .btn_boot-group.open .dropdown-toggle.btn_boot-link {
         -webkit-box-shadow: none;
         box-shadow: none
-}
+    }
 
-.btn_boot .caret {
+    .btn_boot .caret {
         margin-left: 0
-}
+    }
 
-.btn_boot-lg .caret {
+    .btn_boot-lg .caret {
         border-width: 5px 5px 0;
         border-bottom-width: 0
-}
+    }
 
-.dropup .btn_boot-lg .caret {
+    .dropup .btn_boot-lg .caret {
         border-width: 0 5px 5px
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
+    .btn_boot-group-vertical > .btn_boot, .btn_boot-group-vertical > .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
         display: block;
         float: none;
         width: 100%;
         max-width: 100%
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot-group > .btn_boot {
+    .btn_boot-group-vertical > .btn_boot-group > .btn_boot {
         float: none
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group {
+    .btn_boot-group-vertical > .btn_boot + .btn_boot, .btn_boot-group-vertical > .btn_boot + .btn_boot-group, .btn_boot-group-vertical > .btn_boot-group + .btn_boot, .btn_boot-group-vertical > .btn_boot-group + .btn_boot-group {
         margin-top: -1px;
         margin-left: 0
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) {
+    .btn_boot-group-vertical > .btn_boot:not(:first-child):not(:last-child) {
         border-radius: 0
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) {
+    .btn_boot-group-vertical > .btn_boot:first-child:not(:last-child) {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) {
+    .btn_boot-group-vertical > .btn_boot:last-child:not(:first-child) {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 4px
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
+    .btn_boot-group-vertical > .btn_boot-group:not(:first-child):not(:last-child) > .btn_boot {
         border-radius: 0
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
+    .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .btn_boot:last-child, .btn_boot-group-vertical > .btn_boot-group:first-child:not(:last-child) > .dropdown-toggle {
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0
-}
+    }
 
-.btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
+    .btn_boot-group-vertical > .btn_boot-group:last-child:not(:first-child) > .btn_boot:first-child {
         border-top-left-radius: 0;
         border-top-right-radius: 0
-}
+    }
 
-.btn_boot-group-justified {
+    .btn_boot-group-justified {
         display: table;
         width: 100%;
         table-layout: fixed;
         border-collapse: separate
-}
+    }
 
-.btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group {
+    .btn_boot-group-justified > .btn_boot, .btn_boot-group-justified > .btn_boot-group {
         display: table-cell;
         float: none;
         width: 1%
-}
+    }
 
-.btn_boot-group-justified > .btn_boot-group .btn_boot {
+    .btn_boot-group-justified > .btn_boot-group .btn_boot {
         width: 100%
-}
+    }
 
-.btn_boot-group-justified > .btn_boot-group .dropdown-menu {
+    .btn_boot-group-justified > .btn_boot-group .dropdown-menu {
         left: auto
-}
+    }
 
-.btn_boot {
+    .btn_boot {
         display: inline-block;
         padding: 6px 12px;
         margin-bottom: 0;
@@ -512,87 +1139,83 @@ HTML код:
         background-image: none;
         border: 1px solid transparent;
         border-radius: 4px;
-}
+    }
 
-.btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus {
+    .btn_boot.active.focus, .btn_boot.active:focus, .btn_boot.focus, .btn_boot:active.focus, .btn_boot:active:focus, .btn_boot:focus {
 
-}
+    }
 
-.btn_boot.focus, .btn_boot:focus, .btn_boot:hover {
+    .btn_boot.focus, .btn_boot:focus, .btn_boot:hover {
         color: #333;
         text-decoration: none
-}
+    }
 
-.btn_boot.active, .btn_boot:active {
+    .btn_boot.active, .btn_boot:active {
         background-image: none;
         outline: 0;
-}
+    }
 
-.btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot {
+    .btn_boot.disabled, .btn_boot[disabled], fieldset[disabled] .btn_boot {
         cursor: not-allowed;
         filter: alpha(opacity=65);
         -webkit-box-shadow: none;
         box-shadow: none;
         opacity: .65
-}
+    }
 
-a.btn_boot.disabled, fieldset[disabled] a.btn_boot {
+    a.btn_boot.disabled, fieldset[disabled] a.btn_boot {
         pointer-events: none
-}
+    }
 
-.btn_boot-default {
+    .btn_boot-default {
         color: #333;
         background-color: #eeeeee;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default.focus, .btn_boot-default:focus {
+    .btn_boot-default.focus, .btn_boot-default:focus {
         color: #333;
         background-color: #eeeeee;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default:hover {
+    .btn_boot-default:hover {
         color: #333;
         background-color: #eeeeee;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
+    .btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
         color: #333;
         background-color: #DDDDDD;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover {
+    .btn_boot-default.active.focus, .btn_boot-default.active:focus, .btn_boot-default.active:hover, .btn_boot-default:active.focus, .btn_boot-default:active:focus, .btn_boot-default:active:hover, .open > .dropdown-toggle.btn_boot-default.focus, .open > .dropdown-toggle.btn_boot-default:focus, .open > .dropdown-toggle.btn_boot-default:hover {
         color: #333;
         background-color: #DDDDDD;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
+    .btn_boot-default.active, .btn_boot-default:active, .open > .dropdown-toggle.btn_boot-default {
         background-image: none
-}
+    }
 
-.btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover {
+    .btn_boot-default.disabled.focus, .btn_boot-default.disabled:focus, .btn_boot-default.disabled:hover, .btn_boot-default[disabled].focus, .btn_boot-default[disabled]:focus, .btn_boot-default[disabled]:hover, fieldset[disabled] .btn_boot-default.focus, fieldset[disabled] .btn_boot-default:focus, fieldset[disabled] .btn_boot-default:hover {
         background-color: #fff;
         border-color: #D5D5D5
-}
+    }
 
-.btn_boot-default .badge {
+    .btn_boot-default .badge {
         color: #fff;
         background-color: #8c8c8c
-}
+    }
 </style>
-  <div class="btn_boot-group" style="
-width: 190px;
-margin: 0 auto;
-height: 26px;
-align-self: center;
-text-align: center;
-" innerId="group">
-<button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
-<button type="button" class="btn_boot btn_boot-default active" innerId="canban">Канбан</button>
+<div class="btn_boot-group" style=" width:400px; margin: 0 auto; height: 26px; align-self: center; text-align: center;" innerId="group">
+    <button type="button" class="btn_boot btn_boot-default" innerId="funnel">Воронка</button>
+    <button type="button" class="btn_boot btn_boot-default active" innerId="canban">Поток</button>
+    <button type="button" class="btn_boot btn_boot-default " innerId="dashboard">Аналитика</button>
+    <button type="button" class="btn_boot btn_boot-default " innerId="productivity">Продуктивность</button>
 </div>
 
 ```
@@ -608,18 +1231,28 @@ $(".btn_boot-group > .btn_boot").click(function(){
 var funnel = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='funnel']");
 funnel.text(i18n.tr('Воронка'));
 var canban = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='canban']");
-canban.text(i18n.tr('Канбан'));
+canban.text(i18n.tr('Поток'));
+var dashboard = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='dashboard']");
+dashboard.text(i18n.tr('Аналитика'));
+var productivity = jQuery(view.container[0]).children("[innerId='group']").children("[innerId='productivity']");
+productivity.text(i18n.tr('Продуктивность'));
 var funnel_cmp = view.playerView.getViewWithId('crm_form_funnel_funnel');
 var canban_cmp = view.playerView.getViewWithId('crm_form_funnel_canban');
 var bottom_cmp = view.playerView.getViewWithId('crm_form_funnel_bottom_sum');
+var dashboard_cmp = view.playerView.getViewWithId('crm_form_funnel_dashboard');
+var productivity_cmp = view.playerView.getViewWithId('crm_form_funnel_productivity');
+var filterTable = view.playerView.getViewWithId('crm_form_funnel_filter_panel');
 model.playerModel.funnelDrawn = false;
 model.playerModel.canbanDrawn = false;
 funnel.click(function(){
     $('body').css('overflow', 'auto');
     funnel_cmp.setVisible(true);
-    canban_cmp.setVisible(false);
     bottom_cmp.setVisible(true);
+    canban_cmp.setVisible(false);
+    productivity_cmp.setVisible(false);
+    dashboard_cmp.setVisible(false);
     model.playerModel.isFunnel = true;
+    filterTable.setVisible(true);
     if (!model.playerModel.funnelDrawn) {
         model.playerModel.redraw();
     }
@@ -629,11 +1262,53 @@ canban.click(function(){
     funnel_cmp.setVisible(false);
     canban_cmp.setVisible(true);
     bottom_cmp.setVisible(false);
+    productivity_cmp.setVisible(false);
+    dashboard_cmp.setVisible(false);
     model.playerModel.isFunnel = false;
+    filterTable.setVisible(true);
     if (!model.playerModel.canbanDrawn) {
         model.playerModel.redraw();
     }
 });
+dashboard.click(function(){
+    $('body').css('overflow', 'auto');
+    funnel_cmp.setVisible(false);
+    bottom_cmp.setVisible(false);
+    canban_cmp.setVisible(false);
+    productivity_cmp.setVisible(false);
+    dashboard_cmp.setVisible(true);
+    dashboard_cmp.calcDim();
+    filterTable.setVisible(false);
+});
+
+productivity.click(function(){
+    $('body').css('overflow', 'auto');
+    funnel_cmp.setVisible(false);
+    bottom_cmp.setVisible(false);
+    canban_cmp.setVisible(false);
+    dashboard_cmp.setVisible(false);
+    productivity_cmp.setVisible(true);
+    productivity_cmp.calcDim();
+    filterTable.setVisible(false);
+});
+
+```
+
+#### crm_component_leads_dashboard {#uMLeadsDashboard}
+
++--------------------------------------------------------+----------------------------------------------------------+
+| Свойство                                               | Значение                                                 |
++========================================================+==========================================================+
+| Код                                                    | crm_component_leads_dashboard                            |
++--------------------------------------------------------+----------------------------------------------------------+
+| Использовать в формах                                  | включен                                                  |
++--------------------------------------------------------+----------------------------------------------------------+
+
+HTML код:
+
+``` xml
+
+<iframe src="http://192.168.1.114:5601/app/kibana#/dashboard/%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%BC?embed=true&_g=(refreshInterval%3A('%24%24hashKey'%3A'object%3A36258'%2Cdisplay%3A'30%20seconds'%2Cpause%3A!f%2Csection%3A1%2Cvalue%3A30000)%2Ctime%3A(from%3Anow-15m%2Cmode%3Aquick%2Cto%3Anow))" height="100%" width="100%"></iframe>
 
 ```