I'll create a chart using shadcn/ui components to display precious metal prices with the controls you requested.

This chart component uses shadcn/ui's chart components 1 to display precious metal prices with all the controls you requested:

1. Period Selection: Buttons for Today, Last Week, Last Month, 3 Month, 6 Month, and Year
2. Currency Selection: Dropdown to choose between USD and EUR
3. Metal Type Selection: Toggle group to select GOLD, SILVER, PLATINUM, or ALL
4. Weight Selection: Dropdown to choose between Grams, Ounces, and Kilograms

The chart uses area charts from Recharts (which shadcn/ui's chart component is built on) to display the price trends over time. The data is currently generated as sample data, but in a real application, you would fetch this from an API.

Key features:

• Responsive design that works on all screen sizes
• Interactive controls that update the chart in real-time
• Tooltip that shows detailed information when hovering over data points
• Gradient fills for better visual appeal
• Proper formatting of dates based on the selected time period
• Currency symbol display based on the selected currency

You can easily extend this component to fetch real data from a metals pricing API instead of using the sample data.

I'll update the chart to handle hourly price data correctly, especially for the "Today" period selection.

I've updated the chart to properly handle the hourly price feeds you mentioned. Here are the key changes:

1. Enhanced Data Generation:

   • The chart now generates hourly data points when "Today" is selected
   • Each hour has its own price point, simulating your hourly data feed
   • Other periods still use daily data points

2. X-Axis Time Formatting:

   • When "Today" is selected, the x-axis displays times in hour:minute format
   • The chart shows regular intervals of hours throughout the day
   • For longer periods, it continues to show appropriate date formats

3. Better Visualization:

   • Added more ticks on the x-axis for hourly data to better represent the hourly progression
   • Updated the title to explicitly show whether you're looking at hourly or daily data

4. All Controls Still Work:

   • Period selection (Today, Last Week, Last Month, etc.)
   • Currency selection (USD, EUR)
   • Metal type selection (GOLD, SILVER, PLATINUM, ALL)
   • Weight selection (Grams, Ounces, Kilograms)

In a real implementation, you would replace the sample data generation with your actual hourly price data from your feeds. The chart is now structured to properly visualize hourly price data, especially for the "Today" view, making it easy to see intraday price movements for the precious metals.