OSDN Git Service

管理画面用の横スクロールテーブルを追加。
authornaoki hirata <naoki@magic3.org>
Mon, 25 Apr 2016 06:21:15 +0000 (15:21 +0900)
committernaoki hirata <naoki@magic3.org>
Mon, 25 Apr 2016 06:21:15 +0000 (15:21 +0900)
templates/_admin4/css/style.css
widgets/blog_main/include/container/admin_blog_mainAnalyticsWidgetContainer.php
widgets/blog_main/include/db/blog_analyticsDb.php
widgets/blog_main/include/template/admin_analytics.tmpl.html

index f1ab5fa..a00ea0c 100644 (file)
@@ -628,6 +628,53 @@ span[rel="m3help"] { cursor: default; }
        width: 100%;
 }
 
+/* wide scrollable table */
+.m3stickyheader {
+       max-width: 950px;
+       overflow: hidden;
+}
+.m3stickyheader table {
+       table-layout: fixed;
+}
+.m3stickyheader td, th {
+       padding: 8px;
+}
+.m3stickyheader tbody th {
+       color: #fff;
+       background-color: #3498db;
+       border-top: 1px solid #ecf0f1;
+}
+.m3stickyheader thead th {
+       color: #fff;
+       background-color: #3498db;
+       border-top: 1px solid #ecf0f1;
+}
+.m3stickyheader tbody th .left-column {
+       width:184px;
+       overflow:hidden;
+}
+.m3stickyheader thead th .left-column {
+       width:184px;
+       overflow:hidden;
+}
+.sticky-wrap {
+       overflow-x: auto;
+       overflow-y: hidden;
+       position: relative;
+       width: 100%;
+}
+.sticky-wrap .sticky-thead,
+.sticky-wrap .sticky-col,
+.sticky-wrap .sticky-intersect {
+       opacity: 0;
+       position: absolute;
+       top: 0;
+       left: 0;
+       transition: all .125s ease-in-out;
+       z-index: 50;
+       width: auto;
+}
+
 .m3config_update_buttons {
 /*     margin-top: 10px;*/
        text-align: right;
index 7264b7c..3a6c6a7 100644 (file)
@@ -19,11 +19,14 @@ require_once($gEnvManager->getCurrentWidgetDbPath() .       '/blog_analyticsDb.php');
 class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetContainer
 {
        private $db;    // DB接続オブジェクト
+       private $startDate;                     // 集計期間(開始)
+       private $endDate;                       // 集計期間(終了)
        private $calcTypeArray;         // 集計タイプ
        private $termTypeArray;         // 期間タイプ
        private $calcType;                      // 選択中の集計タイプ
        private $termType;                      // 選択中の期間タイプ
        private $yTickValueArray;       // Y軸の最大値リスト
+       private $dateKeyArray;          // 日付データ取得用キー
        private $maxViewCount;                          // コンテン参照数最大値
        private $graphDataArray;        // グラフ用データ(X軸値をキー、Y軸値を値とする連想配列)
        const TERM_TYPE_ALL = '_all';                           // 全データ表示選択
@@ -54,8 +57,8 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
                // 集計タイプ
                $this->calcTypeArray = array(
                                                                                array(  'name' => '日単位',          'value' => 'day'),
-                                                                               array(  'name' => '時間単位',       'value' => 'hour'),
                                                                                array(  'name' => '月単位',          'value' => 'month'),
+                                                                               array(  'name' => '時間単位',       'value' => 'hour'),
                                                                                array(  'name' => '週単位',          'value' => 'week')
                                                                        );
 
@@ -96,65 +99,68 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
        function _assign($request, &$param)
        {
                // 集計開始日を取得
-               if (empty($startDate)){
+               if (empty($this->startDate)){
                        if ($this->calcType == 'week'){                         // 週単位で集計の場合
                                switch ($this->termType){               // 期間タイプ
                                        case 'month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -28 day"));                        // 1ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -28 day"));                    // 1ヶ月前
                                                break;
                                        case '3month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -86 day"));                // 3ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -86 day"));            // 3ヶ月前
                                                break;
                                        case '6month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -172 day"));               // 6ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -172 day"));           // 6ヶ月前
                                                break;
                                        case '1year':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -1 year"));                        // 1年前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -1 year"));                    // 1年前
                                                break;
                                        case self::TERM_TYPE_ALL:               // すべてのデータのとき
-                                               $startDate = NULL;
+                                               $this->startDate = NULL;
                                                break;
                                }
                        } else {
                                switch ($this->termType){               // 期間タイプ
                                        case 'month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -30 day"));                        // 1ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -30 day"));                    // 1ヶ月前
                                                break;
                                        case '3month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -90 day"));                // 3ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -90 day"));            // 3ヶ月前
                                                break;
                                        case '6month':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -180 day"));               // 6ヶ月前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -180 day"));           // 6ヶ月前
                                                break;
                                        case '1year':
-                                               $startDate = date(self::DATE_KEY_FORMAT, strtotime("$endDate -1 year"));                        // 1年前
+                                               $this->startDate = date(self::DATE_KEY_FORMAT, strtotime("$this->endDate -1 year"));                    // 1年前
                                                break;
                                        case self::TERM_TYPE_ALL:               // すべてのデータのとき
-                                               $startDate = NULL;
+                                               $this->startDate = NULL;
                                                break;
                                }
                        }
                        // 集計終了日
-                       $endDate = date(self::DATE_KEY_FORMAT);         // 本日を含める
+                       $this->endDate = date(self::DATE_KEY_FORMAT);           // 本日を含める
                } else {
                        // 開始日が設定されている場合は日数分取得
                }
