d3.select(container).selectAll('*').remove(); const tooltip = d3.select(container) .append('div') .attr('class', 'tooltip-div') .style('position', 'absolute') .style('pointer-events', 'none') .style('background', 'rgba(25,25,35,0.94)') .style('color', '#fff') .style('padding', '8px 12px') .style('border-radius', '6px') .style('font-family', '"Segoe UI", Arial, sans-serif') .style('font-size', '12px') .style('line-height', '1.4') .style('box-shadow', '0 4px 14px rgba(0,0,0,0.3)') .style('opacity', 0) .style('transition', 'opacity 0.15s') .style('z-index', 10); function render() { d3.select(container).selectAll('svg').remove(); const chartData = (data || []).filter(d => d.Dia != null && d.Compra != null && d.Venta != null); const width = container.clientWidth || 600; const height = container.clientHeight || 400; if (chartData.length === 0) { d3.select(container) .append('div') .style('width', width + 'px') .style('height', height + 'px') .style('display', 'flex') .style('align-items', 'center') .style('justify-content', 'center') .style('font-family', '"Segoe UI", Arial, sans-serif') .style('color', '#888') .style('font-size', Math.min(18, Math.max(12, width * 0.025)) + 'px') .text('No data available'); return; } const fontTitle = Math.min(22, Math.max(14, width * 0.028)); const fontAxisLabel = Math.min(14, Math.max(10, width * 0.018)); const fontTick = Math.min(12, Math.max(9, width * 0.014)); const fontLegend = Math.min(13, Math.max(10, width * 0.016)); const fontAnnotation = Math.min(13, Math.max(10, width * 0.016)); const margin = { top: Math.min(60, Math.max(36, height * 0.09)), right: Math.min(130, Math.max(85, width * 0.15)), bottom: Math.min(80, Math.max(50, height * 0.14)), left: Math.min(80, Math.max(50, width * 0.09)) }; const innerWidth = Math.max(10, width - margin.left - margin.right); const innerHeight = Math.max(10, height - margin.top - margin.bottom); const svg = d3.select(container) .append('svg') .attr('width', width) .attr('height', height) .style('font-family', '"Segoe UI", Arial, sans-serif') .style('background', '#ffffff'); // Subtle shadow filter const defs = svg.append('defs'); const filter = defs.append('filter') .attr('id', 'dropshadow') .attr('height', '150%'); filter.append('feDropShadow') .attr('dx', 0) .attr('dy', 2) .attr('stdDeviation', 2.5) .attr('flood-color', '#000000') .attr('flood-opacity', 0.18); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // Background tint for chart area g.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', innerWidth) .attr('height', innerHeight) .attr('fill', '#FAFBFC') .attr('rx', 6); // Title svg.append('text') .attr('x', margin.left) .attr('y', margin.top * 0.55) .attr('font-size', fontTitle) .attr('font-weight', 700) .attr('fill', '#1f2430') .text('Tipo de Cambio: Compra vs Venta'); // Scales const x = d3.scalePoint() .domain(chartData.map(d => d.Dia)) .range([0, innerWidth]) .padding(0.5); const allValues = chartData.flatMap(d => [+d.Compra, +d.Venta]); const yMin = d3.min(allValues); const yMax = d3.max(allValues); const yPad = (yMax - yMin) * 0.15 || 0.01; const y = d3.scaleLinear() .domain([yMin - yPad, yMax + yPad]) .nice() .range([innerHeight, 0]); // Gridlines (horizontal, dashed, light) g.append('g') .attr('class', 'grid') .call( d3.axisLeft(y) .tickSize(-innerWidth) .tickFormat('') .ticks(6) ) .call(gsel => gsel.select('.domain').remove()) .selectAll('line') .attr('stroke', '#F0F0F0') .attr('stroke-dasharray', '3,3'); // X axis - show subset of ticks if too many const maxTicks = Math.max(4, Math.floor(innerWidth / Math.max(50, fontTick * 6))); const tickStep = Math.max(1, Math.ceil(chartData.length / maxTicks)); const xTickValues = chartData .map(d => d.Dia) .filter((d, i) => i % tickStep === 0); const xAxisG = g.append('g') .attr('transform', `translate(0,${innerHeight})`) .call(d3.axisBottom(x).tickValues(xTickValues).tickSizeOuter(0)); xAxisG.select('.domain').attr('stroke', '#ccc'); xAxisG.selectAll('line').attr('stroke', '#ccc').attr('y2', 5); xAxisG.selectAll('text') .attr('font-size', fontTick) .attr('fill', '#555') .attr('transform', 'rotate(-35)') .style('text-anchor', 'end') .attr('dx', '-0.5em') .attr('dy', '0.6em'); const yAxisG = g.append('g') .call(d3.axisLeft(y).ticks(6).tickSizeOuter(0)); yAxisG.select('.domain').attr('stroke', '#ccc'); yAxisG.selectAll('line').attr('stroke', '#ccc').attr('x2', -5); yAxisG.selectAll('text') .attr('font-size', fontTick) .attr('fill', '#555'); // Axis labels svg.append('text') .attr('x', margin.left + innerWidth / 2) .attr('y', height - Math.max(8, margin.bottom * 0.08)) .attr('text-anchor', 'middle') .attr('font-size', fontAxisLabel) .attr('font-weight', 500) .attr('fill', '#333') .text('Dia'); svg.append('text') .attr('transform', 'rotate(-90)') .attr('x', -(margin.top + innerHeight / 2)) .attr('y', Math.max(14, margin.left * 0.28)) .attr('text-anchor', 'middle') .attr('font-size', fontAxisLabel) .attr('font-weight', 500) .attr('fill', '#333') .text('Soles por US$'); // Colors const colorCompra = '#2563eb'; // blue const colorVenta = '#dc2626'; // red // Line generators const lineCompra = d3.line() .x(d => x(d.Dia)) .y(d => y(+d.Compra)) .curve(d3.curveMonotoneX); const lineVenta = d3.line() .x(d => x(d.Dia)) .y(d => y(+d.Venta)) .curve(d3.curveMonotoneX); function drawLine(lineGen, color, data) { const path = g.append('path') .datum(data) .attr('fill', 'none') .attr('stroke', color) .attr('stroke-width', Math.min(3.5, Math.max(1.8, width * 0.003))) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr('filter', 'url(#dropshadow)') .attr('d', lineGen); const totalLength = path.node().getTotalLength(); path .attr('stroke-dasharray', totalLength + ' ' + totalLength) .attr('stroke-dashoffset', totalLength) .transition() .duration(800) .ease(d3.easeLinear) .attr('stroke-dashoffset', 0); return path; } drawLine(lineCompra, colorCompra, chartData); drawLine(lineVenta, colorVenta, chartData); // Dots for hover interaction const dotRadius = Math.min(5, Math.max(2.5, width * 0.004)); function addDots(field, color) { g.selectAll(`.dot-${field}`) .data(chartData) .enter() .append('circle') .attr('class', `dot-${field}`) .attr('cx', d => x(d.Dia)) .attr('cy', d => y(+d[field])) .attr('r', 0) .attr('fill', color) .attr('stroke', '#fff') .attr('stroke-width', 1) .style('cursor', 'pointer') .transition() .delay(600) .duration(300) .attr('r', dotRadius); g.selectAll(`.dot-${field}`) .on('mouseover', function(event, d) { d3.select(this).transition().duration(120).attr('r', dotRadius * 1.8); tooltip.style('opacity', 1) .html(`${d.Dia}
Compra: ${(+d.Compra).toFixed(3)}
Venta: ${(+d.Venta).toFixed(3)}`); }) .on('mousemove', function(event) { const [mx, my] = d3.pointer(event, container); tooltip.style('left', (mx + 14) + 'px') .style('top', (my - 28) + 'px'); }) .on('mouseout', function() { d3.select(this).transition().duration(120).attr('r', dotRadius); tooltip.style('opacity', 0); }); } addDots('Compra', colorCompra); addDots('Venta', colorVenta); // Last value annotations — placed outside the plot area (right margin) // so they never overlap the value lines themselves. const lastPoint = chartData[chartData.length - 1]; const lastX = x(lastPoint.Dia); // Pre-compute desired y positions for both labels and separate them // if they would be too close together. const labelGap = Math.max(fontAnnotation * 1.6, 18); const rawYCompra = y(+lastPoint.Compra); const rawYVenta = y(+lastPoint.Venta); let labelYCompra = rawYCompra; let labelYVenta = rawYVenta; if (Math.abs(rawYCompra - rawYVenta) < labelGap) { const mid = (rawYCompra + rawYVenta) / 2; if (rawYCompra <= rawYVenta) { labelYCompra = mid - labelGap / 2; labelYVenta = mid + labelGap / 2; } else { labelYCompra = mid + labelGap / 2; labelYVenta = mid - labelGap / 2; } } const labelAnchorX = innerWidth + Math.max(8, width * 0.012); function addLastLabel(field, color, rawY, labelCenterY) { const val = +lastPoint[field]; // Marker dot on the line's final point g.append('circle') .attr('cx', lastX) .attr('cy', rawY) .attr('r', dotRadius + 1.5) .attr('fill', color) .attr('stroke', '#fff') .attr('stroke-width', 1.5) .attr('opacity', 0) .transition() .delay(850) .duration(300) .attr('opacity', 1); const labelText = `${val.toFixed(3)}`; const paddingX = 6; const textW = labelText.length * fontAnnotation * 0.62 + paddingX * 2; const boxH = fontAnnotation + 8; const labelX = labelAnchorX; const labelY = labelCenterY - boxH / 2; const labelG = g.append('g').attr('opacity', 0); // Leader line connecting the data point to its label outside the plot labelG.append('path') .attr('d', `M${lastX},${rawY} L${innerWidth - 4},${labelCenterY} L${labelX - 2},${labelCenterY}`) .attr('fill', 'none') .attr('stroke', color) .attr('stroke-width', 1) .attr('stroke-dasharray', '2,2') .attr('opacity', 0.6); labelG.append('rect') .attr('x', labelX) .attr('y', labelY) .attr('width', textW) .attr('height', boxH) .attr('rx', 4) .attr('fill', color) .attr('opacity', 0.92); labelG.append('text') .attr('x', labelX + textW / 2) .attr('y', labelY + boxH / 2) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', '#fff') .attr('font-size', fontAnnotation) .attr('font-weight', 600) .text(labelText); labelG.transition().delay(900).duration(350).attr('opacity', 1); } addLastLabel('Compra', colorCompra, rawYCompra, labelYCompra); addLastLabel('Venta', colorVenta, rawYVenta, labelYVenta); // Legend const legendData = [ { label: 'Compra', color: colorCompra }, { label: 'Venta', color: colorVenta } ]; const legendG = svg.append('g') .attr('transform', `translate(${margin.left + Math.max(6, width * 0.01)}, ${Math.max(6, margin.top * 0.15)})`); legendData.forEach((item, i) => { const row = legendG.append('g') .attr('transform', `translate(${i * (Math.max(90, fontLegend * 8))}, 0)`); row.append('rect') .attr('width', fontLegend) .attr('height', fontLegend) .attr('rx', 3) .attr('fill', item.color); row.append('text') .attr('x', fontLegend + 6) .attr('y', fontLegend / 2) .attr('dominant-baseline', 'middle') .attr('font-size', fontLegend) .attr('fill', '#333') .text(item.label); }); // Vertical hover guideline + overlay for full-chart tooltip const hoverLine = g.append('line') .attr('stroke', '#999') .attr('stroke-dasharray', '2,2') .attr('y1', 0) .attr('y2', innerHeight) .style('opacity', 0); g.append('rect') .attr('width', innerWidth) .attr('height', innerHeight) .attr('fill', 'transparent') .style('cursor', 'crosshair') .on('mousemove', function(event) { const [mx] = d3.pointer(event); const step = x.step(); let idx = Math.round(mx / step); idx = Math.max(0, Math.min(chartData.length - 1, idx)); const d = chartData[idx]; const xp = x(d.Dia); hoverLine.attr('x1', xp).attr('x2', xp).style('opacity', 1); tooltip.style('opacity', 1) .html(`${d.Dia}
Compra: ${(+d.Compra).toFixed(3)}
Venta: ${(+d.Venta).toFixed(3)}`); const [cx, cy] = d3.pointer(event, container); tooltip.style('left', (cx + 14) + 'px').style('top', (cy - 28) + 'px'); }) .on('mouseleave', function() { hoverLine.style('opacity', 0); tooltip.style('opacity', 0); }); } render(); new ResizeObserver(() => render()).observe(container);

TC Último Mes