diff --git a/data/interfaces/default/graphs.html b/data/interfaces/default/graphs.html index 916b30f3..18f5bcbb 100644 --- a/data/interfaces/default/graphs.html +++ b/data/interfaces/default/graphs.html @@ -78,7 +78,7 @@ 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.

-
+
Loading chart...

@@ -92,7 +92,7 @@ The combined total of tv, movies, and music played per day of the week.

-
+
Loading chart...
@@ -106,7 +106,7 @@ The combined total of tv, movies, and music played per hour of the day.

-
+
Loading chart...
@@ -122,7 +122,7 @@ The combined total of tv, movies, and music played by top 10 most active platforms.

-
+
Loading chart...
@@ -136,7 +136,7 @@ The combined total of tv, movies, and music played by top 10 most active users.

-
+
Loading chart...
@@ -159,7 +159,7 @@ 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.

-
+
Loading chart...

@@ -173,7 +173,7 @@ The combined total of tv and movies by their original resolution (pre-transcoding).

-
+
Loading chart...

@@ -186,7 +186,7 @@ The combined total of tv and movies by their streamed resolution (post-transcoding).

-
+
Loading chart...

@@ -201,7 +201,7 @@ The combined total of tv, movies, and music by platform and stream type.

-
+
Loading chart...

@@ -214,7 +214,7 @@ The combined total of tv, movies, and music by user and stream type.

-
+
Loading chart...

@@ -236,7 +236,7 @@ The combined total of tv, movies, and music by month.

-
+
Loading chart...

