From d8ddc2c98141cce9524269b5147d93671b78cb29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milo=C5=A1=20Popovi=C4=87?= Date: Mon, 15 Apr 2024 13:01:59 +0200 Subject: [PATCH] Fixes Google Image Line Chart (#3974) * Replaced googleapis chart with quickchart.io * Updated to quickchart * Fixed nochart publication count * Replaced ImageSparkline with LineChart --- .../webapp/js/individual/individualUtils.js | 2 +- .../visualization-helper-functions.js | 50 ------------ .../individual/individual-qrCodeGenerator.ftl | 4 +- .../coAuthorshipSparklineContent.ftl | 78 +++++++----------- .../copi/coInvestigationSparklineContent.ftl | 76 ++++++------------ .../grant/personGrantSparklineContent.ftl | 76 ++++++------------ .../personPublicationCountNoSparkline.ftl | 12 ++- .../personPublicationSparklineContent.ftl | 80 +++++++------------ 8 files changed, 116 insertions(+), 262 deletions(-) diff --git a/webapp/src/main/webapp/js/individual/individualUtils.js b/webapp/src/main/webapp/js/individual/individualUtils.js index 4f6550dac6..754c7e71f7 100644 --- a/webapp/src/main/webapp/js/individual/individualUtils.js +++ b/webapp/src/main/webapp/js/individual/individualUtils.js @@ -66,7 +66,7 @@ $(document).ready(function(){ spanStr = "" - + "" + ""; diff --git a/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js b/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js index c51f543c4d..6f006d5bf6 100644 --- a/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js +++ b/webapp/src/main/webapp/js/visualization/visualization-helper-functions.js @@ -46,56 +46,6 @@ function extendedEncodeDataForChartURL(arrVals, maxVal) { return chartData; } -/** - * This will be used for getting images directly from the secure https://charts.googleapis.com - * instead of http://charts.apis.google.com which currently throws security warnings. - * - * see http://code.google.com/apis/chart/docs/chart_params.html FOR chart parameters - * see http://code.google.com/apis/chart/docs/data_formats.html FOR how to encode data - * - * sample constructed URL - https://chart.googleapis.com/chart?cht=ls&chs=148x58&chdlp=r&chco=3399CC&chd=e%3AW2ttpJbb..ttgAbbNtAA - */ -function constructVisualizationURLForSparkline(dataString, visualizationOptions) { - - /* - * Since we are directly going to use this URL in img tag, we are supposed to enocde "&" - * update: But since we are directly using it in an Image creating function we dont need to encode it. - */ - //var parameterDifferentiator = "&"; - var parameterDifferentiator = "&"; - - var rootGoogleChartAPI_URL = "https://chart.googleapis.com/chart?"; - - /* - * cht=ls indicates chart of type "line chart sparklines". - * see http://code.google.com/apis/chart/docs/gallery/chart_gall.html - */ - var chartType = "cht=" + visualizationOptions.chartType; - - /* - * It seems google reduces 2px from width & height before rendering the actual image. - * We will do the same. - */ - var chartSize = "chs=" + (visualizationOptions.width - 2) + "x" + (visualizationOptions.height - 2); - - /* - * It means that legend, if present, is to be displayed to the right of the chart, - * legend entries in a vertical column. - */ - var chartLabelPosition = "chdlp=" + visualizationOptions.chartLabel; - - /* - * Color of the sparkline. - */ - var chartColor = "chco=" + visualizationOptions.color; - - return rootGoogleChartAPI_URL + chartType + parameterDifferentiator - + chartSize + parameterDifferentiator - + chartLabelPosition + parameterDifferentiator - + chartColor + parameterDifferentiator - + "chd=" + dataString -} - /* * In IE trim() is not supported. * */ diff --git a/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl b/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl index 54c1162dd7..b0780ef033 100644 --- a/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl +++ b/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-qrCodeGenerator.ftl @@ -85,7 +85,7 @@ <#local vCard = (removeBlankLines(vCard))?url> - <#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&chs=${qrCodeWidth}x${qrCodeWidth}&chl=${vCard}&choe=UTF-8" > + <#local qrCodeUrl = "https://quickchart.io/chart?cht=qr&chs=${qrCodeWidth}x${qrCodeWidth}&chl=${vCard}&choe=UTF-8" > <#return qrCodeUrl> @@ -103,7 +103,7 @@ <#if externalUrl != ""> <#local fullExternalUrl = externalUrl + individual.profileUrl> <#local qrCodeContent = fullExternalUrl?url> - <#local qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&chs=${qrCodeWidth}x${qrCodeWidth}&chl=${qrCodeContent}&choe=UTF-8" > + <#local qrCodeUrl = "https://quickchart.io/chart?cht=qr&chs=${qrCodeWidth}x${qrCodeWidth}&chl=${qrCodeContent}&choe=UTF-8" > <#return qrCodeUrl> diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl index 682a6fac2c..b3562895fa 100644 --- a/webapp/src/main/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl +++ b/webapp/src/main/webapp/templates/freemarker/visualization/coauthorship/coAuthorshipSparklineContent.ftl @@ -39,21 +39,21 @@ var onlyUnknownYearPublications = false; var data = new google.visualization.DataTable(); - data.addColumn('string', 'Year'); + data.addColumn('number', 'Year'); data.addColumn('number', 'Unique co-authors'); data.addRows(${sparklineVO.yearToEntityCountDataTable?size}); var knownYearPublicationCounts = 0; <#list sparklineVO.yearToEntityCountDataTable as yearToUniqueCoauthorsDataElement> - data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoauthorsDataElement.year}'); + data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, ${yearToUniqueCoauthorsDataElement.year}); + data.setFormattedValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoauthorsDataElement.year}'); data.setValue(${yearToUniqueCoauthorsDataElement.yearToEntityCounter}, 1, ${yearToUniqueCoauthorsDataElement.currentEntitiesCount}); knownYearPublicationCounts += ${yearToUniqueCoauthorsDataElement.currentEntitiesCount}; <#-- Create a view of the data containing only the column pertaining to coauthors count. --> var sparklineDataView = new google.visualization.DataView(data); - sparklineDataView.setColumns([1]); <#if sparklineVO.shortVisMode> @@ -81,58 +81,34 @@ } else { - /* - Test if we want to go for the approach when serving visualizations from a secure site.. - If "https:" is not found in location.protocol then we do everything normally. - */ - if (location.protocol.indexOf("https") == -1) { - /* - This condition will make sure that the location protocol (http, https, etc) does not have - for word https in it. - */ - <#-- Create the vis object and draw it in the div pertaining to sparkline. --> - var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]); + var sparkline = new google.visualization.LineChart(providedSparklineImgTD[0]); sparkline.draw(sparklineDataView, { - width: visualizationOptions.width, - height: visualizationOptions.height, - showAxisLines: false, - showValueLabels: false, - labelPosition: 'none' - }); - - } else { - - <#-- Prepare data for generating google chart URL. --> - - <#-- If we need to serve data for https:, we have to create an array of values to be plotted. --> - var chartValuesForEncoding = new Array(); - - $.each(sparklineDataView.getViewRows(), function(index, value) { - chartValuesForEncoding.push(data.getValue(value, 1)); + width: visualizationOptions.width, + height: visualizationOptions.height, + showAxisLines: false, + showValueLabels: false, + labelPosition: 'none', + legend: { position: 'none' }, + chartArea: {'width': '100%', 'height': '100%'}, + colors: ['3399CC'], + hAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + vAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + backgroundColor: { + stroke: '#cfe4ed', + strokeWidth: 2 + }, + tooltip: { + textStyle: {fontSize: 14} + } }); - var chartImageURL = constructVisualizationURLForSparkline( - extendedEncodeDataForChartURL(chartValuesForEncoding, - sparklineDataView.getColumnRange(0).max), - visualizationOptions); - - var imageContainer = $(providedSparklineImgTD[0]); - - imageContainer.image(chartImageURL, - function(){ - imageContainer.empty().append(this); - $(this).addClass("google-visualization-sparkline-image"); - }, - function(){ - // For performing any action on failure to - // find the image. - imageContainer.empty(); - } - ); - - } - } if (${sparklineVO.totalCollaborationshipCount?c}) { diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl index 762c2f9e5a..5fcd564644 100644 --- a/webapp/src/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl +++ b/webapp/src/main/webapp/templates/freemarker/visualization/copi/coInvestigationSparklineContent.ftl @@ -39,21 +39,21 @@ var onlyUnknownYearGrants = false; var data = new google.visualization.DataTable(); - data.addColumn('string', '${i18n().year_capitalized}'); + data.addColumn('number', '${i18n().year_capitalized}'); data.addColumn('number', '${i18n().unique_coinvestigators}'); data.addRows(${sparklineVO.yearToEntityCountDataTable?size}); var knownYearGrantCounts = 0; <#list sparklineVO.yearToEntityCountDataTable as yearToUniqueCoinvestigatorsDataElement> - data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoinvestigatorsDataElement.year}'); + data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, ${yearToUniqueCoinvestigatorsDataElement.year}); + data.setFormattedValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 0, '${yearToUniqueCoinvestigatorsDataElement.year}'); data.setValue(${yearToUniqueCoinvestigatorsDataElement.yearToEntityCounter}, 1, ${yearToUniqueCoinvestigatorsDataElement.currentEntitiesCount}); knownYearGrantCounts += ${yearToUniqueCoinvestigatorsDataElement.currentEntitiesCount}; <#-- Create a view of the data containing only the column pertaining to coinvestigators count. --> var sparklineDataView = new google.visualization.DataView(data); - sparklineDataView.setColumns([1]); <#if sparklineVO.shortVisMode> @@ -80,58 +80,34 @@ } else { - /* - Test if we want to go for the approach when serving visualizations from a secure site.. - If "https:" is not found in location.protocol then we do everything normally. - */ - if (location.protocol.indexOf("https") == -1) { - /* - This condition will make sure that the location protocol (http, https, etc) does not have - for word https in it. - */ - <#-- Create the vis object and draw it in the div pertaining to sparkline. --> var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]); sparkline.draw(sparklineDataView, { - width: visualizationOptions.width, - height: visualizationOptions.height, - showAxisLines: false, - showValueLabels: false, - labelPosition: 'none' - }); - - } else { - - <#-- Prepare data for generating google chart URL. --> - - <#-- If we need to serve data for https:, we have to create an array of values to be plotted. --> - var chartValuesForEncoding = new Array(); - - $.each(sparklineDataView.getViewRows(), function(index, value) { - chartValuesForEncoding.push(data.getValue(value, 1)); + width: visualizationOptions.width, + height: visualizationOptions.height, + showAxisLines: false, + showValueLabels: false, + labelPosition: 'none', + legend: { position: 'none' }, + chartArea: {'width': '100%', 'height': '100%'}, + colors: ['3399CC'], + hAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + vAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + backgroundColor: { + stroke: '#cfe4ed', + strokeWidth: 2 + }, + tooltip: { + textStyle: {fontSize: 14} + } }); - var chartImageURL = constructVisualizationURLForSparkline( - extendedEncodeDataForChartURL(chartValuesForEncoding, - sparklineDataView.getColumnRange(0).max), - visualizationOptions); - - var imageContainer = $(providedSparklineImgTD[0]); - - imageContainer.image(chartImageURL, - function(){ - imageContainer.empty().append(this); - $(this).addClass("google-visualization-sparkline-image"); - }, - function(){ - // For performing any action on failure to - // find the image. - imageContainer.empty(); - } - ); - - } - } if (${sparklineVO.totalCollaborationshipCount?c}) { diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl index 543a68bbce..049adb4526 100644 --- a/webapp/src/main/webapp/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl +++ b/webapp/src/main/webapp/templates/freemarker/visualization/grant/personGrantSparklineContent.ftl @@ -39,21 +39,21 @@ var onlyUnknownYearGrants = false; var data = new google.visualization.DataTable(); - data.addColumn('string', '${i18n().year_capitalized}'); + data.addColumn('number', '${i18n().year_capitalized}'); data.addColumn('number', '${i18n().grants_capitalized}'); data.addRows(${sparklineVO.yearToEntityCountDataTable?size}); var knownYearGrantCounts = 0; <#list sparklineVO.yearToEntityCountDataTable as yearToGrantCountDataElement> - data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, '${yearToGrantCountDataElement.year}'); + data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, ${yearToGrantCountDataElement.year}); + data.setFormattedValue(${yearToGrantCountDataElement.yearToEntityCounter}, 0, '${yearToGrantCountDataElement.year}'); data.setValue(${yearToGrantCountDataElement.yearToEntityCounter}, 1, ${yearToGrantCountDataElement.currentEntitiesCount}); knownYearGrantCounts += ${yearToGrantCountDataElement.currentEntitiesCount}; <#-- Create a view of the data containing only the column pertaining to grant count. --> var sparklineDataView = new google.visualization.DataView(data); - sparklineDataView.setColumns([1]); <#if sparklineVO.shortVisMode> @@ -70,7 +70,6 @@ - /* This means that all the publications have unknown years & we do not need to display the sparkline. @@ -81,59 +80,34 @@ } else { - /* - Test if we want to go for the approach when serving visualizations from a secure site.. - If "https:" is not found in location.protocol then we do everything normally. - */ - if (location.protocol.indexOf("https") == -1) { - /* - This condition will make sure that the location protocol (http, https, etc) does not have - for word https in it. - */ - - <#-- Create the vis object and draw it in the div pertaining to sparkline. --> - var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]); - sparkline.draw(sparklineDataView, { + <#-- Create the vis object and draw it in the div pertaining to sparkline. --> + var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]); + sparkline.draw(sparklineDataView, { width: visualizationOptions.width, height: visualizationOptions.height, showAxisLines: false, showValueLabels: false, - labelPosition: 'none' - }); - - - } else { - - <#-- Prepare data for generating google chart URL. --> - - <#-- If we need to serve data for https:, we have to create an array of values to be plotted. --> - var chartValuesForEncoding = new Array(); - - $.each(sparklineDataView.getViewRows(), function(index, value) { - chartValuesForEncoding.push(data.getValue(value, 1)); + labelPosition: 'none', + legend: { position: 'none' }, + chartArea: {'width': '100%', 'height': '100%'}, + colors: ['3399CC'], + hAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + vAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + backgroundColor: { + stroke: '#cfe4ed', + strokeWidth: 2 + }, + tooltip: { + textStyle: {fontSize: 14} + } }); - var chartImageURL = constructVisualizationURLForSparkline( - extendedEncodeDataForChartURL(chartValuesForEncoding, - sparklineDataView.getColumnRange(0).max), - visualizationOptions); - - var imageContainer = $(providedSparklineImgTD[0]); - - imageContainer.image(chartImageURL, - function(){ - imageContainer.empty().append(this); - $(this).addClass("google-visualization-sparkline-image"); - }, - function(){ - // For performing any action on failure to - // find the image. - imageContainer.empty(); - } - ); - - } - } var totalGrantCount = knownYearGrantCounts + unknownYearGrantCounts; diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationCountNoSparkline.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationCountNoSparkline.ftl index ce1bfc8b58..8a199f6fe6 100644 --- a/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationCountNoSparkline.ftl +++ b/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationCountNoSparkline.ftl @@ -20,21 +20,21 @@ var onlyUnknownYearPublications = false; var data = new google.visualization.DataTable(); - data.addColumn('string', '${i18n().year_capitalized}'); + data.addColumn('number', '${i18n().year_capitalized}'); data.addColumn('number', '${i18n().publications_capitalized}'); data.addRows(${sparklineVO.yearToEntityCountDataTable?size}); var knownYearPublicationCounts = 0; <#list sparklineVO.yearToEntityCountDataTable as yearToPublicationCountDataElement> - data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, '${yearToPublicationCountDataElement.year}'); + data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, ${yearToPublicationCountDataElement.year}); + data.setFormattedValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, '${yearToPublicationCountDataElement.year}'); data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 1, ${yearToPublicationCountDataElement.currentEntitiesCount}); knownYearPublicationCounts += ${yearToPublicationCountDataElement.currentEntitiesCount}; <#-- Create a view of the data containing only the column pertaining to publication count. --> var sparklineDataView = new google.visualization.DataView(data); - sparklineDataView.setColumns([1]); /* This means that all the publications have unknown years & we do not need to display @@ -112,7 +112,11 @@ table.prependTo('#${sparklineContainerID}'); } - drawPubCountVisualization(); + google.charts.load('current', { + callback: function() { + drawPubCountVisualization(); + }, + }); }); diff --git a/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl b/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl index b8c88e6abb..950b81a6fc 100644 --- a/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl +++ b/webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationSparklineContent.ftl @@ -39,22 +39,21 @@ var onlyUnknownYearPublications = false; var data = new google.visualization.DataTable(); - data.addColumn('string', '${i18n().year_capitalized}'); + data.addColumn('number', '${i18n().year_capitalized}'); data.addColumn('number', '${i18n().publications_capitalized}'); data.addRows(${sparklineVO.yearToEntityCountDataTable?size}); var knownYearPublicationCounts = 0; <#list sparklineVO.yearToEntityCountDataTable as yearToPublicationCountDataElement> - data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, '${yearToPublicationCountDataElement.year}'); + data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, ${yearToPublicationCountDataElement.year}); + data.setFormattedValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 0, '${yearToPublicationCountDataElement.year}'); data.setValue(${yearToPublicationCountDataElement.yearToEntityCounter}, 1, ${yearToPublicationCountDataElement.currentEntitiesCount}); knownYearPublicationCounts += ${yearToPublicationCountDataElement.currentEntitiesCount}; <#-- Create a view of the data containing only the column pertaining to publication count. --> var sparklineDataView = new google.visualization.DataView(data); - sparklineDataView.setColumns([1]); - <#if sparklineVO.shortVisMode> @@ -71,7 +70,6 @@ - /* This means that all the publications have unknown years & we do not need to display the sparkline. @@ -82,58 +80,34 @@ } else { - /* - Test if we want to go for the approach when serving visualizations from a secure site.. - If "https:" is not found in location.protocol then we do everything normally. - */ - if (location.protocol.indexOf("https") == -1) { - /* - This condition will make sure that the location protocol (http, https, etc) does not have - for word https in it. - */ - <#-- Create the vis object and draw it in the div pertaining to sparkline. --> - var sparkline = new google.visualization.ImageSparkLine(providedSparklineImgTD[0]); + var sparkline = new google.visualization.LineChart(providedSparklineImgTD[0]); sparkline.draw(sparklineDataView, { - width: visualizationOptions.width, - height: visualizationOptions.height, - showAxisLines: false, - showValueLabels: false, - labelPosition: 'none' - }); - - } else { - - <#-- Prepare data for generating google chart URL. --> - - <#-- If we need to serve data for https:, we have to create an array of values to be plotted. --> - var chartValuesForEncoding = new Array(); - - $.each(sparklineDataView.getViewRows(), function(index, value) { - chartValuesForEncoding.push(data.getValue(value, 1)); + width: visualizationOptions.width, + height: visualizationOptions.height, + showAxisLines: false, + showValueLabels: false, + labelPosition: 'none', + legend: { position: 'none' }, + chartArea: {'width': '100%', 'height': '100%'}, + colors: ['3399CC'], + hAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + vAxis: { + gridlines: {color: 'transparent'}, + baselineColor: 'transparent' + }, + backgroundColor: { + stroke: '#cfe4ed', + strokeWidth: 2 + }, + tooltip: { + textStyle: {fontSize: 14} + } }); - var chartImageURL = constructVisualizationURLForSparkline( - extendedEncodeDataForChartURL(chartValuesForEncoding, - sparklineDataView.getColumnRange(0).max), - visualizationOptions); - - var imageContainer = $(providedSparklineImgTD[0]); - - imageContainer.image(chartImageURL, - function(){ - imageContainer.empty().append(this); - $(this).addClass("google-visualization-sparkline-image"); - }, - function(){ - // For performing any action on failure to - // find the image. - imageContainer.empty(); - } - ); - - } - } var totalPublicationCount = knownYearPublicationCounts + unknownYearPublicationCounts;