import CLASS from './class' import { ChartInternal } from './core' import { isValue, isFunction, isArray, isString, sanitise } from './util' ChartInternal.prototype.initTooltip = function() { var $$ = this, config = $$.config, i $$.tooltip = $$.selectChart .style('position', 'relative') .append('div') .attr('class', CLASS.tooltipContainer) .style('position', 'absolute') .style('pointer-events', 'none') .style('display', 'none') // Show tooltip if needed if (config.tooltip_init_show) { if ($$.isTimeSeries() && isString(config.tooltip_init_x)) { config.tooltip_init_x = $$.parseDate(config.tooltip_init_x) for (i = 0; i < $$.data.targets[0].values.length; i++) { if ($$.data.targets[0].values[i].x - config.tooltip_init_x === 0) { break } } config.tooltip_init_x = i } $$.tooltip.html( config.tooltip_contents.call( $$, $$.data.targets.map(function(d) { return $$.addName(d.values[config.tooltip_init_x]) }), $$.axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color ) ) $$.tooltip .style('top', config.tooltip_init_position.top) .style('left', config.tooltip_init_position.left) .style('display', 'block') } } ChartInternal.prototype.getTooltipSortFunction = function() { var $$ = this, config = $$.config if (config.data_groups.length === 0 || config.tooltip_order !== undefined) { // if data are not grouped or if an order is specified // for the tooltip values we sort them by their values var order = config.tooltip_order if (order === undefined) { order = config.data_order } var valueOf = function(obj) { return obj ? obj.value : null } // if data are not grouped, we sort them by their value if (isString(order) && order.toLowerCase() === 'asc') { return function(a, b) { return valueOf(a) - valueOf(b) } } else if (isString(order) && order.toLowerCase() === 'desc') { return function(a, b) { return valueOf(b) - valueOf(a) } } else if (isFunction(order)) { // if the function is from data_order we need // to wrap the returned function in order to format // the sorted value to the expected format var sortFunction = order if (config.tooltip_order === undefined) { sortFunction = function(a, b) { return order( a ? { id: a.id, values: [a] } : null, b ? { id: b.id, values: [b] } : null ) } } return sortFunction } else if (isArray(order)) { return function(a, b) { return order.indexOf(a.id) - order.indexOf(b.id) } } } else { // if data are grouped, we follow the order of grouped targets var ids = $$.orderTargets($$.data.targets).map(function(i) { return i.id }) // if it was either asc or desc we need to invert the order // returned by orderTargets if ($$.isOrderAsc() || $$.isOrderDesc()) { ids = ids.reverse() } return function(a, b) { return ids.indexOf(a.id) - ids.indexOf(b.id) } } } ChartInternal.prototype.getTooltipContent = function( d, defaultTitleFormat, defaultValueFormat, color ) { var $$ = this, config = $$.config, titleFormat = config.tooltip_format_title || defaultTitleFormat, nameFormat = config.tooltip_format_name || function(name) { return name }, text, i, title, value, name, bgcolor var valueFormat = config.tooltip_format_value if (!valueFormat) { valueFormat = $$.isTargetNormalized(d.id) ? (v, ratio) => `${(ratio * 100).toFixed(2)}%` : defaultValueFormat } var tooltipSortFunction = this.getTooltipSortFunction() if (tooltipSortFunction) { d.sort(tooltipSortFunction) } for (i = 0; i < d.length; i++) { if (!(d[i] && (d[i].value || d[i].value === 0))) { continue } if ($$.isStanfordGraphType()) { // Custom tooltip for stanford plots if (!text) { title = $$.getStanfordTooltipTitle(d[i]) text = "
" + title + ' | |
---|---|
" + name + ' | ' text += "" + value + ' | ' text += '