diff --git a/src/components/simulator/Simulator.jsx b/src/components/simulator/Simulator.jsx index d59eabe1..c4887423 100644 --- a/src/components/simulator/Simulator.jsx +++ b/src/components/simulator/Simulator.jsx @@ -39,8 +39,12 @@ export default function Simulator() { // 차트 관련 const [chartData, setChartData] = useState([]) + const data = { + + labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + datasets: [ { label: 'kWh', @@ -49,34 +53,25 @@ export default function Simulator() { return isNaN(num) ? 0 : num }), - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(255, 159, 64, 0.2)', - 'rgba(0, 99, 132, 0.2)', - 'rgba(0, 162, 235, 0.2)', - 'rgba(0, 206, 86, 0.2)', - 'rgba(0, 192, 192, 0.2)', - 'rgba(0, 102, 255, 0.2)', - 'rgba(0, 159, 64, 0.2)', - ], - borderColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(255, 159, 64, 0.2)', - 'rgba(0, 99, 132, 0.2)', - 'rgba(0, 162, 235, 0.2)', - 'rgba(0, 206, 86, 0.2)', - 'rgba(0, 192, 192, 0.2)', - 'rgba(0, 102, 255, 0.2)', - 'rgba(0, 159, 64, 0.2)', - ], + backgroundColor: (context) => { + const chart = context.chart + const { ctx, chartArea } = chart + + if (!chartArea) { + // This case happens on initial chart load + return null + } + + const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top) + gradient.addColorStop(0, '#4FC3F7') // Light blue at bottom + gradient.addColorStop(0.3, '#2FA8E0') // Original blue + gradient.addColorStop(0.7, '#1976D2') // Medium blue + gradient.addColorStop(1, '#0D47A1') // Dark blue at top + + + return gradient + }, + borderColor: '#2FA8E0' , borderWidth: 1, }, ],