Skip to content

Commit c553316

Browse files
mrholekmrholek
committed
refactor: add color modes support
1 parent 3504643 commit c553316

File tree

2 files changed

+139
-90
lines changed

2 files changed

+139
-90
lines changed

‎src/views/dashboard/MainChart.js

Lines changed: 115 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,132 @@
1-
import React from 'react'
1+
import React, { useEffect, useRef } from 'react'
2+
23
import { CChartLine } from '@coreui/react-chartjs'
34
import { getStyle } from '@coreui/utils'
45

56
const MainChart = () => {
7+
const chartRef = useRef(null)
8+
9+
useEffect(() => {
10+
document.documentElement.addEventListener('ColorSchemeChange', () => {
11+
if (chartRef.current) {
12+
setTimeout(() => {
13+
chartRef.current.options.scales.x.grid.borderColor = getStyle(
14+
'--cui-border-color-translucent',
15+
)
16+
chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
17+
chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
18+
chartRef.current.options.scales.y.grid.borderColor = getStyle(
19+
'--cui-border-color-translucent',
20+
)
21+
chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
22+
chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
23+
chartRef.current.update()
24+
})
25+
}
26+
})
27+
}, [chartRef])
28+
629
const random = () => Math.round(Math.random() * 100)
730

831
return (
9-
<CChartLine
10-
style={{ height: '300px', marginTop: '40px' }}
11-
data={{
12-
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
13-
datasets: [
14-
{
15-
label: 'My First dataset',
16-
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
17-
borderColor: getStyle('--cui-info'),
18-
pointHoverBackgroundColor: getStyle('--cui-info'),
19-
borderWidth: 2,
20-
data: [
21-
random(50, 200),
22-
random(50, 200),
23-
random(50, 200),
24-
random(50, 200),
25-
random(50, 200),
26-
random(50, 200),
27-
random(50, 200),
28-
],
29-
fill: true,
30-
},
31-
{
32-
label: 'My Second dataset',
33-
backgroundColor: 'transparent',
34-
borderColor: getStyle('--cui-success'),
35-
pointHoverBackgroundColor: getStyle('--cui-success'),
36-
borderWidth: 2,
37-
data: [
38-
random(50, 200),
39-
random(50, 200),
40-
random(50, 200),
41-
random(50, 200),
42-
random(50, 200),
43-
random(50, 200),
44-
random(50, 200),
45-
],
46-
},
47-
{
48-
label: 'My Third dataset',
49-
backgroundColor: 'transparent',
50-
borderColor: getStyle('--cui-danger'),
51-
pointHoverBackgroundColor: getStyle('--cui-danger'),
52-
borderWidth: 1,
53-
borderDash: [8, 5],
54-
data: [65, 65, 65, 65, 65, 65, 65],
55-
},
56-
],
57-
}}
58-
options={{
59-
maintainAspectRatio: false,
60-
plugins: {
61-
legend: {
62-
display: false,
63-
},
64-
},
65-
scales: {
66-
x: {
67-
grid: {
68-
color: getStyle('--cui-border-color-translucent'),
69-
drawOnChartArea: false,
32+
<>
33+
<CChartLine
34+
ref={chartRef}
35+
style={{ height: '300px', marginTop: '40px' }}
36+
data={{
37+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
38+
datasets: [
39+
{
40+
label: 'My First dataset',
41+
backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
42+
borderColor: getStyle('--cui-info'),
43+
pointHoverBackgroundColor: getStyle('--cui-info'),
44+
borderWidth: 2,
45+
data: [
46+
random(50, 200),
47+
random(50, 200),
48+
random(50, 200),
49+
random(50, 200),
50+
random(50, 200),
51+
random(50, 200),
52+
random(50, 200),
53+
],
54+
fill: true,
7055
},
71-
ticks: {
72-
color: getStyle('--cui-body-color'),
56+
{
57+
label: 'My Second dataset',
58+
backgroundColor: 'transparent',
59+
borderColor: getStyle('--cui-success'),
60+
pointHoverBackgroundColor: getStyle('--cui-success'),
61+
borderWidth: 2,
62+
data: [
63+
random(50, 200),
64+
random(50, 200),
65+
random(50, 200),
66+
random(50, 200),
67+
random(50, 200),
68+
random(50, 200),
69+
random(50, 200),
70+
],
7371
},
74-
},
75-
y: {
76-
border: {
77-
color: getStyle('--cui-border-color-translucent'),
78-
},
79-
grid: {
80-
color: getStyle('--cui-border-color-translucent'),
72+
{
73+
label: 'My Third dataset',
74+
backgroundColor: 'transparent',
75+
borderColor: getStyle('--cui-danger'),
76+
pointHoverBackgroundColor: getStyle('--cui-danger'),
77+
borderWidth: 1,
78+
borderDash: [8, 5],
79+
data: [65, 65, 65, 65, 65, 65, 65],
8180
},
82-
ticks: {
83-
beginAtZero: true,
84-
color: getStyle('--cui-body-color'),
85-
max: 250,
86-
maxTicksLimit: 5,
87-
stepSize: Math.ceil(250 / 5),
81+
],
82+
}}
83+
options={{
84+
maintainAspectRatio: false,
85+
plugins: {
86+
legend: {
87+
display: false,
8888
},
8989
},
90-
},
91-
elements: {
92-
line: {
93-
tension: 0.4,
90+
scales: {
91+
x: {
92+
grid: {
93+
color: getStyle('--cui-border-color-translucent'),
94+
drawOnChartArea: false,
95+
},
96+
ticks: {
97+
color: getStyle('--cui-body-color'),
98+
},
99+
},
100+
y: {
101+
border: {
102+
color: getStyle('--cui-border-color-translucent'),
103+
},
104+
grid: {
105+
color: getStyle('--cui-border-color-translucent'),
106+
},
107+
ticks: {
108+
beginAtZero: true,
109+
color: getStyle('--cui-body-color'),
110+
max: 250,
111+
maxTicksLimit: 5,
112+
stepSize: Math.ceil(250 / 5),
113+
},
114+
},
94115
},
95-
point: {
96-
radius: 0,
97-
hitRadius: 10,
98-
hoverRadius: 4,
99-
hoverBorderWidth: 3,
116+
elements: {
117+
line: {
118+
tension: 0.4,
119+
},
120+
point: {
121+
radius: 0,
122+
hitRadius: 10,
123+
hoverRadius: 4,
124+
hoverBorderWidth: 3,
125+
},
100126
},
101-
},
102-
}}
103-
/>
127+
}}
128+
/>
129+
</>
104130
)
105131
}
106132

‎src/views/widgets/WidgetsDropdown.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useEffect, useRef } from 'react'
22
import {
33
CRow,
44
CCol,
@@ -14,6 +14,27 @@ import CIcon from '@coreui/icons-react'
1414
import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
1515

1616
const WidgetsDropdown = () => {
17+
const widgetChartRef1 = useRef(null)
18+
const widgetChartRef2 = useRef(null)
19+
20+
useEffect(() => {
21+
document.documentElement.addEventListener('ColorSchemeChange', () => {
22+
if (widgetChartRef1.current) {
23+
setTimeout(() => {
24+
widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
25+
widgetChartRef1.current.update()
26+
})
27+
}
28+
29+
if (widgetChartRef2.current) {
30+
setTimeout(() => {
31+
widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
32+
widgetChartRef2.current.update()
33+
})
34+
}
35+
})
36+
}, [widgetChartRef1, widgetChartRef2])
37+
1738
return (
1839
<CRow>
1940
<CCol sm={6} lg={3}>
@@ -44,6 +65,7 @@ const WidgetsDropdown = () => {
4465
}
4566
chart={
4667
<CChartLine
68+
ref={widgetChartRef1}
4769
className="mt-3 mx-3"
4870
style={{ height: '70px' }}
4971
data={{
@@ -131,6 +153,7 @@ const WidgetsDropdown = () => {
131153
}
132154
chart={
133155
<CChartLine
156+
ref={widgetChartRef2}
134157
className="mt-3 mx-3"
135158
style={{ height: '70px' }}
136159
data={{

0 commit comments

Comments
 (0)