@@ -311,6 +311,34 @@ console.log("Failed to retrieve history modal data."); } } + + function getGraphVisibility(chart_name, data_series) { + var chart_key = 'HighCharts_' + chart_name; + var chart_visibility = JSON.parse(getLocalStorage(chart_key)) || []; + + chart_visibility = chart_visibility.reduce(function(obj, s) { + obj[s.name] = s.visible; + return obj; + }, {}); + + var new_series = data_series.map(function(s) { + var obj = Object.assign({}, s); + obj.visible = (chart_visibility[s.name] !== false); + return obj + }); + + return new_series + } + + function setGraphVisibility(chart_name, data_series, series_name) { + var chart_key = 'HighCharts_' + chart_name; + + var chart_visibility = data_series.map(function(s) { + return {name: s.name, visible: (s.name === series_name) ? !s.visible : s.visible} + }); + + setLocalStorage(chart_key, JSON.stringify(chart_visibility)); + } @@ -352,9 +380,6 @@ } }); - - var music_visible = (${config['music_logging_enable']} == 1 ? true : false); - function dataSecondsToHours(data) { $.each(data.series, function (i, series) { series.data = $.map(series.data, function (value) { @@ -391,8 +416,7 @@ if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_day_options.yAxis.min = 0; hc_plays_by_day_options.xAxis.categories = dateArray; - hc_plays_by_day_options.series = data.series; - hc_plays_by_day_options.series[2].visible = music_visible; + hc_plays_by_day_options.series = getGraphVisibility(hc_plays_by_day_options.chart.renderTo, data.series); var hc_plays_by_day = new Highcharts.Chart(hc_plays_by_day_options); } }); @@ -405,8 +429,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_dayofweek_options.xAxis.categories = data.categories; - hc_plays_by_dayofweek_options.series = data.series; - hc_plays_by_dayofweek_options.series[2].visible = music_visible; + hc_plays_by_dayofweek_options.series = getGraphVisibility(hc_plays_by_dayofweek_options.chart.renderTo, data.series); var hc_plays_by_dayofweek = new Highcharts.Chart(hc_plays_by_dayofweek_options); } }); @@ -419,8 +442,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_hourofday_options.xAxis.categories = data.categories; - hc_plays_by_hourofday_options.series = data.series; - hc_plays_by_hourofday_options.series[2].visible = music_visible; + hc_plays_by_hourofday_options.series = getGraphVisibility(hc_plays_by_hourofday_options.chart.renderTo, data.series); var hc_plays_by_hourofday = new Highcharts.Chart(hc_plays_by_hourofday_options); } }); @@ -433,8 +455,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_platform_options.xAxis.categories = data.categories; - hc_plays_by_platform_options.series = data.series; - hc_plays_by_platform_options.series[2].visible = music_visible; + hc_plays_by_platform_options.series = getGraphVisibility(hc_plays_by_platform_options.chart.renderTo, data.series); var hc_plays_by_platform = new Highcharts.Chart(hc_plays_by_platform_options); } }); @@ -447,8 +468,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_user_options.xAxis.categories = data.categories; - hc_plays_by_user_options.series = data.series; - hc_plays_by_user_options.series[2].visible = music_visible; + hc_plays_by_user_options.series = getGraphVisibility(hc_plays_by_user_options.chart.renderTo, data.series); var hc_plays_by_user = new Highcharts.Chart(hc_plays_by_user_options); } }); @@ -482,7 +502,7 @@ if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_stream_type_options.yAxis.min = 0; hc_plays_by_stream_type_options.xAxis.categories = dateArray; - hc_plays_by_stream_type_options.series = data.series; + hc_plays_by_stream_type_options.series = getGraphVisibility(hc_plays_by_stream_type_options.chart.renderTo, data.series); var hc_plays_by_stream_type = new Highcharts.Chart(hc_plays_by_stream_type_options); } }); @@ -495,7 +515,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_source_resolution_options.xAxis.categories = data.categories; - hc_plays_by_source_resolution_options.series = data.series; + hc_plays_by_source_resolution_options.series = getGraphVisibility(hc_plays_by_source_resolution_options.chart.renderTo, data.series); var hc_plays_by_source_resolution = new Highcharts.Chart(hc_plays_by_source_resolution_options); } }); @@ -508,7 +528,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_stream_resolution_options.xAxis.categories = data.categories; - hc_plays_by_stream_resolution_options.series = data.series; + hc_plays_by_stream_resolution_options.series = getGraphVisibility(hc_plays_by_stream_resolution_options.chart.renderTo, data.series); var hc_plays_by_stream_resolution = new Highcharts.Chart(hc_plays_by_stream_resolution_options); } }); @@ -521,7 +541,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_platform_by_stream_type_options.xAxis.categories = data.categories; - hc_plays_by_platform_by_stream_type_options.series = data.series; + hc_plays_by_platform_by_stream_type_options.series = getGraphVisibility(hc_plays_by_platform_by_stream_type_options.chart.renderTo, data.series); var hc_plays_by_platform_by_stream_type = new Highcharts.Chart(hc_plays_by_platform_by_stream_type_options); } }); @@ -534,7 +554,7 @@ success: function(data) { if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_user_by_stream_type_options.xAxis.categories = data.categories; - hc_plays_by_user_by_stream_type_options.series = data.series; + hc_plays_by_user_by_stream_type_options.series = getGraphVisibility(hc_plays_by_user_by_stream_type_options.chart.renderTo, data.series); var hc_plays_by_user_by_stream_type = new Highcharts.Chart(hc_plays_by_user_by_stream_type_options); } }); @@ -555,8 +575,7 @@ if (yaxis === 'duration') { dataSecondsToHours(data); } hc_plays_by_month_options.yAxis.min = 0; hc_plays_by_month_options.xAxis.categories = data.categories; - hc_plays_by_month_options.series = data.series; - hc_plays_by_month_options.series[2].visible = music_visible; + hc_plays_by_month_options.series = getGraphVisibility(hc_plays_by_month_options.chart.renderTo, data.series); var hc_plays_by_month = new Highcharts.Chart(hc_plays_by_month_options); } }); diff --git a/data/interfaces/default/js/graphs/plays_by_day.js b/data/interfaces/default/js/graphs/plays_by_day.js index 7e6d9c16..9c80f742 100644 --- a/data/interfaces/default/js/graphs/plays_by_day.js +++ b/data/interfaces/default/js/graphs/plays_by_day.js @@ -2,7 +2,7 @@ var hc_plays_by_day_options = { chart: { type: 'line', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_day' + renderTo: 'graph_plays_by_day' }, title: { text: '' @@ -32,6 +32,11 @@ var hc_plays_by_day_options = { selectHandler(this.category, this.series.name); } } + }, + events: { + legendItemClick: function() { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } } } }, diff --git a/data/interfaces/default/js/graphs/plays_by_dayofweek.js b/data/interfaces/default/js/graphs/plays_by_dayofweek.js index a0d66bbe..7c18a32e 100644 --- a/data/interfaces/default/js/graphs/plays_by_dayofweek.js +++ b/data/interfaces/default/js/graphs/plays_by_dayofweek.js @@ -2,17 +2,11 @@ var hc_plays_by_dayofweek_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_dayofweek' + renderTo: 'graph_plays_by_dayofweek' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_dayofweek_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_hourofday.js b/data/interfaces/default/js/graphs/plays_by_hourofday.js index e2e036e3..88f3037d 100644 --- a/data/interfaces/default/js/graphs/plays_by_hourofday.js +++ b/data/interfaces/default/js/graphs/plays_by_hourofday.js @@ -2,17 +2,11 @@ var hc_plays_by_hourofday_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_hourofday' + renderTo: 'graph_plays_by_hourofday' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_hourofday_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_month.js b/data/interfaces/default/js/graphs/plays_by_month.js index c43cf041..5faf9037 100644 --- a/data/interfaces/default/js/graphs/plays_by_month.js +++ b/data/interfaces/default/js/graphs/plays_by_month.js @@ -2,7 +2,7 @@ var hc_plays_by_month_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_month' + renderTo: 'graph_plays_by_month' }, title: { text: '' @@ -50,14 +50,22 @@ var hc_plays_by_month_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_platform.js b/data/interfaces/default/js/graphs/plays_by_platform.js index c84d785e..edc5d711 100644 --- a/data/interfaces/default/js/graphs/plays_by_platform.js +++ b/data/interfaces/default/js/graphs/plays_by_platform.js @@ -2,17 +2,11 @@ var hc_plays_by_platform_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_platform' + renderTo: 'graph_plays_by_platform' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_platform_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_platform_by_stream_type.js b/data/interfaces/default/js/graphs/plays_by_platform_by_stream_type.js index c1b60aeb..898ea7d8 100644 --- a/data/interfaces/default/js/graphs/plays_by_platform_by_stream_type.js +++ b/data/interfaces/default/js/graphs/plays_by_platform_by_stream_type.js @@ -2,17 +2,11 @@ var hc_plays_by_platform_by_stream_type_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_platform_by_stream_type' + renderTo: 'graph_plays_by_platform_by_stream_type' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_platform_by_stream_type_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_source_resolution.js b/data/interfaces/default/js/graphs/plays_by_source_resolution.js index c82f16bc..b99b1782 100644 --- a/data/interfaces/default/js/graphs/plays_by_source_resolution.js +++ b/data/interfaces/default/js/graphs/plays_by_source_resolution.js @@ -2,17 +2,11 @@ var hc_plays_by_source_resolution_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_source_resolution' + renderTo: 'graph_plays_by_source_resolution' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_source_resolution_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_stream_resolution.js b/data/interfaces/default/js/graphs/plays_by_stream_resolution.js index 7ae7f84d..57b40c9d 100644 --- a/data/interfaces/default/js/graphs/plays_by_stream_resolution.js +++ b/data/interfaces/default/js/graphs/plays_by_stream_resolution.js @@ -2,17 +2,11 @@ var hc_plays_by_stream_resolution_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_stream_resolution' + renderTo: 'graph_plays_by_stream_resolution' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_stream_resolution_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_stream_type.js b/data/interfaces/default/js/graphs/plays_by_stream_type.js index b4c580f2..4776e374 100644 --- a/data/interfaces/default/js/graphs/plays_by_stream_type.js +++ b/data/interfaces/default/js/graphs/plays_by_stream_type.js @@ -2,7 +2,7 @@ var hc_plays_by_stream_type_options = { chart: { type: 'line', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_stream_type' + renderTo: 'graph_plays_by_stream_type' }, title: { text: '' @@ -32,6 +32,11 @@ var hc_plays_by_stream_type_options = { selectHandler(this.category, this.series.name); } } + }, + events: { + legendItemClick: function() { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } } } }, diff --git a/data/interfaces/default/js/graphs/plays_by_user.js b/data/interfaces/default/js/graphs/plays_by_user.js index 8700b445..2923f564 100644 --- a/data/interfaces/default/js/graphs/plays_by_user.js +++ b/data/interfaces/default/js/graphs/plays_by_user.js @@ -2,17 +2,11 @@ var hc_plays_by_user_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_user' + renderTo: 'graph_plays_by_user' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_user_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/graphs/plays_by_user_by_stream_type.js b/data/interfaces/default/js/graphs/plays_by_user_by_stream_type.js index 00007afa..f408826f 100644 --- a/data/interfaces/default/js/graphs/plays_by_user_by_stream_type.js +++ b/data/interfaces/default/js/graphs/plays_by_user_by_stream_type.js @@ -2,17 +2,11 @@ var hc_plays_by_user_by_stream_type_options = { chart: { type: 'column', backgroundColor: 'rgba(0,0,0,0)', - renderTo: 'chart_div_plays_by_user_by_stream_type' + renderTo: 'graph_plays_by_user_by_stream_type' }, title: { text: '' }, - plotOptions: { - column: { - pointPadding: 0.2, - borderWidth: 0 - } - }, legend: { enabled: true, itemStyle: { @@ -56,14 +50,22 @@ var hc_plays_by_user_by_stream_type_options = { }, plotOptions: { column: { + pointPadding: 0.2, + borderWidth: 0, stacking: 'normal', - borderWidth: '0', dataLabels: { enabled: false, style: { color: '#000' } } + }, + series: { + events: { + legendItemClick: function () { + setGraphVisibility(this.chart.renderTo.id, this.chart.series, this.name); + } + } } }, tooltip: { diff --git a/data/interfaces/default/js/script.js b/data/interfaces/default/js/script.js index 693dc01f..d444dbd1 100644 --- a/data/interfaces/default/js/script.js +++ b/data/interfaces/default/js/script.js @@ -517,8 +517,15 @@ function PopupCenter(url, title, w, h) { return newWindow; } -if (!localStorage.getItem('Tautulli_ClientId')) { - localStorage.setItem('Tautulli_ClientId', uuidv4()); +function setLocalStorage(key, value) { + localStorage.setItem(key, value); +} +function getLocalStorage(key) { + return localStorage.getItem(key); +} + +if (!getLocalStorage('Tautulli_ClientId')) { + setLocalStorage('Tautulli_ClientId', uuidv4()); } function uuidv4() {