From 7badf5fe1ac256fa17821204b5d162a5c32e2d15 Mon Sep 17 00:00:00 2001 From: Milos Popovic Date: Thu, 11 Apr 2024 22:37:29 +0200 Subject: [PATCH] Replaced ImageSparkline with LineChart --- .../visualization-helper-functions.js | 50 ------------ .../coAuthorshipSparklineContent.ftl | 78 +++++++----------- .../copi/coInvestigationSparklineContent.ftl | 76 ++++++------------ .../grant/personGrantSparklineContent.ftl | 76 ++++++------------ .../personPublicationSparklineContent.ftl | 80 +++++++------------ 5 files changed, 105 insertions(+), 255 deletions(-) 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 e2c29a200a..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://quickchart.io - * 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://quickchart.io/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://quickchart.io/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/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/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;