coreui 소스를 ts 로 전환

2025-12-30 19:15:56 +09:00
parent a99165e4d7
commit 7fb0cf6fba
35 changed files with 113 additions and 40 deletions
--- a/src/views/dashboard/MainChart.tsx
+++ b/src/views/dashboard/MainChart.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useRef } from 'react'
+
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const MainChart = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    const handleColorSchemeChange = () => {
+      if (chartRef.current) {
+        setTimeout(() => {
+          chartRef.current.options.scales.x.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.options.scales.y.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.update()
+        })
+      }
+    }
+
+    document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange)
+    return () =>
+      document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange)
+  }, [chartRef])
+
+  const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min
+
+  return (
+    <>
+      <CChartLine
+        ref={chartRef}
+        style={{ height: '300px', marginTop: '40px' }}
+        data={{
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+              borderColor: getStyle('--cui-info'),
+              pointHoverBackgroundColor: getStyle('--cui-info'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
+              fill: true,
+            },
+            {
+              label: 'My Second dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-success'),
+              pointHoverBackgroundColor: getStyle('--cui-success'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
+            },
+            {
+              label: 'My Third dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-danger'),
+              pointHoverBackgroundColor: getStyle('--cui-danger'),
+              borderWidth: 1,
+              borderDash: [8, 5],
+              data: [65, 65, 65, 65, 65, 65, 65],
+            },
+          ],
+        }}
+        options={{
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            },
+          },
+          scales: {
+            x: {
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+                drawOnChartArea: false,
+              },
+              ticks: {
+                color: getStyle('--cui-body-color'),
+              },
+            },
+            y: {
+              beginAtZero: true,
+              border: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              max: 250,
+              ticks: {
+                color: getStyle('--cui-body-color'),
+                maxTicksLimit: 5,
+                stepSize: Math.ceil(250 / 5),
+              },
+            },
+          },
+          elements: {
+            line: {
+              tension: 0.4,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+              hoverBorderWidth: 3,
+            },
+          },
+        }}
+      />
+    </>
+  )
+}
+
+export default MainChart