| 1 | 'use client'; |
| 2 | |
| 3 | export default function ChartPanel({title, data, type}) { |
| 4 | const maxVal = Math.max(...data.map(d => d.value)); |
| 5 | return ( |
| 6 | <div className="chart-panel"> |
| 7 | <h3 className="chart-title">{title}</h3> |
| 8 | <div className={'chart chart-' + type}> |
| 9 | {data.map(point => ( |
| 10 | <div key={point.month} className="chart-bar-group"> |
| 11 | <div |
| 12 | className="chart-bar" |
| 13 | style={{height: Math.round((point.value / maxVal) * 100) + '%'}} |
| 14 | /> |
| 15 | <span className="chart-label">{point.month}</span> |
| 16 | <span className="chart-value"> |
| 17 | ${(point.value / 1000).toFixed(0)}k |
| 18 | </span> |
| 19 | </div> |
| 20 | ))} |
| 21 | </div> |
| 22 | </div> |
| 23 | ); |
| 24 | } |