Add music to graphs

* Separate out TV, movies, and music on bar graphs
* Separate out direct play, direct stream, and transcode on bar graphs
This commit is contained in:
Jonathan Wong 2015-09-11 13:12:33 -07:00
parent fb872596d6
commit 7b9210a5fc
10 changed files with 465 additions and 197 deletions

View file

@ -48,7 +48,7 @@
<div class="col-md-12">
<h4><i class="fa fa-history"></i> Daily <span class="yaxis-text">Play count</span> <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The total play count or duration of movies and tv played per day. Click a graph point to open up a list of items played for that specific date.
The total play count or duration of tv, movies, and music played per day. Click a graph point to open up a list of items played for that specific date.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_day">
@ -62,7 +62,7 @@
<div class="col-md-6">
<h4><i class="fa fa-calendar"></i> <span class="yaxis-text">Play count</span> by day of week <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv played per day of the week.
The combined total of tv, movies, and music played per day of the week.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_dayofweek" style="float: left;">
@ -75,7 +75,7 @@
<div class="col-md-6">
<h4><i class="fa fa-clock-o"></i> <span class="yaxis-text">Play count</span> by hour of day <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv played per hour of the day.
The combined total of tv, movies, and music played per hour of the day.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_hourofday">
@ -90,7 +90,7 @@
<div class="col-md-6">
<h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by top 10 platforms <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv played by top 10 most active platforms.
The combined total of tv, movies, and music played by top 10 most active platforms.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_platform" style="float: left;">
@ -103,7 +103,7 @@
<div class="col-md-6">
<h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by top 10 users <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv played by top 10 most active users.
The combined total of tv, movies, and music played by top 10 most active users.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_user">
@ -121,7 +121,7 @@
<div class="col-md-12">
<h4><i class="fa fa-video-camera"></i> Daily Stream type breakdown <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The total play count or duration of movies and tv by the transcode decision. Click a graph point to open up a list of items played for that specific date.
The total play count or duration of tv, movies, and music by the transcode decision. Click a graph point to open up a list of items played for that specific date.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_stream_type">
@ -135,7 +135,7 @@
<div class="col-md-6">
<h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by source resolution <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by their original resolution (pre-transcoding).
The combined total of tv and movies by their original resolution (pre-transcoding).
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_source_resolution" style="float: left;">
@ -148,7 +148,7 @@
<div class="col-md-6">
<h4><i class="fa fa-expand"></i> <span class="yaxis-text">Play count</span> by stream resolution <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by their streamed resolution (post-transcoding).
The combined total of tv and movies by their streamed resolution (post-transcoding).
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_stream_resolution">
@ -163,7 +163,7 @@
<div class="col-md-6">
<h4><i class="fa fa-television"></i> <span class="yaxis-text">Play count</span> by platform and stream type <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by platform and stream type.
The combined total of tv, movies, and music by platform and stream type.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_platform_by_stream_type" style="float: left;">
@ -176,7 +176,7 @@
<div class="col-md-6">
<h4><i class="fa fa-user"></i> <span class="yaxis-text">Play count</span> by user and stream type <small>Last <span class="days">30</span> days</small></h4>
<p class="help-block">
The combined total of movies and tv by user and stream type.
The combined total of tv, movies, and music by user and stream type.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_user_by_stream_type" style="float: left;">
@ -194,7 +194,7 @@
<div class="col-md-12">
<h4><i class="fa fa-calendar"></i> Plays by Month <small>Last 12 months</small></h4>
<p class="help-block">
The combined total of movies and tv by month.
The combined total of tv, movies, and music by month.
</p>
<div class="graphs-instance">
<div class="watch-chart" id="chart_div_plays_by_month">

View file

@ -35,7 +35,7 @@ var hc_plays_by_day_options = {
}
}
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
type: 'datetime',
labels: {

View file

@ -29,7 +29,7 @@ var hc_plays_by_dayofweek_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_dayofweek_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},

View file

@ -29,7 +29,7 @@ var hc_plays_by_hourofday_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_hourofday_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},

View file

@ -23,7 +23,7 @@ var hc_plays_by_month_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
labels: {
style: {

View file

@ -29,7 +29,7 @@ var hc_plays_by_platform_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_platform_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},

View file

@ -29,7 +29,7 @@ var hc_plays_by_source_resolution_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_source_resolution_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},

View file

@ -29,7 +29,7 @@ var hc_plays_by_stream_resolution_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_stream_resolution_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},

View file

@ -29,7 +29,7 @@ var hc_plays_by_user_options = {
credits: {
enabled: false
},
colors: ['#F9AA03', '#FFFFFF'],
colors: ['#F9AA03', '#FFFFFF', '#FF4747'],
xAxis: {
categories: [{}],
labels: {
@ -46,8 +46,26 @@ var hc_plays_by_user_options = {
style: {
color: '#aaa'
}
},
stackLabels: {
enabled: false,
style: {
color: '#fff'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth: '0',
dataLabels: {
enabled: false,
style: {
color: '#000'
}
}
}
},
tooltip: {
shared: true
},