diff --git a/admin/intro.php b/admin/intro.php index af8fd8c97..a2109ec4f 100644 --- a/admin/intro.php +++ b/admin/intro.php @@ -191,54 +191,70 @@ trigger_notify('loc_end_intro'); // | get activity data | // +-----------------------------------------------------------------------+ -$number_week = 4; +$nb_weeks = $conf['dashboard_activity_nb_weeks']; $date = new DateTime(); //Array for the JS tooltip $activity_last_weeks = array(); //Count mondays $mondays = 0; -//Get mondays date (day + month) for the chart legend -$mondays_date = array(); +//Get mondays number for the chart legend +$week_number = array(); //Array for sorting days in circle size $temp_data = array(); -//Get data from $number_week last weeks -while ($mondays < $number_week) +//Get data from $nb_weeks last weeks +while ($mondays < $nb_weeks) { - $date_string = $date->format('Y-m-d'); - $query = ' -SELECT * - FROM `'.ACTIVITY_TABLE.'` - WHERE occured_on LIKE "'.$date_string.'%" -;'; + $date->sub(new DateInterval('P1D')); - $result = query2array($query, null); - - $this_day = array('number' => 0); - foreach ($result as $act) { - if(isset($this_day['details'][ucfirst($act['object'])][ucfirst($act['action'])])) - { - $this_day['details'][ucfirst($act['object'])][ucfirst($act['action'])] += 1; - } else { - $this_day['details'][ucfirst($act['object'])][ucfirst($act['action'])] = 1; - } - $this_day['number'] += 1; - } - - if ($this_day['number'] > 0) + if ($date->format('D') == 'Mon') { - $temp_data[] = array('x' => $this_day['number'], 'd'=>$date->format('N'), 'w'=>$mondays); - } - - - $activity_last_weeks[$mondays][intval($date->format('N'))] = $this_day; - - if ($date->format('D') == 'Mon') { - $mondays_date[$mondays]['m'] = $date->format('m'); - $mondays_date[$mondays]['d'] = $date->format('d'); + $week_number[] = $date->format('W'); $mondays += 1; } - $date->sub(new DateInterval('P1D')); +} + +$week_number = array_reverse($week_number); + +$date_string = $date->format('Y-m-d'); +$query = ' +SELECT * + FROM `'.ACTIVITY_TABLE.'` + WHERE occured_on >= "'.$date_string.'%" +;'; + +$result = query2array($query, null); + +foreach ($result as $row) +{ + $day_date = new DateTime($row['occured_on']); + + $week = 0; + for ($i=0; $i < $nb_weeks; $i++) + { + if ($week_number[$i] == $day_date->format('W')) + { + $week = $i; + } + } + $day_nb = $day_date->format('N'); + + @$activity_last_weeks[$week][$day_nb]['details'][ucfirst($row['object'])][ucfirst($row['action'])] += 1; + @$activity_last_weeks[$week][$day_nb]['number'] += 1; + @$activity_last_weeks[$week][$day_nb]['date'] = format_date($day_date->getTimestamp()); +} + +//echo '
'; print_r($activity_last_weeks); echo '
'; + +foreach($activity_last_weeks as $week => $i) +{ + foreach($i as $day => $j) + { + if ($j['number'] > 0) + { + $temp_data[] = array('x' => $j['number'], 'd'=>$day, 'w'=>$week); + } + } } // Algorithm to sort days in circle size : @@ -249,7 +265,8 @@ SELECT * //Function to sort days by number of activity function cmp_day($a, $b) { - if ($a['x'] == $b['x']) { + if ($a['x'] == $b['x']) + { return 0; } return ($a['x'] < $b['x']) ? -1 : 1; @@ -267,15 +284,18 @@ for ($i=1; $i < count($temp_data); $i++) $split = 0; //Split (split represented by -1) -while (max($diff_x) > 120) { +while (max($diff_x) > 120) +{ $diff_x[array_search(max($diff_x), $diff_x)] = -1; $split++; } //Fill empty chart data for the template $chart_data = array(); -for ($i=0; $i < $number_week; $i++) { - for ($j=1; $j <= 7; $j++) { +for ($i=0; $i < $nb_weeks; $i++) +{ + for ($j=1; $j <= 7; $j++) + { $chart_data[$i][$j] = 0; } } @@ -283,18 +303,21 @@ for ($i=0; $i < $number_week; $i++) { $size = 1; $chart_data[$temp_data[0]['w']][$temp_data[0]['d']] = $size; //Set sizes in chart data -for ($i=1; $i < count($temp_data); $i++) { - if ($diff_x[$i-1] == -1) {$size++;} +for ($i=1; $i < count($temp_data); $i++) +{ + if ($diff_x[$i-1] == -1) + { + $size++; + } $chart_data[$temp_data[$i]['w']][$temp_data[$i]['d']] = $size; } //Assign data for the template -$template->assign('ACTIVITY_MONDAYS_DATE',array_reverse($mondays_date)); -$template->assign('ACTIVITY_LAST_WEEKS', array_reverse($activity_last_weeks)); -$template->assign('ACTIVITY_CHART_DATA',array_reverse($chart_data)); +$template->assign('ACTIVITY_WEEK_NUMBER',$week_number); +$template->assign('ACTIVITY_LAST_WEEKS', $activity_last_weeks); +$template->assign('ACTIVITY_CHART_DATA',$chart_data); $template->assign('ACTIVITY_CHART_NUMBER_SIZES',$size); - // +-----------------------------------------------------------------------+ // | get storage data | // +-----------------------------------------------------------------------+ @@ -350,7 +373,7 @@ $result = query2array($query); if (isset($result[0]['SUM(filesize)'])) { - $data_storage['Format'] = $result[0]['SUM(filesize)']; + $data_storage['Formats'] = $result[0]['SUM(filesize)']; } //If the host is not windows, get the cache size @@ -371,14 +394,8 @@ foreach ($data_storage as $value) $total_storage += $value; } -//Get percentage of the total storage -foreach ($data_storage as $key=>$value) -{ - $data_storage[$key] = $value/$total_storage*100; -} - //Pass data to HTML -$template->assign('STORAGE_TOTAL',$total_storage/1000); +$template->assign('STORAGE_TOTAL',$total_storage); $template->assign('STORAGE_CHART_DATA',$data_storage); // +-----------------------------------------------------------------------+ // | sending html code | diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl index 10602ff0a..2c53a6b5b 100644 --- a/admin/themes/default/template/intro.tpl +++ b/admin/themes/default/template/intro.tpl @@ -46,6 +46,25 @@ var ext_need_update_msg = '{'Some u } }); }); + +//Tooltip for the storage chart +$('.storage-chart span').each(function () { + let tooltip = $('.storage-tooltips #'+$(this).data('type')); + let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2; + tooltip.css('left', left+"px") + $(this).hover(function() { + tooltip.toggle(); + }); +}); + +$(window).on('resize', function(){ + $('.storage-chart span').each(function () { + let tooltip = $('.storage-tooltips #'+$(this).data('type')); + let left = $(this).position().left + $(this).width()/2 - tooltip.innerWidth()/2; + tooltip.css('left', left+"px") + }); +}); + {/literal} {/footer_script} @@ -144,18 +163,41 @@ var ext_need_update_msg = '{'Some u
{"Activity peak in the last weeks"|@translate}
-
+
{foreach from=$ACTIVITY_CHART_DATA item=WEEK_ACTIVITY key=WEEK_NUMBER} -
{"Week of %s/%s"|@translate:$ACTIVITY_MONDAYS_DATE[$WEEK_NUMBER]['d']:$ACTIVITY_MONDAYS_DATE[$WEEK_NUMBER]['m']}
+
{"Week %s"|@translate:$ACTIVITY_WEEK_NUMBER[$WEEK_NUMBER]}
{foreach from=$WEEK_ACTIVITY item=SIZE key=DAY_NUMBER} {if $SIZE != 0} -
- {if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] != 0} -

