slices.network / slices
Highly ambitious ATProtocol AppView service and sdks
fork atom

display consistent line visualizations regardless of whether they have one data point or multiple data points

chadtmiller.com 28fa4f76 c9ee9494

+12 -5
unified split
+12 -5
frontend/src/shared/fragments/ActivitySparkline.tsx
··· 32 32 const range = max - min || 1; 33 33 34 34 // Create SVG path points 35 - const points = dataPoints.map((value, index) => { 36 - const x = (index / (dataPoints.length - 1)) * width; 37 - const y = height - ((value - min) / range) * height; 38 - return `${x},${y}`; 39 - }).join(" "); 35 + let points: string; 36 + if (dataPoints.length === 1) { 37 + // For single data point, create a flat line across the width 38 + const y = height - ((dataPoints[0] - min) / range) * height; 39 + points = `0,${y} ${width},${y}`; 40 + } else { 41 + points = dataPoints.map((value, index) => { 42 + const x = (index / (dataPoints.length - 1)) * width; 43 + const y = height - ((value - min) / range) * height; 44 + return `${x},${y}`; 45 + }).join(" "); 46 + } 40 47 41 48 // Create area path for gradient fill 42 49 const areaPath = `M 0,${height} L ${points} L ${width},${height} Z`;