[Generation Method]
I initiated discussion with Grok, followed until Grok thew error in creating JSON graphic, copy/paste JSON into Claude who plotted the graphic, using similar logic/reasoning as Grok (but was able to find a missing semicolon that initially choked it)
[JSON]
import React, { useState } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const BloombergMetricsDashboard = () => {
const [selectedMetrics, setSelectedMetrics] = useState({
'S&P 500 Index': true,
'Global PMI': true,
'U.S. CPI (%)': true,
'U.S. Unemployment Rate (%)': true,
'VIX Index': true,
'U.S. Dollar Index (DXY)': true,
'WTI Crude Oil Prices ($)': true,
'Corporate Bond Yields (%)': true,
'MSCI World Equity Index': true,
'Mean 55-Inch OLED TV Price ($)': true
});
const data = [
{
year: '2020',
'S&P 500 Index': 3756,
'Global PMI': 49.0,
'U.S. CPI (%)': 1.2,
'U.S. Unemployment Rate (%)': 8.1,
'VIX Index': 22.8,
'U.S. Dollar Index (DXY)': 89.9,
'WTI Crude Oil Prices ($)': 48,
'Corporate Bond Yields (%)': 7.51,
'MSCI World Equity Index': 2500,
'Mean 55-Inch OLED TV Price ($)': 1600
},
{
year: '2021',
'S&P 500 Index': 4766,
'Global PMI': 54.0,
'U.S. CPI (%)': 4.7,
'U.S. Unemployment Rate (%)': 5.4,
'VIX Index': 17.2,
'U.S. Dollar Index (DXY)': 95.9,
'WTI Crude Oil Prices ($)': 75,
'Corporate Bond Yields (%)': -1.54,
'MSCI World Equity Index': 3000,
'Mean 55-Inch OLED TV Price ($)': 1450
},
{
year: '2022',
'S&P 500 Index': 4506,
'Global PMI': 50.0,
'U.S. CPI (%)': 8.0,
'U.S. Unemployment Rate (%)': 3.6,
'VIX Index': 21.0,
'U.S. Dollar Index (DXY)': 103.2,
'WTI Crude Oil Prices ($)': 94,
'Corporate Bond Yields (%)': -13.01,
'MSCI World Equity Index': 2875,
'Mean 55-Inch OLED TV Price ($)': 1350
},
{
year: '2023',
'S&P 500 Index': 4882,
'Global PMI': 49.5,
'U.S. CPI (%)': 4.1,
'U.S. Unemployment Rate (%)': 3.6,
'VIX Index': 14.0,
'U.S. Dollar Index (DXY)': 101.3,
'WTI Crude Oil Prices ($)': 77,
'Corporate Bond Yields (%)': 5.53,
'MSCI World Equity Index': 3125,
'Mean 55-Inch OLED TV Price ($)': 1500
},
{
year: '2024',
'S&P 500 Index': 5256,
'Global PMI': 50.0,
'U.S. CPI (%)': 3.0,
'U.S. Unemployment Rate (%)': 4.1,
'VIX Index': 15.0,
'U.S. Dollar Index (DXY)': 103.0,
'WTI Crude Oil Prices ($)': 80,
'Corporate Bond Yields (%)': 1.25,
'MSCI World Equity Index': 3375,
'Mean 55-Inch OLED TV Price ($)': 1450
},
{
year: '2025',
'S&P 500 Index': 5782,
'Global PMI': 49.7,
'U.S. CPI (%)': 2.7,
'U.S. Unemployment Rate (%)': 4.2,
'VIX Index': 16.0,
'U.S. Dollar Index (DXY)': 98.7,
'WTI Crude Oil Prices ($)': 70,
'Corporate Bond Yields (%)': 3.71,
'MSCI World Equity Index': 3645,
'Mean 55-Inch OLED TV Price ($)': 1800
}
];
const metricColors = {
'S&P 500 Index': '#1f77b4',
'Global PMI': '#2ca02c',
'U.S. CPI (%)': '#d62728',
'U.S. Unemployment Rate (%)': '#9467bd',
'VIX Index': '#8c564b',
'U.S. Dollar Index (DXY)': '#e377c2',
'WTI Crude Oil Prices ($)': '#7f7f7f',
'Corporate Bond Yields (%)': '#bcbd22',
'MSCI World Equity Index': '#17becf',
'Mean 55-Inch OLED TV Price ($)': '#ff9896'
};
const leftAxisMetrics = ['S&P 500 Index', 'U.S. Dollar Index (DXY)', 'WTI Crude Oil Prices ($)', 'MSCI World Equity Index', 'Mean 55-Inch OLED TV Price ($)'];
const rightAxisMetrics = ['Global PMI', 'U.S. CPI (%)', 'U.S. Unemployment Rate (%)', 'VIX Index', 'Corporate Bond Yields (%)'];
const toggleMetric = (metric) => {
setSelectedMetrics(prev => ({
...prev,
[metric]: !prev[metric]
}));
};
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-white p-4 border border-gray-300 rounded shadow-lg">
<p className="font-semibold text-gray-800">{`Year: ${label}`}</p>
{payload.map((entry, index) => (
<p key={index} style={{ color: entry.color }} className="text-sm">
{`${entry.dataKey}: ${entry.value}`}
</p>
))}
</div>
);
}
return null;
};
return (
<div className="w-full h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6">
<div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">
Bloomberg Top 10 Metrics with 55-Inch OLED TV Price Dashboard
</h1>
<div className="bg-white rounded-lg p-6 mb-6 shadow-lg">
<h2 className="text-lg font-semibold mb-4 text-gray-700">Select Metrics to Display:</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<h3 className="text-md font-medium mb-3 text-blue-700">Left Axis (Index Points / $):</h3>
<div className="grid grid-cols-1 gap-2">
{leftAxisMetrics.map((metric) => (
<label key={metric} className="flex items-center space-x-2 cursor-pointer">
<input
type="checkbox"
checked={selectedMetrics[metric]}
onChange={() => toggleMetric(metric)}
className="w-4 h-4"
/>
<span
className="w-4 h-4 rounded"
style={{ backgroundColor: metricColors[metric] }}
></span>
<span className="text-sm font-medium text-gray-600">{metric}</span>
</label>
))}
</div>
</div>
<div>
<h3 className="text-md font-medium mb-3 text-green-700">Right Axis (% / Index Points):</h3>
<div className="grid grid-cols-1 gap-2">
{rightAxisMetrics.map((metric) => (
<label key={metric} className="flex items-center space-x-2 cursor-pointer">
<input
type="checkbox"
checked={selectedMetrics[metric]}
onChange={() => toggleMetric(metric)}
className="w-4 h-4"
/>
<span
className="w-4 h-4 rounded"
style={{ backgroundColor: metricColors[metric] }}
></span>
<span className="text-sm font-medium text-gray-600">{metric}</span>
</label>
))}
</div>
</div>
</div>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg">
<ResponsiveContainer width="100%" height={600}>
<LineChart data={data} margin={{ top: 20, right: 60, left: 60, bottom: 60 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis
dataKey="year"
stroke="#666"
fontSize={12}
/>
<YAxis
yAxisId="left"
orientation="left"
stroke="#1f77b4"
fontSize={12}
domain={[0, 6000]}
label={{ value: 'Index Points / $', angle: -90, position: 'insideLeft' }}
/>
<YAxis
yAxisId="right"
orientation="right"
stroke="#2ca02c"
fontSize={12}
domain={[-15, 60]}
label={{ value: '% / Index Points', angle: 90, position: 'insideRight' }}
/>
<Tooltip content={<CustomTooltip />} />
<Legend
wrapperStyle={{ paddingTop: '20px' }}
iconType="line"
/>
{leftAxisMetrics.map((metric) => (
selectedMetrics[metric] && (
<Line
key={metric}
yAxisId="left"
type="monotone"
dataKey={metric}
stroke={metricColors[metric]}
strokeWidth={2}
dot={{ r: 4, fill: metricColors[metric] }}
activeDot={{ r: 6, fill: metricColors[metric] }}
/>
)
))}
{rightAxisMetrics.map((metric) => (
selectedMetrics[metric] && (
<Line
key={metric}
yAxisId="right"
type="monotone"
dataKey={metric}
stroke={metricColors[metric]}
strokeWidth={2}
dot={{ r: 4, fill: metricColors[metric] }}
activeDot={{ r: 6, fill: metricColors[metric] }}
/>
)
))}
</LineChart>
</ResponsiveContainer>
</div>
<div className="mt-6 bg-white rounded-lg p-6 shadow-lg">
<h2 className="text-lg font-semibold mb-4 text-gray-700">Key Insights (2020-2025):</h2>
<div className="grid md:grid-cols-2 gap-4 text-sm text-gray-600">
<div>
<h3 className="font-semibold text-gray-800 mb-2">Market Performance:</h3>
<ul className="space-y-1">
<li>• S&P 500 shows consistent growth from 3,756 to 5,782</li>
<li>• MSCI World Index recovered strongly after 2022 dip</li>
<li>• VIX volatility declined from pandemic highs</li>
</ul>
</div>
<div>
<h3 className="font-semibold text-gray-800 mb-2">Economic Indicators:</h3>
<ul className="space-y-1">
<li>• CPI peaked at 8% in 2022, moderating to 2.7% by 2025</li>
<li>• Unemployment normalized from pandemic spike</li>
<li>• Dollar strength peaked in 2022-2024 period</li>
</ul>
</div>
<div>
<h3 className="font-semibold text-gray-800 mb-2">Commodities & Tech:</h3>
<ul className="space-y-1">
<li>• Oil prices volatile, ending lower in 2025 at $70</li>
<li>• OLED TV prices declined 2020-2022, rising to $1,800 by 2025</li>
<li>• Corporate bond yields highly volatile with negative periods</li>
</ul>
</div>
<div>
<h3 className="font-semibold text-gray-800 mb-2">Manufacturing:</h3>
<ul className="space-y-1">
<li>• Global PMI hovering around 50 (expansion/contraction line)</li>
<li>• Manufacturing activity remained relatively stable</li>
</ul>
</div>
</div>
</div>
</div>
</div>
);
};
export default BloombergMetricsDashboard;
No comments:
Post a Comment