FRONTEND_MVC/modules/manager/views/analytics/dashboard.php

<?php
/** @var yii\web\View $this */

use yii\helpers\Html;
use yii\widgets\DetailView;

$cache = Yii::$app->cache;
$month = array(
	1  => 'Январь',
	2  => 'Февраль',
	3  => 'Март',
	4  => 'Апрель',
	5  => 'Май',
	6  => 'Июнь',
	7  => 'Июль',
	8  => 'Август',
	9  => 'Сентябрь',
	10 => 'Октябрь',
	11 => 'Ноябрь',
	12 => 'Декабрь'
);
$sstart = date("Y-m-d", strtotime( date("Y-m-01")." 12 months ago"));
$send = date("Y-m-d", strtotime( date("Y-m-01")." 1 days ago"));

$mstart = date("Y-m-d", strtotime( date("Y-m-01")." 2 months ago"));
$mend = date("Y-m-d", strtotime( date("Y-m-01")." 1 months ago"));
//Прошлый период
$sstartl = date("Y-m-d", strtotime( $sstart." 12 months ago"));
$sendl = date("Y-m-d", strtotime( $send." 12 months ago"));


$this->title = "Аналитика $sstart - $send";
$this->params['breadcrumbs'][] = ['label' => $this->title, 'url' => ['index']];

//	$r = $model->YGetByTime(['date1'=>$mstart, 'date2'=>$mend,'dimensions'=>'ym:s:publisherArticle','metrics'=>'ym:s:publisherviews','filters'=>'(ym:s:publisherArticle!n)','sort'=>'-ym:s:publisherviews']);
//	print_a($r);

?>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="alert bg-gray disabled color-palette alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h5><i class="icon fas fa-info"></i> Alert!</h5>
<h2>Периуды текущий: <span class="text-white"><b><?=$sstart?> - <?=$send?></b></span>, предыдущий:  <span class="text-white"><?=$sstartl?> - <?=$sendl?></span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">

<div class="callout callout-info">
<h5><i class="fas fa-info"></i> amic.ru:</h5>
Данные <b>amic.ru</b> по данным liveinternet
<br>
<div class="form-group clearfix">
	<div class="icheck-primary d-inline">
		<input type="button" id="checkboxPrimary1" onclick="window.location.href=window.location.href+'?clearcache=true'" value="Сбросить кэш">
	</div>
</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Отказы</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute"> </span><span id="bc"></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Меньше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartb" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

<div class="card">
<div class="card-body">

				<div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">ядро</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute yadroamic"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartYadro" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute us"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartUsers" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">

                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители среднесуточно</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute um"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartUsersm" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">

                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Просмотры</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute vs"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartVis" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">

                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Просмотров на посетителя</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute deep"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Страницпросмотренно пользователем ср.</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartDeep" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">

                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Средняя длительность (мин.)</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute time"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartTime" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

<div class="card">
<div class="card-body">

                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Поисковый трафик</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute search"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Все поисковые системы</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartSearch" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

</div>
</div>


<div class="row">
<div class="col-6">

<div class="card">
   <div class="card-header border-0">
      <div class="d-flex justify-content-between">
         <h3 class="card-title">Региональные (Барнаул, Новосибирск, Горно-Алтайск) среднесуточные</h3>
         <a href="javascript:void(0);">View Report</a>
      </div>
   </div>
   <div class="card-body">
      <div class="d-flex">
         <p class="d-flex flex-column">
            <span class="text-bold text-lg RegEx">820</span>
            <span>среднесуточные в месяц</span>
         </p>
         <p class="ml-auto d-flex flex-column text-right">
            <span class="text-success">
             <span class="Regp">12.5%</span>
            </span>
            <span class="text-muted">От всех пользователей</span>
         </p>
      </div>
      <div class="position-relative mb-4">
         <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
               <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
               <div class=""></div>
            </div>
         </div>
         <canvas id="jschartRegEx" style="display: block; width: 770px; height: 200px;" class="chartjs-render-monitor" width="770" height="200"></canvas>
      </div>
      <div class="d-flex flex-row justify-content-end">

      </div>
   </div>