- {"%s Activities"|@translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]} + {assign var='SIZE_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 5 + 1} + {assign var='OPACITY_IN_UNIT' value=$SIZE/$ACTIVITY_CHART_NUMBER_SIZES * 0.6 + 0.2} +

+ {if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] != 0} +

+ + {if $ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"] > 1}{"%s Activities"|@translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{else}{"%s Activity"|@translate:$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["number"]}{/if} + {$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["date"]} + + {foreach from=$ACTIVITY_LAST_WEEKS[$WEEK_NUMBER][$DAY_NUMBER]["details"] item=actions key=cat} -
{$cat} : {foreach from=$actions item=number key=action} ({$action}) {$number} {/foreach} + + {if $cat == "Group"} {$cat|@translate} + {elseif $cat == "User"} {$cat|@translate} + {elseif $cat == "Album"} {$cat|@translate} + {elseif $cat == "Photo"} {$cat|@translate} + {elseif $cat == "Tag"} {$cat|@translate} + {else} {$cat|@translate} {/if} + + {foreach from=$actions item=number key=action} + {if $action == "Edit"} {$number} + {elseif $action == "Add"} {$number} + {elseif $action == "Delete"} {$number} + {elseif $action == "Login"} {$number} + {elseif $action == "Logout"} {$number} + {else} ({$action|@translate}) {$number} + {/if} + {/foreach} + {/foreach}

{/if} @@ -169,11 +211,19 @@ var ext_need_update_msg = '
{'Some u {/foreach}
-
{"Storage"|@translate} {'%s MB used'|translate:$STORAGE_TOTAL}
+
{"Storage"|@translate} {'%s MB used'|translate:($STORAGE_TOTAL/1000)}
- {foreach from=$STORAGE_CHART_DATA item=value} -

{round($value)}%

+ {foreach from=$STORAGE_CHART_DATA key=type item=value} + +

{round($value/$STORAGE_TOTAL*100)}%

+
+ {/foreach} +
+ +
+ {foreach from=$STORAGE_CHART_DATA key=type item=value} +

{$type} : {$value/1000} MB

{/foreach}
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index b3429889f..50d27d508 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -547,7 +547,7 @@ FORM.properties SPAN.property { /* Dashboard */ .intro-page-container { display: grid; - grid-template-columns: 41% 44%; + grid-template-columns: 50% 49%; } .stat-boxes { @@ -590,10 +590,6 @@ a.stat-box:hover { color:#777; } -.intro-charts { - width: 48vw; -} - .chart-title { font-size: 18px; text-align: left; @@ -614,8 +610,8 @@ a.stat-box:hover { font-weight: bold; font-size: 14px; display: grid; - grid-template-columns: repeat(8, 6vw) ; - grid-template-rows: repeat(4, 6vw); + grid-template-columns: repeat(8, 5vw) ; + grid-template-rows: repeat(4, 5vw); } .activity-chart .row-legend,.activity-chart .col-legend { @@ -631,7 +627,7 @@ a.stat-box:hover { } .activity-chart .col-legend { - line-height: 6vw; + line-height: 5vw; } .activity-chart .row-legend:after { @@ -640,7 +636,7 @@ a.stat-box:hover { opacity: 0.05; position: absolute; width: 700%; - transform: translate(6vw,3vw); + transform: translate(6vw,2.5vw); } .activity-chart .col-legend .line-vertical { @@ -670,29 +666,87 @@ a.stat-box:hover { top: 50%; left: 50%; transform: translate(-50%, -50%); + transition: ease 0.2s; } -.activity-chart span p { +.intro-charts .tooltip { position: absolute; display: none; - opacity: 0; z-index: 102; font-size: 12px; font-weight: normal; background-color: white; - padding: 5px; - width: 150px; + padding: 10px; box-shadow: 0px 0px 5px #acacac; - border-radius: 5px; - transform : translate(-50%, 5vw); + border-radius: 10px; + margin: 0px; transition: ease 0.2s; - left: 50%; } -.activity-chart span p::after { +.intro-charts .tooltip .tooltip-header { + margin-bottom: 10px; + display: flex; + justify-content: space-between; + font-size: 14px; +} + +.intro-charts .tooltip .tooltip-header span { + margin: 0px 5px +} + +.intro-charts .tooltip .tooltip-title { + font-weight: bold; + color: #3b3b3b; +} + +.intro-charts .tooltip .tooltip-date { + font-style: italic; +} + +.intro-charts .tooltip span:before { + width: 1.2em; + font-size: 15px; +} + +.intro-charts .tooltip .tooltip-details { + display: flex; + align-items: flex-start; +} + +.intro-charts .tooltip .tooltip-details-cont { + display: flex; + flex-direction: column; + align-items: flex-start; + margin: 0px 3px; +} + +.intro-charts .tooltip .tooltip-details-title { + font-weight: bold; + padding: 0px 5px; + margin-bottom: 8px; + border-radius: 15px; + background: none !important; +} + +.intro-charts .tooltip .tooltip-detail { + margin: 1px; + padding-left: calc(50% - 20px); +} + +.activity-chart .tooltip { + left: 50%; + top:45% +} + +.intro-charts .tooltip span{ + display: inline; + white-space: nowrap; +} + +.intro-charts .tooltip::after { content: " "; position: absolute; - bottom: 100%; /* At the bottom of the tooltip */ + bottom: 100%; left: 51%; margin-left: -5px; border-width: 5px; @@ -704,8 +758,8 @@ a.stat-box:hover { padding: 0.5vw; } -.activity-chart span div:hover + p{ - display: block; +.activity-chart span div:hover + .tooltip, .intro-charts .tooltip:hover{ + display: inline-grid; opacity: 1; } @@ -735,6 +789,10 @@ a.stat-box:hover { background-color: #e8e8e8; } +.storage-tooltips { + position: relative; +} + .storage-chart span{ opacity: 0.7; transition: ease 0.2s; @@ -747,12 +805,18 @@ a.stat-box:hover { opacity: 0; line-height: 0; transition: ease 0.2s; + white-space: nowrap; } .storage-chart span:hover{ opacity: 1; } +.storage-chart span:hover .tooltip { + opacity: 1; + display: block; +} + .storage-chart span:hover p{ opacity: 0.4; } diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 1f61b6d38..d00463283 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -236,15 +236,19 @@ a.stat-box:hover { color: #777; } -.activity-chart span p { +.intro-charts .tooltip { background-color: #333333; box-shadow: none; } -.activity-chart span p::after { +.intro-charts .tooltip::after { border-color: transparent transparent #333333 transparent; } +.intro-charts .tooltip .tooltip-details-title, .intro-charts .tooltip-title { + color:#aeaeae !important; +} + /* hacks */ * html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */ *+html .bigtext { left: 70px; } diff --git a/include/config_default.inc.php b/include/config_default.inc.php index 455ea5020..4d03c1ee6 100644 --- a/include/config_default.inc.php +++ b/include/config_default.inc.php @@ -696,6 +696,9 @@ $conf['ws_max_users_per_page'] = 1000; // Display a link to subscribe to Piwigo Announcements Newsletter $conf['show_newsletter_subscription'] = true; +// Number Weeks displayed on activity chart on the dashboard +$conf['dashboard_activity_nb_weeks'] = 4; + // +-----------------------------------------------------------------------+ // | Filter | // +-----------------------------------------------------------------------+