-               
-               // 集計グラフ用データ取得
-               $this->db->getContentViewCountByDate(blog_mainCommonDef::VIEW_CONTENT_TYPE, ''/*すべてのコンテンツ対象*/, $startDate, $endDate, array($this, 'contentViewCountLoop'));
 
                // 集計タイプメニュー作成
                $this->createCalcTypeMenu();
                
                // ##### 集計グラフ作成 #####
+               // 集計グラフ用データ取得
+               $this->db->getAllContentViewCountByDate(blog_mainCommonDef::VIEW_CONTENT_TYPE, $this->startDate, $this->endDate, array($this, 'contentViewCountLoop'));
+               
                // X軸ラベル作成
                $xTitleArray = array();
                $yValueArray = array();
-               $date = $startDate;
-               $endTimestamp = strtotime($endDate);
+               $this->dateKeyArray = array();          // 日付データ取得用キー
+               $date = $this->startDate;
+               $dateTimestamp  = strtotime($this->startDate);
+               $startTimestamp = $dateTimestamp;
+               $endTimestamp   = strtotime($this->endDate);
                while (true){
-                       $dateTimestamp = strtotime($date);
                        if ($dateTimestamp > $endTimestamp) break;
+                       $this->dateKeyArray[] = $date;                  // 日付データ取得用キー
 
                        // グラフ用のデータ作成
                        $xTitleArray[] = date('n/j', $dateTimestamp);           // X軸タイトル。表示フォーマットに変換。
@@ -164,11 +170,10 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
                        } else {
                                $yValueArray[] = 0;
                        }
-                       
-                       $date = date(self::DATE_KEY_FORMAT, strtotime("$date 1 day"));          // 次の日に更新
+                       $dateTimestamp = strtotime("$date 1 day");
+                       $date = date(self::DATE_KEY_FORMAT, $dateTimestamp);            // 次の日に更新
                }
-               $xTitleArray = array_map(create_function('$a','return "\'" . $a . "\'";'), $xTitleArray);
-               $graphDataXStr = '[' . implode(', ', $xTitleArray) . ']';
+               $graphDataXStr = '[' . implode(', ', array_map(create_function('$a','return "\'" . $a . "\'";'), $xTitleArray)) . ']';
                $graphDataYStr = '[' . implode(', ', $yValueArray) . ']';
 
                // グラフY座標最大値取得
@@ -180,19 +185,32 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
                        }
                }
                
-               // ##### 上位コンテンツを取得 #####
-               $this->db->getTopContentByDateRange(blog_mainCommonDef::VIEW_CONTENT_TYPE, $startDate, $endDate, self::DEFAULT_LIST_COUNT, 1/*先頭ページ*/, $this->_langId, array($this, 'contentListLoop'));
+               // ##### 上位コンテンツ一覧を作成 #####
+               // 上位コンテンツを取得
+               $this->db->getTopContentByDateRange(blog_mainCommonDef::VIEW_CONTENT_TYPE, $this->startDate, $this->endDate, self::DEFAULT_LIST_COUNT, 1/*先頭ページ*/, $this->_langId, array($this, 'contentListLoop'));
+               
+               // X軸タイトル作成
+               $xTitleCount = count($xTitleArray);
+               for ($i = 0; $i < $xTitleCount; $i++){
+                       $row = array(
+                               'date'    => $this->convertToDispString($xTitleArray[$i])                       // X軸タイトル
+                       );
+                       $this->tmpl->addVars('datelist', $row);
+                       $this->tmpl->parseTemplate('datelist', 'a');
+               }
                
                // ライブラリパス
                $libDir = '';
                $libInfo = $this->gPage->getScriptLibInfo(self::LIB_JQPLOT);
                if (!empty($libInfo)) $libDir = $libInfo['dir'];
