/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ /* */ /* @file: crChartHelper.js */ /* @author: Austin Billings (austin.billings@clarivate.com) */ /* @since: WoK 5.24 */ /* */ /* This file has convenience functions and style generators for WoK */ /* CitationReport charts, and uses the 'barchart' subset of the */ /* Roxy charting libary (./roxy-barchart.js) */ /* */ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */ var crChartHelper = { colors: { grid: '#444', bars: '#ff7600', background: '#F9F9F9', closeText: 'Close' }, twentyYears: (new Date()).getFullYear() - 20 }; crChartHelper.setCloseText = function (text) { crChartHelper.closeText = text; } crChartHelper.getYear = function (item) { return item.year; }; crChartHelper.getHeadroom = function (data, property, divisor, max) { if (!data) return; property = property || 'count'; divisor = divisor || 20; max = max || _.max(_.pluck(data, property)); return max / divisor; }; crChartHelper.parseData = function (data) { data = data.replace('{', '').replace('}', '').split(','); return _.map(data, function (item) { var parts = item.split('='); return { year: parts[0] * 1, count: parts[1] * 1 } }); }; /* Roxy-specific -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */ crChartHelper.generateChartConfig = function (settings) { if (!jawn.isMap(settings) || !_.has(settings, 'data')) return false; var config = jawn.merge(settings, { width: 320, height: 250, barWidth: 9, tooltip: { getText: function (datum) { return datum.count; } }, commas: false, showLabels: false, color: crChartHelper.colors.bars, gridColor: crChartHelper.colors.grid, innerBackground: crChartHelper.colors.background, x: { metric: 'year', min: crChartHelper.twentyYears, rotateTicks: true, gutter: 20 }, y: { metric: 'count', grid: true, extend: crChartHelper.getHeadroom(settings.data), min: 0, gutter: 30, maxTicks: 25 } }); return config; }; crChartHelper.overlayChart = function (dataSet) { /* Dimeinsions for chart modal overlay */ var modal = { width: $(window).innerWidth() * 0.7, height: $(window).innerHeight() * 0.65, top: $(window).innerHeight() * 0.149, left: $(window).innerWidth() * 0.149 }; /* Outermost container, shadow over page */ $('
', {id: 'chartOverlay'}).css({ display: 'none', backgroundColor: 'rgba(0, 0, 0, 0.85)', zIndex: 10000, position: 'fixed', boxSizing: 'border-box', top: 0, left: 0, width: '100vw', height: '100vh', color: 'white' }).appendTo('body').fadeIn(400); /* White inner container, uses the above dimensions */ $('', {id: 'chartOverlayPopup'}).css({ backgroundColor: '#FFF', padding: '35px', position: 'absolute', borderRadius: '5px', boxSizing: 'border-box', top: modal.top, left: modal.left, height: modal.height, width: modal.width }).appendTo('#chartOverlay'); /* Innermost chart container */ $('', {id: 'chartOverlayContainer'}).css({ boxSizing: 'border-box', float: 'right', marginBottom: '30px' }).html('').appendTo('#chartOverlayPopup'); /* Generate the actual bar chart */ var chart = new Roxy.BarChart(crChartHelper.generateChartConfig({ data: dataSet, container: '#chartOverlayContainer', width: modal.width - 80, height: modal.height - 120, maxTicks: 100, x: { metric: 'year', maxTicks: (modal.width - 80) / 20, min: 0, gutter: 20 }, y: { metric: 'count', gutter: 10, grid: true, min: 0 } })); function hideChartOverlay () { $('#chartOverlay').fadeOut(400, function () { $('#chartOverlay').remove(); }); } /* On shadow click, hide everything */ $('#chartOverlay').click(hideChartOverlay); /* On inner modal click, prevent hiding (since shadow is parent) */ $('#chartOverlayPopup').click(function (e) { e.stopPropagation(); }); /* Generate the localized close button */ $('').css({ cursor: 'pointer', clear: 'both', display: 'block', margin: '0px auto', padding: '5px 30px', position: 'relative', top: '13px', textAlign: 'center' }) .text(crChartHelper.closeText) .appendTo('#chartOverlayPopup') .click(hideChartOverlay); return chart; };