renderIedcSvg = function(data, settings, theme, availableWidth, measureText) { const escape = value => String(value).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); const fmt = value => `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toLocaleString('en-US')}%`; const width = Math.max(1, Math.floor(availableWidth)); const compact = width < settings.layout.stackedBelow; const textColor = theme.colors.gray.dark; const secondary = theme.colors.blue.dark; const gridColor = theme.colors.gray.light; const colors = settings.directionColors; const labelSize = settings.layout.labelSize; const labelLine = settings.layout.labelLineHeight; const measure = measureText || ((text, size) => text.length * size * 0.57); const [minimum, maximum] = settings.domain; if (!(maximum > minimum)) throw new Error('The horizontal domain must increase.'); if (!data.length) throw new Error('The data table is empty.'); const seen = new Set(); for (const d of data) { if (!d.term || seen.has(d.term)) throw new Error('Topic labels must be present and unique.'); seen.add(d.term); if (!(d.direction in colors)) throw new Error(`Unknown direction: ${d.direction}`); if (![d.rate2018, d.rate2026, d.changePercent].every(Number.isFinite)) { throw new Error(`Non-numeric value: ${d.term}`); } if ([d.rate2018, d.rate2026].some(v => v < minimum || v > maximum)) { throw new Error(`Value outside the horizontal domain: ${d.term}`); } } function wrap(text, limit, size, weight = 400) { const words = String(text).split(/\s+/); const lines = []; let line = ''; for (const word of words) { const next = line ? `${line} ${word}` : word; if (line && measure(next, size, weight) > limit) { lines.push(line); line = word; } else line = next; } if (line) lines.push(line); return lines; } function text(x, y, label, attrs = '') { return `${escape(label)}`; } const changeWidth = Math.ceil(Math.max( 68, ...data.map(d => measure(fmt(d.changePercent), labelSize, 600) + 16) )); const labelWidth = Math.min(310, Math.max(250, width * 0.31)); const plotLeft = compact ? 9 : labelWidth + 8; const plotRight = compact ? width - 9 : width - changeWidth - 16; const plotWidth = plotRight - plotLeft; const x = value => plotLeft + (value - minimum) / (maximum - minimum) * plotWidth; const ticks = compact && width < 400 ? [0, 50, 100] : [0, 20, 40, 60, 80, 100]; const rows = []; let cursor = 29; for (let index = 0; index < data.length; index++) { const d = data[index]; const lines = wrap(d.term, compact ? Math.max(40, width - changeWidth - 18) : labelWidth - 16, labelSize); const height = compact ? lines.length * labelLine + settings.layout.stackedRowPadding : Math.max(settings.layout.rowHeight, lines.length * labelLine + 12); const top = cursor; const arrowY = compact ? top + lines.length * labelLine + 15 : top + height / 2; const labelY = compact ? top + labelSize : arrowY - (lines.length - 1) * labelLine / 2 + labelSize * 0.34; rows.push({ ...d, index, top, height, arrowY, labelY, lines, x2018: x(d.rate2018), x2026: x(d.rate2026), labelX: compact ? 0 : 0, changeX: width - 2, changeY: compact ? top + labelSize : arrowY + labelSize * 0.34, changeLabel: fmt(d.changePercent), color: colors[d.direction] }); cursor += height; } const axisY = cursor + 9; const height = axisY + 30; const gridTop = compact ? 26 : 23; const gridBottom = cursor - 3; const svg = []; svg.push(`'); return {markup: svg.join(''), width, height, compact, rows, plotLeft, plotRight, axisY}; }