-               $this->tmpl->addVar("_widget", "lib_dir", $libDir);
+               $this->tmpl->addVar('_widget', 'lib_dir', $libDir);
                
                // 値を埋め込む
-               $this->tmpl->addVar("draw_graph", "x_ticks", $graphDataXStr);           // グラフX軸タイトル
-               $this->tmpl->addVar("draw_graph", "y_values", $graphDataYStr);          // グラフY軸値
-               $this->tmpl->addVar("draw_graph", "y_max", $yMax);              // グラフY座標最大値
+               $this->tmpl->addVar('_widget', 'start_date', $this->convertToDispDate($this->startDate));               // 集計期間(開始)
+               $this->tmpl->addVar('_widget', 'end_date', $this->convertToDispDate($this->endDate));           // 集計期間(終了)
+               $this->tmpl->addVar('draw_graph', 'x_ticks', $graphDataXStr);           // グラフX軸タイトル
+               $this->tmpl->addVar('draw_graph', 'y_values', $graphDataYStr);          // グラフY軸値
+               $this->tmpl->addVar('draw_graph', 'y_max', $yMax);              // グラフY座標最大値
        }
        /**
         * 集計タイプ選択メニュー作成
@@ -243,8 +261,27 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
         */
        function contentListLoop($index, $fetchedRow, $param)
        {
+               $contentId = $fetchedRow['vc_content_id'];
+               $viewData = $this->getContentViewData($contentId);
+               
+               // アクセス数一覧を作成
+               $this->tmpl->clearTemplate('countlist');
+               $dateKeyCount = count($this->dateKeyArray);
+               for ($i = 0; $i < $dateKeyCount; $i++){
+                       $dateKey = $this->dateKeyArray[$i];
+                       $accessCount = $viewData[$dateKey];
+                       if (!isset($accessCount)) $accessCount = 0;
+                       
+                       $menurow = array(
+                               'count'         => $accessCount
+                       );
+                       $this->tmpl->addVars('countlist', $menurow);
+                       $this->tmpl->parseTemplate('countlist', 'a');
+               }
+                       
 //             echo $fetchedRow['be_name'] . '-' . $fetchedRow['vc_content_id'].'-[' .$fetchedRow['total'].'] ';
 
+
                $row = array(
                        'name' => $this->convertToDispString($fetchedRow['be_name'])            // 名前
                );
@@ -252,5 +289,29 @@ class admin_blog_mainAnalyticsWidgetContainer extends admin_blog_mainBaseWidgetC
                $this->tmpl->parseTemplate('itemlist', 'a');
                return true;
        }
+       /**
+        * コンテンツごとのアクセス数データを取得
+        *
+        * @param int    $contentId                     コンテンツID
+        * @return array                                        集計データ
+        */
+       function getContentViewData($contentId)
+       {
+               $total = 0;
+               $viewData = array();
+               $ret = $this->db->getContentViewCountByDate(blog_mainCommonDef::VIEW_CONTENT_TYPE, $contentId, $this->startDate, $this->endDate, $rows);
+               if ($ret){
+                       $rowCount = count($rows);
+                       for ($i = 0; $i < $rowCount; $i++){
+                               $row = $rows[$i];
+                               $date = date(self::DATE_KEY_FORMAT, strtotime($row['vc_date']));
+                               $dayTotal = $row['total'];
+                               $viewData[$date] = $dayTotal;   // 日単位のアクセス数
+                               $total += $dayTotal;
+                       }
+                       $viewData['total'] = $total;            // 総アクセス数
+               }
+               return $viewData;
+       }
 }
 ?>
