diff --git a/src/components/dashboard/stats/ChartLineBuildingAccess.tsx b/src/components/dashboard/stats/ChartLineBuildingAccess.tsx index dcfd2db..603369b 100644 --- a/src/components/dashboard/stats/ChartLineBuildingAccess.tsx +++ b/src/components/dashboard/stats/ChartLineBuildingAccess.tsx @@ -14,6 +14,8 @@ const ChartLineBuildingAccess = () => { document.body.classList.contains('dark-mode') ); + const chartColors = ['#5AC66F', '#235D3A', '#2e7d7a', '#82c7e2', '#0d6728', '#626262']; + useEffect(() => { const observer = new MutationObserver(() => { setIsDarkMode(document.body.classList.contains('dark-mode')); @@ -34,13 +36,10 @@ const ChartLineBuildingAccess = () => { data.forEach(({ date, day, buildingName, total }) => { const dayNum = new Date(date).getDate(); const label = `${dayNum}일 ${day}요일`; - labelSet.add(label); - if (!grouped[buildingName]) { grouped[buildingName] = {}; } - grouped[buildingName][label] = total; }); @@ -70,14 +69,13 @@ const ChartLineBuildingAccess = () => { chart: { type: 'line' }, stroke: { curve: 'straight', width: 2 }, markers: { size: 0 }, + colors: chartColors, dataLabels: { enabled: true, background: { enabled: true, - foreColor: '#fff', - borderRadius: 2, - padding: 4, - opacity: 0.9, + borderRadius: 4, + opacity: 1, dropShadow: { enabled: false }, }, style: { @@ -85,6 +83,12 @@ const ChartLineBuildingAccess = () => { fontWeight: 'bold', colors: ['#fff'], }, + formatter: function (val, opts) { + const seriesIndex = opts.seriesIndex; + const backgroundColor = chartColors[seriesIndex % chartColors.length]; + opts.w.config.dataLabels.background.backgroundColor = backgroundColor; + return val; + }, }, xaxis: { categories: categories, @@ -96,7 +100,6 @@ const ChartLineBuildingAccess = () => { }, }, }, - colors: ['#5AC66F', '#235D3A', '#2e7d7a', '#82c7e2', '#0d6728', '#626262'], title: { text: '건물별 출입 현황', align: 'left', diff --git a/src/components/dashboard/stats/css/ChartLineBuildingAccess.css b/src/components/dashboard/stats/css/ChartLineBuildingAccess.css index 32e0a88..94ea04c 100644 --- a/src/components/dashboard/stats/css/ChartLineBuildingAccess.css +++ b/src/components/dashboard/stats/css/ChartLineBuildingAccess.css @@ -8,3 +8,22 @@ body.dark-mode .chart-line-building-access-card { background: #3a3a3a; } + +.apexcharts-series[data\:realIndex="0"] .apexcharts-datalabel { + background-color: #5AC66F !important; +} +.apexcharts-series[data\:realIndex="1"] .apexcharts-datalabel { + background-color: #235D3A !important; +} +.apexcharts-series[data\:realIndex="2"] .apexcharts-datalabel { + background-color: #2e7d7a !important; +} +.apexcharts-series[data\:realIndex="3"] .apexcharts-datalabel { + background-color: #82c7e2 !important; +} +.apexcharts-series[data\:realIndex="4"] .apexcharts-datalabel { + background-color: #0d6728 !important; +} +.apexcharts-series[data\:realIndex="5"] .apexcharts-datalabel { + background-color: #626262 !important; +}