Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Modularize dashboard charts + JavaScript in includes
  • Loading branch information
ginatrapani committed May 29, 2012
1 parent f6e0b19 commit a472045
Show file tree
Hide file tree
Showing 7 changed files with 331 additions and 279 deletions.
44 changes: 44 additions & 0 deletions 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>
42 changes: 42 additions & 0 deletions 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>
61 changes: 61 additions & 0 deletions 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>
66 changes: 66 additions & 0 deletions 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>
61 changes: 61 additions & 0 deletions 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>
43 changes: 43 additions & 0 deletions 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>

0 comments on commit a472045

Please sign in to comment.