index adb8e24..83bdb50 100644 (file)
@@ -18,16 +18,47 @@ require_once($gEnvManager->getDbPath() . '/baseDb.php');
 class blog_analyticsDb extends BaseDb
 {
        /**
+        * 全コンテンツの参照数を日付範囲で取得
+        *
+        * @param string    $typeId                     コンテンツタイプ
+        * @param date          $startDate              集計期間、開始日(NULL=先頭からすべて)
+        * @param date          $endDate                集計期間、終了日(NULL=最後まですべて)
+        * @param function $callback            コールバック関数
+        * @return                                                      なし
+        */
+       function getAllContentViewCountByDate($typeId, $startDate, $endDate, $callback)
+       {
+               $params = array();
+               $queryStr  = 'SELECT vc_date, SUM(vc_count) AS total FROM _view_count ';
+               $queryStr .=   'WHERE vc_type_id = ? '; $params[] = $typeId;            // データタイプ
+
+               // 日付範囲
+               if (!empty($startDate)){
+                       $queryStr .=    'AND ? <= vc_date ';
+                       $params[] = $startDate;
+               }
+               if (!empty($endDate)){
+                       $queryStr .=    'AND vc_date <= ? ';
+                       $params[] = $endDate;
+               }
+
+               // 日付でソート
+               $queryStr .=  'GROUP BY vc_date ';
+               $queryStr .=  'ORDER BY vc_date';
+
+               $this->selectLoop($queryStr, $params, $callback);
+       }
+       /**
         * コンテンツの参照数を日付範囲で取得
         *
-        * @param string    $typeId                             コンテンツタイプ
-        * @param string    $contentId                  コンテンツID(空の場合はすべての集計)
-        * @param date          $startDate                      集計期間、開始日(NULL=先頭からすべて)
-        * @param date          $endDate                        集計期間、終了日(NULL=最後まですべて)
-        * @param function $callback                    コールバック関数
-        * @return                                                              なし
+        * @param string    $typeId                     コンテンツタイプ
+        * @param string    $contentId          コンテンツID
+        * @param date          $startDate              集計期間、開始日(NULL=先頭からすべて)
+        * @param date          $endDate                集計期間、終了日(NULL=最後まですべて)
+        * @param array         $rows                   取得した行データ
+        * @return bool                                         true=取得、false=取得せず
         */
-       function getContentViewCountByDate($typeId, $contentId, $startDate, $endDate, $callback)
+       function getContentViewCountByDate($typeId, $contentId, $startDate, $endDate, &$rows)
        {
                $params = array();
                $queryStr  = 'SELECT vc_date, SUM(vc_count) AS total FROM _view_count ';
@@ -53,7 +84,8 @@ class blog_analyticsDb extends BaseDb
                $queryStr .=  'GROUP BY vc_date ';
                $queryStr .=  'ORDER BY vc_date';
 
-               $this->selectLoop($queryStr, $params, $callback);
+               $retValue = $this->selectRecords($queryStr, $params, $rows);
+               return $retValue;
        }
        /**
         * 指定期間の参照が多い順にコンテンツを取得
index 239c6c9..aa81ea9 100644 (file)
 //<![CDATA[
 $(function(){
        // テーブルを作成
-       m3SetConfigTable('mainconfig');
+//     m3SetConfigTable('mainconfig');
 
 <patTemplate:tmpl name="draw_graph">
+       // アクセス数グラフ作成
        var values = {Y_VALUES};
        var ticks = {X_TICKS};
 
@@ -54,6 +55,10 @@ $(function(){
                }
        });
 </patTemplate:tmpl>
+
+       // 上位アクセスコンテンツテーブル
+       $('#mainconfig').m3stickyheader();
+       
 });
 //]]>
 </script>
@@ -72,7 +77,9 @@ $(function(){
 </patTemplate:tmpl>
 </select>
 </h3>
-
+<div class="m3config_h_side_buttons" style="margin-left:10px;">
+期間:{START_DATE} ~ {END_DATE}
+</div>
 <!--
 <div class="m3config_h_side_buttons pull-right"><div {_HELP_ANALYTICS_BUTTONS}><div class="btn-group">
 <input type="button" class="button" onclick="newItem();" value="新規" /><input type="button" class="button" onclick="editItem();" value="編集" /><input type="button" class="button" onclick="delItem();" value="削除" />
@@ -81,24 +88,30 @@ $(function(){
 <div class="jqPlot" id="chart1" style="margin:0 auto;height:200px;"></div>
 
 <h3 class="m3config_h"><span {_HELP_ANALYTICS_TOP_LIST}>アクセス上位記事</span></h3>
-<table id="mainconfig">
+<div class="m3stickyheader">
+
+<!--<table id="mainconfig" class="m3stickyheader table-hover overflow-y">-->
+<table id="mainconfig" class="table table-bordered table-striped table-hover overflow-y">
     <thead>
     <tr>
-        <th><span {_HELP_ANALYTICS_NAME}>名前</span></th>
-           <th><span {_HELP_ANALYTICS_INDEX}>表示順</span></th>
-           <th><span {_HELP_ANALYTICS_VISIBLE}>公開</span></th>
+        <th class="info" style="width:200px;"><div class="left-column">記事タイトル</div></th>
+    <patTemplate:tmpl name="datelist">
+           <th class="info" style="width:75px;">{DATE}</th>
+       </patTemplate:tmpl>
        </tr>
     </thead>
     <tbody>
     <patTemplate:tmpl name="itemlist">
     <tr>
-           <td>{NAME}</td>
-           <td>{VIEW_INDEX}</td>
-           <td><input type="checkbox" name="item_visible" {VISIBLE} disabled /></td>
+           <th class="info"><div class="left-column">{NAME}</div></th>
+    <patTemplate:tmpl name="countlist">
+           <td>{COUNT}</td>
+       </patTemplate:tmpl>
        </tr>
        </patTemplate:tmpl>
     </tbody>
 </table>
+</div>
 
 </form>
 </div>