Merge branch 'feat/stats_ajax' into develop

2017-12-19 10:41:12 +01:00
parent 1e9df9ce55 73eb2761c6
commit 58ac0b9e91
17 changed files with 739 additions and 154 deletions
@@ -8,4 +8,5 @@ rewrite  ^/reussir-son-cv-video$  https://www.talentstube.com/faire-cv-video per
 rewrite  ^/plateforme$  https://www.talentstube.com/ permanent;
 rewrite  ^/page/les-conseils$  https://www.talentstube.com/accompagnement-entreprise permanent;
 rewrite  ^/page/presentation-talent$  https://www.talentstube.com/cv-video permanent;
-rewrite  ^/page/la-plateforme$  https://www.talentstube.com/ permanent;
+rewrite  ^/page/la-plateforme$  https://www.talentstube.com/ permanent;
+rewrite ^/tarifs$ https://www.talentstube.com/accompagnement-entreprise permanent;
@@ -21,7 +21,11 @@
                        0
                    {% endif %}
                </td>
-                <td class="tdCount">{{ arrayByAds[ad.id]["count"] }}</td>
+                <td class="tdCount">
+                    {% if arrayByAds is defined %}
+                    {{ arrayByAds[ad.id]["count"] }}
+                    {% endif %}
+                </td>
                <td align="center" valign="center">
                    {% if ad.getStatus() == "DECLINED" %}
                        <div class="tooltipped" data-position="top" data-delay="50"
@@ -1,6 +1,4 @@
 {% extends 'company/base_dashboard_company.html.twig' %}
-
-
 {% block dashContent %}
    <div class="row bg-bordered p-20">
    {% if app.user.company.brandname == null %}
@@ -16,41 +14,37 @@
            </div>
        </div>
    {% endif %}
-        <div class="col s5">
+        <div class="col s3">
            <h5 class="blue-text no-margin-top">Volumes des visites</h5>
        </div>
-        <div class="col s2 choiceMonthWrapper right-align">
-            <select id="choiceMonth">
-                {% set thisYear = "now"|date("Y") %}
-                {% set thisMonth = "now"|date("m") %}
-                {% for month in 1..thisMonth %}
-                    {% set date = month ~ "/01/" ~ thisYear %}
-                    <option {% if loop.last %}selected{% endif %} value="{{ date|date("m") }}">{{ date|datetime('%B') }}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div class="col s5 right-align">
-            {% set totalAds = 0 %}
-            {% for record in arrayByAds %}
-                {% set totalAds = totalAds + record.count %}
-            {% endfor %}
-            <span class="btn-countVisitsAds">{{ totalAds }} visites</span>
-            <span class="btn-countVisitsCompany">{{ totalRecordsCompany }} visites</span>
+        <div class="col s9 choiceMonthWrapper right-align">
+            {% set thisYear = "now"|date("Y") %}
+            {% set thisMonth = "now"|date("m") %}
+            {% set thisDay = "now"|date("d") %}
+            {% set dateTextMoins = "now -1 Month"|date("d-m-Y") %}
+            {% set dateText = "now"|date("d-m-Y") %}
+            <input id="choiceMonth" type="text" name="daterange" value="{{ dateTextMoins }} au {{ dateText }}" />
+            <i class="fa fa-refresh fa-spin fa-fw"></i>
+            <span class="sr-only">Loading...</span>
        </div>
        <div class="col s12">
            <canvas id="nb_visits" width="600" height="300"></canvas>
        </div>
-        <div class="col s12">
+        <div class="col s6 countLegend">
            <p><span class="btn-countVisitsAds">&nbsp;</span>Nombre de visites de vos annonces</p>
            <p><span class="btn-countVisitsCompany">&nbsp;</span>Nombre de visites de la page entreprise</p>
        </div>
+        <div class="col s6 countBlock">
+            <span class="btn-countVisitsAds"><span class="countVisitsAds"></span>&nbsp;visites</span>
+            <span class="btn-countVisitsCompany"><span class="countVisitsCompany"></span>&nbsp;visites</span>
+        </div>
    </div>
    <div id="donutChart-wrapper" class="row bg-bordered p-20">
        <div class="col s6">
                <h5 class="blue-text no-margin-top">Répartition des visites</h5>
                <canvas id="donught_visits" width="300" height="300"></canvas>
        </div>
-        <div class="col s6 donutLegend">
+        <div class="col s6 donutLegend countLegend">
            <p><span class="btn-count btn-countVisitsTalentByCompany">&nbsp;</span>Visites de talents</p>
            <p><span class="btn-count btn-countVisitsCompanyByCompany">&nbsp;</span>Visites d'entreprises</p>
            <p><span class="btn-count btn-countVisitsAnonymByCompany">&nbsp;</span>Visites d'internautes non-inscrits</p>