</div>


</div>
<div class="col-6">

<div class="card">
   <div class="card-header border-0">
      <div class="d-flex justify-content-between">
         <h3 class="card-title">Региональные (Барнаул)</h3>
         <a href="javascript:void(0);">View Report</a>
      </div>
   </div>
   <div class="card-body">
      <div class="d-flex">
         <p class="d-flex flex-column">
            <span class="text-bold text-lg region">820</span>
            <span>Месяц</span>
         </p>

      </div>
      <div class="position-relative mb-4">
         <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
               <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
               <div class=""></div>
            </div>
         </div>
         <canvas id="jschartRegion" style="display: block; width: 770px; height: 200px;" class="chartjs-render-monitor" width="770" height="200"></canvas>
      </div>
      <div class="d-flex flex-row justify-content-end">

      </div>
   </div>
</div>


</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Источники</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute"></span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartSource" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

</div>
</div>

<div class="row">
<div class="col-12">

<div class="card">
   <div class="card-header border-0">
      <h3 class="card-title">Источники</h3>
      <div class="card-tools">
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-download"></i>
         </a>
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-bars"></i>
         </a>
      </div>
   </div>
   <div class="card-body table-responsive p-0">
      <table class="table table-striped table-valign-middle" id="reftab">
         <thead>
            <tr>
               <th>Источник</th>
               <th class="sorting">Переходов</th>
               <th>Динамика</th>
               <th class="sorting">Пред. месяц</th>
            </tr>
         </thead>
         <tbody id="referertab">

         </tbody>
      </table>
   </div>
</div>

</div>
</div>


<div class="row">
<div class="col-3">
<div class="card">
   <div class="card-header border-0">
      <h3 class="card-title">Таблица amic.ru</h3>
      <div class="card-tools">
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-download"></i>
         </a>
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-bars"></i>
         </a>
      </div>
   </div>
   <div class="card-body table-responsive p-0">
      <table class="table table-striped table-valign-middle">
         <thead>
            <tr  class="bg-purple">
               <th>Показатель</th>
               <th>Значение</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  Посетителей суммарно
               </td>
               <td class="us">$13 USD</td>
            </tr>
            <tr>
               <td>
                  Просмотров суммарно
               </td>
               <td  class="vs">$29 USD</td>
            </tr>
            <tr>
               <td>
                  Региональных посетителей
               </td>
               <td class="region">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Ядро
               </td>
               <td class="yadroamic">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               % посетителей региона
               </td>
               <td class="regpercent">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Яндекс Дзен (канал)
               </td>
               <td  class="refdzen">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Яндекс Дзен (Новости)
               </td>
               <td  class="refdzennews">$1,230 USD</td>
            </tr>
         <thead>
            <tr class="bg-purple">
               <th>Показатель</th>
               <th>Значение</th>
            </tr>
         </thead>
            <tr>
               <td>
               Посетителей среднесуточно
               </td>
               <td class="um">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Глубина
               </td>
               <td class="deep">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Длительность
               </td>
               <td class="time">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Трафик поисковый
               </td>
               <td class="search">$1,230 USD</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

</div>
<div class="col-3">

<div class="card">
   <div class="card-header border-0">
      <h3 class="card-title">Таблица amic.ru прогноз</h3>
      <div class="card-tools">
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-download"></i>
         </a>
         <a href="https://docs.google.com/spreadsheets/d/1JTBQyUF9CEgQKF-_8vFSRMOlrlqVfs1zcdMgZkmrAaY/edit?usp=sharing" class="btn btn-tool btn-sm">
         <i class="fas fa-bars"></i>
         </a>
      </div>
   </div>
   <div class="card-body table-responsive p-0">
      <table class="table table-striped table-valign-middle">
         <thead>
            <tr  class="bg-purple">
               <th>Показатель</th>
               <th>Значение</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  Просмотры суммарно
               </td>
               <td class="vs">$13 USD</td>
            </tr>
            <tr>
               <td>
                  Посетители суммарно
               </td>
               <td class="us">$29 USD</td>
            </tr>
            <tr>
               <td>
                  Посетители среднесуточно
               </td>
               <td class="um">$29 USD</td>
            </tr>
            <tr>
               <td>
                  Регионалы (Новосибирск+Барнаул+Горно-Алтайск)
               </td>
               <td class="RegEx">$29 USD</td>
            </tr>
            <tr>
               <td>
                 Длительность
               </td>
               <td class="time">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Глубина
               </td>
               <td class="deep">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Ядро
               </td>
               <td class="yadroamic">$1,230 USD</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

