Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Modularize dashboard charts + JavaScript in includes

  • Loading branch information...
commit a472045e3258bc8a1a6ba9d2cf0f2d77425116cb 1 parent f6e0b19
@ginatrapani ginatrapani authored
View
44 webapp/_lib/view/_dashboard.clickthroughrates.tpl
@@ -0,0 +1,44 @@
+<h2>Clickthrough Rates</h2>
+<div class="clearfix article">
+ <div id="click_stats"></div>
+</div>
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawClickthroughRatesChart);
+
+ {literal}
+ function drawClickthroughRatesChart() {
+ {/literal}
+ var click_stats_data = new google.visualization.DataTable({$click_stats_data});
+ {literal}
+ var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
+ formatter.format(click_stats_data, 1);
+ var click_stats_chart = new google.visualization.ChartWrapper({
+ containerId: 'click_stats',
+ chartType: 'BarChart',
+ dataTable: click_stats_data,
+ options: {
+ colors: ['#3c8ecc'],
+ isStacked: true,
+ width: 650,
+ height: 250,
+ chartArea:{left:300,height:"80%"},
+ legend: 'none',
+ hAxis: {
+ textStyle: { color: '#fff', fontSize: 1 }
+ },
+ vAxis: {
+ minValue: 0,
+ baselineColor: '#ccc',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ }
+ });
+ click_stats_chart.draw();
+ }
+{/literal}
+</script>
View
42 webapp/_lib/view/_dashboard.clientusage.tpl
@@ -0,0 +1,42 @@
+<div class="omega">
+ <h2>Client Usage <span class="detail">(all posts)</span></h2>
+ <div class="article">
+ <div id="client_usage"></div>
+ </div>
+ <div class="stream-pagination">
+ <small style="color:#666;padding:5px;">Recently posting about {$instance->posts_per_day|round} times a day{if $latest_clients_usage}, mostly using {foreach from=$latest_clients_usage key=name item=num_posts name=foo}{$name}{if !$smarty.foreach.foo.last} and {/if}{/foreach}{/if}</small>
+ </div>
+</div>
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawClientUsageChart);
+
+ {literal}
+ function drawClientUsageChart() {
+ {/literal}
+ var client_usage_data = new google.visualization.DataTable({$all_time_clients_usage});
+ {literal}
+ var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
+ var formatter_date = new google.visualization.DateFormat({formatType: 'medium'});
+ formatter.format(client_usage_data, 1);
+ var client_usage_chart = new google.visualization.ChartWrapper({
+ containerId: 'client_usage',
+ // chartType: 'ColumnChart',
+ chartType: 'PieChart',
+ dataTable: client_usage_data,
+ options: {
+ titleTextStyle: {color: '#848884', fontSize: 19},
+ width: 300,
+ height: 300,
+ sliceVisibilityThreshold: 1/100,
+ chartArea: { width: '100%' },
+ pieSliceText: 'label',
+ }
+ });
+ client_usage_chart.draw();
+ }
+ {/literal}
+</script>
View
61 webapp/_lib/view/_dashboard.followercountbyday.tpl
@@ -0,0 +1,61 @@
+ <h2>
+ {if $instance->network eq 'twitter'}Followers {elseif $instance->network eq 'facebook page'}Fans {elseif $instance->network eq 'facebook'}Friends {/if}By Day
+ {if $follower_count_history_by_day.trend}
+ ({if $follower_count_history_by_day.trend > 0}<span style="color:green">+{else}<span style="color:red">{/if}{$follower_count_history_by_day.trend|number_format}</span>/day)
+ {/if}
+ </h2>
+ {if !$follower_count_history_by_day.history OR $follower_count_history_by_day.history|@count < 2}
+ <div class="alert helpful">Not enough data to display chart</div>
+ {else}
+ <div class="article">
+ <div id="follower_count_history_by_day"></div>
+ </div>
+ <div class="view-all">
+ <a href="{$site_root_path}?v={if $instance->network neq 'twitter'}friends{else}followers{/if}&u={$instance->network_username|urlencode}&n={$instance->network|urlencode}">More...</a>
+ </div>
+ {/if}
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawFollowerCountByDayChart);
+
+ {literal}
+ function drawFollowerCountByDayChart() {
+ {/literal}
+ var follower_count_history_by_day_data = new google.visualization.DataTable({$follower_count_history_by_day.vis_data});
+ {literal}
+ var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
+ var formatter_date = new google.visualization.DateFormat({formatType: 'medium'});
+
+ formatter.format(follower_count_history_by_day_data, 1);
+ formatter_date.format(follower_count_history_by_day_data, 0);
+
+ var follower_count_history_by_day_chart = new google.visualization.ChartWrapper({
+ containerId: 'follower_count_history_by_day',
+ chartType: 'LineChart',
+ dataTable: follower_count_history_by_day_data,
+ options: {
+ width: 325,
+ height: 250,
+ legend: "none",
+ interpolateNulls: true,
+ pointSize: 2,
+ hAxis: {
+ baselineColor: '#eee',
+ format: 'MMM d',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ vAxis: {
+ baselineColor: '#eee',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ },
+ });
+ follower_count_history_by_day_chart.draw();
+ }
+ {/literal}
+</script>
View
66 webapp/_lib/view/_dashboard.followercountbyweek.tpl
@@ -0,0 +1,66 @@
+ <h2>
+ {if $instance->network eq 'twitter'}Followers {elseif $instance->network eq 'facebook page'}Fans {elseif $instance->network eq 'facebook'}Friends {/if} By Week
+ {if $follower_count_history_by_week.trend != 0}
+ ({if $follower_count_history_by_week.trend > 0}<span style="color:green">+{else}<span style="color:red">{/if}{$follower_count_history_by_week.trend|number_format}</span>/week)
+ {/if}
+ </h2>
+ {if !$follower_count_history_by_week.history OR $follower_count_history_by_week.history|@count < 2}
+ <div class="alert helpful">Not enough data to display chart</div>
+ {else}
+ <div class="article">
+ <div id="follower_count_history_by_week"></div>
+ </div>
+ {if $follower_count_history_by_week.milestone and $follower_count_history_by_week.milestone.will_take > 0}
+ <div class="stream-pagination"><small style="color:gray">
+ <span style="background-color:#FFFF80;color:black">{$follower_count_history_by_week.milestone.will_take} week{if $follower_count_history_by_week.milestone.will_take > 1}s{/if}</span> till you reach <span style="background-color:#FFFF80;color:black">{$follower_count_history_by_week.milestone.next_milestone|number_format} followers</span> at this rate.
+ </small></div>
+ {/if}
+ <div class="view-all">
+ <a href="{$site_root_path}?v={if $instance->network neq 'twitter'}friends{else}followers{/if}&u={$instance->network_username|urlencode}&n={$instance->network|urlencode}">More...</a>
+ </div>
+ {/if}
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawFollowerCountByWeekChart);
+
+ {literal}
+ function drawFollowerCountByWeekChart() {
+ {/literal}
+ var follower_count_history_by_week_data = new google.visualization.DataTable({$follower_count_history_by_week.vis_data});
+ {literal}
+ var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
+ var formatter_date = new google.visualization.DateFormat({formatType: 'medium'});
+
+ formatter.format(follower_count_history_by_week_data, 1);
+ formatter_date.format(follower_count_history_by_week_data, 0);
+
+ var follower_count_history_by_week_chart = new google.visualization.ChartWrapper({
+ containerId: 'follower_count_history_by_week',
+ chartType: 'LineChart',
+ dataTable: follower_count_history_by_week_data,
+ options: {
+ width: 325,
+ height: 250,
+ legend: "none",
+ interpolateNulls: true,
+ pointSize: 2,
+ hAxis: {
+ baselineColor: '#eee',
+ format: 'MMM d',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ vAxis: {
+ baselineColor: '#eee',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ },
+ });
+ follower_count_history_by_week_chart.draw();
+ }
+ {/literal}
+</script>
View
61 webapp/_lib/view/_dashboard.posttypes.tpl
@@ -0,0 +1,61 @@
+ <div class="alpha">
+ <h2>Post Types</span></h2>
+ <div class="small prepend article">
+ <div id="post_types"></div>
+ </div>
+ <div class="stream-pagination"><small style="color:#666;padding:5px;">
+ {$instance->percentage_replies|round}% posts are replies<br>
+ {$instance->percentage_links|round}% posts contain links
+ </small>
+ </div>
+</div>
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawPostTypesChart);
+
+ {literal}
+ function drawPostTypesChart() {
+ var replies = {/literal}{$instance->percentage_replies|round};
+ var links = {$instance->percentage_links|round};
+ {literal}
+ if (typeof(replies) != 'undefined') {
+ var post_types = new google.visualization.DataTable();
+ post_types.addColumn('string', 'Type');
+ post_types.addColumn('number', 'Percentage');
+ post_types.addRows([
+ ['Conversationalist', {v: replies/100, f: replies + '%'}],
+ ['Broadcaster', {v: links/100, f: links + '%'}]
+ ]);
+
+ var post_type_chart = new google.visualization.ChartWrapper({
+ containerId: 'post_types',
+ chartType: 'ColumnChart',
+ dataTable: post_types,
+ options: {
+ colors: ['#3c8ecc'],
+ width: 300,
+ height: 200,
+ legend: 'none',
+ hAxis: {
+ minValue: 0,
+ maxValue: 1,
+ textStyle: { color: '#000' },
+ },
+ vAxis: {
+ textStyle: { color: '#666' },
+ gridlines: { color: '#ccc' },
+ format:'#,###%',
+ baselineColor: '#ccc',
+ },
+ }
+ });
+ post_type_chart.draw();
+ }
+ }
+ {/literal}
+</script>
+
+
View
43 webapp/_lib/view/_dashboard.responserates.tpl
@@ -0,0 +1,43 @@
+<h2>Response Rates</h2>
+<div class="clearfix article">
+ <div id="response_rates"></div>
+</div>
+
+<script type="text/javascript">
+ // Load the Visualization API and the standard charts
+ google.load('visualization', '1');
+ // Set a callback to run when the Google Visualization API is loaded.
+ google.setOnLoadCallback(drawResponseRatesChart);
+
+ {literal}
+ function drawResponseRatesChart() {
+ {/literal}
+ var response_rates_data = new google.visualization.DataTable({$hot_posts_data});
+
+ {literal}
+ var response_rates_chart = new google.visualization.ChartWrapper({
+ containerId: 'response_rates',
+ chartType: 'BarChart',
+ dataTable: response_rates_data,
+ options: {
+ colors: ['#3e5d9a', '#3c8ecc', '#BBCCDD'],
+ isStacked: true,
+ width: 650,
+ height: 250,
+ chartArea:{left:300,height:"80%"},
+ legend: 'bottom',
+ hAxis: {
+ textStyle: { color: '#fff', fontSize: 1 }
+ },
+ vAxis: {
+ minValue: 0,
+ baselineColor: '#ccc',
+ textStyle: { color: '#999' },
+ gridlines: { color: '#eee' }
+ },
+ }
+ });
+ response_rates_chart.draw();
+ }
+ {/literal}
+</script>
View
293 webapp/_lib/view/dashboard.tpl
@@ -41,7 +41,7 @@
{/if}
{if $instance}
- <!--begin public user dashboard-->
+ {* begin public user dashboard *}
{if $user_details}
<div class="grid_18 alpha omega">
<div class="clearfix alert stats round-all" id="">
@@ -62,13 +62,10 @@
{if $data_template}
{include file=$data_template}
- {else} <!-- else if no $data_template -->
+ {else} {* else if no $data_template *}
{if $hot_posts_data}
<div class="section">
- <h2>Response Rates</h2>
- <div class="clearfix article">
- <div id="hot_posts"></div>
- </div>
+ {include file="_dashboard.responserates.tpl"}
</div>
{/if}
@@ -81,7 +78,7 @@
<a href="https://twitter.com/intent/user?user_id={$u.user_id}" title="{$u.user_name} has {$u.follower_count|number_format} followers and {$u.friend_count|number_format} friends"><img src="{$u.avatar}" class="avatar2"/><img src="{$site_root_path}plugins/{$u.network}/assets/img/favicon.png" class="service-icon2"/></a>
</div>
{/foreach}
- <br /><br /><br />
+ <br /><br /><br />
</div>
<div class="clearfix view-all">
<a href="{$site_root_path}?v=followers-leastlikely&u={$instance->network_username}&n={$instance->network}">More...</a>
@@ -90,12 +87,9 @@
{/if}
{if $click_stats_data}
- <div class="section">
- <h2>Clickthrough Rates</h2>
- <div class="clearfix article">
- <div id="click_stats"></div>
- </div>
- </div>
+ <div class="section">
+ {include file="_dashboard.clickthroughrates.tpl"}
+ </div>
{/if}
{if $most_replied_to_1wk}
@@ -121,50 +115,12 @@
{/if}
{if $follower_count_history_by_day.history && $follower_count_history_by_week.history}
-
<div class="section" style="float : left; clear : none; width : 345px;">
- <h2>
- {if $instance->network eq 'twitter'}Followers {elseif $instance->network eq 'facebook page'}Fans {elseif $instance->network eq 'facebook'}Friends {/if}By Day
- {if $follower_count_history_by_day.trend}
- ({if $follower_count_history_by_day.trend > 0}<span style="color:green">+{else}<span style="color:red">{/if}{$follower_count_history_by_day.trend|number_format}</span>/day)
- {/if}
- </h2>
- {if !$follower_count_history_by_day.history OR $follower_count_history_by_day.history|@count < 2}
- <div class="alert helpful">Not enough data to display chart</div>
- {else}
- <div class="article">
- <div id="follower_count_history_by_day"></div>
- </div>
- <div class="view-all">
- <a href="{$site_root_path}?v={if $instance->network neq 'twitter'}friends{else}followers{/if}&u={$instance->network_username|urlencode}&n={$instance->network|urlencode}">More...</a>
- </div>
-
- {/if}
+ {include file="_dashboard.followercountbyday.tpl"}
</div>
<div class="section" style="float : left; clear : none;margin-left : 16px; width : 345px;">
- <h2>
- {if $instance->network eq 'twitter'}Followers {elseif $instance->network eq 'facebook page'}Fans {elseif $instance->network eq 'facebook'}Friends {/if} By Week
- {if $follower_count_history_by_week.trend != 0}
- ({if $follower_count_history_by_week.trend > 0}<span style="color:green">+{else}<span style="color:red">{/if}{$follower_count_history_by_week.trend|number_format}</span>/week)
- {/if}
- </h2>
- {if !$follower_count_history_by_week.history OR $follower_count_history_by_week.history|@count < 2}
- <div class="alert helpful">Not enough data to display chart</div>
- {else}
- <div class="article">
- <div id="follower_count_history_by_week"></div>
- </div>
- {if $follower_count_history_by_week.milestone and $follower_count_history_by_week.milestone.will_take > 0}
- <div class="stream-pagination"><small style="color:gray">
- <span style="background-color:#FFFF80;color:black">{$follower_count_history_by_week.milestone.will_take} week{if $follower_count_history_by_week.milestone.will_take > 1}s{/if}</span> till you reach <span style="background-color:#FFFF80;color:black">{$follower_count_history_by_week.milestone.next_milestone|number_format} followers</span> at this rate.
- </small></div>
- {/if}
- <div class="view-all">
- <a href="{$site_root_path}?v={if $instance->network neq 'twitter'}friends{else}followers{/if}&u={$instance->network_username|urlencode}&n={$instance->network|urlencode}">More...</a>
- </div>
- {/if}
+ {include file="_dashboard.followercountbyweek.tpl"}
</div>
-
{/if}
{if $most_retweeted_1wk}
@@ -177,235 +133,14 @@
{/if}
{if $instance->network eq 'twitter' }
<div class="section" style="float : left; clear : none; width : 345px;">
- <div class="alpha">
- <h2>Post Types</span></h2>
- <div class="small prepend article">
- <div id="post_types"></div>
- </div>
- <div class="stream-pagination"><small style="color:#666;padding:5px;">
- {$instance->percentage_replies|round}% posts are replies<br>
- {$instance->percentage_links|round}% posts contain links
- </small>
- </div>
- <script>
- var replies = {$instance->percentage_replies|round};
- var links = {$instance->percentage_links|round};
- </script>
- </div>
- </div>
-
- <div class="section" style="float : left; clear : none;margin-left : 10px; width : 345px;">
- <div class="omega">
- <h2>Client Usage <span class="detail">(all posts)</span></h2>
- <div class="article">
- <div id="client_usage"></div>
- </div>
- <div class="stream-pagination">
- <small style="color:#666;padding:5px;">Recently posting about {$instance->posts_per_day|round} times a day{if $latest_clients_usage}, mostly using {foreach from=$latest_clients_usage key=name item=num_posts name=foo}{$name}{if !$smarty.foreach.foo.last} and {/if}{/foreach}{/if}</small>
- </div>
- </div>
+ {include file="_dashboard.posttypes.tpl"}
</div>
+ <div class="section" style="float : left; clear : none;margin-left : 10px; width : 345px;">
+ {include file="_dashboard.clientusage.tpl"}
+ </div>
{/if}
- <script type="text/javascript">
- // Load the Visualization API and the standard charts
- google.load('visualization', '1');
- // Set a callback to run when the Google Visualization API is loaded.
- google.setOnLoadCallback(drawCharts);
-
- {literal}
- function drawCharts() {
- {/literal}
-
- {if $follower_count_history_by_day.history && $follower_count_history_by_week.history}
- var follower_count_history_by_day_data = new google.visualization.DataTable(
- {$follower_count_history_by_day.vis_data});
- var follower_count_history_by_week_data = new google.visualization.DataTable(
- {$follower_count_history_by_week.vis_data});
- {/if}
-
- var hot_posts_data = new google.visualization.DataTable({$hot_posts_data});
- var client_usage_data = new google.visualization.DataTable({$all_time_clients_usage});
- {if $click_stats_data}
- var click_stats_data = new google.visualization.DataTable({$click_stats_data});
- {/if}
-
- {literal}
-
- var formatter = new google.visualization.NumberFormat({fractionDigits: 0});
- var formatter_date = new google.visualization.DateFormat({formatType: 'medium'});
-
- var hot_posts_chart = new google.visualization.ChartWrapper({
- containerId: 'hot_posts',
- chartType: 'BarChart',
- dataTable: hot_posts_data,
- options: {
- colors: ['#3e5d9a', '#3c8ecc', '#BBCCDD'],
- isStacked: true,
- width: 650,
- height: 250,
- chartArea:{left:300,height:"80%"},
- legend: 'bottom',
- hAxis: {
- textStyle: { color: '#fff', fontSize: 1 }
- },
- vAxis: {
- minValue: 0,
- baselineColor: '#ccc',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- }
- });
- hot_posts_chart.draw();
- {/literal}
-
- {if $click_stats_data}
- {literal}
- formatter.format(click_stats_data, 1);
- var click_stats_chart = new google.visualization.ChartWrapper({
- containerId: 'click_stats',
- chartType: 'BarChart',
- dataTable: click_stats_data,
- options: {
- colors: ['#3c8ecc'],
- isStacked: true,
- width: 650,
- height: 250,
- chartArea:{left:300,height:"80%"},
- legend: 'none',
- hAxis: {
- textStyle: { color: '#fff', fontSize: 1 }
- },
- vAxis: {
- minValue: 0,
- baselineColor: '#ccc',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- }
- });
- click_stats_chart.draw();
- {/literal}
- {/if}
-
- {if $follower_count_history_by_day.history && $follower_count_history_by_week.history}
- {literal}
- formatter.format(follower_count_history_by_day_data, 1);
- formatter_date.format(follower_count_history_by_day_data, 0);
-
- var follower_count_history_by_day_chart = new google.visualization.ChartWrapper({
- containerId: 'follower_count_history_by_day',
- chartType: 'LineChart',
- dataTable: follower_count_history_by_day_data,
- options: {
- width: 325,
- height: 250,
- legend: "none",
- interpolateNulls: true,
- pointSize: 2,
- hAxis: {
- baselineColor: '#eee',
- format: 'MMM d',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- vAxis: {
- baselineColor: '#eee',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- },
- });
- follower_count_history_by_day_chart.draw();
-
- formatter.format(follower_count_history_by_week_data, 1);
- formatter_date.format(follower_count_history_by_week_data, 0);
-
- var follower_count_history_by_week_chart = new google.visualization.ChartWrapper({
- containerId: 'follower_count_history_by_week',
- chartType: 'LineChart',
- dataTable: follower_count_history_by_week_data,
- options: {
- width: 325,
- height: 250,
- legend: "none",
- interpolateNulls: true,
- pointSize: 2,
- hAxis: {
- baselineColor: '#eee',
- format: 'MMM d',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- vAxis: {
- baselineColor: '#eee',
- textStyle: { color: '#999' },
- gridlines: { color: '#eee' }
- },
- },
- });
- follower_count_history_by_week_chart.draw();
- {/literal}
- {/if}
- {literal}
-
- if (typeof(replies) != 'undefined') {
- var post_types = new google.visualization.DataTable();
- post_types.addColumn('string', 'Type');
- post_types.addColumn('number', 'Percentage');
- post_types.addRows([
- ['Conversationalist', {v: replies/100, f: replies + '%'}],
- ['Broadcaster', {v: links/100, f: links + '%'}]
- ]);
-
- var post_type_chart = new google.visualization.ChartWrapper({
- containerId: 'post_types',
- chartType: 'ColumnChart',
- dataTable: post_types,
- options: {
- colors: ['#3c8ecc'],
- width: 300,
- height: 200,
- legend: 'none',
- hAxis: {
- minValue: 0,
- maxValue: 1,
- textStyle: { color: '#000' },
- },
- vAxis: {
- textStyle: { color: '#666' },
- gridlines: { color: '#ccc' },
- format:'#,###%',
- baselineColor: '#ccc',
- },
- }
- });
- post_type_chart.draw();
- }
-
- formatter.format(client_usage_data, 1);
- var client_usage_chart = new google.visualization.ChartWrapper({
- containerId: 'client_usage',
- // chartType: 'ColumnChart',
- chartType: 'PieChart',
- dataTable: client_usage_data,
- options: {
- titleTextStyle: {color: '#848884', fontSize: 19},
- width: 300,
- height: 300,
- sliceVisibilityThreshold: 1/100,
- chartArea: { width: '100%' },
- pieSliceText: 'label',
- }
- });
- client_usage_chart.draw();
- }
-
- {/literal}
- </script>
-
- {/if} <!-- end if $data_template -->
+ {/if} {* end if $data_template *}
{/if}
{/if}
Please sign in to comment.
Something went wrong with that request. Please try again.