Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Modularize dashboard charts + JavaScript in includes
- Loading branch information
1 parent
f6e0b19
commit a472045
Showing
7 changed files
with
331 additions
and
279 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.