</div>
<div class="col-3">

<div class="card">
   <div class="card-header border-0">
      <h3 class="card-title">Таблица altapress.ru</h3>
      <div class="card-tools">
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-download"></i>
         </a>
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-bars"></i>
         </a>
      </div>
   </div>
   <div class="card-body table-responsive p-0">
      <table class="table table-striped table-valign-middle">
         <thead>
            <tr  class="bg-purple">
               <th>Показатель</th>
               <th>Значение</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  Посетителей суммарно
               </td>
               <td class="usA">$13 USD</td>
            </tr>
            <tr>
               <td>
                  Просмотров суммарно
               </td>
               <td class="vsA">$29 USD</td>
            </tr>
            <tr>
               <td>
                  Региональных посетителей
               </td>
               <td class="regA">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               Ядро
               </td>
               <td class="yadroA">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               % посетителей региона
               </td>
               <td class="regpA">$1,230 USD</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

</div>
<div class="col-3">

<div class="card">
   <div class="card-header border-0">
      <h3 class="card-title">Таблица tolknews.ru</h3>
      <div class="card-tools">
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-download"></i>
         </a>
         <a href="#" class="btn btn-tool btn-sm">
         <i class="fas fa-bars"></i>
         </a>
      </div>
   </div>
   <div class="card-body table-responsive p-0">
      <table class="table table-striped table-valign-middle">
         <thead>
            <tr  class="bg-purple">
               <th>Показатель</th>
               <th>Значение</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  Посетителей суммарно
               </td>
               <td class="usT">$13 USD</td>
            </tr>
            <tr>
               <td>
                  Просмотров суммарно
               </td>
               <td class="vsT">$29 USD</td>
            </tr>
            <tr>
               <td>
                  Региональных посетителей
               </td>
               <td class="regT">$1,230 USD</td>
            </tr>
            <tr>
               <td>
               % посетителей региона
               </td>
               <td class="regpT">$1,230 USD</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

</div>
</div>


<div class="row">
<div class="col-12">

<div class="callout callout-info">
<h5><i class="fas fa-info"></i> altapress.ru:</h5>
Данные <b>altapress.ru</b> по данным liveinternet
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute usA"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartUsersA" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Просмотры</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute vsA"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartVisA" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Ядро</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute yadroA"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartYadroA" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители amic  vs altapress</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartAmA" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>


<div class="callout callout-info">
<h5><i class="fas fa-info"></i> tolknews.ru:</h5>
Данные <b>tolknews.ru</b> по данным liveinternet
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute usT"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartUsersT" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>

</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Просмотры</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute vsT"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartVisT" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

<div class="card">
<div class="card-body">
                <div class="row u-mb-large">
                    <div class="col-xl-12">
                        <div class="c-graph-card" data-mh="secondary-graphs">
                            <div class="c-graph-card__content u-flex u-justify-between u-align-items-baseline">
                                <h3 class="c-graph-card__title u-h4">Посетители amic  vs tolknews</h3>
                                <div class="u-text-right">
                                    <h4 class="u-h1 u-mb-zero"> <span class="u-text-small u-text-uppercase u-text-mute"> </span></h4>
                                    <span class="u-text-small u-text-uppercase u-text-mute">Больше - лучше</span>
                                </div>
                            </div>

                            <div class="c-graph-card__chart">
                                <canvas id="jschartAmT" height="300" role="img" ></canvas>
                            </div>

                        </div>
                    </div>
                 </div>