@@ -58,8 +52,8 @@
    </div>
    <div class="row bg-bordered p-20">
        <div class="col s12">
-                <h5 class="blue-text no-margin-top">Statistiques par offre d'emploi</h5>
-                {% include 'company/ad_table_listing.html.twig' with {'ads':ads} %}
+            <h5 class="blue-text no-margin-top">Statistiques par offre d'emploi</h5>
+            {% include 'company/ad_table_listing.html.twig' with {'ads':ads} %}
        </div>
    </div>
 {% endblock %}
@@ -68,20 +62,59 @@
    {{ parent() }}
    <script src="{{ asset('/js/vendors/Chart.bundle.min.js') }}"></script>
    <script type="text/javascript">
-
-        $('#choiceMonth').on('change',function(){
-            currentMonth = $(this).val();
-            setArrayValues();
-            dataLine.labels = arrayCurrentsLabel;
-            dataLine.datasets[0].data = arrayCurrentsAdsValues;
-            dataLine.datasets[1].data = arrayCurrentsCompanyValues;
-            myChart.update();
-        });
-
        var currentMonth = '{{ "now"|date("m") }}';
-        var arrayRecords = JSON.parse('{{ lineRecords|json_encode()|raw }}');
-        var arrayCurrentsLabel,arrayCurrentsAdsValues,arrayCurrentsCompanyValues;
-        setArrayValues();
+        var arrayRecords;
+        var ctx,myChart,arrayCurrentsLabel,arrayCurrentsAdsValues,arrayCurrentsCompanyValues,donughtRecords;
+        
+        function loadChartData() {
+            setArrayValues();
+            myChart.update();
+            myDoughnutChart.update();
+        }
+
+        function getChartData(date1,date2) {
+            $.ajax({
+                type: "POST",
+                url: '{{ path("company_ajax_dashboard") }}',
+                data: 'date1='+date1+'&date2='+date2,
+                dataType: "json",
+                success: function (data) {
+                    arrayRecords = data.lineRecords;
+                    donughtRecords = data.donughtRecords;
+                    myDoughnutChart.data.datasets[0].data = donughtRecords;
+                    loadChartData();
+                    $('.fa-refresh').hide();
+                },
+                error: function (data) {
+                    $('.fa-refresh').hide();
+                }
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", function(event) {
+            $('.fa-refresh').hide();
+            getChartData(0, 0);
+            configDatePicker = { 
+                    applyBtnClass: 'btn btn-default',
+                    format: 'DD-MM-YYYY',
+                    separator: ' au ',
+                    endDate: new Date(),
+                    maxDays: 365
+                }				
+            $('#choiceMonth').dateRangePicker(configDatePicker).bind('datepicker-apply',function(event,obj) {
+                $('.fa-refresh').show();
+                var month1 = obj.date1.getUTCMonth();
+                var day1 = obj.date1.getUTCDate();
+                var year1 = obj.date1.getUTCFullYear();
+                var month2 = obj.date2.getUTCMonth();
+                var day2 = obj.date2.getUTCDate();
+                var year2 = obj.date2.getUTCFullYear();
+                var date1 = month1 + "/" + day1 + "/" + year1;
+                var date2 = month2 + "/" + day2 + "/" + year2;
+                getChartData(date1, date2);
+            });
+            $('.apply-btn').attr('value','Valider');
+        });

        function setArrayValues(){
            arrayCurrentsLabel = [];
@@ -89,64 +122,67 @@
            arrayCurrentsCompanyValues = [];
            arrayRecords['labels'].forEach(function(element, index) {
                var date = element.split("-");
-                if(date[1] == currentMonth){
-                    var dateAffiche = date[2]+"-"+date[1]+"-"+date[0];
-                    arrayCurrentsLabel.push(dateAffiche);
-                    arrayCurrentsAdsValues.push(arrayRecords['datasetsAd'][index]);
-                    arrayCurrentsCompanyValues.push(arrayRecords['datasetsCompany'][index]);
-                }
+                var dateAffiche = date[2]+"-"+date[1]+"-"+date[0];
+                arrayCurrentsLabel.push(dateAffiche);
+                arrayCurrentsAdsValues.push(arrayRecords['datasetsAd'][index]);
+                arrayCurrentsCompanyValues.push(arrayRecords['datasetsCompany'][index]);
            });
+            myChart.data.labels = arrayCurrentsLabel;
+            myChart.data.datasets[0].data = arrayCurrentsAdsValues;
+            myChart.data.datasets[1].data = arrayCurrentsCompanyValues;
+            var sumVisitsAds = arrayCurrentsAdsValues.reduce((a, b) => a + b, 0);
+            var sumCompanyValues = arrayCurrentsCompanyValues.reduce((a, b) => a + b, 0);
+
+            $('.countVisitsAds').html(sumVisitsAds);
+            $('.countVisitsCompany').html(sumCompanyValues);
        }

        var dataLine = {
-            labels: arrayCurrentsLabel,
            datasets: [
                {
                    label: "Nombre de visite d'annonce par jour",
                    fill: false,
                    fontColor: "rgba(39,139,231,1)",
                    backgroundColor: "rgba(39,139,231,1)",
-                    borderColor: "rgba(39,139,231,1)",
-                    data: arrayCurrentsAdsValues
+                    borderColor: "rgba(39,139,231,1)"
                }, {
                    label: "Nombre de visite de votre page entreprise",
                    fill: false,
                    fontColor: "#F9C339",
                    backgroundColor: "#F9C339",
-                    borderColor: "#F9C339",
-                    data: arrayCurrentsCompanyValues
+                    borderColor: "#F9C339"
                }
            ]
        };

        var ctx = document.getElementById("nb_visits");
-        var myChart = new Chart(ctx, {
-            type: 'line',
-            data: dataLine,
-            options: {
-                legend: {
-                    display: false
-                },
-                scales: {
-                    xAxes: [{
-						display: true,
-						scaleLabel: {
-							display: true,
-							labelString: 'Date'
-						}
-                    }],
-                    yAxes: [{
-                        ticks: {
-                            min: 0
-                        },
-						scaleLabel: {
-							display: true,
-							labelString: 'Valeur'
-						}
-					}]
+            var myChart = new Chart(ctx, {
+                type: 'line',
+                data: dataLine,
+                options: {
+                    legend: {
+                        display: false
+                    },
+                    scales: {
+                        xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: true,
+                                labelString: 'Date'
+                            }
+                        }],
+                        yAxes: [{
+                            ticks: {
+                                min: 0
+                            },
+                            scaleLabel: {
+                                display: true,
+                                labelString: 'Valeur'
+                            }
+                        }]
+                    }
                }
-            }
-        });
+            });

        var dataDonught = {
            labels: [
@@ -156,7 +192,7 @@
            ],
            datasets: [
                {
-                    data: {{ donughtRecords|json_encode() }},
+                    data: donughtRecords,
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
@@ -182,6 +218,5 @@
                }
            }
        });
