const ModelEfficiencyChart = ({ data }) => { const sortedData = [...data].sort((a, b) => a.cost_per_token - b.cost_per_token); const mostEfficientModel = sortedData[0]?.model; return ( value.toExponential(2)} style={{ fontSize: 12 }} label={{ value: 'Cost Per Token', angle: -90, position: 'insideLeft', style: { textAnchor: 'middle', fill: FOREGROUND_COLOR } }} /> value.toLocaleString()} style={{ fontSize: 12 }} label={{ value: 'Total Tokens', angle: 90, position: 'insideRight', style: { textAnchor: 'middle', fill: FOREGROUND_COLOR } }} /> `$${value.toLocaleString()}`} style={{ fontSize: 12, display: 'none' }} // Hide this Y-axis as it shares space with right /> { if (name === 'Cost Per Token') return [`${value.toExponential(4)}`, name]; if (name === 'Total Cost') return [`$${value.toLocaleString()}`, name]; if (name === 'Total Tokens') return [`${value.toLocaleString()}`, name]; return value; }} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {sortedData.map((entry, index) => ( ))} ); };