</div>
</div>

</div>
</div>

</section>
<?
$end = true;
$dcur = strtotime($sstart);
$m = '';
$e = strtotime($send);
$count = 0;
while( $end ){
	$m .= ($m)?', ':'';
	$m .= '"'.$month[date('n', $dcur)].'"';
	$dcur = strtotime( date("Y-m-d",$dcur).' +1 month' );
	$count++;
	if( $dcur  > $e )  $end = false;
}
$smoth = $m;
$s = '';

$gm = [];
$end = true;
$dcur = strtotime($sstart);
$e = strtotime($send);
while( $end ){
	$gm[] = ['g'=>date('Y', $dcur), 'm'=>date('n', $dcur)];
	$dcur = strtotime( date("Y-m-d", $dcur).' +1 month' );
	if( $dcur  > $e )  $end = false;
}
$aregm = $model->GetRegionsSite();

//print_a($aregm);
?>
<script>
<?
	$js_array = json_encode($gm);
	echo "var gm = ". $js_array . ";\n";

	$js_array = json_encode($aregm);
	echo "var aregm = ". $js_array . ";\n";

?>
$(function(){
	var cuser = 0;
	var creg = 0;
	var regusersum = 0;
	var usersum = 0;
	var newssum = 0;
	var hdata = [];
	var myevent = new Event('alldata', {bubbles: true});

//	document.dispatchEvent(myevent);
	/*
	###############################
				Отказы
	###############################
	*/
	$.getJSON("/manager/analytics/ajax-yglob", {dstart:'<?=$sstart?>',dend:'<?=$send?>'}, function( data ) {
		if( data.status == 'ok' ){
			var data_all = data.data;
			$.getJSON("/manager/analytics/ajax-yglob", {dstart:'<?=$sstartl?>',dend:'<?=$sendl?>'}, function( data1 ) {
				if( data1.status == 'ok' ){
					var data_l = data1.data;
				}else{
					var data_l = null;
				}
				Chuser( data_all, data_l, 'bo', 'jschartb' );
				x = data_all['bo'].split(',').map(Number);
				$('#bc').text(x[x.length-1]);
			});
		}else{
			console.log(data.msg);
		}
	});

	var automat = [
		{metr: 'https://www.liveinternet.ru/stat/amicru/visitors.csv?id=2', chart:'jschartYadro', info:'yadroamic'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?id=8&total=yes', chart:'jschartUsers', info:'us'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?id=8&total=no', chart:'jschartUsersm', info:'um'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?id=0&total=yes', chart:'jschartVis', info:'vs'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?id=ratio&total=yes', chart:'jschartDeep', info:'deep'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?id=6&total=yes', chart:'jschartTime', info:'time'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/index.csv?slice=barnaul&id=8&total=yes', chart:'jschartRegion', info:'region'},
		{metr: 'https://www.liveinternet.ru/stat/amicru/searches.csv?id=total&relgraph=no&total=yes', chart:'jschartSearch', info:'search'},
//altapress
  		{metr: 'https://www.liveinternet.ru/stat/altapress/visitors.csv?id=2', chart:'jschartYadroA', info:'yadroA'},
		{metr: 'https://www.liveinternet.ru/stat/altapress/index.csv?id=8&total=yes', chart:'jschartUsersA', info:'usA'},
		{metr: 'https://www.liveinternet.ru/stat/altapress/index.csv?id=0&total=yes', chart:'jschartVisA', info:'vsA'},
// tolknews.ru
		{metr: 'https://www.liveinternet.ru/stat/tolknews.ru/index.csv?id=8&total=yes', chart:'jschartUsersT', info:'usT'},
		{metr: 'https://www.liveinternet.ru/stat/tolknews.ru/index.csv?id=0&total=yes', chart:'jschartVisT', info:'vsT'},
	];
	var cnt = automat.length;
	/*
	###############################
				Обработка и вывод графиков
	###############################
	*/

	function chauto(el){
	var metr = el.metr;
	var ch = el.chart;
	var info = el.info;
	var YY = '<?=date("Y")?>';
	var MM = <?=(int) date("n")?>;
	//, 'dcache':true
	var param={metrics:metr,type:'2d'};
	if( <?= Yii::$app->request->get('clearcache', 0);?> ){
		console.log('clear');
		param={metrics:metr,type:'2d', 'dcache':true};
	}
	$.getJSON("/manager/analytics/ajax-getlive", param, function( data ) {
		if( data.status == 'ok' ){
			//			data_all = data.datas;
			console.log(data);
			cnt--;
			var l = data.data.length;
			if( typeof data.data[l-1][YY][MM] != "undefined" ){
				var shift = 1;
			}else{
				var shift = 0;
			}
			var data_sp = data.datas.split(',');
			var data_sp1 = data.datas.split(',');
			if( shift ) data_sp.pop();
			var a = data_sp.slice( data_sp.length-<?=$count?>-shift );
			var a2 = data_sp1.slice( -(<?=$count?>+12+shift) );
			var data_1 = a.toString();
			var data_2 = a2.toString();
			hdata[info] = data_1;
			if( cnt == 0 ) document.dispatchEvent(myevent);
			Chuser( data_1, data_2, '', ch );
			//			x = data_1['bo'].split(',').map(Number);
			$('.'+info).text(data_sp[data_sp.length-1]);

			if( info == 'um' ){
				cuser = data_sp[data_sp.length-1];
			}
			if( info == 'um' && creg ){
				var per = Math.round( creg*100/cuser, 1);
				$('.Regp').text(per+'%');
			}

			if( info == 'us' ){
				usersum = a[a.length-1];
				if( usersum && regusersum )  {
					$('.regpercent').text(Math.round(regusersum*100/usersum,2)+'');
				}
			}
			if( info == 'region' ){
				regusersum = a[a.length-1];
				if( usersum && regusersum )  {
					$('.regpercent').text(Math.round(regusersum*100/usersum,2)+'');
				}
			}
			if( info == 'usA' ){
					$('.regpA').text( Math.round(aregm['altapress'][2]*100/a[a.length-1],1)+'' );
					$('.regA').text( aregm['altapress'][2] );
			}
			if( info == 'usT' ){
					$('.regpT').text( Math.round(aregm['tolknews.ru'][2]*100/a[a.length-1],1)+'' );
					$('.regT').text( aregm['tolknews.ru'][2] );
			}

		}else{
			console.log(data.msg);
		}
	});
	}

	/*
	###############################
				Обход по данным из списка
	###############################
	*/
	automat.forEach( el => chauto(el) );

	/*
	###############################
				Источники
	###############################
	*/
	$.getJSON("/manager/analytics/ajax-y-referer",  {dstart:'<?=$sstart?>',dend:'<?=$send?>'}, function( data ) {
		if( data.status == 'ok' ){
			totals=data.sum[0];
			total = totals[totals.length-1];
			var dataset = [];
			var datasetn = [];
			data.data.forEach( el => {
				var ref = el.dimensions[0].name;
				var crefc = Math.round(el.metrics[0][el.metrics[0].length-1]);
				var crefp = Math.round(el.metrics[0][el.metrics[0].length-2]);
				var perc = Math.round(crefp*100/crefc,1);
				var delta = crefc-crefp;
				gper = Math.round(crefc*100/total,1);
				if( gper > 0.8 ){
					dataset.push(gper);
					datasetn.push(ref+' '+gper+'%');
				}
				if( ref == 'zen.yandex.com' ){
					$('.refdzen').text(crefc);
				}

				if( ref == 'dzen.ru' ||  ref == 'm.dzen.ru' ){
					newssum = newssum+crefc;
					$('.refdzennews').text(newssum);
				}

				tr = document.createElement("tr");

				td = document.createElement("td");
				newContent = document.createTextNode(el.dimensions[0].name);
				td.appendChild(newContent);
				tr.appendChild(td);

				td = document.createElement("td");
				newContent = document.createTextNode(Math.round(el.metrics[0][el.metrics[0].length-1]));
				td.appendChild(newContent);
				tr.appendChild(td);

				td = document.createElement("td");

				sty = (delta>=0)?'fa-arrow-up':'fa-arrow-down';
				sty1 = (delta>=0)?'success':'danger';
				$(td).html('<small class="text-'+sty1+' mr-1"><i class="fas '+sty+'"></i>'+perc+'%</small>');
				newContent = document.createTextNode(Math.round(delta));
				td.appendChild(newContent);
				tr.appendChild(td);

				td = document.createElement("td");
				newContent = document.createTextNode(crefp);
				td.appendChild(newContent);
				tr.appendChild(td);

				currenttab = document.getElementById("referertab");
				currenttab.appendChild(tr);
			}
			);
			$('#reftab').DataTable({paging: false,
				columnDefs: [{
					orderable: false,
					targets: 2
				}],
				"responsive": true, "lengthChange": false, "autoWidth": false,
				order: [[1, 'desc']]
			});
			$('.dataTables_length').addClass('bs-select');

	         var coloR = [];
			for (let i = 0; i < dataset.length; i++) {
				coloR.push(dynamicColors());
			}

			const datas = {
				labels: datasetn,
				datasets: [
				{
//					label: 'Dataset 1',
					data: dataset,
					backgroundColor:coloR,
				}
				]
			};
			const config = {
				type: 'doughnut',
				data: datas,
				options: {
					cutoutPercentage: 30,
					responsive: true,
					maintainAspectRatio: false,
					legend: {
						display: true,
					},
					tooltips: {
						enabled: true
					}
				},
			};

			var chart1 = document.getElementById('jschartSource');
			var barChartSales = new Chart(chart1, config);
		}else{
			console.log(data.msg);
		}
	});

         var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
         };

	/*
	###############################
				Расширеный региональный трафик
	###############################
	*/
	var metr = encodeURIComponent('https://www.liveinternet.ru/stat/amicru/regions.csv?id=56&id=8&id=82&id=checked&total=yes');
	$.getJSON("/manager/analytics/ajax-getlive", {metrics:metr,type:'3d'}, function( data ) {
		if( data.status == 'ok' ){
			//			data_all = data.datas;
	//		console.log(data.data);
			var dreg1 = [];
			var dreg2 = [];
			var dreg3 = [];
			var dregall = [];
			gm.forEach( el => {
//				console.log(el['g']+' '+el['m']);
				dregall.push( data.data[el['g']][el['m']][4] );
				dreg1.push( data.data[el['g']][el['m']][1] );
				dreg2.push( data.data[el['g']][el['m']][2] );
				dreg3.push( data.data[el['g']][el['m']][3] );
			});
			var regAll = dregall.toString();
			var reg1 	= dreg1.toString();
			var reg2 = dreg2.toString();
			var reg3 = dreg3.toString();
			//Chuser( regAll, null, '', 'jschartRegEx' );
		    var dataset = [
			{
				type: 'bar',
				label: "Барнаул",
				backgroundColor: '#00aaff',
				data: dreg1,
				stack: 'Stack 0',
			}
			];
			dataset.push( {
				type: 'bar',
				label:'Новосибирск',
				backgroundColor: '#88ff7f',
				data: dreg2,
				stack: 'Stack 0',
			});
			dataset.push( {
				type: 'bar',
				label:'Горно-Алтайск',
				backgroundColor: '#0055ff',
				data: dreg3,
				stack: 'Stack 0',
			});
			dataset.push( {
				type: 'line',
				label:'Суммарно',
				borderColor:'#ff881370',
				backgroundColor: '#ff881360',
				fill: true,
				data: dregall,
				stack: 'Stack 1',
			});
			var barChart1Datax = {
				labels: [<?=$smoth?>],
				datasets: dataset
			};
			creg = dregall[dregall.length-1];
			$('.RegEx').text(creg);

			if( cuser ){
				var per = Math.round( creg*100/cuser, 1);
				$('.Regp').text(per+'%');
			}

//			console.log(barChart1Datax);
		var chart1 = document.getElementById('jschartRegEx');
		var barChartSales = new Chart(chart1, {
		    data: barChart1Datax,
		    options: {
		    	legend: {
					display: true
				},
				barThickness: 20,
		    	responsive: true,
		    	maintainAspectRatio: true,
		    	scales: {
					xAxes: [{
							display: true,
							offset: true,
							ticks: {
								fontSize: '11',
								fontColor: '#969da5'
							},
					}],
					yAxes: [{
						display: true,
						ticks: {
							beginAtZero: true,
//							max: 100
						}
					}],

				}
			}
		});
		}else{
			console.log(data.msg);
		}
	});

	document.addEventListener("alldata", function(event) {
	/*
	###############################
			### Сравнение с алтапресс ###
	###############################
	*/
		var data_1 = hdata['us'];
		var data_2 = hdata['usA'];
		gr = Chuser( data_1, data_2, '', 'jschartAmA', 'amic.ru', 'altapress.ru', false );
//		gr.legend.legendItems[0].text = 'amic.ru';
//		gr.legend.legendItems[1].text = 'altapress.ru';
	/*
	###############################
			### Сравнение с tolknews ###
	###############################
	*/
		var data_1 = hdata['us'];
		var data_2 = hdata['usT'];
		gr = Chuser( data_1, data_2, '', 'jschartAmT', 'amic.ru', 'tolknews.ru', false );
	});

	/*
	###############################
			### Вывод графика ###
	###############################
	*/
function Chuser( data, data2, t, el, t1='Текущий период', t2='Предыдущий период', tr=true ){
	var chart1 = document.getElementById(el);
//	var chart1 = $('#'+el).get(0).getContext('2d');
//	console.log( data['u'].split(',').map(Number) );
    if( t == '' ){
		if( Array.isArray(data) ){
			var datac = data;
		}else{
			var datac = data.split(',').map(Number)
		}
		if( data2 !== null ){
			var datal = data2.split(',').map(Number)
		}
		if( datac.length < 2 ){
			datac.push(0)
		}
    }else{
//		data[t] = data[t] + ',0'
        var datac = data[t].split(',').map(Number)
		if( data2 !== null ){
			var datal = data2[t].split(',').map(Number)
		}
		if( datac.length < 2 ){
			datac.push(0)
		}
    }

    var dataset = [
		{
			label: t1,
			fill: true,
			backgroundColor: '#00aaff',
			data: datac,
  		    type: 'bar'
		}
	];

	if( data2 !== null ){
		dataset.push( {
			label: t2,
			fill: true,
			backgroundColor: '#ffaa7f50',
			data: datal,
			type: 'bar'
		});
	}
	if( tr ){
		dataset.push( {
			fill: false,
			label:'трэнд',
			borderColor:'#00aa00',
			backgroundColor: '#ffff7f20',
			data: datac,
			type: 'line'
		});
	}

//console.log(dataset);
	var barChart1Data = {
	    labels: [<?=$smoth?>],
		datasets: dataset
	};
	if(chart1) {
		var barChartSales = new Chart(chart1, {
		    data: barChart1Data,
		    options: {
		    	legend: {
					display: true
				},
				barThickness: 20,
		    	responsive: true,
		    	maintainAspectRatio: false,
		    	scales: {
					xAxes: [{
							display: true,
							offset: true,
							ticks: {
							fontSize: '11',
							fontColor: '#969da5'
						},
						gridLines: {
							color: 'rgba(0,0,0,0.5)',
							zeroLineColor: 'rgba(0,0,0,0.5)'
						}
					}],
					yAxes: [{
						display: true,
						ticks: {
							beginAtZero: true,
//							max: 100
						}
					}]
				}
			}
		});
		return barChartSales;
	}
}
});
<?=$this->render('/stats/chartjs');?>
</script>