-
    </script>
 {% endblock %}
@@ -27,6 +27,8 @@ assetic:
        company:
            inputs:
                - 'js/company.js'
+                - 'js/vendors/moment.min.js'
+                - 'js/vendors/jquery.daterangepicker.min.js'
        admin:
            inputs:
                - 'admin/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js'
@@ -35,10 +35,9 @@ class AdController extends Controller
    public function companyListAdAction()
    {
        $em = $this->getDoctrine()->getManager();
-
-        //$answers = $em->getRepository('AppBundle:Answer')->getFilteredAnswer(38);
        $stats = $this->get("app.stats_manager");
-        $records = $stats->getCompanyDashboard($this->getUser()->getCompany()->getId());
+        $dateArray = null;
+        $records = $stats->getCompanyDashboard($this->getUser()->getCompany()->getId(), $dateArray);

        $ads = $em->getRepository('AppBundle:Ad')->findBy(array('creator' => $this->getUser()));
        return $this->render('company/ad_list.html.twig', array(
@@ -26,17 +26,40 @@ class CompanyController extends Controller
    {
        setlocale(LC_ALL, 'fr_FR.utf-8');
        $stats = $this->get("app.stats_manager");
-        $records = $stats->getCompanyDashboard($this->getUser()->getCompany()->getId());
        $em = $this->getDoctrine()->getManager();
        $ads = $em->getRepository('AppBundle:Ad')->findBy(array('creator' => $this->getUser()));
-
+        $records = $stats->getCompanyDashboard($this->getUser()->getCompany()->getId(), null);
        return $this->render('company/dashboard.html.twig', [
+            'ads' => $ads,
+            'arrayByAds' => $records['arrayByAds']
+        ]);
+    }
+
+    /**
+     * @Route("/entreprise/me/ajax/dashboard", name="company_ajax_dashboard")
+     */
+    public function companyAjaxDashboardAction(Request $request)
+    {
+        $stats = $this->get("app.stats_manager");
+        if( ($request->request->get('date1') != 0) && ($request->request->get('date2') != 0) ) {
+            $dateBegin = new \DateTime();
+            $dateEnd = new \DateTime();
+            $dateBegin->setTimestamp(strtotime($request->request->get('date1')));
+            $dateEnd->setTimestamp(strtotime($request->request->get('date2')));
+            $arrayDate['dateBegin'] = $dateBegin;
+            $arrayDate['dateEnd'] = $dateEnd;
+        } else {
+            $arrayDate['dateBegin'] = new \DateTime('now -1 Month');
+            $arrayDate['dateEnd'] = new \DateTime('now');
+        }
+        $records = $stats->getCompanyDashboard($this->getUser()->getCompany()->getId(), $arrayDate);
+
+        return new JsonResponse([
            "lineRecords" => $records['lineRecords'],
            "donughtRecords" => $records['donughtRecords'],
            "totalRecords" => $records['totalRecords'],
            "totalRecordsCompany" => $records['totalRecordsCompany'],
            "arrayByAds" => $records['arrayByAds'],
-            'ads' => $ads
        ]);
    }

@@ -167,7 +167,7 @@ class StatsManager
     * @param $idCompany
     * @return array
     */
-    public function getCompanyDashboard($idCompany)
+    public function getCompanyDashboard($idCompany, $dateArray)
    {   
        $arrByAd = array();
        $arrDatasetsAd = array();
@@ -179,46 +179,51 @@ class StatsManager
        $nbVisitTalent = 0;
        $nbVisitCompany = 0;
        $nbVisitAnonym = 0;
-        $ads = $this->em->getRepository('AppBundle:Ad')->findBy(array('company' => $idCompany));
+        $ads = $this->em->getRepository('AppBundle:Ad')->findBy(
+            array(
+                'company' => $idCompany
+            ));
        if ($ads) {
            foreach ($ads as $ad) {
                $nbVisitTalentByAd = 0;
                $nbVisitCompanyByAd  = 0;
                $nbVisitAnonymByAd  = 0;
                $arrByAd[$ad->getId()]['count'] = 0;
-                $recordAd = $this->history->recordShow(null, "r", 'AppBundle\Entity\Ad', $ad->getId(), 0);
-                foreach ($recordAd as $record) {
-                    if ($record->getUserId() == 0) {
-                        $nbVisitAnonym = $nbVisitAnonym + 1;
-                        $nbVisitAnonymByAd = $nbVisitAnonymByAd + 1;
-                    } else {
-                        $user = $this->em->getRepository('AppBundle:User')->findOneById($record->getUserId());
-                        if ($user) { 
-                            if ($user->hasRole('ROLE_TALENT')) {
-                                $nbVisitTalent = $nbVisitTalent + 1;
-                                $nbVisitTalentByAd = $nbVisitTalentByAd + 1;
-                            }
-                            if ($user->hasRole('ROLE_COMPANY')) {
-                                $nbVisitCompany = $nbVisitCompany + 1;
-                                $nbVisitCompanyByAd = $nbVisitCompanyByAd + 1;
-                            }
-                        } else {
+                $recordAd = $this->history->recordShow(null, "r", 'AppBundle\Entity\Ad', $ad->getId(), 0, $dateArray);
+                if($recordAd){
+                    foreach ($recordAd as $record) {
+                        if ($record->getUserId() == 0) {
                            $nbVisitAnonym = $nbVisitAnonym + 1;
                            $nbVisitAnonymByAd = $nbVisitAnonymByAd + 1;
-                        }
+                        } else {
+                            $user = $this->em->getRepository('AppBundle:User')->findOneById($record->getUserId());
+                            if ($user) { 
+                                if ($user->hasRole('ROLE_TALENT')) {
+                                    $nbVisitTalent = $nbVisitTalent + 1;
+                                    $nbVisitTalentByAd = $nbVisitTalentByAd + 1;
+                                }
+                                if ($user->hasRole('ROLE_COMPANY')) {
+                                    $nbVisitCompany = $nbVisitCompany + 1;
+                                    $nbVisitCompanyByAd = $nbVisitCompanyByAd + 1;
+                                }
+                            } else {
+                                $nbVisitAnonym = $nbVisitAnonym + 1;
+                                $nbVisitAnonymByAd = $nbVisitAnonymByAd + 1;
+                            }

-                    }
-                    $date = $record->getCtime();
-                    $stringDate = $date->format('Y-m-d');
-                    $arrayRecords['company'][$stringDate][$idCompany] = 0;
-                    if (!isset($arrayRecords['ad'][$stringDate][$ad->getId()])) {
-                        $arrayRecords['ad'][$stringDate][$ad->getId()] = 1;
-                    } else {
-                        $arrayRecords['ad'][$stringDate][$ad->getId()] += 1;
-                    }
-                    if (!in_array($stringDate, $lineDatesLabel)) {
-                        if ($stringDate != null) {
-                            $lineDatesLabel[] = $stringDate;
+                        }
+                        $date = $record->getCtime();
+                        $stringDate = $date->format('Y-m-d');
+                        $arrayRecords['company'][$stringDate][$idCompany] = 0;
+                        if (!isset($arrayRecords['ad'][$stringDate][$ad->getId()])) {
+                            $arrayRecords['ad'][$stringDate][$ad->getId()] = 1;
+                        } else {
+                            $arrayRecords['ad'][$stringDate][$ad->getId()] += 1;
+                        }
+                        if (!in_array($stringDate, $lineDatesLabel)) {
+                            if ($stringDate != null) {
+                                $lineDatesLabel[] = $stringDate;
+                            }
                        }
                    }
                }
@@ -227,44 +232,45 @@ class StatsManager
            }
        }

-        $recordCompany = $this->history->recordShow(null, "r", 'AppBundle\Entity\Company', $idCompany, 0);
+        $recordCompany = $this->history->recordShow(null, "r", 'AppBundle\Entity\Company', $idCompany, 0, $dateArray);
        $nbVisitTalentByCompany = 0;
        $nbVisitCompanyByCompany  = 0;
        $nbVisitAnonymByCompany  = 0;
-        foreach ($recordCompany as $record) {
-            if ($record->getUserId() == 0) {
-                $nbVisitAnonym = $nbVisitAnonym + 1;
-                $nbVisitAnonymByCompany++;
-            } else {
-                $user = $this->em->getRepository('AppBundle:User')->findOneById($record->getUserId());
-                if ($user) { 
-                    if ($user->hasRole('ROLE_TALENT')) {
-                        $nbVisitTalent = $nbVisitTalent + 1;
-                        $nbVisitTalentByCompany++;
-                    }
-                    if ($user->hasRole('ROLE_COMPANY')) {
-                        $nbVisitCompany = $nbVisitCompany + 1;
-                        $nbVisitCompanyByCompany++;
+        if($recordCompany){
+            foreach ($recordCompany as $record) {
+                if ($record->getUserId() == 0) {
+                    $nbVisitAnonym = $nbVisitAnonym + 1;
+                    $nbVisitAnonymByCompany++;
+                } else {
+                    $user = $this->em->getRepository('AppBundle:User')->findOneById($record->getUserId());
+                    if ($user) { 
+                        if ($user->hasRole('ROLE_TALENT')) {
+                            $nbVisitTalent = $nbVisitTalent + 1;
+                            $nbVisitTalentByCompany++;
+                        }
+                        if ($user->hasRole('ROLE_COMPANY')) {
+                            $nbVisitCompany = $nbVisitCompany + 1;
+                            $nbVisitCompanyByCompany++;
+                        }
                    }
                }
-            }
-            if (!isset($arrayRecords['ad'][$stringDate])) {
-                $arrayRecords['ad'][$stringDate][0] = 0;
-            }
-            $date = $record->getCtime();
-            $stringDate = $date->format('Y-m-d');
-            if (!isset($arrayRecords['company'][$stringDate][$idCompany])) {
-                $arrayRecords['company'][$stringDate][$idCompany] = 1;
-            } else {
-                $arrayRecords['company'][$stringDate][$idCompany] += 1;
-            }
-            if (!in_array($stringDate, $lineDatesLabel)) {
-                if ($stringDate != null) {
-                    $lineDatesLabel[] = $stringDate;
+                if (!isset($arrayRecords['ad'][$stringDate])) {
+                    $arrayRecords['ad'][$stringDate][0] = 0;
+                }
+                $date = $record->getCtime();
+                $stringDate = $date->format('Y-m-d');
+                if (!isset($arrayRecords['company'][$stringDate][$idCompany])) {
+                    $arrayRecords['company'][$stringDate][$idCompany] = 1;
+                } else {
+                    $arrayRecords['company'][$stringDate][$idCompany] += 1;
+                }
+                if (!in_array($stringDate, $lineDatesLabel)) {
+                    if ($stringDate != null) {
+                        $lineDatesLabel[] = $stringDate;
+                    }
                }
            }
        }
-
        ksort($arrayRecords['ad']);
        foreach ($arrayRecords['ad'] as $recordAd) {
            $count = 0;
@@ -33,7 +33,7 @@ class HistoryRecord
        }
    }

-    public function recordShow($id = null, $command, $param, $valueParam = null, $limit = 10){
+    public function recordShow($id = null, $command, $param, $valueParam = null, $limit = 10, $date = null){
        $record = $this->em->createQueryBuilder('EdeclicHistoryBundle:History');
        if($id){
            $record->field('userId')->equals($id);
@@ -43,6 +43,12 @@ class HistoryRecord
        if($valueParam){
            $record->field('valueParam')->equals($valueParam);
        }
+        if($date and is_array($date)){
+            $mongoDateEnd = new \MongoDate($date['dateEnd']->getTimestamp());
+            $mongoDateBegin = new \MongoDate($date['dateBegin']->getTimestamp());
+            $record->field('cTime')->lte($mongoDateEnd);
+            $record->field('cTime')->gte($mongoDateBegin);
+        }
        $record->sort('cTime', 'DESC');
        if($limit != 0){
            $record->limit($limit);
@@ -12259,6 +12259,396 @@ coloring of icons.
 .tooltipster-sidetip.tooltipster-noir.tooltipster-right .tooltipster-arrow-uncropped {
  left: -11px; }

+.date-picker {
+  width: 170px;
+  height: 25px;
+  padding: 0;
+  border: 0;
+  line-height: 25px;
+  padding-left: 10px;
+  font-size: 12px;
+  font-family: Arial,sans-serif;
+  font-weight: 700;
+  cursor: pointer;
+  color: #303030;
+  position: relative;
+  z-index: 2; }
+
+.date-picker-wrapper {
+  position: absolute;
+  z-index: 1;
+  border: 1px solid #bfbfbf;
+  background-color: #efefef;
+  padding: 5px 12px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #aaa;
+  font-family: Arial,sans-serif;
+  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+  -webkit-box-sizing: initial;
+  box-sizing: initial; }
+
+.dp-clearfix {
+  clear: both;
+  height: 0;
+  font-size: 0; }
+
+.date-picker-wrapper.inline-wrapper {
+  position: relative;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  display: inline-block; }
+
+.date-picker-wrapper.single-date {
+  width: auto; }
+
+.date-picker-wrapper.no-shortcuts {
+  padding-bottom: 12px; }
+
+.date-picker-wrapper.no-topbar {
+  padding-top: 12px; }
+
+.date-picker-wrapper .footer {
+  font-size: 11px;
+  padding-top: 3px; }
+
+.date-picker-wrapper b {
+  color: #666;
+  font-weight: 700; }
+
+.date-picker-wrapper a {
+  color: #6bb4d6;
+  text-decoration: underline; }
+
+.date-picker-wrapper .month-name {
+  text-transform: uppercase; }
+
+.date-picker-wrapper .select-wrapper {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle; }
+
+.date-picker-wrapper .select-wrapper:hover {
+  text-decoration: underline; }
+
+.date-picker-wrapper .month-element {
+  display: inline-block;
+  vertical-align: middle; }
+
+.date-picker-wrapper .select-wrapper select {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  left: 0;
+  top: -1px;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: 0 0;
+  border: 0;
+  outline: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
+  filter: alpha(opacity=1);
+  opacity: .01; }
+
+.date-picker-wrapper .month-wrapper {
+  border: 1px solid #bfbfbf;
+  border-radius: 3px;
+  background-color: #fff;
+  padding: 5px;
+  cursor: default;
+  position: relative;
+  _overflow: hidden; }
+
+.date-picker-wrapper .month-wrapper table {
+  width: 190px;
+  float: left; }
+
+.date-picker-wrapper .month-wrapper table.month2 {
+  width: 190px;
+  float: left; }
+
+.date-picker-wrapper .month-wrapper table td, .date-picker-wrapper .month-wrapper table th {
+  vertical-align: middle;
+  text-align: center;
+  line-height: 14px;
+  margin: 0;
+  padding: 0; }
+
+.date-picker-wrapper .month-wrapper table .day {
+  padding: 5px 0;
+  line-height: 1;
+  font-size: 12px;
+  margin-bottom: 1px;
+  color: #ccc;
+  cursor: default; }
+
+.date-picker-wrapper .month-wrapper table div.day.lastMonth, .date-picker-wrapper .month-wrapper table div.day.nextMonth {
+  color: #999;
+  cursor: default; }
+
+.date-picker-wrapper .month-wrapper table .day.checked {
+  background-color: #9cdbf7; }
+
+.date-picker-wrapper .month-wrapper table .week-name {
+  height: 20px;
+  line-height: 20px;
+  font-weight: 100;
+  text-transform: uppercase; }
+
+.date-picker-wrapper .month-wrapper table .day.has-tooltip {
+  cursor: help !important; }
+
+.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
+  white-space: nowrap; }
+
+.date-picker-wrapper .time label {
+  white-space: nowrap; }
+
+.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
+  color: #333;
+  cursor: pointer; }
+
+.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
+  background-color: #cdecfa; }
+
+.date-picker-wrapper .month-wrapper table .day.lastMonth, .date-picker-wrapper .month-wrapper table .day.nextMonth {
+  display: none; }
+
+.date-picker-wrapper .month-wrapper table .day.real-today {
+  background-color: #ffe684; }
+
+.date-picker-wrapper .month-wrapper table .day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.real-today.hovering {
+  background-color: #70ccd5; }
+
+.date-picker-wrapper table .caption {
+  height: 40px; }
+
+.date-picker-wrapper table .caption > th:first-of-type, .date-picker-wrapper table .caption > th:last-of-type {
+  width: 27px; }
+
+.date-picker-wrapper table .caption .next, .date-picker-wrapper table .caption .prev {
+  padding: 0 5px;
+  cursor: pointer; }
+
+.date-picker-wrapper table .caption .next:hover, .date-picker-wrapper table .caption .prev:hover {
+  background-color: #ccc;
+  color: #fff; }
+
+.date-picker-wrapper .gap {
+  position: relative;
+  z-index: 1;
+  width: 15px;
+  height: 100%;
+  background-color: red;
+  font-size: 0;
+  line-height: 0;
+  float: left;
+  top: -5px;
+  margin: 0 10px -10px;
+  visibility: hidden;
+  height: 0; }
+
+.date-picker-wrapper .gap .gap-lines {
+  height: 100%;
+  overflow: hidden; }
+
+.date-picker-wrapper .gap .gap-line {
+  height: 15px;
+  width: 15px;
+  position: relative; }
+
+.date-picker-wrapper .gap .gap-line .gap-1 {
+  z-index: 1;
+  height: 0;
+  border-left: 8px solid #fff;
+  border-top: 8px solid #eee;
+  border-bottom: 8px solid #eee; }
+
+.date-picker-wrapper .gap .gap-line .gap-2 {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-top: 8px solid #fff; }
+
+.date-picker-wrapper .gap .gap-line .gap-3 {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  z-index: 2;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-bottom: 8px solid #fff; }
+
+.date-picker-wrapper .gap .gap-top-mask {
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  top: -1px;
+  left: 1px;
+  background-color: #eee;
+  z-index: 3; }
+
+.date-picker-wrapper .gap .gap-bottom-mask {
+  width: 6px;
+  height: 1px;
+  position: absolute;
+  bottom: -1px;
+  left: 7px;
+  background-color: #eee;
+  z-index: 3; }
+
+.date-picker-wrapper .selected-days {
+  display: none; }
+
+.date-picker-wrapper .drp_top-bar {
+  line-height: 1.4;
+  position: relative;
+  padding: 10px 40px 10px 0; }
+
+.date-picker-wrapper .drp_top-bar .error-top, .date-picker-wrapper .drp_top-bar .normal-top {
+  display: none; }
+
+.date-picker-wrapper .drp_top-bar .default-top {
+  display: block; }
+
+.date-picker-wrapper .drp_top-bar.error .default-top {
+  display: none; }
+
+.date-picker-wrapper .drp_top-bar.error .error-top {
+  display: block;
+  color: red; }
+
+.date-picker-wrapper .drp_top-bar.normal .default-top {
+  display: none; }
+
+.date-picker-wrapper .drp_top-bar.normal .normal-top {
+  display: block; }
+
+.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
+  color: #333; }
+
+.date-picker-wrapper .drp_top-bar .apply-btn {
+  position: absolute;
+  right: 0;
+  top: 6px;
+  padding: 3px 5px;
+  margin: 0;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #d9eef7;
+  border: solid 1px #0076a3;
+  background: #0095cd;
+  background: -moz-linear-gradient(top, #00adee, #0078a5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
+  color: #fff;
+  line-height: initial; }
+
+.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
+  cursor: pointer;
+  color: #606060;
+  border: solid 1px #b7b7b7;
+  background: #fff;
+  background: -moz-linear-gradient(top, #fff, #ededed);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }
+
+.date-picker-wrapper .time {
+  position: relative; }
+
+.date-picker-wrapper.single-month .time {
+  display: block; }
+
+.date-picker-wrapper .time input[type=range] {
+  vertical-align: middle;
+  width: 129px;
+  padding: 0;
+  margin: 0;
+  height: 20px; }
+
+.date-picker-wrapper .time1 {
+  width: 180px;
+  padding: 0 5px;
+  text-align: center; }
+
+.time2 {
+  width: 180px;
+  padding: 0 5px;
+  text-align: center; }
+
+.date-picker-wrapper .time1 {
+  float: left; }
+
+.date-picker-wrapper .time2 {
+  float: right; }
+
+.date-picker-wrapper .hour {
+  text-align: right; }
+
+.minute {
+  text-align: right; }
+
+.date-picker-wrapper .hide {
+  display: none; }
+
+.date-picker-wrapper .first-date-selected, .date-picker-wrapper .last-date-selected {
+  background-color: #49e !important;
+  color: #fff !important; }
+
+.date-picker-wrapper .date-range-length-tip {
+  position: absolute;
+  margin-top: -4px;
+  margin-left: -8px;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  display: none;
+  background-color: #ff0;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 16px;
+  -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+  -moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+  -ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+  -o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
+  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); }
+
+.date-picker-wrapper .date-range-length-tip:after {
+  content: '';
+  position: absolute;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #ff0;
+  left: 50%;
+  margin-left: -4px;
+  bottom: -4px; }
+
+.date-picker-wrapper.two-months.no-gap .month1 .next, .date-picker-wrapper.two-months.no-gap .month2 .prev {
+  display: none; }
+
+.date-picker-wrapper .week-number {
+  padding: 5px 0;
+  line-height: 1;
+  font-size: 12px;
+  margin-bottom: 1px;
+  color: #999;
+  cursor: pointer; }
+
+.date-picker-wrapper .week-number.week-number-selected {
+  color: #49e;
+  font-weight: 700; }
+
 /*Base
 ---------------------------------------------------*/
 /*************************** VARIABLES ***************************/
@@ -14560,13 +14950,21 @@ h6 {
  border: 1px solid #155ee4; }

 .btn-count, .btn-countVisitsAds, .btn-countVisitsCompany {
-  font-size: 12px;
-  padding: 5px;
+  padding: 2px 10px;
  border-radius: 15px;
-  min-width: 40px;
+  min-width: 22px;
  display: inline-block;
  margin-right: 10px; }

+.countLegend {
+  font-size: 12px; }
+  .countLegend .btn-count, .countLegend .btn-countVisitsAds, .countLegend .btn-countVisitsCompany {
+    padding: 2px;
+    border-radius: 15px;
+    min-width: 22px;
+    display: inline-block;
+    margin-right: 10px; }
+
 .btn-countVisitsAds {
  background-color: #155ee4;
  color: #FFF; }
@@ -14769,6 +15167,37 @@ span.titleVideo {
  border-radius: 15px;
  padding: 1px; }

+.date-picker-wrapper .drp_top-bar .apply-btn {
+  height: 18px;
+  background: #155ee4;
+  border: 0; }
+
+.countBlock {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  height: 75px; }
+
+.choiceMonthWrapper {
+  margin-top: -4px; }
+  .choiceMonthWrapper #choiceMonth {
+    display: inline-block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    border: 0;
+    cursor: pointer;
+    background: #E0E0E0;
+    border-radius: 15px;
+    color: #000;
+    height: 28px;
+    width: 200px; }
+
+.countBlock {
+  margin-top: -4px; }
+
 .tooltip_templates {
  display: none; }

@@ -214,13 +214,23 @@
 }

 .btn-count, .btn-countVisitsAds, .btn-countVisitsCompany {
-    font-size: 12px;
-    padding: 5px;
+    padding: 2px 10px;
    border-radius: 15px;
-    min-width: 40px;
+    min-width: 22px;
    display: inline-block;
    margin-right: 10px;
 }
+.countLegend{
+    font-size: 12px;
+    .btn-count, .btn-countVisitsAds, .btn-countVisitsCompany {
+        padding: 2px;
+        border-radius: 15px;
+        min-width: 22px;
+        display: inline-block;
+        margin-right: 10px;
+    }
+}
+

 .btn-countVisitsAds {
    background-color: $blue1;
@@ -16,4 +16,41 @@
    border-radius: 15px;
    padding: 1px;
  }
+}
+
+.date-picker-wrapper .drp_top-bar .apply-btn {
+  height: 18px;
+  background: $blue1;
+  border: 0;
+}
+
+
+.countBlock{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  height: 75px;
+}
+
+.choiceMonthWrapper{
+  margin-top: -4px;
+  #choiceMonth{
+    display: inline-block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    font-size:12px;
+    border: 0;
+    cursor: pointer;
+    background: $grey1;
+    border-radius: 15px;
+    color: #000;
+    height: 28px;
+    width: 200px;
+  }
+}
+
+.countBlock{
+  margin-top: -4px;
 }
@@ -10,6 +10,7 @@
@import "vendors/video-js.min";
@import "vendors/videojs.record";
@import "vendors/tooltipster/tooltipster";
+@import "vendors/daterangepicker.min";
 /*Base
 ---------------------------------------------------*/
@import 'base/variables';